How to create and use components and variants in Figma

1. What are components, variants and instances?

1.1 Components

The components are reusable design elements in Figma. They can be used to create consistent and uniform user interfaces (UIs). For example, if you need to create multiple buttons in your UI, you can create a button component and reuse it in multiple places in your project. This allows you to maintain UI consistency and make future changes easier, because you only need to update the component once to make it apply to the entire UI.

1.2 Variants

Variants are modified versions of a component. They can be used to display UI elements differently depending on the state or condition. For example, you can create one variant of a button for the active state and another for the inactive state.

1.3 Bodies

The authorities are copies of a component, spread over your design. They are directly linked to the main component and any modification made on the main component will be applied directly to each of the instances. You can customize the instances by using the different properties of the variants.

By using Figma components, variants and instances, you can create more efficient and flexible UIs, as you can easily update and reuse UI elements without having to recreate each time. This can save you time and effort when creating complex UIs.

2. Create a component

1. Select the design element you want to turn into a component. This element can be any design element in Figma, such as a rectangle, a circle, a text, a UI element you have designed, etc.
2. In the toolbar, click on the "Create component" button.
3. You can now retrieve your component from the layers panel, and use it by dragging and dropping it into your UI. You can also reuse it in other Figma projects by sharing it in your Figma library.

It is important to note that any changes made to a component will apply to all instances of that component in the UI. This means that if you change the main component, all instances of the component in the UI will be updated accordingly. This can be useful when you want to make quick and consistent changes to the UI, but if you want to customize your instances you will have to create "properties": Text, Instance Swap, Boolean

3. Create variants

3.1 Add a variant to your component

1. Select the component for which you want to create a variant. You can do this by clicking on the component instance in the UI or from the Layers panel.
2. In the"Add variant" toolbar.
3. Give a name to this variant from the right bar in"Current variant". This allows you to separate the variants from each other.

Once you have created your variant, you can add several property types to dissociate and customize them on your Figma project.  

Unlike components, changes made to a variant will only apply to that variant of the component. This means that you can use variants to display UI elements in a custom way based on state or condition without affecting other instances of the component in the UI.

3.2 Adding a "Text" property

The "Text" property allows you to customize a text element on a component variant. You will be able to modify the text of all your instances (the variants distributed on your UI), according to the situation.

1. Select your component
2. From the right panel, section "Properties" click on "Create new property".
3. Click on "Text".
4. Give your new property a name and set the default value
5. Select the text area of a variant
6. Go to the right panel, section "Content", click on the icon "Apply text property" and then connect the property you just created.

You can now customize the text of each of your instances from this new property.

3.3 Adding an "Instance Swap" property

The "Instance Swap" property allows you to integrate other types of components in your variants. For example, you can connect an icon of your component to a database of components "Icons". This will allow you to customize the icon of your variants by easily retrieving them from the icon database.

1. Select your component
2. From the right panel, section "Properties" click on "Create new property".
3. Click on "Instance Swap
4. Give a name to your new property and select the component you want to connect
5. Select the component you have connected to your variants
6. Go to the right panel and connect the property you just created.

You can now customize each of your instances by retrieving elements from another component bank.

3.4 Add a "Boolean" property

The "Boolean" property allows you to add a possibility to show or hide an element of the component. For example, if in some cases you want to have an icon on a button and in other cases you want to hide it.

1. Select your component
2. From the right panel, section "Properties" click on "Create new property".
3. Click on "Boolean".
4. Give a name to your new property and select a default value (will be assigned to all variants at first): True or False
5. Select the item you wish to show or hide
6. Go to the right panel and connect the property you just created.

You can now use the On/Off toggle on each of your components to show or hide the element.

4. Add an Instance

You can easily add copies of your main component, also called "Instance" from the Layers panel (left). Select the component and drag and drop it onto your Figma. 

Go further with our FREE Figma & Webdesign Training