Module 2, Lesson 7: User Flow in Figma

In this lesson, we're taking everything we've generated so far — the technical doc, the UX/UI overview, the stakeholder summary, the GTM — and turning it into something visual: a user flow diagram, built directly inside Figma using Claude and MCP.

Before We Start

From previous lessons:

• You should have all four documents ready: Technical Overview, UX/UI Overview, Stakeholder Summary, GTM Overview
• We've been building inside Claude's co-work feature — we'll continue working from there in this lesson

Tools / setup you'll need:

• Claude desktop app (not the browser — this matters, I'll explain why)
• A Figma account — free tier is fine, just go to figma.com and sign up
• Be logged into both Figma and Claude in your browser before you start
• The Figma connector installed in Claude (I'll walk through this)

By the end of this lesson, you'll:

• Understand what MCP is and why it matters for the way we work
• Know how to connect Figma to Claude using the connector (MCP integration)
• Have a complete user flow diagram in Figma, generated from your product documents
• Be able to interpret and iterate on that diagram before we move into the spec phase

About This Lesson

Duration: ~6 minutes video + ~20 minutes setup and generation
Skill Level: Beginner
What You'll Build: A complete user flow diagram in Figma (FigJam), covering your app from first entry point to core user actions and edge cases

This lesson is a bridge. We've been in research and documentation mode — heads down, generating documents. Now we're going visual. The user flow diagram is how you take all those words and start to see how your product actually works — how someone moves through it, what decisions they hit, where things can go wrong. It's one of those things that looks simple on the surface but does a lot of heavy lifting when you get into the build phase.

Watch the Lesson

What We're Covering

Here's what I'm walking through in this lesson and why it matters:

• What a user flow diagram actually is — not just theory, but what it's doing for you as someone building a product
• Installing the Figma connector (MCP) — how to connect Claude to Figma so it can draw in there on your behalf
• Running the prompt — feeding your four documents into Claude and letting it generate the full flow
• Reading and iterating the diagram — what to look for, and how to keep prompting if something's missing

1. Let's Set the Scene (~0:00)

Before we jump into the next module, I want to make our user journey tangible — and introduce you properly to MCP, because we're going to be using it constantly from here on out.

Up to now, everything we've built has been text — documents living in Obsidian. That's great, but at some point you need to see the full picture. You need to see how a user actually moves through your app, from the moment they discover it to the moment they complete their first core action. That's what a user flow diagram gives you.

The tool professionals use for this is Figma. You don't need to know Figma — you genuinely don't. You just need an account and a browser. Claude is going to do the drawing. That's the whole point.

2. The Core Ideas

2.1 What Is a User Flow Diagram?

A user flow diagram is a visual map of how someone moves through your application. It shows every step, every decision point, and every possible outcome — the happy path and the edge cases.

Think about it like this: your PRD says what your app does. Your user flow shows how someone actually experiences it. It's the difference between reading a description of a building and having a floor plan in your hands.

For my app, the flow starts with how someone finds it (the App Store, in my case), then traces through downloading, onboarding, entering their details, inviting other users — all the way to the first time they actually get value from the product. And it covers the edge cases too, like: what happens if they don't complete onboarding? What if they skip the invite step? Those branches matter, and you want to see them before you start writing code.

2.2 What Is MCP?

MCP stands for Model Context Protocol. Here's how I think about it: connectors are like mini apps you can install inside Claude Desktop. Each connector gives Claude the ability to control a different external application — directly, from inside Claude, without you having to manually switch between tools.

The Figma connector is one of those. Once it's connected, Claude can open Figma, create a file, draw shapes, add labels, and build out a full diagram — all because you told it to in a prompt. You're not clicking around in Figma yourself. Claude is.

2.3 How This Connects to What We've Been Building

Everything we've produced in Module 2 feeds into this lesson. The prompt I'm using asks Claude to review the Technical Overview, the UX/UI Overview, the Stakeholder Summary, and the GTM document — all four of them together — before drawing a single thing. That's intentional. The diagram should reflect the research, not just whatever Claude imagines your app might do. Grounding it in those documents is what makes it useful.

3. Let Me Show You How It Works

3.1 Step 1 — Set Up Your Figma Account

If you don't have one already, go to figma.com and create a free account. That's it. You don't need a paid plan for this.

Once you're in, just leave Figma open in your browser and make sure you're logged in. You don't need to create any files manually — Claude will handle that through the connector.

3.2 Step 2 — Install the Figma Connector in Claude

Open the Claude desktop app. In the sidebar, go to Settings, then look for Connectors. You'll see a "Browse connectors" option — click that, and search for Figma.

Click on the Figma connector and hit Connect. It'll redirect you to Figma to authenticate — just follow the flow, approve the connection, and you'll be brought back into Claude. Once you're back, the connector is live and Claude can talk to your Figma account.

3.3 Step 3 — Run the Prompt in Co-Work

Go back into your co-work session in Claude — the same one where you've been generating documents. Paste in this prompt (it's also in the prompt library linked below):

Review the following documents: 
- Technical Overview
- UX/UI Overview
- Stakeholder Summary
- Sales & Marketing / GTM Overview

Using these as the foundation, I need you to create a comprehensive user flow diagram in Figma that maps:
1. User entry points (how users arrive)
2. Core user actions (the main jobs-to-be-done)
3. Decision points (where users make choices)
4. System responses (what happens after each action)
5. Error/edge cases (what can go wrong)
6. Success states (task completion points)

Use this color scheme for the flow:
- 🟦 Blue: User actions
- 🟩 Green: System processes  
- 🟨 Yellow: Decision points
- 🟥 Red: Error states
- ⬜ White: Start/End points

Before creating the diagram, if you're unclear, ask me clarifying questions about:
- The primary user persona
- The core user journey I want to map first
- Any existing flows or constraints I should know about
- Integration points with external systems

The key line in that prompt is the last part — before creating the diagram, ask me clarifying questions. Don't skip this. Claude will ask you things like: who's the primary user? What's the main flow you want to map first? Those answers shape the whole diagram, so take the time to respond properly.

3.4 What Happens Next

Once you've answered Claude's questions, it'll use the Figma connector to build the diagram directly in your Figma account. You'll see it appear in a new FigJam file.

The colour coding I've specified in the prompt makes the flow easy to read at a glance: blue shapes are things the user does, green shapes are things the system does in response, yellow is a decision point (yes/no, this path or that path), red is an error state, and white is the start or end of the flow.

4. Reading the Diagram

Once it's generated, open it up in Figma. Hold Alt and scroll to zoom in and out, or use +/- on your keyboard to get a comfortable view.

Here's what you're looking for:

• Does it start where your users actually start? (App Store, web search, referral link — wherever they discover your product)
• Does it cover the core job-to-be-done — the main thing your user came here to do?
• Are the decision points represented? Every fork in the road should be visible
• Are the edge cases there? What happens if a user skips a step, or hits an error?

For my app, the flow runs from App Store discovery, through download and install, into email verification, then entering the kid's name, then inviting a parent — and then branches: if a parent accepts, one thing happens; if they don't, the app drops into solo mode. That branch — the solo mode fallback — is exactly the kind of thing you need to see before you build it, not after.

If Something's Missing or Wrong

Don't stress about getting it perfect in one go. If you look at the diagram and something's off — a step is missing, a branch doesn't make sense, an edge case isn't covered — just come back to the prompt in Claude and tell it what to change. Something like:

"The diagram doesn't show what happens when a user skips the invite step. Can you add that branch?"

Claude will go back into Figma via the connector and update it. That's the whole point of working this way — you're iterating, not starting over.

5. Watch Out For These

6. Practice

Exercise 1: Generate Your Flow

Run the prompt above in your co-work session with your four documents in context. Answer Claude's clarifying questions carefully. Let it generate the diagram.

How you'll know it's working: A new FigJam file appears in your Figma account with a colour-coded diagram that maps at least one complete user journey end-to-end.

Exercise 2: Find the Gap

Look at your diagram and find one thing that's missing — a decision point, an edge case, a step that's not represented. Then go back to Claude and prompt it to add that thing.

What this is practising: Getting comfortable with the iteration loop. The diagram isn't meant to be perfect on the first pass — the value is in the back-and-forth.

7. You Should Be Able to Build This Now

Here's what you can do with what we've just covered:

• Generate a full user flow diagram for any product using your existing documentation
• Connect Claude to external tools via MCP connectors
• Iterate on a diagram without starting from scratch

Check Yourself

• I've connected the Figma connector in Claude Desktop
• I've run the prompt with my four documents in context
• I have a user flow diagram in Figma that covers my app's core user journey
• I can zoom in and read the diagram clearly
• I've identified at least one thing to iterate on

If Something's Not Working

The Short Version

Here's what I want you to walk away with:

• User flow diagrams: A visual map of how someone moves through your product — decisions, actions, edge cases, all of it. Not UI design. Logic.
• MCP connectors: Mini apps inside Claude Desktop that let Claude control external tools on your behalf. Figma is one. We'll use more.
• What you can do now: Turn your product documents into a visual user flow, share it with anyone, and iterate on it with a prompt.

Quick Reference

The Prompt

Review the following documents: 
- Technical Overview
- UX/UI Overview
- Stakeholder Summary
- Sales & Marketing / GTM Overview

Using these as the foundation, I need you to create a comprehensive user flow diagram in Figma that maps:
1. User entry points (how users arrive)
2. Core user actions (the main jobs-to-be-done)
3. Decision points (where users make choices)
4. System responses (what happens after each action)
5. Error/edge cases (what can go wrong)
6. Success states (task completion points)

Use this color scheme for the flow:
- 🟦 Blue: User actions
- 🟩 Green: System processes  
- 🟨 Yellow: Decision points
- 🟥 Red: Error states
- ⬜ White: Start/End points

Before creating the diagram, if you're unclear, ask me clarifying questions about:
- The primary user persona
- The core user journey I want to map first
- Any existing flows or constraints I should know about
- Integration points with external systems

Color Coding Reference

Figma Navigation

Alt + Scroll       — zoom in/out
+ / -              — zoom in/out (keyboard)
Cmd/Ctrl + Shift + H — fit diagram to screen

Resources

Links & Docs

• Figma — Sign Up — free account, all you need
• Claude Desktop App — required for MCP connectors
• Model Context Protocol — Anthropic Docs — if you want to read more about how MCP works

Tools Used

• Figma — for the user flow diagram (FigJam)
• Claude Desktop — with Figma MCP connector enabled

Questions I Get Asked

Q: Do I need to know how to use Figma?

Not at all. You literally don't touch Figma yourself in this lesson — Claude does the drawing. You just need an account and to be logged in. The most you'll do in Figma is zoom in to read the diagram.

Q: Can I use a different diagramming tool instead of Figma?

For this course, I'm using Figma because it has an MCP connector and because it's what professionals use. If you're already deep into another tool like Miro or Lucidchart, technically you could create the diagram there manually, but you'd lose the Claude integration. Figma is the path of least resistance here.

Q: My diagram looks different from yours — is that a problem?

No. The diagram should reflect your product, not mine. As long as it covers a complete user journey — entry point, core actions, decision points, edge cases, success states — it's doing its job. Yours will look different because your app is different.

Q: How do I know I'm ready for the next lesson?

If you've got a user flow diagram in Figma that maps your app's core journey from start to a success state — you're ready. Don't overthink it.

💬 Stuck? Come Talk to Us

Glossary

User Flow Diagram: A visual map showing how a user moves through an application — every action, decision, and outcome, from entry point to success state. Not a wireframe. Not a UI design. Pure logic. (first came up in Module 2, Lesson 7)

MCP (Model Context Protocol): The system that allows Claude to control external applications — like Figma, Obsidian, or YouTrack — directly from inside Claude Desktop. You give Claude a prompt; MCP is how it reaches out and does things in other tools on your behalf. (first came up in Module 2, Lesson 7)

Connector: An MCP integration you install inside Claude Desktop that gives Claude the ability to interact with a specific external tool. The Figma connector is what we use in this lesson. (first came up in Module 2, Lesson 7)

Co-work: Claude's collaborative working session feature, where your documents and context are maintained across the conversation. This is where we've been generating documents throughout Module 2. (introduced in Module 2, Lesson 1)

FigJam: Figma's whiteboard/diagramming mode. When Claude generates the user flow via the MCP connector, it creates it in FigJam format — which is ideal for flowcharts and visual mapping. (first came up in Module 2, Lesson 7)