Step by step create and edit a Figma Component

Figma Component are UI elements that saves ton of time by eliminating the jargon of doing same thing over and over again. Changes and feedback are a part of design process,

Lets create a scenario where you have designed a 70 – 80 page website, now upon reviewing stakeholders thought that the navigation menu must have one more option or lets just say you designed a dark themed website and now you want to add a toggle switch to switch between dark mode and light mode.

Imagine manually adding the toggle switch to the menu of 80 pages that you design, isn’t that the worst way to do it?

Enters Component, first introduced in 2016, this figma feature lets you create a reusable UI element that can be edited across the figma file by editing the root element.

What are the benefits of Figma components?

  • Help maintaining brand identity across the project
  • Saving time
  • Easy hand off
  • Future proofing

Creating a component

Lets say if you have a button that you want to create a component out of the button

1 simply select the button layer

2 click on the leftmost icon at the center of top bar

and there you have it, you have successfully created a component.

On the top left corner of any Figma component a four diamond icon will appear

Multiple instances using Figma component

Lets take an example of a button, now that you all know there are multiple states of a single button know more about button states here

Now that we have a normal state of the button lets create a variant of the same button component that we just created.

To create a variant simply select the component and click on left most icon on the center of top bar (refer to the image below)

upon clicking on create variant this option will appear on the right sidebar

Since we are creating a pressed variant of the button we will rename it as Button Pressed.

Now we will edit the button to make it look as if its pressed.

Using the same steps you can create rest of the button states.

So this is our instance, and you can take a look at this entire system here as the master component. Within this master component, we have a few different variants. The actual instance here allows us to change a couple of different states. So we have the Normal, the hover state, and also the Clicked state.

So all these things are easily interchangeable, and this is really the beauty of Figma components and when it shines.

By Hrushikesh Paygavhan

UX designer at Customer Capital. With 7+ years of Design experience, I belive in passing the knowledge to everyone. I help UX designers upskill themselves, and stay updated in the design field.

Leave a Reply

Your email address will not be published. Required fields are marked *