How to Create Variants in Figma: A Designer’s Guide

A file with eleven separate button components is the kind of file nobody wants to inherit. Variants clean that up, and the setup takes a few minutes once you know where Figma put the controls.

Figma variants group multiple states of one design element, a button’s default, hover, and pressed looks for instance, into a single switchable component set. Six entries in the assets panel become one.

Teams maintaining a shared library depend on this. Every state of one UI element sits in a single place instead of drifting across a file as five or six disconnected components that slowly stop matching each other.

One thing worth knowing before you start hunting for buttons that aren’t there: Figma moved the control for adding a new variant out of the toolbar and into the right sidebar with the UI3 interface introduced at Config 2024. Its support team still answers questions about the switch today (Figma, 2024).

What Are Variants in Figma?

Ten button components scattered across a page collapse into one component set that a designer flips through from a single properties panel. That’s the whole idea, and it’s why variants caught on so fast.

The feature groups multiple states of one element into a switchable set. Default, hover, pressed, disabled, all living together under one name.

Sketch designers solved a version of this with symbol overrides for years. Figma rolled variants out as a dedicated feature in 2020, and it has been the standard way to group component states since.

A variant set is still built from ordinary components underneath, so it helps to be comfortable with the basics of Figma components before layering variants on top.

What Is a Component Set?

You can spot one on the canvas before clicking anything. A component set carries a dashed purple border where a normal component gets a solid blue one, and the layers panel swaps the plain diamond icon for a grid or diamond marker. Select it and the right sidebar lists every variant property attached to the set.

Figma’s own documentation confirms this dashed purple border is how the app marks a component set apart from a regular component.

Component sets get more useful as a file grows, turning scattered pieces into one group that stays easy to find and easy to hand off once a team formalizes things into a shared design system.

How Are Variants Different From Component Properties and Figma Variables?

Component properties is the umbrella term. Variant sits underneath it alongside boolean, instance swap, and text, which is exactly why the two names get thrown around as if they mean the same thing.

Figma Variables belongs to a different system altogether. It stores values like colors and spacing across modes and never touches which layers show.

Figma expanded components with boolean, instance swap, and text properties at its Config 2022 conference, two years after variants first shipped.

Figma Variables, released in 2023, works alongside variants rather than replacing them. A design token can feed the same button component that variants already control.

The distinction matters most at handoff. Developers reading Figma’s variables system expect tokens, not layer swaps, and mixing the two up slows a design system down.

How Do You Create Variants in Figma, Step by Step?

Build the states first, combine them second. That order isn’t a preference. Figma refuses to combine anything that isn’t already a component, which catches almost everyone the first time.

Once the base components exist the whole thing takes minutes, and it rarely needs redoing later if you settle on a naming convention early.

1. Build each state as its own component, so a button gets a default, a hover, and a pressed version
2. Select every component that belongs in one set, holding shift to add each one
3. Run Combine as Variants from the right-click menu, or use the toolbar button that appears once you have a selection
4. Open the properties panel on the new component set and confirm it built the way you expected
5. Rename the default property and its values so each variant reads clearly

Turning a frame into a component takes Ctrl+Alt+K on Windows or Cmd+Option+K on Mac. Skipping that step is the single most common reason a selection refuses to combine.

A button makes a good first attempt, since its states map onto one property cleanly. A basic Figma button build gives you the components to combine right away.

Building the components themselves follows the same logic covered in a guide to making Figma components, so that part shouldn’t feel unfamiliar.

What Property Types Can a Variant Set Use?

Choosing between variant, boolean, instance swap, and text is what keeps a library lean instead of bloated. Reach for a variant every time and the set balloons. Reach for a boolean when a variant was the right call and you end up with layers fighting each other.

Mixing them well separates a tidy library from one nobody wants to open. Worth checking wider component best practices once the basics click.

Yummygum, a digital design agency, ran an internal workshop rolling these property types out specifically to shrink oversized variant sets in its own design system work.

Variant Property

A variant property switches an entire component’s layer set at once, so default, hover, and pressed all move together.

It works well for distinct visual states like a button’s default, hover, pressed, and disabled looks. Size scales fit here too, small through large versions of the same card.

The cost is multiplication. Every new value multiplies against existing properties, so three states across three sizes already means nine variants to maintain.

Boolean Property

One agency’s audit found a single Figma text component had grown to 3,360 variants before boolean properties existed to trim it down, according to a 2022 UX Collective account.

A boolean toggles one layer’s visibility, true or false, without touching anything else in the component. That’s it.

Two states is also the ceiling. A badge that needs three visibility levels needs a different approach.

Instance Swap Property

An instance swap lets a placed instance point to a different nested component from a dropdown in the properties panel. An icon button is the obvious case, since one property swaps the icon inside without touching the button frame around it.

