How to Build a Customer Journey Map in Figma

By following this guide, you will build a fully interactive, research-backed customer journey map in Figma that your design, marketing, and product teams can collaborate on in real time. The entire process takes roughly three to four hours from raw research notes to a shareable, component-driven map your stakeholders will actually use.

What You'll Build

• A structured Figma file with reusable journey map components and a consistent token-based colour system
• A five-stage journey map (Awareness → Consideration → Purchase → Onboarding → Retention) populated with real user data
• Swimlanes covering touchpoints, emotions, pain points, and team-owned opportunities
• A live FigJam-linked version your team can annotate without touching the design file
• An export-ready presentation frame for stakeholder reviews and client handoffs

Prerequisites

• A Figma Professional or Organisation plan (free Starter works but limits multiplayer editing)
• At least five to ten customer interview transcripts, survey responses, or support ticket themes
• Basic Figma fluency — you should know how to create frames, components, and auto layout
• Optional: FigJam access for collaborative synthesis workshops
• Optional: Notion or a spreadsheet for organising raw research data before you open Figma

Step 1: Synthesise Your Research Before You Open Figma

The most common mistake teams make is jumping straight into Figma with no data. A journey map without real user evidence is just a decorative diagram.

Why does this step matter?

Journey maps built on assumptions mislead product decisions. Research from the Nielsen Norman Group consistently shows that teams who map from evidence identify two to three times more high-impact opportunities than those who map from internal opinion.

Before touching Figma, group your raw research into five categories:

1. Actions — what users actually do at each stage
2. Thoughts — what they are thinking or asking themselves
3. Emotions — how they feel (use a simple scale: frustrated, neutral, delighted)
4. Touchpoints — which channels or interfaces they interact with
5. Pain points and opportunities — what breaks and what could be better

A lightweight Notion database works well here. Create a table with a column for each category and a row for each research quote. Tag each row with the journey stage it belongs to.

Pro tip: Run a one-hour FigJam affinity mapping session with your team before Step 2. Paste research quotes as sticky notes, cluster them by theme, and label the clusters. This surfaces patterns you would miss reading transcripts alone.

Step 2: Set Up Your Figma File Structure

A well-organised file prevents confusion as the map grows and makes handoff to developers or stakeholders much smoother.

How should you structure the pages?

Create a Figma file with four pages:

• 🗺 Journey Map — the main deliverable
• 🧩 Components — all reusable atoms (touchpoint cards, emotion icons, swimlane headers)
• 🎨 Tokens — colour, typography, and spacing variables
• 📋 Presentation — a clean export frame for stakeholders

Name your file clearly: CJM — [Product Name] — [Date]. Use Figma's cover page feature so the file thumbnail is identifiable in your team's project panel.

Step 3: Define Your Design Tokens

Tokens let you update the entire map's appearance in seconds. As of Figma's 2025–2026 Variables API, you can bind colour, spacing, and typography values directly to components.

Which tokens do you need for a journey map?

Create these variable groups in Local Variables (Figma menu → Resources → Local Variables):

-- Emotion Colours --
emotion/frustrated   → #E05C5C  (or your brand's alert red)
emotion/neutral      → #A0A4AB
emotion/satisfied    → #4CAF82
emotion/delighted    → #2D8CFF

-- Stage Header Fills --
stage/awareness      → brand-primary-100
stage/consideration  → brand-primary-200
stage/purchase       → brand-primary-300
stage/onboarding     → brand-primary-400
stage/retention      → brand-primary-500

-- Swimlane Backgrounds --
swim/action          → neutral-50
swim/emotion         → neutral-100
swim/touchpoint      → neutral-50
swim/opportunity     → accent-50

Using variables rather than hardcoded hex values means a rebrand or client theme swap takes under five minutes.

Step 4: Build Your Reusable Components

Components are what separate a one-time map from a scalable design asset your team reuses across projects.

What components do you actually need?

Build these six components on your Components page:

