Creating and Using Figma Components

Components in Figma are used for reusability in designs. They are elements that help in managing and creating an orderly design of the project. And grouping components of similar properties is variants. Several component sets can also be created for future usage. In this article, we will be learning how to create Figma components and use them effectively in our designs.

1. Creating component

Step 1: Create a button with some background color & text “Click me” alongwith an icon placed beside the text.

Step 2: Now right click the button and view the options & select Create component, or simply click Ctrl + Alt + K.

Step 3: A four dots symbol appears beside the element that has been converted into a component like this:

2. Creating multiple components

Step 1: Firstly create a set of elements and select all of them together. Click on the triangular symbol at the top and choose one of the options: Create multiple components OR Create component set.

Step 2: Create multiple components leads to each of the element being converted to a single component.

Step 3: Create a component set leads to grouping of several components into a variant set of a number of variants used to depict those elements with similar features.

3. Creating variants from components

Step 1: Add a button element in the design frame.

Step 2: Convert the element into a component.

Step 3: Select variant from the top column and create a variant of the component.

Step 4: Two variants will thus be created: Default & Variant 2.

4. Applying component properties

I. Show Icon property (Boolean property)

Step 1: Create a button & convert it to a component.

Step 2: Choose the plus button beside the properties tab where several component properties options are displayed and add the property name “Show Icon” and change the value to true.

Step 3: Create an instance of the component from the assets tab.

Step 4: Now for the instance, you can toggle over the “Show Icon” property button to add icon or remove the icon & display only the text.

II. Change Icon property (Swap Instance property)

Step 1: Add several icons in the design file, convert each icon to a component and then create it’s variant. Do it somewhat like this:

Step 2: For the button, add one of the above icon variants at the place of icon. Set the button to auto layout and adjust the padding & margin. The tab at the left should look like this:

Step 3: Now go to the button component element, and for the component property select Swap Instance property.

Step 4: Set the name of property to “Change Icon” and set the values to different icons lying in the design file.

Step 5: Create an instance of the button component using the assets tab.

Step 6: For the instance, the property would appear like this and now you can change the name of the icon to get the desired results, without having to copy paste the icon every time.

5. Applying prototypes

Step 1: Click on the Prototype tab for the button component.

Step 2: Draw the arrow from plus sign from the button 1 to variant of the default button with a different icon. Select different animations, time duration & hover effect.

Step 3: Open presentation mode and view the animation that has been formed using the help of components that would look somewhat like this:

1. Components are of two types:

1. Main Component: It is the default element that is converted into a component. We can do so by using the shortcut Ctrl + Alt + K.
2. Instance: Instance is a copy of the component that is found in the Assets tab so that the updates or the properties of the main component can be used.

2. The name of component can be used as a shorthand to directly convert the component name into it’s component properties and values. For eg. componentName / hover (state) / true.

3. Instances of the components are created to use the component all over the design file. Individually changing the design of each button and creating a new button every time is not possible, hence we use instances.

4. A component consists of Three major properties:

1. Instance Swap Property: It allows to effectively swap icons, or text according to the listed options. Say for example, we have a button with house icon. We can add instance swap property to it with other icons such as heart, diamond, smiley etc. This would allow us when creating an instance of the button, to change the icons in one click.
2. Boolean Property: It holds two values, true & false. When applied it shows a toggle button to hover over it. Say for example, a button must consist of an icon or not. If we set the boolean property to “hasIcon” and set it to true, then creating an instance of it and setting the value of “hasIcon” to false would remove the icon in the instance button.
3. Variant Property: It allows creation of different sections of similar properties. Like we can create 3 types of variants for a button, one for pressed state, one for disabled and the other one for hover state. And then we can individually change their properties and values.

1. Components allow reusability of code and increase efficiency. It is not possible to copy paste every time. Simply changing the state of the instance would do the good.
2. Components & their instances are easy to implement and require no complex designing or calculations. It just requires toggling or changing the properties.
3. Components help in customization. They allow an easy access to customize every button, such as adding Icon or removing icon from the instance.
4. They allow prototyping & testing. Each component can have a new possible type of prototype or animation.

Figma components are a great way to save time & efficiency, and bring about the best in less time. They help in reusing previous designs without having to update much of it and simply toggle the properties of the existing element in the right hand side tab. They are a great way to save time & efforts. Using the above screenshots and examples, one can try out forming new components and use them in their design later.