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.