• Icon sets inside buttons or list items
• Avatar placeholders that need to swap between real photos and initials

What it can’t do is reach into a nested component set and swap between that component’s own variants. Whole components only.

Text Property

Editable content, nothing more.

A text property exposes a layer’s copy in the properties panel, so anyone placing an instance can change the label without opening the component itself.

Content is the limit. Font size, color, or weight still needs a variant or a boolean layered on top if those have to shift too.

How Do You Name Variant Properties and Values?

Figma reads a Property=Value format from each variant’s layer name, so a button state variant reads State=Hover behind the scenes.

Get this right up front and you skip a rename pass later. The properties panel pulls its labels straight from these names.

What goes wrong is usually one combined property doing several jobs, a Style property holding values like Primary Large and Secondary Small crammed together. Separate ideas want separate properties. A Type property with Primary and Secondary, plus a Size property with Small and Large.

Figma’s own guidance backs this up directly, recommending individual properties for individual differences instead of one property covering everything.

Casing matters more than it should. State=Hover and state=hover read as two different properties to Figma, splitting what should be one dropdown into two.

How Does Figma Arrange Variants on the Canvas?

Figma builds an automatic grid for every component set, placing variants in rows and columns based on shared property values.

Add a new value to an existing property and the grid extends with a new row or column instead of dropping the variant somewhere random.

• Rows typically track one property, like State
• Columns typically track another, like Size
• Manual repositioning is possible, though it can break the logical order the grid was built to preserve

Figma’s own support team recommends splitting a component set once it passes 1,000 variants. A browser tab caps out around 2GB of active memory, according to a 2024 community forum post from Figma support staff.

Honestly, a grid that size stops being readable long before it hits any technical limit. Scanning it becomes the bottleneck.

Keeping property counts modest, two or three rather than five or six, usually keeps both the grid and the file easier to work with.

How Do Instances Override Variant Properties?

An instance placed from the assets panel switches its properties from the right sidebar without breaking its link back to the main component set.

Changing which variant an instance shows, or flipping a boolean, counts as an override. The source stays untouched.

A reset icon shows up in the properties panel whenever an instance carries an override, and clicking it returns that specific property to whatever the main component currently defines.

Editing the main component is a different move entirely. It’s worth knowing how editing a Figma component applies to every instance built from it at once, unlike a local override that stays put on one instance.

That override information carries into developer handoff too, and a Figma Dev Mode walkthrough covers how developers can see which properties changed on a given instance.

Detaching goes further, severing the connection completely so the instance stops receiving updates from the component set at all.

How Do You Prototype Between Variant States?

A change to interaction lets one variant animate directly into another, no extra frames, no duplicate screens.

Figma restricts this to variants inside the same component set, so it never appears as an option between two separate components.

The feature reached every user by October 2021 after an invite-only beta earlier that year.

Figma’s own support team still confirms the same restriction in current threads: Change to only works between variants in one set (Figma Community, 2024).

Setting it up takes three moves. Select the starting variant and open the Prototype tab, drag a connection to the target variant in the same set, then choose Change to as the interaction and pick a trigger like tap or hover.

A toggle switching from off to on is the simplest version of this. One connection, one trigger, and the switch animates on its own instead of needing two frames wired together.

Pairing it with Auto Layout keeps the animation smooth when a variant’s content changes size, like a button stretching to fit a longer label.

The wider setup for this kind of interactivity is covered in a guide on making Figma interactive, beyond just variant swaps.

No code required. Just a connection and a trigger.

When Should You Use Variants Instead of Separate Components or Variables?

Variants earn their complexity when a component has two or more visually distinct states that a team will reuse constantly. Button default, hover, disabled. That kind of thing.

Separate components and Figma Variables solve narrower problems, and picking the wrong one tends to surface months later as a bloated file or a handoff nobody can follow.

A guide on building a design system in Figma covers how variants, properties, and Variables fit together at a larger scale.

Some numbers on why any of this is worth the effort:

• Designers finished test tasks 34% faster with access to a relevant design system than without one (Figma, 2019)
• 3 in 4 of Figma’s enterprise customers use a design system across their entire organization (Figma, 2019)
• Figma Variables support up to 10 modes per collection on the Professional plan, up to 20 modes on Organization, and unlimited modes with extended collections on Enterprise (Figma, 2025)

When Separate Components Work Better

Two components that share almost nothing beyond a name don’t belong in one variant set.

Combining unrelated elements to keep the assets panel tidy usually backfires, because every property still multiplies against every other property in that set.

• A card and a modal that happen to share a color but differ in structure
• One-off elements that will never need a second state
• Components maintained by different teams, where shared ownership slows both down

When Figma Variables Work Better

