Creating and Using Figma Components

Creating and using Figma components makes your design process faster and more organized. Components are reusable design elements, like buttons or icons, that you can use across your project. In this article, we’ll show you how to create and use Figma components to keep your designs consistent and efficient.

Ways to Create Components

1. Creating component

Step 1: Create a button with some background color & text "Click me" along with 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

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.

5. 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.

6. 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:

Properties

• Main Component: The original component that defines the design and properties of reusable instances.
• Instance: A reusable copy of a main component. Instances remain connected to the main component and can receive updates from it.
• Component Properties: Component properties define which parts of a component can be changed in its instances. These include Boolean, Instance Swap, Text, Variant, and Slot properties.
• Variants: Variants are different versions of a component organized within a component set. They can represent differences such as state, size, or color.
• Reusable Design: Components allow designers to reuse the same design element across a project while maintaining consistency.

Importance of Components

• 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.
• Components & their instances are easy to implement and require no complex designing or calculations. It just requires toggling or changing the properties.
• Components help in customization. They allow an easy access to customize every button, such as adding Icon or removing icon from the instance.
• They allow prototyping & testing. Each component can have a new possible type of prototype or animation.