Component set best practices in Figma - Real Business Scenario

Scenario Mode

👤 Your Role: You are a UI/UX designer working on a business intelligence dashboard project.

📋 Request: Your manager wants you to create reusable component sets in Figma to ensure consistency and efficiency across the dashboard design.

📊 Data: You have access to various UI elements like buttons, input fields, dropdowns, and cards that need to be standardized.

🎯 Deliverable: Create component sets in Figma following best practices for naming, organization, and variants to support easy reuse and scalability.

Sample Data

Component	State	Properties
Button	Default	Color: Blue, Size: Medium
Button	Hover	Color: Dark Blue, Size: Medium
Button	Disabled	Color: Gray, Size: Medium
Input Field	Empty	Border: Light Gray, Placeholder: Yes
Input Field	Focused	Border: Blue, Placeholder: Yes
Dropdown	Closed	Arrow: Down, Border: Gray
Dropdown	Open	Arrow: Up, Border: Blue
Card	Default	Shadow: Yes, Padding: Medium
Card	Selected	Shadow: Strong, Border: Blue

1

Step 1: Organize all UI elements into logical groups in Figma layers panel.

Create separate frames named 'Buttons', 'Input Fields', 'Dropdowns', and 'Cards' to hold related components.

Expected Result

Layers panel shows four clear groups for each UI element type.

2

Step 2: Create individual components for each UI element state.

Select each UI element variant (e.g., Button Default, Button Hover) and use 'Create Component' feature.

Expected Result

Each UI element state is a separate component in Figma.

3

Step 3: Combine related components into component sets using variants.

Select all Button components and use 'Combine as Variants' to create a Button component set with 'State' property.

Expected Result

Button component set with variants for Default, Hover, and Disabled states.

4

Step 4: Name component sets and variants clearly using consistent naming conventions.

Use names like 'Button / State=Default', 'Button / State=Hover', etc.

Expected Result

Component names are easy to understand and follow a pattern.

5

Step 5: Add properties to component sets for easy customization.

Use variant properties such as 'State' for buttons and 'Open/Closed' for dropdowns.

Expected Result

Component sets allow switching states via properties without duplicating components.

6

Step 6: Use auto layout inside components for responsive resizing.

Apply auto layout to buttons and cards to maintain padding and alignment when resized.

Expected Result

Components resize smoothly and maintain consistent spacing.

7

Step 7: Document component usage guidelines in a Figma page or file.

Create a page named 'Design System' with instructions and examples for using component sets.

Expected Result

Team members can easily understand how to use and customize components.

Final Result

┌───────────────────────────────┐
│       COMPONENT SETS           │
├─────────────┬───────────────┤
│ Button      │ State         │
│             │ Default       │
│             │ Hover         │
│             │ Disabled      │
├─────────────┼───────────────┤
│ Input Field │ State         │
│             │ Empty         │
│             │ Focused       │
├─────────────┼───────────────┤
│ Dropdown    │ State         │
│             │ Closed        │
│             │ Open          │
├─────────────┼───────────────┤
│ Card        │ State         │
│             │ Default       │
│             │ Selected      │
└─────────────┴───────────────┘

✓Component sets with variants reduce duplication and improve consistency.

✓Clear naming conventions make components easy to find and use.

✓Auto layout ensures components adapt well to different sizes.

✓Documenting usage helps the whole team maintain design standards.

Bonus Challenge

Create a color theme variant property for buttons to switch between Primary, Secondary, and Danger styles within the same component set.

Show Hint

Add a new variant property called 'Type' with options 'Primary', 'Secondary', and 'Danger' and define color styles for each.