Components collection: Variants and component set fundamentals

As you build your design system, you’ll likely need components that serve the same purpose but vary in appearance. For example, you might need multiple button components with different types, sizes, and interactive states. You could create individual components for each variation, but that would quickly result in a messy and overwhelming design library.

Build component sets with variants

This is where variants come in. A variant is a specific version of a component that differs from other versions in predictable ways. When you create a variant, Figma automatically organizes it into a structured container called a component set, identified by a dashed purple border on the canvas.

Component sets use variant properties to define how variants differ from each other. You can add and customize as many properties as you need. You can even map properties and values to code components in your design system to help with the development handoff.

We recommend using individual properties to control specific, named differences, rather than one property to control multiple changes. For example, instead of creating a single “Style” property with values like “Primary Large, Secondary Small”, create separate “Type” (Primary, Secondary) and “Size” (Small, Large) properties. This approach gives users more flexibility to mix and match variations and will make your design assets easier to navigate.

Component sets become increasingly valuable as your design system grows. They transform scattered components into organized, navigable systems that help you and your team quickly find and use the right components, reducing errors and maintaining design system integrity across projects.

Check your knowledge

Additional resources

Learn more about variants with these additional resources:

• Help Center article: Create and use variants
• Help Center article: The difference between slots, instance swaps, and variants
• Community playground file: Variants