Free · 8 min read

Figma components and variants: how to create and use them

How components work in Figma: main components and instances, overrides, variants, component properties and nested components. Five steps with exercises.

  • How a main component differs from an instance
  • How to make a button with variants without a hundred copies
  • When to use a variant and when a component property
Get feedback on your components
  • Free
  • 1,504 members
  • Join in 1 click

Five steps to master components

  1. 1

    Step 1

    Create a component and place instances

  2. 2

    Step 2

    Overrides: what you can change in an instance

  3. 3

    Step 3

    Build a button with variants

  4. 4

    Step 4

    Add component properties instead of extra variants

  5. 5

    Step 5

    Build a larger component from smaller ones

1,504
community members
8,915
messages with questions since July 2024
9
design games since September 2024
759
people wrote in the chat

This guide is for you if you

  • Copy elements with Ctrl + C

    The same button lives in your file in 40 copies, and there's no way to recolor them all at once.

  • Have made your first component

    But you're not sure what you can change in an instance and what only in the main component.

  • Get lost in variants

    You've ended up with too many buttons: one for every size, color, state and icon.

In short

  • A component is an element you create once and then use as instances: change the main component and every copy in the file updates.
  • In an instance you can change text, fill, stroke and size without losing the link to the main component.
  • Adding, removing and reordering layers is only possible in the main component.
  • Variants combine similar components into one set: type, size, state.
  • Component properties (boolean, text, instance swap, slot) remove unnecessary variants.

Five steps to master components

  1. 1

    Step 1

    Create a component and place instances

    Build a button with auto layout: a fill, text and padding. Select it and click Create component in the right sidebar, or press Option + Cmd + K (Mac) / Ctrl + Alt + K (Windows). It's now a main component: in the layers panel it gets the purple component icon. Create a few instances, copies linked to the main component:

    • duplicate the main component: Cmd + D (Mac) or Ctrl + D (Windows);
    • or drag the component onto the canvas from the Assets tab (Option + 2 / Alt + 2);
    • or press Shift + I to quickly find and insert a component from the actions menu.

    💡 Change the fill or corner radius in the main component and watch every instance update. That's the whole idea of components.

  2. 2

    Step 2

    Overrides: what you can change in an instance

    Buttons in a layout have different labels, so instances need small changes. These are called overrides: in an instance you can change text, fill, stroke and size, and the link to the main component stays. But some things can't be changed because they belong to the component's structure:

    • adding, removing or reordering layers inside an instance;
    • changing the constraints of nested layers;
    • if a change in an instance works and you want it everywhere, choose Push overrides to main component; this works when the main component is in the same file;
    • if you no longer need the overrides, reset them to match the main component.

    💡 Detach instance (Option + Cmd + B / Ctrl + Alt + B) turns an instance into a regular frame. It won't get updates any more, and it can't be reconnected to the component. If you detach by accident, press Cmd / Ctrl + Z straight away.

    Show your variant set

    A fresh pair of eyes quickly spots extra variants or unclear property names. In the community people share files and give feedback. It's free to join.

    Get feedback on your components

    Free. 1,504 designers are already in the community.

  3. 3

    Step 3

    Build a button with variants

    Instead of separate "blue button", "gray button" and "blue button on hover" components, make one component set with variants. Create several button components and name them with slashes, such as Button/Primary/Default and Button/Primary/Hover, select them and click Combine as variants. Figma creates properties called Variant, Property 2 and so on; rename them to something clear:

    • Type: Primary, Secondary;
    • State: Default, Hover, Pressed, Disabled;
    • Size: Large, Small.

    💡 Each variant must be a unique combination of values, or Figma shows a conflict. You don't need every possible combination, only the ones you actually use. The variant in the top-left corner of the set becomes the default.

  4. 4

    Step 4

    Add component properties instead of extra variants

    If you make a separate variant for a button with and without an icon, the number of variants doubles. That's what component properties are for. You create them in the Properties section of the right sidebar on a main component or set, then apply them to nested layers:

    • Boolean: show or hide a layer, such as an icon;
    • Text: the button label, edited right in the instance's right sidebar;
    • Instance swap: a nested component that can be replaced, such as a "plus" icon for a "cart" icon; you can set preferred instances to swap to;
    • Slot: a flexible area where you can add and rearrange any content in an instance without detaching it.

    💡 Keep prototypes in mind: a prototype connection can only link two separate objects. If you merge the states you want to transition between into one boolean property, you can't animate between them. Keep variants for interactive states.

    Instance not behaving? Ask the community →
  5. 5

    Step 5

    Build a larger component from smaller ones

    Now build a product card from nested components: a photo, name, price, your button and a badge. Make the card itself a component with variants too, such as Status=Available and Status=Sold out. Check how it all works together:

    • in every card instance you can switch the button variant without opening the main component;
    • changing the button's main component updates the buttons in every card;
    • if you keep wanting to detach the card to add something, you may need a slot.

    💡 Share the file in the community and ask someone to check the component: "Is it clear from the right sidebar what can be changed in this card?" If they find all the settings without explanation, the component is well built.

