What are the steps involved in making a Figma component and why you might want to use components? The source of this information is from a tutorial video from Figma called Figma tutorial: Build reusable components [3 of 8]. Here is another video (5 min 34 sec) on Components called Figma Tutorial: Components – The Basics, which goes into a bit more detail.
Why would you want to use components? They help make your designs more consistent and allow for changes to be made quickly. First we create a master component and set its properties. Then we create instances of that master component and make changes to each instance as needed. If we change the master component, all instances will reflect that change. Maintenance is much easier.
Select the rectangle tool. Click and drag on the canvas. Set width to 200 and height to 54 in the properties panel. Add a label to the button by using the Text tool and typing “Button”. We now have both of the elements needed for our button. Set font size to 18 points. Pick a font. The video uses the Google font Gothic A1. The weight is Medium and the alignment to center. Select both layers by clicking on them while holding the Shift key. Click align horizontal centers and align vertical centers. Click the text and notice the bounding box has some space below it for the descending characters. Press the down arrow a couple of times to lower the text to make it more optically centered. Click the rectangle in the layers panel and set it to a blue color (0D88BC) and change the text to a white color (FAFAFA). Round the corners by selecting the background layer and putting a value of 4 (or whatever) in the corner radius field in the properties panel. To be more organized, rename the layers in the layers panel. Rename Rectangle to background and rename Button to label. In the layers panel, select both layers (use the Shift key) and click the Create Component icon in the toolbar.
Master components are displayed with a purple quadruple diamond icon in the layers panel. Expand it to see the two layers that make up the component. Components should have a descriptive name so rename the button to something like button / primary.
To create an instance (copy) of the master component, click on the component and hold down the Alt (Option) key and drag it to create an instance of the master component. Instances are displayed with a single diamond icon in the layers panel. Changes to the master are reflected in the instances, except when we apply overrides to the instance. An override happens when you customize a property of an instance so that it’s different than the master component. Overrides will not be updated when you edt the master component.
A good example or use case of components is the button. Create a button with a certain size, font, weight, font size, rounded corner and background color. Call it “button / primary” and color it blue. Note that this name is what Bootstrap uses. All of the buttons in your file can be instances of the master. You could do this for the menu system and footer text as well.
To see all of your components in your file, click on the Assets tab at the top of the layers panel.
If you have many instances of components in your file, you may want to quickly locate the master component. Right click on an instance and choose Go to master component.
To clear overrides from an instance, select the instance and click the Reset Instance from the top menu. There is also a reset instance button the the properties panel.
It is possible to detach an instance from its master component. Doing this will prevent the instance from inheriting changes made to the master component. How do you do this? With an instance selected, right click on it and select Detach instance from the popup menu.
If you accidentally create a component and you want to undo that action and just have it as an element(s), you can (1) create an instance (2) detach that instance and (3) delete the component.
If you accidentally delete a master component and you want to restore it, find an instance of that component and click Restore Main Component in the properties panel.
Component Bounding Box Size Adjustments of the Master
You have a button composed of a rectangle and a text box. Go to your master component. You want to resize the rectangle. Do it. Now the problem is that the component’s bounding box size is not synced with the rectangle size. The text in the middle of the rectangle is not longer in the middle. Now what? Select the entire component in the layers panel. Click Resize to Fit near the top of the properties panel. Now you can click the Align Horizontal Center and/or Align Vertical Centers as needed. Since we are working with the master, all of the instances will be adjusted. If you are making buttons, you might want to follow the Bootstrap 4 style, or not.
Organize Your Components
Here is a video called Figma Tutorial: Components – Organize Your Components. It is by Figma and is only 3:26 long.