Design review workflows in Figma - Real Business Scenario

Scenario Mode

👤 Your Role: You are a product manager coordinating design reviews for a new app.

📋 Request: Your manager wants a clear workflow to track design review stages and feedback status.

📊 Data: You have data on design tasks, assigned reviewers, review status, and feedback dates.

🎯 Deliverable: Create a visual workflow dashboard in Figma showing design review stages, task counts, and feedback progress.

Sample Data

Design Task	Reviewer	Review Stage	Status	Feedback Date
Login Screen	Alice	Initial Review	Completed	2024-05-01
Signup Flow	Bob	Initial Review	Pending
Dashboard	Charlie	Second Review	Completed	2024-05-03
Settings Page	Alice	Initial Review	Completed	2024-05-02
Profile Page	Bob	Second Review	Pending
Notifications	Charlie	Final Review	Completed	2024-05-04
Help Section	Alice	Final Review	Pending
Logout Flow	Bob	Initial Review	Completed	2024-05-01

1

Step 1: Organize the design tasks by their review stage and status in a table.

Group tasks by 'Review Stage' and count how many are 'Completed' and 'Pending' in each stage.

Expected Result

Initial Review: 4 Completed, 1 Pending; Second Review: 1 Completed, 1 Pending; Final Review: 1 Completed, 1 Pending

2

Step 2: Create a flow diagram in Figma with stages as nodes: Initial Review, Second Review, Final Review.

Use rectangles for stages, connect with arrows showing progression from Initial to Final Review.

Expected Result

A clear flow with three stages connected by arrows in order.

3

Step 3: Add task counts for each stage inside the stage nodes, showing Completed and Pending tasks.

Inside each stage box, add text: e.g., 'Completed: 4', 'Pending: 1' for Initial Review.

Expected Result

Each stage box displays correct counts of Completed and Pending tasks.

4

Step 4: Include a feedback status indicator for each task using color-coded dots: green for Completed feedback, red for Pending.

Next to each task name, place a green dot if 'Status' is Completed, red if Pending.

Expected Result

Visual feedback status is easy to see for each task.

5

Step 5: Add a legend explaining colors and symbols used in the workflow diagram.

Create a small box with text: Green dot = Completed, Red dot = Pending.

Expected Result

Users understand the meaning of colors and symbols.

6

Step 6: Make the workflow layout responsive by grouping stages horizontally and ensuring text is readable on smaller screens.

Use Figma auto-layout features to arrange stages side by side with consistent spacing.

Expected Result

Workflow adapts well to different screen sizes without overlap.

Final Result

Initial Review [Completed:4 Pending:1] --> Second Review [Completed:1 Pending:1] --> Final Review [Completed:1 Pending:1]

Tasks with green dot = Completed feedback
Tasks with red dot = Pending feedback

Legend:
● Green = Completed
● Red = Pending

✓Most tasks are in Initial Review stage with majority completed.

✓Second and Final Review stages have fewer tasks but some pending feedback.

✓Visual workflow helps track progress and identify bottlenecks quickly.

Bonus Challenge

Add interactive filters in Figma to show tasks by reviewer or by status.

Show Hint

Use Figma components and variants to create buttons that toggle visibility of tasks.