Build a User Flow Diagram in FigJam

Map a user's app journey using standard UX flowchart symbols in FigJam.

Introduction

30 Second Summary

Think about the last time you used an app and got completely lost. Someone designed that confusing path, and a simple diagram could have caught the problem before it was ever built.

In this project, you will build a professional User Flow diagram in FigJam that maps every screen, decision, and action a user takes through an app.

What You'll Build

A color-coded User Flow diagram in FigJam that uses standard flowchart symbols to visualize a user's complete journey through an app, from entry point to final goal.

By the end of this project, you'll have:

A saved project brief from randomprojectgenerator.com that gives you a unique app to design a flow for.
A FigJam board with properly labeled shapes using standard UX flowchart symbols (ovals, rectangles, diamonds, and arrows).
Color-coded paths with directional connectors and a legend explaining each color.
Secret Mission: Add an error recovery path that handles what happens when things go wrong in the user's journey.

Are there any prerequisites?

None. This project includes setup for all required tools. You just need a web browser and a free Figma account, which you will create in Step 1.

Before We Start

Before We Start...

Set Up Figma and Open FigJam

Every design project starts with the right workspace. Before you can map out how a user moves through an app, you need a canvas built for diagramming.

In this step, you'll create a free Figma account and open your first FigJam board. FigJam is Figma's built-in whiteboard tool, purpose-built for diagrams and flowcharts.

In this step, get ready to:

Create a free Figma account.
Create a new FigJam file.
Tour the FigJam interface.

Create your free Figma account

Figma is a browser-based design platform. You don't need to download anything. Your free Starter plan gives you access to FigJam boards where you'll build your user flow diagram.

Open your web browser and go to figma.com/signup.
Enter your email address.
Enter a unique password.
Click Sign up.
Check your email inbox for a verification link from Figma.
Click the verification link to confirm your account.

After verifying, you'll land in the Figma file browser. This is your home base for managing all your design files and FigJam boards.

Already have a Figma account?

If you already have a Figma account, simply sign in at figma.com. You can skip straight to the next substep.

What is the Starter plan?

The Starter plan is Figma's free tier. It includes access to Figma Design, FigJam, Figma Slides, and more. You get up to 3 FigJam files in a team project and unlimited drafts.

For this project, you'll be working in your Drafts folder, so you won't hit any file limits.

Create a new FigJam file

Now that you have an account, you'll create the FigJam board where your user flow diagram will live.

In the file browser, click Drafts in the left sidebar.
Click + Create in the top-right corner.
Select FigJam from the dropdown.

A blank whiteboard canvas opens. This is your infinite workspace where you'll place shapes, connectors, and text.

Click the file name at the top-left of the screen (it will say something like "Untitled").
Type My User Flow Project and press Enter.

Why rename the file now?

Naming your file immediately makes it easy to find later in your Drafts. Figma auto-saves everything, so your work is never lost.

Don't see the + Create button?

Make sure you clicked Drafts in the left sidebar first. The + Create button appears in the top-right corner of the file browser when you're inside a folder.

Help me find the + Create button in Figma's file browser.

Tour the FigJam interface

Before you start building, take a moment to identify the three main regions of FigJam. Knowing where things live will save you time in every step ahead.

Look at the main toolbar (Figma calls this the "delightful toolbar"). It holds four groups: navigation tools, objects (shapes, sticky notes, connectors), tools (text, sections, stamps), and inserts (templates, widgets). This is where you'll find the Shape tool and Connector tool you'll use throughout this project.
Look at the large open area in the center. This is the board (your canvas). It's an infinite whiteboard with a subtle dot grid. You can pan around by holding Space and dragging, and zoom with Ctrl+scroll.
Look at the top of your screen. These are the file panels. On the left, you'll find the file name and pages. On the right, you'll find collaboration tools like the Share button.

What tools are in the toolbar?

The toolbar contains everything you need for this project. The Shape tool lets you place flowchart symbols. The Connector tool draws arrows between shapes. The Text tool adds labels.

You'll also see options for sticky notes, stamps, and a plus icon for inserting templates and widgets. You won't need those for this project.