1. Stage Header — a full-width banner with the stage name, a short description, and a stage number badge. Use auto layout with horizontal resizing set to Fill.
2. Swimlane Label — a narrow left-column cell with the swimlane name (Actions, Thoughts, Emotions, Touchpoints, Opportunities). Fixed width of 140px.
3. Content Card — a rounded rectangle, 200px wide, with a body text layer and an optional icon slot. This is your primary data container.
4. Emotion Dot — a 24px circle that uses your emotion/* colour tokens. Add a variant property with four options: Frustrated, Neutral, Satisfied, Delighted.
5. Emotion Curve — a vector line connecting emotion dots across stages. Draw this manually as a Bézier curve; it does not need to be a component, but keep it on a locked layer.
6. Opportunity Tag — a pill-shaped label with a lightning bolt icon and an owner field. This tags who is responsible for each opportunity.

Common pitfall: Do not nest too many variants inside a single component. Keep each component focused on one purpose. Deeply nested variants slow down Figma on large files and confuse collaborators who did not build the system.

Step 5: Build the Journey Map Grid

Now you assemble the actual map. Switch to your Journey Map page.

How do you lay out the grid correctly?

Create a frame sized at 4800 × 2400px. This is wide enough for five stages and six swimlanes without feeling cramped on a 27-inch monitor or when projected in a stakeholder meeting.

Set up the grid like this:

• Row 1 (height 80px): Stage Headers — one per stage, spanning the full column width
• Row 2 (height 160px): Actions swimlane
• Row 3 (height 160px): Thoughts swimlane
• Row 4 (height 120px): Emotions swimlane (contains dots and the connecting curve)
• Row 5 (height 160px): Touchpoints swimlane
• Row 6 (height 160px): Opportunities swimlane

Use a 140px fixed left column for Swimlane Labels. The remaining width (4660px) divides evenly into five stage columns of 932px each. Use Figma's grid layout guide (Shift+G) at 932px column width to keep everything aligned.

Drop in your Stage Header components across Row 1. Update each one's stage name using the instance panel. Bind the fill to the corresponding stage/* token.

Step 6: Populate the Map With Research Data

This is where your synthesis from Step 1 pays off. Work left to right, one stage at a time.

How many cards should you add per cell?

Aim for two to four Content Cards per swimlane cell. More than four cards signals that you have not synthesised enough — cluster similar items before adding them. Fewer than two suggests the stage is under-researched.

For the Emotions swimlane, place one Emotion Dot per stage at a vertical position that reflects the emotional intensity. High on the row means positive; low means negative. After placing all five dots, draw your Emotion Curve vector connecting them. This curve becomes the most-discussed element in every stakeholder review.

For Opportunities, use the Opportunity Tag component. Assign an owner from your team (e.g. "Marketing", "Product", "Support") in the owner field. This transforms the map from a research artefact into an action planning tool.

At Lenka Studio, we run this population step as a collaborative workshop with the client team present in Figma multiplayer. Seeing stakeholders move cards and debate ownership in real time produces faster alignment than any slide deck.

Step 7: Add the Emotion Curve and Annotations

The emotion curve is the visual anchor of the entire map. Done well, it communicates the user's experience at a glance.

How do you draw a smooth curve in Figma?

1. Select the Pen tool (P).
2. Click your first Emotion Dot's centre to place the starting anchor.
3. Click and drag each subsequent dot to create Bézier handles. Pull the handles horizontally to keep curves gradual.
4. Close the path only if you want a filled area under the curve (area chart style). For a line, leave it open.
5. Set the stroke to 3px, use your emotion/neutral token as the base colour, and add a gradient stroke if you want it to shift from red through neutral to green.

Add a text annotation above or below each stage's dot explaining the primary driver of that emotional state. Keep annotations to one sentence.

Step 8: Link Your FigJam Board for Async Collaboration

As of 2026, Figma supports embedded FigJam links inside design files via the Resources panel. Add your affinity map FigJam URL as a linked resource so team members can jump between the raw research and the polished map without leaving Figma.

To do this: click the Resources icon in the top toolbar → Link Resources → paste your FigJam URL → label it "Research Workshop Board".

This is especially useful for distributed teams across time zones — common for SMBs in Australia and Singapore working with offshore design partners.

Step 9: Build the Presentation Frame

Stakeholders rarely view raw Figma files comfortably. Create a clean presentation version on your Presentation page.

Set up 1920 × 1080px frames — one per stage. On each frame, show only that stage's column from the main map alongside a short summary of the top opportunity and the emotional state. Use Figma's Prototype connections to create a click-through flow between frames.

Share via Figma's View-only presentation link. This gives clients and executives a polished view without exposing your component library or token structure.

If your business is tracking how this journey mapping exercise feeds into broader brand and product decisions, Lenka Studio's free Brand Health Score assessment is a useful benchmark to run alongside the map — it surfaces gaps between how customers experience your brand and how your team perceives it.

Frequently Asked Questions

Next Steps

You now have a fully structured, research-backed customer journey map in Figma — complete with reusable components, design tokens, and a stakeholder-ready presentation frame. The next natural steps are to run a structured design critique session on the map with your product and marketing teams, prioritise the opportunities by effort and impact, and assign ownership before your next sprint planning cycle.

If you are mapping journeys for a product that also relies on social media touchpoints, the Lenka Studio Social Media Toolkit includes a free content calendar template that aligns well with the Awareness and Consideration stages of any journey map.

If you would like a design partner to facilitate the research synthesis, run the FigJam workshop, or build a more advanced journey mapping system tailored to your product, get in touch with the Lenka Studio team. We work with SMBs across Australia, Singapore, Canada, and the US to turn research into design assets that actually drive decisions.