You're not alone with these questions

We counted what people ask about most in our community. Figma is in the top three, and components and variants are a topic where the practical questions never run out.

You're not alone with these questions
Learning and courses938
Portfolio and case studies705
Figma647
AI tools380
Jobs and vacancies314
UX research131

Messages by topic in Spaceberry Community, July 2024 — November 2026. Keyword search.

Practice with a deadline and live feedback

The best teacher is a task with a deadline that other people see. That's why the community regularly runs design games: the same brief for everyone, a deadline and a vote.

  • Design game · January 2026

    NAOMA website redesign

    The academy's home page through the eyes of an applicant, a student and a teacher. Three finalists; the community chose the winner.

  • AI challenge · May 2025

    A landing page made by AI

    Logo, copy and visuals made only with AI tools. Four entries, an anonymous vote, and participants shared their prompts.

  • Workshop · April 2026

    Figmosha: AI in Figma

    The tool's author showed how to generate interfaces in Figma and analyze a design system.

Get feedback on your components

Free. 1,504 designers are already in the community.

How to join: 1 minute

  1. 1

    Tap the button

    Telegram opens with the Spaceberry community.

  2. 2

    Join

    It's free: all you need is a Telegram account.

  3. 3

    Introduce yourself

    Say where you're starting from and ask your first question.

Questions and answers

Didn't find your answer? Ask it in the community.

How is a component different from a group or a frame?

A group or frame is just a container for layers. A component is a special frame whose copies (instances) are linked to it: changes to the main component automatically reach every instance in the file. So anything that appears more than once in a layout is worth making a component.

When should I use a variant and when a component property?

Use variants for different states, types and sizes, when the component noticeably changes its look. Use properties for small settings: showing or hiding an icon, changing a label, swapping a nested icon, adding content to a flexible area. That keeps the set compact. A simple rule: if the look or behavior of the whole component changes, it's a variant; if one part is toggled or swapped, it's a property.

Can I use components on the free plan?

Yes. Components, instances, variants and component properties are available on all plans, including the free Starter plan. You need a paid plan to publish components as a library and use them in other files. For learning and first projects you don't need that: keep your components on a separate page of the same file.

How do I make components interactive in a prototype?

You connect variants of the same set to each other, such as Default and Hover, and then every instance behaves the same way in the prototype. For example, connect the Default variant to Hover with the While hovering trigger and the Change to action, and every button in your design reacts to hover without separate connections. More on prototypes in the guide [Figma prototype](/en/guides/figma-prototype).

Is the Spaceberry community paid?

No, Spaceberry Community is free. It's run by Spaceberry Foundation, a non-profit organization. All you need to join is a Telegram account. In the chat you can ask questions, share your work for feedback and take part in design games: the same brief for everyone, a deadline and a community vote. Conversations are in Ukrainian.

Get your components reviewed

Join 1,504 designers who learn, share their work and play design games. Show your components and find out what to improve. The community talks in Ukrainian.

Join for free
  • Free
  • 1,504 members
  • Join in 1 click

Updated · Spaceberry Foundation

Sources: