Design sprint workflow in Figma - Real Business Scenario

Scenario Mode

👤 Your Role: You are a UX designer at a product company

📋 Request: Your manager wants a clear visual workflow of the design sprint process to share with the team

📊 Data: You have the key stages of a design sprint: Understand, Sketch, Decide, Prototype, Test

🎯 Deliverable: Create a Figma file with a clean, easy-to-follow design sprint workflow diagram

Sample Data

Stage	Description	Duration
Understand	Gather insights and define the problem	Day 1
Sketch	Generate ideas and solutions	Day 2
Decide	Choose the best ideas	Day 3
Prototype	Build a realistic prototype	Day 4
Test	Validate with real users	Day 5

1

Step 1: Open Figma and create a new file named 'Design Sprint Workflow'

N/A

Expected Result

A blank Figma canvas ready for design

2

Step 2: Create five frames horizontally, each representing one sprint stage: Understand, Sketch, Decide, Prototype, Test

Use Frame tool (F), set size 300x400 px, arrange with 50 px spacing

Expected Result

Five evenly spaced frames labeled with stage names

3

Step 3: Inside each frame, add a title text with the stage name and a smaller text box with the description from sample data

Use Text tool (T), set title font size 24 pt bold, description font size 14 pt regular

Expected Result

Each frame clearly shows stage name and description

4

Step 4: Add a small text box below description with the duration (e.g., 'Day 1')

Text size 12 pt italic, color gray

Expected Result

Duration is visible under each stage description

5

Step 5: Draw arrows between frames to show workflow direction from left to right

Use Pen tool (P) or Line tool with arrowheads, connect right edge of one frame to left edge of next

Expected Result

Clear directional arrows connecting all stages in order

6

Step 6: Apply consistent colors and styles: use a calm blue for frames background, black text, and dark blue arrows

Set frame fill to #D0E6FF, text fill to #000000, arrows stroke to #003366

Expected Result

A visually appealing and consistent workflow diagram

7

Step 7: Add a title at the top of the canvas: 'Design Sprint Workflow'

Text size 32 pt bold, center aligned

Expected Result

Clear main title above the workflow

8

Step 8: Check accessibility: ensure text contrast ratio is sufficient and all text is readable

Use Figma's contrast checker plugin or manual color check

Expected Result

Text is easy to read with good contrast

9

Step 9: Share the Figma file link with your manager for review

Click Share, set link access to 'Anyone with link can view'

Expected Result

Manager can open and view the workflow diagram

Final Result

Design Sprint Workflow

[Understand] --> [Sketch] --> [Decide] --> [Prototype] --> [Test]

Each box shows stage name, description, and day number
Arrows connect boxes left to right
Colors: light blue boxes, dark blue arrows, black text

✓The workflow clearly shows the five stages of a design sprint

✓Each stage includes a short description and duration

✓The directional arrows guide the viewer through the process

✓The design uses consistent colors and good contrast for readability

Bonus Challenge

Add interactive components in Figma to simulate clicking each stage to show more detailed notes

Show Hint

Use Figma's Prototype mode to link frames or overlays with detailed info