07. Let's improve component efficiency

If sketches have symbols, figma has components. Elements that are reused can be conveniently managed using components, and overall design productivity can be increased.

component

Components are one of the important features that allow you to define reusable elements and retrieve them whenever you need them. All elements used in Figma can be made into components. Components are divided into Main Component and Instance. Instance is a copy of Main Component, and if Main Component is edited, it is applied to all Instances. The basic concept of Figma's components is similar to that of Sketch's symbols, but Instances can be edited a little more freely.

Create component

After selecting the element you want to make into a component, click the Component button on the menu bar or press Option + Command + K (Ctrl + Alt + K) to create a component. You can select multiple elements to create a whole component, or you can create individual components.

Put component

You can search for Assets in the sidebar by pressing Option + 2 (Alt + 2) on the canvas. After searching, you can click and drag the desired component to the canvas.

replace component

When a component is selected, the component can be replaced in the menu on the right. You can also click the component icon to go to the main component or disconnect the instance from the main component.

override

Only certain parts of a component can be modified. Double-click the element you want to modify or select it while holding down the Command key and replace it with another element. If you want to restore what you've replaced, you can reset it by clicking the Show More icon on the right panel. You can also apply modifications made on the instance to the master.

Variant

Variants are one of Figma's strongest features. This is the ability to define one component with various properties. For example, when a button is pressed, when it is loading, and when it cannot be pressed, each of the various states had to be designated individually in the design tool, but you can easily manage them using the , variant function.

It is similar to Nested symbol in Sketch, but you can manage various cases more easily by specifying values separately without registering numerous symbols separately.

Create Variant

First, we create components individually tailored to the required parameters. For example, now, to classify Primary and Secondary according to the degree of attention, we classify them into Type, and set a variable as Status to express the state of each button. Create components for each variable, select all components, and combine them as Combined as variant in the right panel.

Add Variant Properties

After selecting a Variant, you can manage its properties by clicking the Show More icon on the right panel. You can add a Variant or Property, and after adding a new value, arrange the position of the component inside the Variant.

Using variants

You can select the instance component and use it as defined in Variant in the right panel. Rather than nesting components and searching for difficult names, you can conveniently pick and apply from a drop-down menu.

How to figma Basic