How to Use FigJam for Wireframing: Simple Steps

Use FigJam by creating a new board, then use shapes, sticky notes, and connectors to sketch wireframes visually. You can drag and drop UI elements, add comments, and collaborate in real-time to build simple wireframes quickly.

Syntax

FigJam does not use code syntax but relies on interactive tools and UI elements for wireframing:

• Shapes: Use rectangles, circles, and lines to create wireframe blocks.
• Sticky Notes: Add notes or labels to explain parts of your wireframe.
• Connectors: Draw arrows or lines to show flow or relationships.
• UI Components: Drag pre-built UI elements from the FigJam library.
• Comments: Collaborate by adding comments and feedback.

Each tool is selected from the toolbar and placed on the board by clicking or dragging.

figma

No code syntax; use FigJam UI tools interactively.

Example

This example shows how to create a simple login screen wireframe in FigJam:

1. Create a new FigJam board.
2. Use the rectangle shape to draw the login form box.
3. Add two text boxes labeled "Username" and "Password".
4. Place input field shapes below each label.
5. Add a button shape labeled "Login".
6. Use sticky notes to add instructions or comments.

text

1. Open FigJam and create a new board.
2. Select the rectangle tool and draw a box in the center.
3. Use the text tool to add "Username" above the box.
4. Draw a smaller rectangle below "Username" for the input field.
5. Repeat steps 3-4 for "Password".
6. Draw a button shape below inputs and label it "Login".
7. Add sticky notes with instructions or feedback.
8. Connect elements with arrows if needed.

Output

A simple wireframe of a login form with labeled fields and a login button on the FigJam board.

Common Pitfalls

Beginners often make these mistakes when wireframing in FigJam:

• Overcomplicating shapes: Use simple shapes to keep wireframes clear.
• Ignoring collaboration: FigJam shines with teamwork; invite others early.
• Not using connectors: Arrows help show flow and relationships clearly.
• Skipping comments: Use sticky notes or comments to explain design choices.
• Cluttering the board: Keep wireframes organized and spaced out for readability.

text

Wrong way:
- Drawing many detailed icons instead of simple shapes.
- Not labeling elements.

Right way:
- Use rectangles and text labels.
- Add arrows to show navigation flow.

Quick Reference

Tool	Purpose	How to Use
Rectangle	Create boxes for UI elements	Select shape tool, drag on board
Text	Add labels and instructions	Click text tool, type on board
Sticky Notes	Add comments or feedback	Select sticky note, place and type
Connector	Show flow or relationships	Select connector tool, drag between elements
UI Components	Use pre-built UI parts	Drag from FigJam library onto board

Key Takeaways

Use simple shapes and text to create clear wireframes in FigJam.

Leverage sticky notes and comments to explain your design.

Connect elements with arrows to show flow and relationships.

Collaborate with your team in real-time for better feedback.

Keep your wireframe organized and avoid clutter.