Your workspace is ready. Next up, you'll learn about UI vs UX, generate your unique project brief, and plan the user flow you're about to build.

Learn UI vs UX, User Flows, and Get Your Brief

Your FigJam board is open and ready to go. Before you start placing shapes and drawing connectors, you need to understand what you're building and why it matters.

In this step, you'll learn the core concepts behind user flow diagrams, generate a unique project brief that makes your diagram one-of-a-kind, and plan out the steps your user will take.

In this step, get ready to:

Learn the 5 standard user flow symbols used in UX design.
Generate a unique project brief from randomprojectgenerator.com.
Plan the user steps for your flow diagram.

Learn the difference between UI and UX

Before you can map out a user's journey, you need to understand two foundational design concepts.

What is UI vs UX?

UI (User Interface) is what the product looks like. The buttons, colors, fonts, and layout.

UX (User Experience) is how the product feels to use. Is it intuitive? Frustrating? Efficient?

Think of a door handle. The shape and color of the handle is UI. Whether you instinctively know to push or pull is UX.

A User Flow is a UX tool. It's a diagram that maps the path a user takes through an app or website, from entry point to final goal.

What is a user flow?

A user flow shows every screen the user sees, every decision they make, and every action they take. It helps designers spot confusing paths or dead ends before any code is written.

You'll build one of these diagrams in FigJam using standard flowchart symbols that any designer or developer can read.

There are 5 standard symbols used in user flow diagrams.

Oval: marks the Start and End points of the flow.
Rectangle: represents a screen or page the user sees. This is the most common shape you'll use.
Diamond: represents a decision point where the flow branches. Always framed as a Yes/No question.
Parallelogram: represents an input or output, where the user enters data or the system displays something.
Arrow: shows the direction of flow, connecting all other shapes together.

Symbols are universal

These 5 symbols are the same across the entire design industry. Learning them here means you can read any user flow diagram you encounter in the future.

Generate your project brief

Every user flow starts with a brief that describes the app or website you're mapping. You'll generate a unique brief from a random project generator so your diagram is completely your own.

Open a new browser tab and go to www.randomprojectgenerator.com.
On the homepage, click UX / UI from the list of project types.
In the Enter a name field, type your last name, a friend's name, or a pet's name.
In the Enter your current location field, type your home town, state, or country.
Click GENERATE MY PROJECT.

The site generates a project brief describing a fictional app or website.

Save the brief to your computer. You can take a screenshot, copy the text into a notes app, or print the page.

Why a random brief?

Working from a brief mirrors how real designers operate. You rarely get to choose your own project in a professional setting. Practising with a random brief builds the skill of interpreting requirements and translating them into a user journey.

Plan your user flow on paper

Before touching FigJam, you need a rough plan of the user's journey. Planning on paper (or in a notes app) helps you think through the logic without getting distracted by styling.

Open a notes app or grab a piece of paper.
Read through your saved brief carefully.
Answer these five questions based on your brief:

What is the user's goal? (What are they trying to accomplish?)
Where do they enter the app? (A homepage, a login screen, a landing page?)
What screens will they pass through?
Where do they make decisions? (These become your diamond shapes.)
What is the final action or endpoint? (This becomes your ending oval.)

Write a rough list of 6-10 steps the user takes from start to finish. Keep each step to one short sentence.

What does a good plan look like?

Your plan does not need to be polished. A simple numbered list like "1. User lands on homepage, 2. User clicks Sign Up, 3. User fills in form..." is enough.

Aim for 6-10 steps. Fewer than 6 and your flow will feel too simple to learn from. More than 10 and it will get unwieldy for your first diagram.

Not sure how to break down your brief?

Focus on what the user does, not what the system does behind the scenes. Each step should be something the user actively sees or interacts with.

help me break down my project brief into user flow steps

You now have the concepts, the brief, and the plan. Next up, you'll learn how to place and label the actual shapes in FigJam to bring your plan to life.

Practice FigJam Shapes and Typography

In the last step, you learned the difference between UI and UX, generated your project brief, and planned out your user flow. Now it's time to get hands-on with FigJam's shape and text tools.

