All about Figma components

Many factors make Figma the most powerful and popular web design tool today.
‍

For example, its ease of use, ergonomics, community, and available plugins come to mind.

However, one of Figma's biggest advantages is that this tool is truly conceived and designed for digital product design.
 

As a result, it offers numerous optimized features to assist designers and developers in their work.
‍

The creation and use of components is one of Figma's most useful, differentiating, and comprehensive features.
‍

If you want to discover Figma, check out our article explaining what Figma is and how to use the tool effectively, or our top tips for getting started with Figma.
‍

Now that you have this knowledge and these skills, we can explore together what Figma components are, why to use them, and finally, how to use them.

‍
‍

‍

‍

I. What is a Figma component?

‍

‍

In Figma, a component is a visual element that you have defined as such in order to create variations and reuse it multiple times.
‍

In other words, when you create a visual element that you want to keep readily available or for which you want to create variations, it's beneficial to turn it into a component.
‍

In your Figma workspace, any layer (frame) or visual element (object) can be turned into a component.
‍

The component feature is directly integrated into Figma and is completely free.

‍

‍

‍

II. Why use Figma components?

‍

‍

Figma components offer several significant advantages that help you improve efficiency in your design work and allow you to integrate advanced animations into your mockups.

Here are the main ways you can use Figma components:

- Reusing an element. Creating a component gives you access to the element as many times as you wish. You can integrate an instance (a child element) of the component into your work using the "Assets" tab in your sidebar.

- Ensuring a consistent user interface and UI elements. Reusing the same element multiple times allows you to integrate elements with identical properties into your mockups. This makes the design more uniform and easier for a developer to reproduce.

- Modifying many elements at once. Integrating numerous instances of a component into your mockup allows you to modify them all simultaneously by editing the original component (the parent). A change in size, animation, or color is thus applied to your entire mockup with a single click!

- Optimizing your Figma workspace. Having a "UI Kit" tab where you create all your components allows you to gather, compare, and replicate them. This makes it easy to modify them similarly and then see all changes directly applied to your mockup.

- Create advanced animations using component variations. A component variation is another version of that component, another state of it. When a specific action occurs in your prototype, the component will change its state to take the form of the appropriate variation. You define the actions and variations beforehand, directly in Figma.

Now that you know several of the most common uses for components in Figma, let's learn how to create a component and its variations together.

‍

‍

III. How to use Figma components?

‍

‍

1. Creating a component in Figma

‍

To define an element in your workspace as a component, simply select it and then click on the "diamond" icon at the top of your workspace.

‍

‍

Tip: there's also a shortcut to turn a selected element into a component: Opt / Alt + Command / Ctrl + K.

Note: A component (parent or child) is always displayed in purple in the left sidebar menu.

‍

‍

‍

‍

2. Integrate an instance of your component into your design

‍

To integrate an instance of your component into your work, simply go to the "Assets" tab in the left sidebar menu of your workspace.

Then select the Page containing your component, then the frame (the layer) in which you created it.

Now, simply drag and drop it where you want to integrate it into your work to see the child element appear in your design.

‍

‍

‍

‍

3. Detach a component instance from its parent component in Figma

‍

‍

To detach a child element from its parent element, select the element in Figma and then right-click.

Then click on "Detach Instance". Your element is still in your design, but it is now completely independent and no longer linked to the parent element.

Tip: the shortcut to detach an instance from its parent component is: Opt / Alt + Command / Ctrl + B.

‍

‍

‍

‍

4. Create a component variation in Figma

‍

‍

To create a variation of a component in Figma, select the parent component in your workspace.

‍Then click the + surrounded by a diamond to create a copy of the element within the component.

‍

‍

You now have 2 elements: an original element, named "Default", and a variant element, named "Variant".

‍

‍

You can create as many variants as you wish and modify them as much as you like.

Once the variations are as you desire, you can define the context in which the original element (Default) will change state to switch to a variation or another.

To do this, use the "Prototype" function located in the right sidebar menu of your workspace.

‍

‍

‍

Click on the element you want to animate, then select your desired trigger action. Choose the destination variation and adjust the settings to achieve the exact animation you want.

Tip: You can embed an instance of your component into an empty frame and launch the prototype presentation mode to test and adjust your animation, if necessary.

You now have all the essential information about Figma components. We recommend experimenting extensively to become experts in complex animations in Figma!

If you'd like, you can read our other articles on Figma, particularly on how to vectorize images in Figma or even on essential Figma plugins for effective use of the tool !

Additionally, if you need help or advice with your Design work, contact us !