How to create the badass Figma component?

Have you ever suffer when you change the content/icon of the button, then change the state of this button, and that content/icon was reset to the default?

button bad

We are the UX / UI designers who try to bring the best experience to our beloved users, and we deserve to not suffer in our design library.

We have some tips for creating components that work wonderfully in the Tini design system, as in the GIF below.

button good


1. Name the layer

Yes, the most important task, but the most forgettable one. Why should we name the layer? When we name some elements with the same name in every component variant. The system will identify and keep the value of it when we change to other variants. Let me show you the example.

We named the layer of button label “Button label” in every variant of button components and named the icon “Icon wrapper”. Voila! You will get the fantastic component.


2. Same structure in Icon components

After naming all layers of all components, are you still facing this kind of suffering? Let’s look deeper into the icon structure.

When creating the icon in the Tini design system , we follow some steps below.

Step 1: Outline stroke

Screen Shot 2021-08-15 at 10.16.11

Always create an outline of the line icon. There are some reasons:

  • Scalability with the consistency of thickness
  • The same color value when we swap to the glyph icon

p/s: When you create an outline and your icon was broken. Try to flatten it first, then outline the stroke. If it’s not working, I think Adobe Illustrator is the final solution.


Step 2: Union selection & Flatten

After you outline stroke, if the icon is complex with many details as in the image below, we must make the Union selection.

After that, the Figma will merge all elements to one object named “Union”. To be honest, I’m a pretty lean person, so I will Flatten it to be the actual united component.

Then someone will ask “Why don’t we only use the Flatten feature?”. Yes, it works, but I want something “Spark Joy”. Let me show you the result of comparing.

Does it Spark Joy? (read this sentence with Marie Kondo’s voice)

Step 3: Name the layer

“Hello darkness, my old friend. I’ve come to talk with you again.”

So this is the final step and the most forgettable one. It would be best to make all icons in your library have the same structure, with the same name in their layers (not the name of the whole icon).

Example:

The Tini icon format structure:

  • <Icon category/Icon name>
    • Live area frame
      • Vector

If you are curious about the Live area or our Tini guideline for icons, click here to view the full guideline.


3. Pay attention to the right-side panel

After following the two sections above, we think now you can have some wonderful components as in the GIF below.

icon good

But sometimes, those components will be buggy when we swap to other variants, and most of the time, the answer is in the right-side panel of Figma.

That is the 3rd tip, make sure every variant is consistent in:

  • Variant properties
  • Auto layout
    • Vertical/Horizontal direction (I personally always forget to keep this value consistency)
    • Spacing between items
    • Padding around items
    • Alignment and Padding
  • Constraint and Resizing

Difficult right? I know this is the most challenging task to do. But when you make sure all value above is consistent in component variants, you save a lot of time for designers who use your design library. Your effort will be paid off!


4. Use your components

This is the last tip but the most obvious one. Sometimes, we are busy creating components for the design library and forget to use them in the real environment.

With the Tini design team, we use our components and review them day by day. The more attention to detail, the better experience for the designer who uses your design library.


Want to dig deeper and help us improve the designer experience? Let’s try our Tini design system and tell us what you think!

3 Likes