How to create component variants on Figma

intermediate 8 min read Updated 2026-03-18

Quick Answer

Component variants in Figma allow you to create multiple versions of a component with different properties like states, sizes, or styles. You create variants by combining multiple components into a variant set and defining properties that control their differences.

Try Figma Full Figma Review

Prerequisites

Basic knowledge of Figma interface
Understanding of components in Figma
Knowledge of design properties like colors and states
Familiarity with the Properties panel

Step-by-Step Instructions

Create your base components

Start by creating individual components for each variation you want to include. For example, create separate components for a button's default, hover, and pressed states. Select each frame and press Ctrl+Alt+K (Windows) or Cmd+Option+K (Mac) to convert them into components.

Name your components descriptively (e.g., 'Button Default', 'Button Hover') to make organizing variants easier.

Select all component variations

Hold Shift and click on each component you want to combine into variants. Make sure all selected items are components (they should have the diamond icon). You can also drag to select multiple components at once.

Combine into component set

With all components selected, right-click and choose Combine as variants from the context menu. Alternatively, you can click the Combine as variants button in the toolbar that appears when multiple components are selected. This creates a component set with a purple border.

The component set will automatically be named based on your selected components.

Configure variant properties

Select the component set and look at the Properties panel on the right. Click Add property to create custom properties like State, Size, or Type. Choose the property type: Variant (dropdown options), Boolean (true/false), Instance swap, or Text.

Use descriptive property names that match your design system terminology.

Assign property values to each variant

Click on each individual variant within the component set. In the Properties panel, set the appropriate values for each property. For example, set one variant's State property to Default and another's to Hover. Each variant should have unique combinations of property values.

Keep property values consistent and follow a naming convention across your design system.

Organize variant layout

Arrange your variants within the component set by dragging them to logical positions. Variants with similar properties should be grouped together. The layout helps team members understand the relationships between different states and variations.

Use a grid layout with states as rows and sizes as columns for better organization.

Test your component variants

Create instances of your variant component by dragging it from the Assets panel or copying an existing instance. Select any instance and use the Properties panel to switch between different variants. Verify that all properties work correctly and display the expected variations.

Create a test page to document all possible variant combinations for your team.

Publish and document variants

If working in a team library, click Publish changes to make your variants available to other files. Add descriptions to your component set explaining when to use each variant. Update your design system documentation to include the new variant properties and their use cases.

Include usage examples and dos/don'ts in your component description for better adoption.

Common Issues & Troubleshooting

Cannot combine components as variants

Make sure all selected objects are components (not frames or groups). Convert frames to components first using Ctrl+Alt+K or Cmd+Option+K.

Variant properties not showing up

Ensure you've selected the entire component set (purple border), not an individual variant. The Properties panel only shows variant controls when the component set is selected.

Instances not updating when switching variants

Check if the instance has been detached from the main component. Look for the component icon in the Properties panel - if it's missing, the instance is detached and won't reflect variant changes.

Missing variants in the dropdown

Verify that each variant has unique property value combinations. Duplicate combinations will cause variants to be hidden. Also check that all variants are properly contained within the component set boundary.

Prices mentioned in this guide are pulled from current plan data and may change. Always verify on the official Figma website before purchasing.

Visit Figma View Figma Pricing