How to Use Components in Figma

Components in Figma allow you to create reusable design elements that can be easily updated and applied across multiple artboards. Say goodbye to the tedious task of manually tweaking each instance of design elements, and say hello to efficiency and consistency like never before.

Not only do components save you time, but they also allow for collaboration within your design team. With components, you can share and sync changes with team members seamlessly, ensuring everyone is on the same page and working with the most up-to-date designs.

Whether you're a seasoned designer or just starting your design journey, this tutorial will provide a comprehensive guide to harnessing the power of components in Figma. Get ready to unlock your creativity and take your design projects to new heights with this game-changing feature!

This Figma tutorial is based on my course, Figma UI UX Design Essentials. When you become a BYOL member, you gain access to this course as well as my 30+ additional courses on Photoshop, Illustrator, Lightroom, Premiere Pro, Webflow, and more. As a BYOL member you will also enjoy personalized support, earn certificates, and tackle exciting community challenges. Head here to sign-up!

Let’s get started! 

Step 1: Select an Object

First, we need something to make into a component. Some common objects we reuse over and over in UX designs include headings, buttons, form fields, and logos. For our project today, we are using a button. Let's use the Move (V) tool to select our button.

Step 2: Create Component

With our object selected, we can now use the Create Component (Cmd/Ctrl + Opt/Alt + K) icon located in the center of our top toolbar.

Congratulations! You just made your first component in Figma! We know the object has changed because our selection changed colors and has a new icon assigned to it. 

Step 3: Locate Component

Since we have created our new component on this artboard, it is easy to find and use. But what if you are designing on a different page within your project? Figma stores all our components in the Assets panel. The panel is in the left menu under the Assets tab. 

Step 4: Add Component to Artboard

To place an instance of our component to the project, we Click-Hold-Drag the button where we want it. Yes, it's that easy!

Step 5: Make Adjustments

With multiple instances of our main component placed in the design, we can quickly change all of them by adjusting our main component. Making changes to our component's size, shape, color, and text is reflected in all instances of that component. It's magic!

Step 6: Adjust Individual Instances

But Dan, I don't want ALL of my instances to be the same as my component. Then this is the step for you! We can change anything with an individual instance without affecting the others OR the main component. Select the instance you want to change. On our button, we are changing the color. 

When we make a single change to an instance, all other variables in common with the main component are still linked. Since we only changed the color of our button, any adjustments to the component's size, shape, and text will change the instance. If we adjust the color of our component, this button will remain pink because we broke the color link.

Bonus Step: Reset All Changes

Even when we "break a link" to a component, the result is not permanent. Let's say we want our pink button to look like our main component, again. Select the instance, right-click the object, and choose Reset All Changes from the pop-up menu. Easy, right?!

And there you have it: how to create components in Figma! This feature will save you time and create consistency when designing your next project.

The tips in this post are based on my course, Figma UI UX Design Essentials. When you become a BYOL member, you gain access to this course as well as my 30+ additional courses on Photoshop, Illustrator, Lightroom, Premiere Pro, Webflow, and more. As a BYOL member you will also enjoy personalized support, earn certificates, and tackle exciting community challenges. Get started here!

See you in class! - Dan