Community resources and templates in Figma - Real Business Scenario

Scenario Mode

👤 Your Role: You are a business intelligence analyst new to Figma for dashboard design.

📋 Request: Your manager wants you to quickly create a sales performance dashboard using community resources and templates in Figma.

📊 Data: You have monthly sales data by region and product category in a spreadsheet.

🎯 Deliverable: A Figma dashboard prototype using community templates that visually shows monthly sales trends and category breakdown.

Sample Data

Month	Region	Product Category	Sales
Jan	North	Electronics	12000
Jan	South	Furniture	8000
Feb	North	Electronics	15000
Feb	South	Furniture	7000
Mar	North	Electronics	13000
Mar	South	Furniture	9000
Jan	North	Furniture	4000
Feb	North	Furniture	5000
Mar	South	Electronics	6000
Mar	North	Furniture	4500

1

Step 1: Open Figma and go to the Community tab.

Search for 'sales dashboard templates' in the Community search bar.

Expected Result

A list of free and paid sales dashboard templates appears.

2

Step 2: Select a simple sales dashboard template with charts and tables.

Click 'Duplicate' to add the template to your drafts.

Expected Result

The template is copied to your Figma drafts for editing.

3

Step 3: Open the duplicated template and review its components.

Identify placeholders for charts like line charts and bar charts.

Expected Result

You understand where to place your sales data visuals.

4

Step 4: Prepare your sales data summary outside Figma (e.g., Excel).

Calculate monthly total sales and sales by product category.

Expected Result

You have summarized sales numbers ready to input.

5

Step 5: Replace placeholder text and charts in the Figma template with your sales data.

Edit text layers to show monthly sales totals and category breakdowns.

Expected Result

The dashboard now reflects your actual sales data.

6

Step 6: Customize colors and fonts to match your company branding.

Use Figma's color picker and text styles to update the design.

Expected Result

The dashboard looks professional and aligned with company style.

7

Step 7: Add accessibility features like clear labels and sufficient color contrast.

Check text readability and add ARIA labels in Figma's prototyping notes.

Expected Result

The dashboard is easier to understand and accessible.

8

Step 8: Share the Figma prototype link with your manager for feedback.

Click 'Share', set link permissions to 'Anyone with the link can view'.

Expected Result

Your manager can view and comment on the dashboard prototype.

Final Result

┌───────────────────────────────┐
│      Sales Performance         │
├─────────────┬───────────────┤
│ Month       │ Total Sales   │
│ Jan         │ $24,000       │
│ Feb         │ $27,000       │
│ Mar         │ $32,500       │
├─────────────┴───────────────┤
│ Product Category Sales       │
│ Electronics: $46,000         │
│ Furniture: $37,500           │
└───────────────────────────────┘

Bonus Challenge

Create interactive prototype links in Figma that allow filtering the dashboard by region.

Show Hint

Use Figma's interactive components and variants to simulate filter buttons.