Documentation within Figma - Real Business Scenario

Scenario Mode

👤 Your Role: You are a UX designer working on a BI dashboard project.

📋 Request: Your project manager asks you to create clear documentation inside Figma to explain the dashboard design and data sources for the development team.

📊 Data: You have the dashboard design files in Figma with multiple frames showing charts, filters, and data tables. You also have notes about data sources and calculations.

🎯 Deliverable: Create a Figma file with organized documentation pages that explain each dashboard component, data sources, and calculation logic clearly for developers.

Sample Data

Frame Name	Component	Description	Data Source	Calculation
Sales Overview	Bar Chart	Shows monthly sales totals	Sales Database - Monthly Sales Table	SUM of Sales Amount by Month
Region Filter	Dropdown	Filter data by region	Regions Table	None
Top Products	Table	List top 5 products by sales	Sales Database - Product Sales Table	Rank by Sales Amount DESC, Top 5
Sales Trend	Line Chart	Shows sales trend over last 12 months	Sales Database - Monthly Sales Table	SUM of Sales Amount by Month

1

Step 1: Create a new page in Figma named 'Documentation'.

In the Figma file, click '+' next to pages and rename it to 'Documentation'.

Expected Result

A new empty page named 'Documentation' is added to the Figma file.

2

Step 2: Add a title text box at the top of the Documentation page with the text 'Dashboard Documentation'.

Use the Text tool, type 'Dashboard Documentation', set font size to 24pt and bold.

Expected Result

A clear title is visible at the top of the Documentation page.

3

Step 3: Create sections for each dashboard frame: Sales Overview, Region Filter, Top Products, Sales Trend.

Use rectangles or frames to group each section, add heading text for each section with the frame name.

Expected Result

Four distinct sections labeled with the frame names are visible on the Documentation page.

4

Step 4: Inside each section, add text boxes describing the component type, its purpose, data source, and calculation logic.

For example, under 'Sales Overview', add: 'Component: Bar Chart', 'Purpose: Shows monthly sales totals', 'Data Source: Sales Database - Monthly Sales Table', 'Calculation: SUM of Sales Amount by Month'.

Expected Result

Each section clearly explains the component details and data logic.

5

Step 5: Add links or references to the original dashboard frames for easy navigation.

Use Figma's prototype link feature to link section titles to corresponding dashboard frames.

Expected Result

Clicking section titles in Documentation navigates to the actual dashboard frames.

6

Step 6: Use consistent fonts, colors, and spacing to make the documentation easy to read and visually organized.

Apply a simple style guide: headings 18pt bold, body text 14pt regular, spacing 16px between elements.

Expected Result

Documentation page looks clean, professional, and easy to scan.

7

Step 7: Share the Figma file with the development team and add comments to clarify any complex calculations or data sources.

Use Figma's share feature to invite team members, add comments on relevant text boxes.

Expected Result

Developers can access the documentation and ask questions directly in Figma.

Final Result

Sales Overview

↓

Region Filter

↓

Top Products

↓

Sales Trend

✓Documentation clearly explains each dashboard component and its data logic.

✓Links improve navigation between documentation and design frames.

✓Consistent styling enhances readability for developers.

✓Comments allow developers to clarify complex points directly.

Bonus Challenge

Add interactive prototypes in the documentation page to simulate filter selections and chart updates.

Show Hint

Use Figma's interactive components and prototype links to create clickable filters that show different chart states.

Practice

1. What is the main purpose of adding documentation within Figma designs?

easy

A. To make designs easy to understand for everyone

B. To increase the file size unnecessarily

C. To hide design elements from viewers

D. To create complex animations automatically

Solution

1. Step 1: Understand the role of documentation in design

   Documentation helps explain design decisions and details clearly.

2. Step 2: Identify the benefit for teamwork

   Clear documentation improves communication and saves time for teams.

3. Final Answer:

   To make designs easy to understand for everyone -> Option A

4. Quick Check:

   Documentation purpose = clarity [OK]

Hint: Think about why notes help teammates understand designs [OK]

Common Mistakes:

• Confusing documentation with design decoration
• Thinking documentation hides elements
• Assuming documentation creates animations

2. Which of the following is a correct way to add documentation inside a Figma file?

easy

A. Hide all text layers to keep file clean

B. Delete all unused layers without notes

C. Use comments and text layers to add notes

D. Only use external documents, not Figma itself

Solution

1. Step 1: Identify documentation methods in Figma

   Comments and text layers are built-in ways to add notes directly on designs.

2. Step 2: Recognize why other options are incorrect

   Deleting layers or hiding text removes documentation; external docs are less integrated.

3. Final Answer:

   Use comments and text layers to add notes -> Option C

4. Quick Check:

   Documentation methods = comments + text layers [OK]

Hint: Remember Figma supports comments and text for notes [OK]

Common Mistakes:

• Thinking documentation means deleting layers
• Assuming external docs replace Figma notes
• Hiding text layers removes documentation

3. Given a Figma file with multiple pages, which page is best suited for detailed documentation notes?

medium

A. The first page with only images

B. A dedicated page named 'Documentation' or 'Notes'

C. The page with the most complex design

D. A hidden page with no access

Solution

1. Step 1: Understand page organization in Figma

   Using a dedicated page for documentation keeps notes organized and easy to find.

2. Step 2: Evaluate other options

   Notes on complex design pages or hidden pages reduce clarity and accessibility.

3. Final Answer:

   A dedicated page named 'Documentation' or 'Notes' -> Option B

4. Quick Check:

   Best documentation location = dedicated page [OK]

Hint: Use a separate page for notes to stay organized [OK]

Common Mistakes:

• Putting notes on complex design pages
• Hiding documentation pages
• Mixing notes with images only

4. You added comments in Figma but teammates say they can't see them. What is the likely issue?

medium

A. Comments require a paid plugin to be visible

B. Comments automatically delete after 24 hours

C. Comments only appear in exported PDFs

D. Comments were added but not resolved or viewed

Solution

1. Step 1: Check how Figma comments work

   Comments stay visible until resolved or dismissed by users.

2. Step 2: Understand common misconceptions

   Comments do not auto-delete, are visible in the app, and need no plugins.

3. Final Answer:

   Comments were added but not resolved or viewed -> Option D

4. Quick Check:

   Comments visibility = unresolved and viewed [OK]

Hint: Check if comments are unresolved and teammates have viewed them [OK]

Common Mistakes:

• Believing comments auto-delete
• Thinking comments show only in exports
• Assuming plugins are needed for comments

5. How can you best combine Figma documentation features to ensure your design is clear and easy to follow for a large team?

hard

A. Use a dedicated documentation page, add comments on key elements, and include descriptive text layers

B. Only add comments and avoid text layers to keep the file simple

C. Create multiple hidden pages with notes to avoid clutter

D. Export designs without notes and send separate documents

Solution

1. Step 1: Identify best practices for documentation in Figma

   Combining a dedicated page, comments, and text layers covers different documentation needs clearly.

2. Step 2: Evaluate drawbacks of other options

   Using only comments or hidden pages reduces clarity; separate docs break workflow.

3. Final Answer:

   Use a dedicated documentation page, add comments on key elements, and include descriptive text layers -> Option A

4. Quick Check:

   Comprehensive documentation = page + comments + text [OK]

Hint: Combine pages, comments, and text for clear documentation [OK]

Common Mistakes:

• Relying on only one documentation method
• Hiding notes instead of organizing them
• Separating docs from Figma file