Use Variables when the difference is a value rather than a layer.

• Color, spacing, or typography tokens that shift between light and dark mode
• Values that repeat across many unrelated components, not just one button or card

A single button component can reference the same Variables collection across every mode instead of needing a separate variant for each color scheme.

What Mistakes and Limits Cause Variant Sets to Break or Stop Working?

Most variant problems trace back to naming, not to Figma, and the fix is usually quick once the cause is clear.

A smaller group of problems are structural, where variants were the wrong tool regardless of how carefully they were set up.

Setup Mistakes to Avoid

Figma shows a specific message, “The properties and values of this variant are conflicting,” whenever two variants inside one set end up identical after their values are compared, regardless of how they’re named (Figma Community, 2024).

The usual triggers are two components accidentally sharing the same property and value combination, or a missing combination like Size=Large with Radius=On but no matching Rotate value. Copy-pasting a variant and forgetting to change its value before combining does it too.

Renaming one of the conflicting variants, or deleting the duplicate, clears the error immediately.

Structural Limits Where Variants Are the Wrong Tool

Variants multiply. That’s the limit most teams miss.

Every new property value multiplies against every existing property in the same set, so a component with four properties at three values each isn’t twelve variants, it’s eighty-one.

• Data-heavy components like charts or tables, where nested instance swaps handle configuration better than dozens of near-duplicate variants
• One-off marketing layouts that will never repeat, where a single component wastes less setup time
• Content that changes per user or per session, which belongs in code, not in a static variant set

None of these are really about variants failing. They’re about matching the tool to a job it was never built for.

How Do You Publish and Hand Off Variants to a Team?

Publishing turns a local component set into a library that other files and other designers can pull from, keeping every instance connected to one source.

Plan tier decides who gets to publish, which catches teams moving from a personal file into a shared one.

Free Starter teams can create styles, components, and variables for their own use. Publishing any of them to a shared library, styles included, needs at least a Professional, Education, or Organization plan, according to Figma’s help center.

The fuller breakdown of what each tier unlocks sits in a comparison of Figma free vs professional.

Publishing to a Shared Library

Open the file holding the finished component set, click the library icon in the toolbar, and pick which components, styles, or variables to include. Publish, then confirm in any file that will consume the library.

Every instance built from the published set updates the next time its file opens, so a color or spacing fix reaches every file using it without anyone editing those files directly.

Squarespace’s design platform team used this exact mechanism to retire an older shared library, tracking adoption of the replacement version through Figma’s own library analytics before switching over fully (Figma, 2019).

Handing Off to Developers in Dev Mode

Dev Mode surfaces every property name and value on a selected instance, so a developer sees the same State=Hover label a designer used when building the variant.

What shows up there:

• The exact property names and current values on the selected instance
• Generated code snippets that reference those same variant and boolean names
• Which properties carry local overrides versus which ones use the main component’s defaults

Those snippets are the starting point for turning a Figma file into code, though most teams still adjust them by hand.

Consistent naming from earlier pays off here more than anywhere else.

FAQ on How To Create Variants In Figma

What Keyboard Shortcut Turns a Frame Into a Component?

Ctrl+Alt+K on Windows and Cmd+Option+K on Mac converts a selected frame, group, or layer into a component.

Figma also puts a Create Component icon in the toolbar and right sidebar for the same action, so the shortcut is optional.

Are Variants Available on Every Figma Plan?

Yes. Creating components and variants works on the free Starter plan the same as on paid tiers.

The plan only restricts publishing a component set to a shared team library, which needs at least a Professional plan.

Can You Detach a Variant Instance From Its Component Set?

Yes, through right-click, Detach Instance.

The result becomes a plain group of layers with no properties panel, no variant switching, and no connection back to the main component set. Detaching is permanent once saved.

Does a Published Variant Update Automatically Across a Team Library?

Not silently. Figma shows a Review and accept library updates notification in files that use the library.

Someone has to approve the change before instances update, rather than it pushing automatically in the background, according to Figma’s help center.

What Should You Check First When How To Create Variants In Figma Stops Working?

Variants that break down almost always trace back to one cause, a naming conflict inside the component set. Not a wrong property type, not a missing Auto Layout setting, not a plan restriction blocking publishing.

Checking property names and values first costs under five minutes and rules out the most common failure before anything else gets touched.

• Naming and value conflicts inside the component set
• Duplicate or missing property combinations across the grid
• Plan tier, if publishing rather than local editing is the actual blocker

That order trades a short manual check for the time otherwise lost filing a support request over a naming fix available in the properties panel itself.

Once a set is stable, resizing behavior across variants is worth confirming next. A dedicated guide to Figma Auto Layout covers how spacing and sizing hold up as real content replaces placeholder text.