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.

Practice

1. What is the main purpose of design review workflows in Figma?

easy

A. To export designs as images only

B. To create new design files from scratch

C. To write code for design automation

D. To help teams give and track feedback easily

Solution

1. Step 1: Understand design review workflows

   Design review workflows focus on collaboration and feedback during design creation.

2. Step 2: Identify the main goal in Figma context

   Figma uses comments and approvals to track feedback and finalize designs smoothly.

3. Final Answer:

   To help teams give and track feedback easily -> Option D

4. Quick Check:

   Design review workflows = feedback tracking [OK]

Hint: Think collaboration and feedback tracking in design [OK]

Common Mistakes:

• Confusing design creation with review process
• Thinking workflows are for coding or exporting only
• Ignoring feedback tracking as a key purpose

2. Which Figma feature is primarily used to link feedback directly to specific parts of a design during review?

easy

A. Layers panel

B. Comments

C. Prototype links

D. Export settings

Solution

1. Step 1: Identify feedback tools in Figma

   Comments allow users to leave notes tied to exact design areas.

2. Step 2: Compare with other features

   Layers panel organizes design elements, prototypes link screens, exports save files; none link feedback directly.

3. Final Answer:

   Comments -> Option B

4. Quick Check:

   Feedback linked to design = Comments [OK]

Hint: Feedback linked to design parts means comments [OK]

Common Mistakes:

• Choosing Layers panel which only organizes elements
• Confusing prototype links with feedback tools
• Selecting export settings unrelated to feedback

3. In a Figma design review, if a comment is marked as resolved, what happens to it?

medium

A. It is hidden from the main view but can be accessed later

B. It sends an email notification to all team members

C. It automatically deletes the related design element

D. It disappears permanently from the file

Solution

1. Step 1: Understand comment resolution in Figma

   Resolved comments are hidden from the main view to reduce clutter but remain accessible.

2. Step 2: Eliminate incorrect options

   Comments do not delete design elements or disappear permanently; email notifications are manual.

3. Final Answer:

   It is hidden from the main view but can be accessed later -> Option A

4. Quick Check:

   Resolved comment = hidden, not deleted [OK]

Hint: Resolved comments hide but stay accessible [OK]

Common Mistakes:

• Thinking resolved comments delete design parts
• Assuming comments vanish permanently
• Believing resolution triggers automatic emails

4. You notice that team members cannot add comments on a shared Figma file during review. What is the most likely cause?

medium

A. The file has too many layers to comment on

B. Comments are disabled by default in Figma

C. The file is set to 'View only' access for those members

D. The file is not saved properly

Solution

1. Step 1: Check access permissions in Figma

   Only users with 'Can edit' or 'Can comment' access can add comments; 'View only' restricts commenting.

2. Step 2: Review other options

   Layer count does not block comments, comments are enabled by default, and saving issues do not restrict commenting.

3. Final Answer:

   The file is set to 'View only' access for those members -> Option C

4. Quick Check:

   Access level controls commenting ability [OK]

Hint: Check if users have comment or edit access [OK]

Common Mistakes:

• Blaming layer count for comment issues
• Thinking comments are off by default
• Assuming saving errors block commenting

5. A team wants to finalize a design in Figma after multiple rounds of feedback. Which workflow step ensures the design is officially approved and ready for handoff?

hard

A. Resolving all comments and marking the design as approved

B. Deleting all comments to clean the file

C. Duplicating the file for backup before sharing

D. Exporting the design as PNG images

Solution

1. Step 1: Understand finalizing design workflows

   Final approval involves resolving comments and marking the design approved to confirm readiness.

2. Step 2: Evaluate options for official approval

   Deleting comments removes feedback history, exporting images is for delivery, duplicating file is backup but not approval.

3. Step 3: Identify the best step for official approval

   Resolving comments and marking approved is the key step to finalize design for handoff.

4. Final Answer:

   Resolving all comments and marking the design as approved -> Option A

5. Quick Check:

   Final approval = resolve comments + approve [OK]

Hint: Final approval means resolve comments and mark approved [OK]

Common Mistakes:

• Deleting comments instead of resolving them
• Confusing backup with approval
• Thinking exporting images finalizes design