Before building your real diagram, you need to get comfortable placing and labeling shapes. This step is your sandbox for experimenting with FigJam's flowchart toolkit without worrying about getting everything perfect.

In this step, get ready to:

Place flowchart shapes (oval, rectangle, diamond, parallelogram) from FigJam's shape library.
Add text labels inside shapes by double-clicking.
Practice resizing, duplicating, and organizing shapes on the canvas.

Place your first shapes

FigJam has a dedicated Flowchart shape category with purpose-built shapes for diagrams. You will place one of each core flowchart shape to get familiar with the placement workflow.

In your FigJam toolbar at the top of the canvas, click the Shape tool.
At the top of the shape menu, click to toggle to the Flowchart category.
Select an oval shape.
Hover the shape preview over your board to pick a spot.
Click to drop the oval onto the canvas.

What are the three shape categories?

FigJam organizes shapes into three categories: Basic, Flowchart, and Misc. The Flowchart category contains the standard symbols used in user flow diagrams, including ovals, diamonds, and parallelograms.

Repeat the same process to place a rectangle, a diamond, and a parallelogram on the canvas.
Space them out so you have room to work with each one.

You should now see four distinct shapes on your canvas: an oval, a rectangle, a diamond, and a parallelogram.

Speed up with keyboard shortcuts

Press R to quickly place a square. Press O to quickly place an ellipse. These shortcuts skip the toolbar entirely and let you drop shapes faster.

Try resizing one of your shapes by dragging its corner handles.
Hold Shift while dragging to keep the shape's proportions even.

Don't see the Flowchart category?

Make sure you clicked the Shape tool first (not the Sticky note tool). The category toggle appears at the top of the shape menu after clicking the Shape tool.

If you only see basic shapes, look for a toggle or tab labeled Flowchart at the top of the menu to switch categories.

Why can't I find the Flowchart shapes in FigJam?

Add text inside shapes

Shapes without labels are meaningless in a user flow. Every shape in your diagram needs a clear, short label that tells the reader what that step represents.

Double-click your oval shape to activate its text field.
Type Start inside the oval.
Click outside the shape to deselect it.
Double-click your rectangle shape.
Type Login Screen inside the rectangle.
Double-click your diamond shape.
Type Has account? inside the diamond.

What makes a good shape label?

Keep labels short and clear. Rectangles should be labeled with screen or page names (like "Login Screen" or "Dashboard"). Diamonds should always be labeled with Yes/No questions (like "Has account?" or "Logged in?").

Ovals mark the start and end of a flow, so they only need simple labels like "Start" or "End."

Select a labeled shape and look at the text options that appear in the toolbar above.
Try adjusting the text size or weight to see how it changes the label's appearance.

Your four shapes should now each have readable text inside them. The oval says "Start," the rectangle says "Login Screen," and the diamond says "Has account?"

Text not appearing inside the shape?

Make sure you double-clicked directly on the shape itself, not on empty canvas space nearby. If you accidentally created a separate text object, delete it and try double-clicking the shape again.

Help me add text labels to my FigJam shapes

Organize your practice shapes

Now that you have labeled shapes, practice the selection and arrangement tools you will rely on when building your real user flow.

Click and drag across multiple shapes to select them all at once.
With multiple shapes selected, drag them together to a new position on the canvas.
Click a single shape to select only that one.
Duplicate it by pressing Ctrl+D.
Try another duplication method: hold Alt and drag the shape to create a copy.
Delete any extra shapes you do not need by selecting them and pressing Delete or Backspace.

Your canvas is your sandbox. Get comfortable placing, moving, duplicating, and deleting shapes before the real build in the next steps.

Why practice on a sandbox first?

Building a user flow involves placing dozens of shapes quickly. Practicing now means you will not be slowed down by toolbar hunting when you are focused on mapping your actual user journey.

Shapes not moving together?

Make sure your selection box fully covers all the shapes you want to move. Partially overlapped shapes may not be included in the selection. Try clicking an empty area first to deselect, then drag a fresh selection box around all target shapes.

Why aren't my FigJam shapes selecting together?

Your shape toolkit is ready. Next up, you will learn how to connect these shapes with arrows and connectors to show the direction of flow.

