Figma Components and Variants — Creating Them, Component Properties, Slots, and Naming

Copy a button, tweak the fill, copy it again for the disabled state — and now three near-identical components are drifting apart. Or you reach for a variant to handle “with icon” and “without icon,” and the set doubles overnight. Components and variants are where a Figma file either stays maintainable or quietly turns into a pile of lookalikes.

A variant groups the states and types of one component into a single set. Default / Hover / Disabled, or Small / Medium / Large, stop being separate components and become options on one.

This guide walks through creating a component → combining variants → choosing properties → naming → using instances, in that order. It also covers slots, a more recent addition that changes when a variant is the right tool at all.

What you’ll get from this article

• How main components, instances, and variants relate to each other
• How to create a component, and the shortcut for it
• How to combine several components into one set
• When to use each of the five component properties (variant / boolean / instance swap / text / slot)
• Naming rules, and how to shrink a set that has grown out of hand

📝 Introduction — Three places variants trip people up

Variant problems tend to fall into three buckets. Each has a different fix, so it helps to identify yours first.

Scenario A: You don’t know how to manage state differences

Default, Hover, and Disabled all exist as separate components. Combining them into variants solves this, and the first half of this article covers how.

Scenario B: You can’t tell whether something should be a variant at all

You try to express “has an icon” or “swap the contents” as variants, and the set explodes combinatorially. This is a property selection problem — a boolean or a slot is often the better fit.

Scenario C: The set has grown unmanageable

Dozens of variants in one set, and no one can tell which to pick. This is usually fixed by naming and by revisiting the property design.

The sections below follow that order: creating (A) → property design (B) → naming and cleanup (C).

🧭 Main components, instances, and variants

The terms sit close together and are easy to mix up, so here’s how they relate.

The official term is main component. Older tutorials often say “master component” — same thing, different vintage.

🧱 Creating a component

The steps

1. Select the element or frame you want to turn into a component
2. Press Option + Command + K (Ctrl + Alt + K on Windows) — or use the right-click menu or the toolbar
3. A purple diamond icon appears, and it becomes a main component

Copy and paste that main component, or drag it in from the Assets panel, and what you place is an instance — not another main component.

Deciding what deserves to be a component

When in doubt, ask whether the same appearance will be used more than once. Componentizing something that only appears in one place adds an item to maintain without buying you anything.

Start with the usual suspects — buttons, input fields, cards, icons — and expand when you hit a real need.

🎛️ Creating variants (Combine as variants)

There are two routes: combining components you already have, and adding variants to an existing set.

Route 1: Combine existing components

Faster when the state differences already exist as separate components.

1. Select the components you want to group
2. Click Combine as variants in the right sidebar
3. They collapse into a single component set

Route 2: Add variants to a set

Use this once the set exists.

1. Select the main component (or the set)
2. Choose Add variant from the right sidebar or the right-click menu
3. Edit the contents and property values of the new variant

Clean up property names and values

Right after combining, property names often default to something like Property 1. Rename them to describe the axis they represent — State, Size, Type — while the set is still small.

🔩 The five component properties

Variants aren’t the only way you can make part of a component configurable. There are five property types, and spreading the work across them is what keeps combinations under control.

A boolean controls visibility, so instead of keeping “button with icon” and “button without icon” as two variants, one boolean property covers both. That single substitution halves the set.

🔀 Slots vs. variants — how to choose

A slot defines an area whose contents are left open — for places where you can’t know in advance what will go inside.

The dividing question is how much freedom the contents need.

🏷️ Naming and grouping

Naming is what starts to matter once a set grows. Figma treats a forward slash (/) in a name as a hierarchy, so naming alone organizes the Assets panel.

Group with slashes

Name things Button/Primary and Button/Secondary and they nest under a Button group in the Assets panel. Past a few dozen components, this is the difference between finding something and rebuilding it because you couldn’t.

Keep property values consistent

