Creating components in Figma - Business Scenario Walkthrough

Scenario Mode

👤 Your Role: You are a BI designer working on a sales dashboard

📋 Request: Your manager wants you to create reusable visual components in Figma to speed up dashboard design

📊 Data: You have sample sales charts and KPI cards designed in Figma

🎯 Deliverable: Create components for KPI cards and sales charts that can be reused and updated easily

Sample Data

Component Name	Type	Description
Sales KPI Card	Card	Shows total sales, sales growth, and target
Monthly Sales Chart	Chart	Line chart showing sales over months
Region Filter	Dropdown	Filter data by sales region
Product Filter	Dropdown	Filter data by product category

1

Step 1: Select the Sales KPI Card design in Figma

Right-click the selected frame and choose 'Create Component' or press Ctrl+Alt+K (Cmd+Option+K on Mac)

Expected Result

Sales KPI Card becomes a reusable component with a purple outline

2

Step 2: Select the Monthly Sales Chart design

Create a component using the same method: right-click and 'Create Component'

Expected Result

Monthly Sales Chart is now a reusable component

3

Step 3: Create components for Region Filter and Product Filter dropdowns

Select each dropdown and create components individually

Expected Result

Both filters become reusable components

4

Step 4: Organize all components into a new page named 'Components Library'

Drag components to the new page and arrange them neatly

Expected Result

All components are stored in one place for easy access

5

Step 5: Use instances of the Sales KPI Card component on a new dashboard page

Drag component from Assets panel onto the dashboard frame

Expected Result

Multiple KPI cards appear as instances linked to the main component

6

Step 6: Edit the main Sales KPI Card component to update the color scheme

Change fill color in the main component; observe changes in all instances

Expected Result

All KPI card instances update automatically with new colors

Final Result

Sales KPI Card

↓

Monthly Sales Chart

↓

Region Filter

↓

Product Filter

✓Creating components saves time by reusing designs

✓Editing the main component updates all instances automatically

✓Organizing components in a library page improves workflow

Bonus Challenge

Create variants of the Sales KPI Card component for different sales regions with color coding

Show Hint

Use Figma's Variants feature to group related components and add properties for region