Practice FigJam Connectors and Arrows

Your shapes are placed and labeled. Right now they're just scattered objects on a canvas. Connectors are what turn those isolated shapes into a readable flow.

In this step, you'll learn how to link shapes together using FigJam's smart connectors. These lines automatically attach to shapes and follow them when you move things around.

In this step, get ready to:

Connect shapes using FigJam's smart connectors.
Customize connectors with arrows, labels, colors, and line styles.
Use Quick Create to rapidly build connected shape chains.

Connect shapes with connectors

FigJam connectors are smart lines that attach to shapes and stay attached when you rearrange your layout. You'll connect the practice shapes from the previous step.

Hover your cursor over the oval labeled Start on your canvas.
Look for the blue connection points that appear on each edge of the shape.
Click one of the blue connection points and drag your cursor to the rectangle labeled Login Screen.
Release your mouse over the target shape. FigJam draws a connector line that attaches to both shapes.
Try moving the rectangle to a different spot on the canvas. The connector follows automatically.

You should see a line stretching between your two shapes that bends and adjusts as you reposition them.

What are the three connector types?

FigJam offers three connector styles: bent (elbow-shaped), curved (smooth arc), and straight (direct line). Each connector can be switched between types after you draw it.

Connect your rectangle to the diamond labeled Has account? using the same drag method.
Select that connector and try switching between bent, curved, and straight styles in the connector toolbar that appears.
Practice the keyboard shortcuts: press X or Shift+L for a bent connector, or press L for a straight connector.
With the shortcut active, click a connection point on one shape and drag to another shape to draw the connector.

Connectors snap to shapes

If a connector doesn't snap to a shape, make sure you're starting and ending your drag on the blue connection points, not on the empty canvas.

Customize your connectors

Plain lines don't tell the reader which direction the flow goes. Arrowheads, labels, and color turn connectors into clear directional indicators.

Select the connector between your oval and rectangle.
In the connector toolbar that appears, find the endpoint style option.
Change the end point to Solid arrow to add a filled arrowhead pointing in the direction of flow.
Repeat this for the connector between the rectangle and diamond.

Both connectors now have visible arrowheads showing the user which direction the flow moves.

What endpoint styles are available?

FigJam offers five endpoint styles: None, Solid arrow, Line arrow, Triangle, and Diamond. Each end of a connector can be styled independently, so you can have an arrow on one end and nothing on the other.

Select the connector between the rectangle and diamond.
Press Enter to activate the text label on the connector.
Type Yes and click away to confirm.
Draw a second connector from the diamond to your parallelogram shape.
Select it, press Enter, and type No.

Your diamond now has two labeled branches, just like a real decision point in a user flow.

Select any connector and change its color using the color option in the toolbar.
Try switching the line style between solid and dashed.
Adjust the stroke weight between thick and thin to see the difference.

Why use different colors and styles?

In a finished user flow, color-coding helps readers distinguish the main "happy path" from alternate or error paths at a glance. You'll use this technique in the next step when you build the full diagram.

Use Quick Create to speed up your flow

Drawing individual connectors between shapes works, but it's slow when you need to build a long chain. Quick Create lets you add a new connected shape in one click.

Click on your Start oval to select it.
Hover over the blue dot at the right edge of the shape.
A quick create icon appears. Click it.
FigJam instantly places a new shape to the right with a connector already attached between them.
Label the new shape Home Screen.

What does Quick Create do?

Quick Create adds a new shape AND a connector in a single action. It saves you from the two-step process of placing a shape, then manually drawing a connector back to the previous shape.

Select the Home Screen shape you just created.
Press Ctrl+Enter to create another new shape to the right with a connector and its text field already active.
Type Profile Page and click away to confirm.
Select Profile Page and use Quick Create (hover the blue dot and click) one more time.
Change the new shape to a diamond using the shape options, and label it Edit profile?.

You now have a connected chain: Start oval, then Home Screen rectangle, then Profile Page rectangle, then Edit profile? diamond. Each shape is linked by a connector that was added automatically.

Select each connector in your chain and add a Solid arrow endpoint so the flow direction is clear.

