How to Create a Component Set in Figma: Step-by-Step Guide

To create a component set in Figma, first select multiple related components, then right-click and choose Create Component Set. This groups them into a single set with variants, making it easier to manage design variations like states or sizes.

Syntax

Creating a component set in Figma involves selecting components and using the context menu to group them as variants. The main steps are:

• Select components: Choose two or more related components.
• Create Component Set: Right-click and select Create Component Set or use the toolbar button.
• Manage Variants: Use the right panel to name and organize variants by properties like State or Size.

text

Select multiple components > Right-click > Create Component Set

Output

A new component set containing the selected components as variants

Example

This example shows how to create a button component set with two variants: Default and Hover.

text

1. Draw two button components with different styles (e.g., normal and hover).
2. Select both buttons by holding Shift and clicking each.
3. Right-click on the selection.
4. Choose 'Create Component Set'.
5. In the right panel, rename the variant property to 'State' and set values to 'Default' and 'Hover'.

Output

A component set named 'Button' with two variants: 'State=Default' and 'State=Hover'

Common Pitfalls

Common mistakes when creating component sets include:

• Selecting only one component instead of multiple, which creates a single component, not a set.
• Not naming variant properties clearly, making it hard to understand differences.
• Mixing unrelated components in one set, which confuses usage.

Always select related components and use clear variant names.

text

Wrong:
Select one button > Right-click > Create Component Set

Right way:
Select multiple related buttons > Right-click > Create Component Set

Quick Reference

Action	Description
Select Components	Choose two or more related components to group
Create Component Set	Right-click selection and pick 'Create Component Set'
Name Variant Properties	Use clear names like 'State' or 'Size' for variants
Use Variants	Switch between variants easily in design instances

Key Takeaways

Select multiple related components before creating a component set.

Use clear variant property names to organize your component set.

Avoid mixing unrelated components in one set to keep designs clean.

Right-click and choose 'Create Component Set' to group variants quickly.

Component sets help manage design variations efficiently in Figma.