Stop Naming It Component 93: A Designer’s Guide to Smarter Components in Figma

You have a component in Figma that is named Component 93, then you create the next one, and it’s auto-named Component 94. Sound familiar?

It can feel like a waste of time naming components when you’re working under pressure, especially if you’re in a small team where you wear many hats. You’re probably the only designer, part-time product manager, and unofficial developer whisperer. But take it from someone who has been burned by “Rectangle 17” — naming your components will save you so much pain later.

Stopping for just a moment to name your component correctly — and if you have a minute or two, leaving a note like this one 👇

Component Description

It will save you lots of time the next time you need to reuse that component.

✍️ How to Configure Components Correctly

1. After you select “Create Component,” it doesn’t end there. Rename it from Component X to something you’ll actually recognize later. Like btn/Primary, icon/search, or even modal/delete-confirmation if you’re feeling fancy.
2. Write a short description in the right-side panel. This helps explain what the component does. It doesn’t have to be bogus or too descriptive. Just something you can remember! “used on all forms” or “don’t resize manually” can be a game-changer.

Create component option in Figma

Naming components

🧠 Know the Basics: Component vs. Instance

One of the first steps to organizing components is understanding the difference between a component (the master version) and its instances (the duplicates you use across your designs).

✨ Pro Tip: Editing an instance won’t affect the original. Editing the main component will. Don’t go alter the master unless you mean to.

📛 Use Clear Naming Conventions

Imagine walking into a kitchen where the sugar, salt, and detergent containers look the same. Recipe for disaster!

When naming your components, use a clear structure like:

• btn/primary/default
• icon/user/outline
• icon/user/filled

It keeps your assets panel clean and scannable.

Assets Panel

🥗 Fun tip: Naming components is like naming ingredients in a recipe or tools in a workshop.

🎭 Use Variants, Not Duplicates

Instead of creating 4 separate buttons for each state, use variants. They’re like different costumes on the same actor.

Example:

• Component: Button

Variants:

• Type: Primary, Secondary
• State: Default, Hover, Disabled

⚡ Fewer the components. Faster swaps. Cleaner libraries.

🧱 Don’t Over-Nest

Some nesting is helpful, but be careful not to create a Figma nesting nightmare.

“I just wanted to change an icon and now I’m 6 components deep inside a frame, inside a modal, inside a card… help.”

Photo by Meghan Hessler on Unsplash

Overnesting happens when you put too many components inside other components. If something won’t be used in multiple places, it doesn’t need to be its own component.

Takeaway: Use nesting sparingly, and flatten where it makes sense.

📦 Group Components Into Logical Sets

Even if you’re the only designer now, treat your Figma file like a team is coming tomorrow.

Organize components by type:

• Buttons
• Modals
• Tables
• Cards
• Icons

It’s like having labeled sections in a library instead of a shelf full of books of different genres. Beautiful.

Photo by Bruno Guerrero on Unsplash

If you’re reading this, this is your cue to go name your components. Organize them. Leave a note. Add some steeze 😉. It’ll save you hours, and maybe even a therapy session later.