Within a set, keep property names and their values written the same way.

• Property names: describe the axis — State, Size, Type
• Values: use a consistent capitalization, such as Default / Hover / Disabled
• Don’t let Small and small coexist

Inconsistent values produce near-duplicate options in the instance dropdown, which is exactly where people pick the wrong one.

A cleanup pass for oversized sets

1. Can any axis become a boolean? (Anything that’s just on/off should be)
2. Can any area become a slot? (Anywhere the contents are open-ended)
3. Is this state actually used? (Delete variants nobody places)

Run those three passes and you’ll usually see the set shrink noticeably.

🔁 Switching on the instance side

Whatever you set up on the component side appears in the right sidebar when an instance is selected. From there it’s just switching.

• Variant → pick the state from a dropdown
• Boolean → toggle the layer on or off
• Text → type the new label
• Instance swap → choose the replacement from a dropdown

Consumers never needing to touch the main component is a good sign the design is done. The opposite — regularly having to detach an instance to get something done — usually means a property is missing.

For the mechanics of detaching, and how it differs from deleting, see How to Detach a Component in Figma.

🔄 Reworking components after an XD migration

On files migrated from Adobe XD, you start with XD’s components and states already present as Figma components, and shape them from there.

You’ll save rework by deciding the property axes first and recombining the variants afterwards. If you add variants straight onto the migrated state, the count grows while property names and values drift apart.

For how XD components and states map onto the Figma side, see Migrating XD Components and Symbols to Figma Components.

If you still have XD files that haven’t moved yet, convert them with Pixel Fine Converter first, then work through the design steps above.

❓ Frequently asked questions

Q: What’s the shortcut for creating a component?

Option + Command + K (Ctrl + Alt + K on Windows). Select an element and press it to create a main component.

Q: How do I create variants?

Select the components you want to group and click Combine as variants in the right sidebar. To extend a set that already exists, use Add variant.

Q: When should I use a variant instead of an instance swap?

Variants for fixed states and types; instance swap when you want to replace nested contents from a list of candidates. An axis that’s purely “with / without,” such as an optional icon, is cleaner as a boolean property.

Q: My set has too many variants — where do I start?

Move on/off axes to booleans and open-ended areas to slots, then delete the variants nobody actually places.

Q: Is a “master component” different from a “main component”?

They’re the same thing. Main component is the current official term.

Q: Are there naming conventions for variants?

Use forward slashes (/) to group items in the Assets panel. Name properties after the axis (State, Size), and keep the values written consistently so the instance dropdown stays unambiguous.

Q: Some parts can only be edited after detaching the instance

That usually means the component is missing a property. Text should be a text property, and nested swaps an instance swap property, so nothing requires detaching.

🎯 Wrapping up

Variants group the states and types of one component into a single set.

Key takeaways

• The official term is main component (same thing as “master component”)
• Create with Option + Command + K (Ctrl + Alt + K on Windows)
• Combine with Combine as variants, extend with Add variant
• Five properties — variant, boolean, instance swap, text, slot
• Move on/off axes to booleans — the single most effective way to stop a set from doubling
• Move open-ended areas to slots — using variants for this is no longer the recommended approach
• Group with slashes and keep property values written consistently

Before adding another variant, ask whether a boolean or a slot could express it instead. More often than not, the set ends up much smaller than expected.

If you still have XD files not yet in Figma, convert them with Pixel Fine Converter first, then work through the design steps in this article.

Related pages

• How to Detach a Component in Figma — unlinking instances, and how to avoid needing to
• Migrating XD Components and Symbols to Figma Components — moving component structure over from XD
• Figma Auto Layout — Vertical, Horizontal & Grid Flows, Wrap, Hug and Fill Explained — building what goes inside a component
• Bringing XD Design Systems into Figma Libraries — running components as a shared library
• How to Convert Adobe XD to Figma — A Step-by-Step Migration Guide — the end-to-end migration workflow