Component set best practices in Figma - Step-by-Step Guide

Introduction

Component sets in Figma help you organize related design elements like buttons or icons with different states. Using them well saves time and keeps your design consistent across dashboards and reports.

When you need buttons with different states like default, hover, and pressed for your dashboard.

When you want to create a set of icons that share the same style but have different colors or sizes.

When you want to switch between different chart styles quickly without duplicating components.

When you want to maintain consistent spacing and alignment for similar UI elements.

When you want to update a design element once and have it reflect everywhere it is used.

Steps

Step 1: Select multiple related components

- Layers panel or canvas

All selected components are highlighted

💡 Hold Shift to select multiple components that belong together

Step 2: Right-click the selection and choose Create Component Set

- Context menu

A new component set is created grouping the selected components

💡 Component sets appear as a single item in the Assets panel

Step 3: Name each variant clearly

- Properties panel under Component Set

Each variant has a descriptive name like 'Default', 'Hover', or 'Disabled'

💡 Use simple, consistent names to make switching variants easy

Step 4: Arrange variants logically

- Component Set frame on canvas

Variants are organized in rows or columns for easy viewing

💡 Keep related variants close to each other visually

Step 5: Use properties like color or text to define variant differences

- Properties panel

Variants differ only in the intended property, keeping other aspects consistent

💡 Avoid mixing unrelated changes in one component set

Before vs After

Before

Multiple separate components named Button Default, Button Hover, Button Pressed scattered on canvas

After

One component set named Button with variants Default, Hover, Pressed grouped neatly and accessible from Assets panel

Settings Reference

Variant name

📍 Properties panel when a component set is selected

To identify each variant clearly for easy selection

Default: Untitled

Property type

📍 Properties panel under component set variants

Defines how variants differ and how users can switch between them

Default: Enum

Layout direction

📍 Component set frame on canvas

Organizes variants visually for easier browsing

Default: Horizontal

Common Mistakes

Naming variants with unclear or inconsistent labels

Makes it hard to find or switch variants when designing dashboards

Use simple, descriptive names like Default, Hover, Disabled consistently

Mixing unrelated changes in one component set

Leads to confusion and inconsistent design when switching variants

Keep each component set focused on one property difference like color or state

Not grouping related components into a set

Causes duplication and harder maintenance of design elements

Always create component sets for related variants to save time and keep consistency

Summary

Component sets group related design variants for easy use and consistency.

Name and organize variants clearly to make switching simple.

Keep each set focused on one property difference to avoid confusion.

Practice

1. What is the main purpose of a component set in Figma?

easy

A. To export images faster

B. To create unrelated components in one file

C. To group similar components with different states or versions

D. To add animations to components

Solution

1. Step 1: Understand component sets

   Component sets group similar components that have different states or versions, like buttons with different colors or sizes.

2. Step 2: Identify the main purpose

   This grouping helps keep designs consistent and easy to update across the project.

3. Final Answer:

   To group similar components with different states or versions -> Option C

4. Quick Check:

   Component sets = group similar components [OK]

Hint: Component sets group variants of one element type [OK]

Common Mistakes:

• Thinking component sets are for unrelated components
• Confusing component sets with export tools
• Assuming component sets add animations

2. Which of the following is the correct way to name variants inside a component set in Figma?

easy

A. Button1 and Button2

B. Primary-Hover and Primary-Default with dashes

C. HoverState and DefaultState without slashes

D. Primary / Hover and Primary / Default

Solution

1. Step 1: Understand variant naming conventions

   Figma recommends using clear variant names separated by slashes to indicate states, like "Primary / Hover".

2. Step 2: Compare options

   Options without slashes or with generic names like "Button1" are less clear and not best practice.

3. Final Answer:

   Primary / Hover and Primary / Default -> Option D

4. Quick Check:

   Use slashes for variant names [OK]

Hint: Use slashes to separate variant names clearly [OK]

Common Mistakes:

• Using generic names like Button1, Button2
• Not using slashes to separate variant states
• Using dashes instead of slashes

3. Given a component set with variants named "Size / Small", "Size / Medium", and "Size / Large", what happens if you add a new variant named "Color / Red" to the same set?

medium

A. It creates a new variant group unrelated to size, causing confusion

B. It merges with existing size variants automatically

C. It renames all variants to "Color / Red"

D. It deletes the previous size variants

Solution

1. Step 1: Understand variant grouping in component sets

   Variants in a set should focus on one property, like size or color, to keep sets clear.

2. Step 2: Analyze adding a different variant property

   Adding "Color / Red" to a size-focused set creates a new variant property, which can confuse the set's purpose.

3. Final Answer:

   It creates a new variant group unrelated to size, causing confusion -> Option A

4. Quick Check:

   Keep variant sets focused on one property [OK]

Hint: Keep variant sets focused on one property [OK]

Common Mistakes:

• Assuming variants merge automatically
• Thinking variants rename others
• Believing variants delete previous ones

4. You created a component set but notice that some variants have inconsistent naming like "Primary-Default" and "Primary / Hover". What is the best way to fix this?

medium

A. Rename all variants to use consistent slash-separated names

B. Delete the variant with the dash and recreate it

C. Ignore the inconsistency as it does not affect usage

D. Merge the variants into one component

Solution

1. Step 1: Identify naming inconsistency problem

   Inconsistent variant names cause confusion and make it harder to use the component set properly.

2. Step 2: Apply best practice for naming

   Renaming all variants to use consistent slash-separated names improves clarity and usability.

3. Final Answer:

   Rename all variants to use consistent slash-separated names -> Option A

4. Quick Check:

   Consistent naming improves component set clarity [OK]

Hint: Fix variant names to use consistent slashes [OK]

Common Mistakes:

• Deleting variants unnecessarily
• Ignoring naming inconsistencies
• Merging variants incorrectly

5. You have a button component set with variants for size (Small, Medium, Large) and state (Default, Hover, Disabled). What is the best practice to organize these variants in Figma?

hard

A. Create separate component sets for size and state variants

B. Use two variant properties named "Size" and "State" with clear values for each

C. Combine size and state into one variant property with all combinations

D. Use generic names like "Variant1", "Variant2" for all variants

Solution

1. Step 1: Understand variant properties in component sets

   Figma allows multiple variant properties to organize variants clearly, such as "Size" and "State".

2. Step 2: Apply best practice for organizing variants

   Using two variant properties with clear values keeps the set manageable and easy to use.

3. Final Answer:

   Use two variant properties named "Size" and "State" with clear values for each -> Option B

4. Quick Check:

   Use multiple variant properties for clarity [OK]

Hint: Use multiple variant properties for complex variants [OK]

Common Mistakes:

• Creating separate sets for related variants
• Combining all variants into one property
• Using unclear generic variant names