Figma: Component Management 1

Hello folks! how was your day? great? well, many days ago I had an insight about managing component in Figma. Let me have a brief about this case.

Do you ever use Figma? or been using Sketch then moving to Figma?. As a designer especially UI Designer, consistency is very important when creating an element like a button, field, card, and whatsoever. You need to make sure that every created element is perfectly aligned with the Design Guideline. It is very easy if the design only consisted few pages. But what if you have thousands of a page that required the same component?.

In Sketch, we could use Symbol, here in Figma we called it with “Component”. With component, you can have one master component then create a child that inherited it. Rather than copying every same element, you can create a component then re-used it every time needed.

This article will be covering how to create basic component, how component naming, how to manage a larger component system. but if I wrote it all in this article it will be very long so I split it into 2 chapters.

This article as the tirst is all about :

1. Creating a basic component
2. Renaming rules for component

How to create Component in Figma?

First, create a shape, frame, or group in the canvas. For example I create a button background.

Create basic component.

You can create a component in Figma by selecting a layer then click on this icon (Highlighted) below.

In the gif above, I create a basic rectangle shape component, with 4px border-radius. when you have created a component, it will be shown up in “Asset” panel on the left.

You can drag and drop from the panel to create a new instance (take a look in the gif above). “When you create an instance of the component it will override everything from the master component”. Hence, when I set the master component — button background — border-radius to 16px, it instance will override it and has the same border-radius.

This would save your time a lot when you have many components and you want to change the style. with this method — component — you don’t have to adjust element one by one, just direct edit to the master component. Quick win!

Renaming component

This one is very important and I just know it lately. Renaming component is necessary for the later part (maybe the second chapter) the advanced component. Let say you name it this way.

Button background naming.

It is fine, but it is not the magic trick. Take a peek on the asset panel on the right. It will be look like this one:

Asset panel

It will be shown up as an individual component between these three. so, what’s the problem? Here take a look. let create an instance from the one of these three.

Creating instance.

Take a look again when you selected an instance, then focus on the sidebar on the right, especially in the instance section.

Instance menu

You can directly change through another instance by selecting button background grey or blue. but it is defined in global. See the text “This file” on the image above. Imagine you have hundreds of components in this page. Huh?

<iframe src=”https://giphy.com/embed/5aLrlDiJPMPFS" width=”412" height=”480" frameBorder=”0" class=”giphy-embed” allowFullScreen></iframe><p><a href=”https://giphy.com/gifs/jon-stewart-the-daily-show-5aLrlDiJPMPFS">via GIPHY</a></p>

That’s why you need to rename it the proper way. Let’s try this way. Rename the button with this format:

button / background / blue
button / background / grey
button / background / red

and take a look at the left side panel.

Asset panel (After renaming)

Voila, the components now are grouped. Adding “/” on the name of the layer will automatically group them based on the same name. Then what is the effect of this?

Well, for now, it won’t feel much any different than using conventional names. let’s take a look of this gif.

Now you can select the instance directly with its name which is least different.
Button / Background / Blue
Button / Background / Red
Button / Background / Grey

Figma automatically separates them based on the name. and that’s will affect you when the components are much larger. you will see in the next chapter.

Conclusion

From this article, we can sum up to 2 things.

1. creating a basic component. You can create component from layer, group, or frame by clicking the icon of component.
2. renaming rule. For the ease of use, we rename it by adding slash “/’ for easy to use later.
3. changing instance. if you have defined similar component you can directly change into another parallel sibling compnent. just like example, blue button can be swithed faster to grey and red.
4. benefit of component
   It save much time when your element is spread across the pages and you dont’t know where to start.

Chapter 2 — Coming soon.

Thanks for reading!