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.