Figma Components & Variants

By the end of this lesson you will be able to turn a button into a Figma component, place instances, combine its states into variants, and add properties so teammates can configure it without breaking it.

In Components & Design Systems you learned why components matter. Now you will build them in Figma. Work in the "Clinic app" file and use the auto layout button from the last lesson.

Main components and instances

A main component is the original. An instance is a linked copy. When you change the main component, every instance updates. You can still change some things in an instance, such as its text. Those changes are called overrides.

Think of a school uniform. The school sets the design (main component). Every student wears a copy (instance). A student's name badge differs (override), but if the school changes the shirt colour, every uniform changes next term.

Step 1: create a component

1. Select your "Button" auto layout frame.
2. Press Ctrl + Alt + K (Cmd + Option + K on Mac), or click the create component icon in the toolbar at the top of the right sidebar.
3. Rename it "Button".

What you should see: the frame label turns purple and gets a four-diamond component icon. In the layers panel, its icon changes too.

Step 2: use instances and overrides

1. Open the Assets tab in the left sidebar. Your "Button" appears there.
2. Drag it onto the "Home" frame. This creates an instance (shown with a hollow diamond icon).
3. Double-click the instance's text and change it to "View reports". This is an override.
4. Now go back to the main component and change its corner radius to 12.

What you should see: the instance updates its radius to 12 but keeps the text "View reports". Overrides survive; everything else follows the main component.

Step 3: combine states into variants

A button needs several looks: primary and secondary types, and default, hover and disabled states. Instead of six separate components, put them in one component set with variants.

1. Select the "Button" main component.
2. In the right sidebar, click Add variant (a + button near the component name). A copy appears inside a dashed purple box. That box is the component set.
3. Select the component set. In the right sidebar, rename the default property "Property 1" to "State".
4. Name the first variant's value "Default" and the second "Hover". Make the Hover variant's fill slightly darker.
5. Add another variant and call its State value "Disabled". Give it a grey fill.
6. Add a second property called "Type" with values "Primary" and "Secondary". Create the secondary variants with a white fill and a purple border.

What you should see: a dashed box holding your buttons, named with pairs like Type=Primary, State=Hover. When you select an instance, the right sidebar shows two dropdowns, Type and State, to switch between them.

Variants map neatly to how developers write components. Run this example: the same button "component" receives different property values.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Variants as properties</title>
  <style>
    body { font-family: system-ui, sans-serif; padding: 24px; display: grid; gap: 16px; justify-items: start; color: #1a1a2e; }
    .controls { display: flex; gap: 16px; flex-wrap: wrap; }
    .btn { min-height: 44px; padding: 0 20px; border-radius: 8px; font-size: 16px; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; border: 2px solid #5b21b6; }
    .btn[data-type="primary"] { background: #5b21b6; color: #fff; }
    .btn[data-type="secondary"] { background: #fff; color: #5b21b6; }
    .btn[data-state="hover"][data-type="primary"] { background: #4c1d95; border-color: #4c1d95; }
    .btn[data-state="hover"][data-type="secondary"] { background: #f3ecff; }
    .btn[data-state="disabled"] { background: #d4d4dc; border-color: #d4d4dc; color: #4b5563; }
    .btn[data-icon="false"] .icon { display: none; }
  </style>
</head>
<body>
  <div class="controls">
    <label>Type <select id="type"><option>primary</option><option>secondary</option></select></label>
    <label>State <select id="state"><option>default</option><option>hover</option><option>disabled</option></select></label>
    <label><input type="checkbox" id="icon" checked> Show icon</label>
    <label>Label <input id="label" value="Book visit"></label>
  </div>
  <span class="btn" id="btn" data-type="primary" data-state="default" data-icon="true"><span class="icon" aria-hidden="true">＋</span><span id="text">Book visit</span></span>
  <script>
    const btn = document.getElementById('btn');
    document.getElementById('type').addEventListener('change', e => btn.dataset.type = e.target.value);
    document.getElementById('state').addEventListener('change', e => btn.dataset.state = e.target.value);
    document.getElementById('icon').addEventListener('change', e => btn.dataset.icon = String(e.target.checked));
    document.getElementById('label').addEventListener('input', e => document.getElementById('text').textContent = e.target.value);
  </script>
</body>
</html>

You should see controls above a purple button. Changing Type and State swaps the look, the checkbox shows or hides the icon, and the text box changes the label. These four controls are exactly the four kinds of Figma component property you will meet next.

Step 4: add component properties

Component properties are settings you expose on a component so people can customise instances safely. Figma has four kinds:

To add a boolean property for the icon:

1. Inside the main component, add a small icon to the left of the label (auto layout makes room for it).
2. Select the icon layer. In the right sidebar's Layer section, click the property icon beside the visibility setting and choose to create a boolean property.
3. Name it "Show icon".

To add a text property:

1. Select the text layer inside the main component.
2. In the Content area of the right sidebar, click the property icon and create a text property named "Label".

What you should see: when you select an instance, the right sidebar lists Type, State, Show icon and Label in one neat panel. Teammates can configure buttons without digging into layers.

Step 5: share as a library

Components become truly useful when other files can use them.

1. Put your components on a page named "Components" and give them clear descriptions.
2. Open the Assets tab and choose to publish the file as a library.
3. In another file, enable this library from the Assets tab, then drag in components.

When you later update a main component and publish again, other files get a notice to accept the update. Publishing team libraries depends on your Figma plan, so check what your plan allows.

Interactive components

Variants can also react in prototypes. On the main component set, open the Prototype tab, draw a connection from the Default variant to the Hover variant, and choose the trigger "While hovering" with the action Change to. Every instance now changes on hover in the prototype, with no extra wiring on each screen. You will practise this in Prototyping in Figma.

Common mistakes

• Making a new component for every tiny difference. Use variants and properties instead.
• Detaching instances to edit text. Text can be overridden without detaching.
• Vague variant names like "Property 1 = Variant 3". Name properties and values clearly.
• Components without auto layout. They break when labels change.

Key points

• A main component is the original; instances are linked copies that follow it.
• Overrides change things like text in an instance without breaking the link.
• Ctrl + Alt + K (Cmd + Option + K) creates a component; detaching breaks the link.
• Variants group related versions into one component set with properties such as Type and State.
• Component properties come in four kinds: variant, boolean, text and instance swap.
• Publishing a library shares components across files.

<label>Size <select id="size"><option>medium</option><option>small</option></select></label>

.btn[data-size="small"] { min-height: 32px; padding: 0 12px; font-size: 14px; }

document.getElementById('size').addEventListener('change', e => btn.dataset.size = e.target.value);