Component set best practices in Figma - Deep Dive

Overview - Component set best practices

What is it?

Component sets in Figma are groups of related design components organized together to manage variations like colors, sizes, or states efficiently. They help designers create reusable building blocks that maintain consistency across designs. By using component sets, you can switch between different versions of a component easily without duplicating work. This makes design updates faster and reduces errors.

Why it matters

Without component sets, designers would create many separate components for each variation, leading to clutter and inconsistency. This slows down design work and causes mistakes when updating styles or layouts. Component sets solve this by grouping variations logically, making it easy to maintain and scale designs. This saves time, improves collaboration, and ensures a consistent user experience.

Where it fits

Before learning component sets, you should understand basic components and how to create reusable elements in Figma. After mastering component sets, you can explore advanced design systems, auto layout, and prototyping to build interactive and scalable UI designs.

Mental Model

Core Idea

Component sets are like a wardrobe organizer that groups all outfit variations in one place for easy selection and consistent style.

Think of it like...

Imagine a wardrobe where all your shirts are hung together, but each shirt has different colors and sizes on separate hangers within the same section. Instead of searching through the whole closet, you pick the shirt style and then choose the color or size you want quickly. Component sets work the same way for design elements.

┌─────────────────────────────┐
│       Component Set          │
│ ┌───────────┬─────────────┐ │
│ │ Variant 1 │ Variant 2   │ │
│ │ (Color)   │ (Color)     │ │
│ ├───────────┼─────────────┤ │
│ │ Size S    │ Size M      │ │
│ │ (State)   │ (State)     │ │
│ └───────────┴─────────────┘ │
└─────────────────────────────┘

Build-Up - 7 Steps

1

Foundation

Understanding Basic Components

Concept: Learn what a component is and why it is reusable.

A component is a design element you create once and reuse many times. For example, a button you design can be saved as a component. When you use it multiple times, changing the original updates all copies automatically.

Result

You can create consistent elements that update everywhere when changed.

Understanding components is essential because they are the building blocks for component sets.

2

Foundation

Creating Variants in Components

Concept: Introduce the idea of variants to handle different states or styles within one component.

Variants let you group similar components with small differences, like a button in normal, hover, and disabled states. Instead of separate components, variants keep these together for easy switching.

Result

You can toggle between different styles or states inside one component group.

Variants reduce clutter and make managing multiple styles simpler.

3

Intermediate

Building Component Sets

🤔Before reading on: do you think component sets are just groups or something more? Commit to your answer.

Concept: Component sets organize variants into a single, manageable group with properties.

A component set is created by combining variants that share properties like color or size. Each variant is a combination of these properties. For example, a button component set might have 'Color' and 'Size' properties with multiple options each.

Result

You get a single component with dropdowns to select variant properties easily.

Knowing component sets are structured collections of variants helps you manage complex designs efficiently.

4

Intermediate

Naming and Organizing Properties

🤔Before reading on: do you think property names affect usability or are just labels? Commit to your answer.

Concept: Proper naming of variant properties and values improves clarity and usability.

Use clear, consistent names for properties like 'Color' or 'State' and their values like 'Primary', 'Hover'. Avoid vague names. Organize properties logically so users can find and switch variants quickly.

Result

Designers and developers understand and use component sets without confusion.

Clear naming prevents mistakes and speeds up design handoff.

5

Intermediate

Using Component Sets in Design

Concept: Learn how to apply component sets in real design projects.

Drag a component set instance onto your canvas. Use the properties panel to switch variants like color or size. This lets you test different looks without adding new components. Update the master component to change all instances.

Result

Faster design iteration and consistent updates across your project.

Using component sets actively saves time and keeps designs consistent.

6

Advanced

Managing Overrides and Nested Components

🤔Before reading on: do you think overrides in component sets affect the master or only the instance? Commit to your answer.

Concept: Understand how overrides work with component sets and nested components.

Overrides let you change text or images in an instance without affecting the master. Nested components inside sets can also have variants. Managing these carefully avoids breaking consistency or causing confusion.

Result

You can customize instances safely while keeping the main design intact.

Knowing override behavior prevents accidental design inconsistencies.

7

Expert

Scaling Component Sets in Large Design Systems

🤔Before reading on: do you think component sets scale well without planning? Commit to your answer.

Concept: Learn strategies to maintain component sets in big projects with many variants.

Use consistent property naming, limit variant combinations to necessary ones, and document usage rules. Use nested component sets for complex elements. Regularly audit and clean unused variants to keep the system manageable.

Result

A scalable, maintainable design system that supports team collaboration and growth.

Understanding scaling challenges helps avoid design debt and keeps systems healthy.

Under the Hood

Component sets work by storing multiple variants as a single master component with defined properties. Each variant is a unique combination of property values. When you select a variant, Figma dynamically renders that version by applying the chosen property values. Overrides are stored separately per instance, allowing customization without changing the master. Nested components inside sets are referenced by ID, enabling reuse and inheritance.

