Component variants in Figma - Real Business Scenario

Scenario Mode

👤 Your Role: You are a UI/UX designer working on a sales dashboard in Figma.

📋 Request: Your manager wants you to create a reusable button component with different states (default, hover, pressed) to maintain design consistency across the dashboard.

📊 Data: You have basic button designs for each state and need to combine them into a single component with variants.

🎯 Deliverable: A Figma component with variants representing the button states, ready to be used in the sales dashboard design.

Sample Data

Button State	Background Color	Text Color	Border
Default	#007AFF	#FFFFFF	None
Hover	#005BBB	#FFFFFF	None
Pressed	#003F7F	#FFFFFF	None

1

Step 1: Create three separate button frames in Figma, one for each state: Default, Hover, and Pressed.

Design each button with the specified background color and white text as per the sample data.

Expected Result

Three distinct button frames with correct colors and text.

2

Step 2: Select all three button frames and create a single component from them.

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

Expected Result

A new component containing all three button frames.

3

Step 3: Convert the component into a component set to create variants.

With the component selected, click 'Combine as Variants' in the right panel.

Expected Result

A component set with three variants representing Default, Hover, and Pressed states.

4

Step 4: Rename each variant's property to 'State' and set values to 'Default', 'Hover', and 'Pressed' respectively.

In the right panel under 'Variants', set the property name to 'State' and assign each variant its state value.

Expected Result

Variants properly labeled for easy selection in the design.

5

Step 5: Use the component variants in your dashboard design by dragging the component set and selecting the desired state from the properties panel.

Drag the component set onto the canvas and change the 'State' property to switch button appearance.

Expected Result

Buttons in the dashboard reflect the correct state visually and maintain consistency.

Final Result

┌───────────────────────────────┐
│ Button Component (Variants)   │
├─────────────┬───────────────┤
│ State       │ Appearance    │
├─────────────┼───────────────┤
│ Default     │ Blue bg, white│
│             │ text          │
├─────────────┼───────────────┤
│ Hover       │ Darker blue bg│
│             │ white text    │
├─────────────┼───────────────┤
│ Pressed     │ Darkest blue  │
│             │ bg, white text│
└─────────────┴───────────────┘

Bonus Challenge

Add a 'Disabled' state variant to the button with a gray background and lighter text color.

Show Hint

Create a new button frame with the disabled style, add it to the component set, and update the 'State' property to include 'Disabled'.