Quick Create not appearing?

Make sure you have a shape selected first. The blue dot only appears when you hover over the edge of a selected shape. If you're hovering over the canvas background, nothing will appear.

Also make sure you're hovering over the edge dots, not the resize handles at the corners.

Help me find the Quick Create feature in FigJam

You now have all the FigJam skills you need. Shapes, labels, connectors, arrows, and Quick Create are your toolkit. Next up, you'll combine everything to build your full user flow diagram from the brief you saved earlier.

Build and Style Your User Flow Diagram

You now know how to place shapes, add text, and connect everything with smart connectors. It's time to put all of those skills together and build your actual User Flow diagram.

In this step, you'll transform your rough plan into a polished, color-coded diagram that anyone could read and understand. By the end, your FigJam board will contain a professional User Flow ready to share.

In this step, get ready to:

Build your complete user flow with all shapes and connectors.
Color-code paths to visually separate the happy path from alternate routes.
Add a legend and title to make your diagram self-explanatory.

Build your full user flow

Your practice shapes from earlier steps have served their purpose. Now you'll clear space on your canvas and lay out the real diagram based on your written plan.

Select all of your practice shapes on the canvas by pressing Ctrl+A.
Drag them to the far right side of your board, or delete them entirely if you prefer a clean slate.
Open your saved project brief so you can reference it while building.
Place a Start oval at the top-left of your canvas. Press O for an ellipse, resize it, and double-click to type "Start" inside.
Working left-to-right or top-to-bottom, place a rectangle for each screen or page from your plan. Press R for a rectangle, then double-click to label it with the screen name (e.g., "Login Screen", "Dashboard", "Cart Page").
Add a diamond wherever the user makes a decision (e.g., "Logged in?", "Item in cart?"). Click the Shape tool in the toolbar, switch to the Flowchart category, and select the diamond.
Connect every shape with arrows showing the direction of flow. Hover over a shape to see the blue connection points, then click and drag to the next shape.
Select each connector and change its endpoint style to Solid arrow in the connector toolbar.
For every diamond, make sure there are at least two outgoing paths. Select each outgoing connector and press Enter to type a label like "Yes" or "No".
Place a final End oval where the user achieves their goal. Label it "End" or describe the goal (e.g., "Order Confirmed").

Use quick create to speed things up

Select a shape and hover over the blue dot at its edge. Click the quick create icon to instantly place a new connected shape. You can also press Ctrl+Enter to create a new shape to the right with a connector already attached.

What should I see?

Your canvas should now show a connected chain of shapes from a "Start" oval through multiple screens and decision points to an "End" oval. Every shape has a label, every diamond branches into at least two paths, and arrows show the direction of flow.

Connectors not snapping to shapes?

Make sure you're dragging from the blue connection point that appears when you hover over a shape's edge. If you drag from the middle of the canvas, FigJam creates a free-floating line instead of a smart connector.

help me fix my connectors in FigJam

Add colors and visual hierarchy

A user flow with color-coding is far easier to read than a monochrome one. Colors help viewers instantly see which path is the main journey and which paths are alternatives.

Decide on your color scheme. Pick one color for the main "happy path" (the ideal journey where everything goes right) and a second color for alternate paths.
Select all shapes on your happy path by holding Shift and clicking each one.
Change their fill color by clicking the color swatch in the shape toolbar and choosing your happy-path color.
Select the connectors along the happy path. Change their line color to match or complement the shape color.
Repeat for your alternate path shapes and connectors using your second color.
Make your Start and End ovals visually distinct. Give them a different fill color from the rest of your shapes so they stand out as entry and exit points.
Keep rectangle labels in a consistent text size across all shapes. Double-click a shape to select its text, then adjust size in the text options toolbar if needed.

Why color-code paths?

In professional UX work, color-coded paths let stakeholders scan a diagram and immediately understand the primary user journey versus edge cases. It's one of the simplest ways to add clarity without adding complexity.

Add a legend and finalize

A legend makes your diagram self-explanatory. Anyone viewing your board should understand your color choices without asking.