Why designed this way?

Figma designed component sets to reduce duplication and improve design consistency. Before sets, designers managed many separate components for each variation, which was error-prone and hard to maintain. Grouping variants under properties allows intuitive switching and better organization. This approach balances flexibility with control, supporting both simple and complex design needs.

┌───────────────────────────────┐
│        Component Set           │
│ ┌───────────────┬───────────┐ │
│ │ Property:     │ Property: │ │
│ │ Color         │ Size      │ │
│ ├───────────────┼───────────┤ │
│ │ Variant 1     │ Variant A │ │
│ │ (Primary, S)  │           │ │
│ │ Variant 2     │ Variant B │ │
│ │ (Primary, M)  │           │ │
│ │ Variant 3     │ Variant A │ │
│ │ (Secondary,S) │           │ │
│ └───────────────┴───────────┘ │
└───────────────────────────────┘

Myth Busters - 4 Common Misconceptions

Quick: Do you think changing a variant instance updates the master component? Commit yes or no.

Common Belief: Changing a variant instance will update the master component and all other instances.

Reality: Overrides on instances only affect that instance; the master component remains unchanged unless edited directly.

Why it matters: Believing otherwise can cause confusion and accidental loss of customizations or unexpected design changes.

Quick: Do you think you can create unlimited variant combinations without issues? Commit yes or no.

Common Belief: You can freely create all possible combinations of variant properties without any downside.

Reality: Too many variant combinations create complexity, slow performance, and make the design system hard to maintain.

Why it matters: Ignoring this leads to bloated files and confusion among team members.

Quick: Do you think component sets replace the need for design documentation? Commit yes or no.

Common Belief: Component sets alone are enough to communicate design rules and usage to the team.

Reality: Component sets need to be paired with documentation to explain when and how to use variants properly.

Why it matters: Without documentation, misuse of variants can cause inconsistent designs and wasted effort.

Quick: Do you think nested components inside sets behave exactly like standalone components? Commit yes or no.

Common Belief: Nested components inside sets behave the same as standalone components with no special considerations.

Reality: Nested components can have their own variants and overrides, which interact with the parent set and require careful management.

Why it matters: Misunderstanding this can cause unexpected design conflicts and harder maintenance.

Expert Zone

1

Variant property order affects how users perceive and select options; placing the most commonly changed property first improves usability.

2

Using boolean properties (true/false) for simple states reduces variant complexity compared to multiple named states.

3

Overrides on nested components can cascade unexpectedly; understanding this helps prevent accidental style breaks.

When NOT to use

Avoid component sets when variations are unrelated or too complex to manage as properties. In such cases, use separate components or design tokens for styling. Also, for highly dynamic or data-driven UI elements, consider code-based component libraries instead of static design sets.

Production Patterns

Teams use component sets to build scalable design systems with clear variant properties for colors, sizes, and states. They combine sets with design tokens for colors and typography. Regular audits prune unused variants. Nested sets handle complex UI elements like cards with buttons and icons. Documentation and naming conventions ensure smooth handoff to developers.

Connections

Design Tokens

Builds-on

Component sets often use design tokens for consistent colors and fonts, linking visual properties to code-friendly variables.

Software Component Libraries

Same pattern

Component sets in design mirror software UI component libraries where variants represent props or states, bridging design and development.

Modular Furniture Systems

Similar structure

Like modular furniture with interchangeable parts, component sets allow designers to mix and match variants to build flexible layouts.

Common Pitfalls

#1 Creating too many variant properties with many values causing complexity.

Wrong approach:

Component set with properties: Color (Primary, Secondary, Tertiary, Quaternary), Size (XS, S, M, L, XL), State (Normal, Hover, Disabled, Focused, Active, Loading).

Correct approach:

Limit properties to essential ones: Color (Primary, Secondary), Size (S, M, L), State (Normal, Hover, Disabled).

Root cause:

Misunderstanding that more variants always mean better flexibility, ignoring maintenance and usability costs.

#2 Overriding master component styles directly in instances causing inconsistency.

Wrong approach:

Changing colors or fonts directly on an instance instead of editing the master component or using variants.

Correct approach:

Use variant properties or edit the master component to apply consistent style changes.

Root cause:

Not understanding the difference between instance overrides and master component edits.

#3 Using vague or inconsistent property names leading to confusion.

Wrong approach:

Properties named 'Type', 'Style', and 'Mode' used interchangeably without clear meaning.

Correct approach:

Use clear, descriptive names like 'Color', 'Size', 'State' consistently across component sets.

Root cause:

Lack of naming conventions and design system guidelines.

Key Takeaways

Component sets group related design variants under clear properties to simplify selection and maintenance.

Proper naming and limiting variant combinations keep component sets usable and scalable.

Overrides allow safe customization of instances without changing the master component.

Component sets bridge design and development by organizing reusable UI elements efficiently.

Scaling component sets requires planning, documentation, and regular cleanup to avoid complexity.