Component instances in Figma - Real Business Scenario

Scenario Mode

👤 Your Role: You are a BI dashboard designer using Figma to create interactive reports.

📋 Request: Your manager wants you to create a consistent sales dashboard using reusable design elements to speed up updates and maintain style.

📊 Data: You have a set of design components like buttons, charts, and cards created as master components in Figma.

🎯 Deliverable: Create multiple instances of these components on the dashboard page, customize their content without changing the master, and organize them for easy updates.

Sample Data

Component Name	Type	Master Properties	Instance Customizations
Button Primary	Button	Color: Blue, Text: 'Click'	Text changed to 'View Report'
Sales Chart	Chart	Type: Bar, Colors: Green	Data filtered to Q1 Sales
Info Card	Card	Background: White, Border: Gray	Title changed to 'Total Revenue'

1

Step 1: Open Figma and locate the master components for Button Primary, Sales Chart, and Info Card.

Use the Assets panel to find and select each master component.

Expected Result

You see the master components ready to be used as instances.

2

Step 2: Drag instances of each master component onto your dashboard frame.

From the Assets panel, drag Button Primary, Sales Chart, and Info Card onto the canvas.

Expected Result

Three component instances appear on the dashboard.

3

Step 3: Customize the Button Primary instance text to 'View Report' without detaching it from the master.

Select the button instance, double-click the text, and type 'View Report'.

Expected Result

Button instance text updates to 'View Report' but remains linked to the master.

4

Step 4: Filter the Sales Chart instance data to show only Q1 sales.

Select the chart instance and apply the Q1 sales filter in the properties panel or linked data source.

Expected Result

Sales Chart instance displays only Q1 sales data.

5

Step 5: Change the Info Card instance title to 'Total Revenue' without altering the master card.

Select the Info Card instance, edit the title text to 'Total Revenue'.

Expected Result

Info Card instance shows 'Total Revenue' title, master remains unchanged.

6

Step 6: Organize all component instances neatly on the dashboard frame with consistent spacing.

Use Figma's alignment and distribution tools to space components evenly.

Expected Result

Dashboard looks clean and components are evenly spaced.

7

Step 7: Save your Figma file and share the dashboard link with your manager for review.

Click Share, set permissions, and copy the link.

Expected Result

Manager can view the dashboard with consistent component instances.

Final Result

┌───────────────────────────────┐
│        Sales Dashboard         │
├───────────────┬───────────────┤
│ [View Report] │  Sales Chart  │
│  (Button)     │  (Q1 Data)    │
├───────────────┴───────────────┤
│        Total Revenue (Card)    │
└───────────────────────────────┘

✓Using component instances keeps design consistent across the dashboard.

✓Customizing instances allows flexibility without breaking the master design.

✓Organized layout improves readability and user experience.

Bonus Challenge

Create a variant of the Button Primary component for a disabled state and use its instance on the dashboard.

Show Hint

Use Figma's Variants feature to add a 'Disabled' state with gray color and update the instance property.