Find an empty corner of your board (bottom-right works well).
Place a small rectangle for each color in your scheme. Fill each rectangle with the corresponding color.
Add a text label next to each colored rectangle explaining what it represents (e.g., "Green = Happy path", "Orange = Alternate path").
Add a title at the top of your diagram. Click the text tool in the toolbar, click above your Start oval, and type the project name from your brief. Make the text larger so it stands out as a heading.

Now review your complete diagram with these questions:

Does every path lead somewhere? Check for dead ends (shapes with no outgoing connector).
Is every shape labeled clearly with a screen name, question, or action?
Is the flow readable left-to-right or top-to-bottom?
Does every diamond have at least two labeled outgoing paths?

Fix any dead ends by adding connectors to the appropriate next shape or to the End oval.
Your file saves automatically in Figma. Look for the cloud icon in the top toolbar area to confirm your work is saved.

What should I see?

Your board should now contain a complete, professional-looking User Flow diagram. It has a title at the top, color-coded shapes connected by directional arrows, labeled decision branches, and a legend in the corner explaining your colors.

Someone who has never read your brief should be able to follow the flow from Start to End and understand what the user experiences at each step.

Diagram feels cluttered or hard to read?

Try adding more space between shapes. Select all shapes and drag them apart, or select a group and nudge them with arrow keys. Connectors will follow automatically since they auto-attach.

If connectors are crossing over each other, try switching some from bent to curved or straight. Select a connector and change its type in the toolbar.

help me make my FigJam user flow diagram more readable

Your User Flow diagram is complete. You've taken a rough plan and turned it into a polished, readable visual that communicates a user's entire journey through an app. Next up, you'll tackle a bonus challenge that makes your flow even more realistic.

Secret mission

Add an Error Recovery Path

Your user flow currently shows the happy path where everything goes right. But in real apps, things go wrong. Users mistype passwords. Payments get declined. Sessions time out. Can you add an error recovery path that shows what happens when things fail?

Clean Up Your Resources

This project runs entirely on Figma's free Starter plan and local files. There are no ongoing costs or paid resources to worry about.

Decide whether to keep your resources as they are, export your work, or delete everything entirely.

Resources you used:

FigJam file My User Flow Project stored in your Figma Drafts.
Figma account on the free Starter plan.
Project brief saved locally from randomprojectgenerator.com.
User flow plan (local notes or document).

Keep everything running

No action needed. Choose this if you want to revisit or expand your user flow later.

Your FigJam file stays in your Figma Drafts indefinitely on the free Starter plan.
Your Figma account remains active at no cost.
Your local project brief and user flow plan stay wherever you saved them.

Pause - I'll come back to this later

Everything is cloud-hosted and free. There are no running processes to shut down.

Your FigJam file is safely stored in Figma's cloud. You can return to it anytime by signing back in.
You can export your diagram as a backup. Select all elements on your board, right-click, and choose an export option (PNG or PDF).
You can share your file with others using the Share button in the top-right corner of FigJam.

Delete - I don't want to use this again

Remove all project resources and start fresh.

Delete your FigJam file: go to the Figma file browser, find My User Flow Project in your Drafts, right-click it, and select Delete.
Delete your local project brief and user flow plan files from wherever you saved them (Downloads folder, Desktop, or notes app).
Delete your Figma account (optional): click your name in the top-left of the file browser to open the account menu, select Settings, go to the Account tab, scroll to the bottom, and click Delete account. Follow the on-screen prompts. This is permanent and cannot be undone.

Nice Work!

You just designed a professional User Flow diagram from scratch using FigJam. You took a randomly generated project brief, mapped out the full user journey, and brought it to life with proper flowchart symbols, color-coded paths, and smart connectors.

You've learned how to:

Explain the difference between UI (what a product looks like) and UX (how it feels to use), and use the 5 standard flowchart symbols to map a user's journey.
Use FigJam's core tools to place and label shapes, connect them with smart connectors and arrows, and style paths with colors and legends.
Build a complete, color-coded User Flow diagram based on a unique project brief, readable by anyone without additional context.
Secret Mission: Added an error/failure recovery path demonstrating real-world UX thinking about edge cases.

Ready to quiz yourself?