Naming Things in Figma: Best Practices for Layers, Components, and Tokens

They say naming things is one of the two hardest problems in computer science—and the same holds true for design.

In Figma, naming isn’t just cosmetic—it directly affects:

Searchability
Dev handoff
Design system clarity
Scalability

Whether you’re a solo designer or part of a large team, establishing solid naming conventions for layers, components, variables, and styles can make the difference between chaos and clarity.

This article offers practical, real-world naming strategies for every part of your Figma workflow.

🎯 Why Naming Matters in Figma

Good naming:

Makes components easier to find and reuse
Keeps your team aligned
Supports automation and handoff tools
Reduces onboarding time for new collaborators

Bad naming:

Leads to duplicate components
Confuses developers
Breaks design systems
Slows everything down

🧱 Naming Layers: Keep It Descriptive and Short

Your layer names should reflect structure and purpose, not just appearance.

✅ Best Practices:

Use descriptive nouns: Title, CTA Button, Input Field
Add context when needed: Card/Header, Modal/Overlay
Use sentence case or title case, not ALL CAPS

🚫 Avoid:

Vague labels like Group 17, Rectangle 22
Styling cues like Red Box or Blue Button
Emojis or inconsistent casing

💡 Pro Tip: Use slash naming (/) for logical grouping, even if you don’t create components.

🧩 Naming Components: Think Hierarchy

Component names should help users understand, find, and reuse them quickly.

✅ Structure:

ComponentType / Function / Variant

✅ Examples:

Button / Primary / Default
Input / Text / Focused
Icon / Navigation / Arrow Right

This hierarchy:

Makes auto-sorting easier
Supports variant sets
Improves plugin compatibility

🚫 Avoid:

Over-descriptive names like BlueRoundedButtonWithShadow
Flat structures like PrimaryButton1, PrimaryButton2
Random abbreviations (Btn_Prim_D)

💡 Pro Tip: The order matters. Group by component type first so the assets panel stays clean.

🎨 Naming Text Styles and Color Tokens

Figma text and color styles should reflect function, not form.

✅ Typography:

Use semantic labels like:

Heading / XL
Body / Regular
Caption / Sm

Add alignment or color only if necessary:

css Body / Centered / Light

✅ Color Tokens:

Text / Primary
Background / Surface
Border / Focus

Include theme modes in a separate level:

Light / Text / Primary
Dark / Background / Default

🚫 Avoid:

Visual names like Blue 300, Green Highlight
Mixing use and appearance (Heading Bold Blue)
Duplicating styles with small tweaks

💡 Pro Tip: Semantic naming allows easy theming, dark mode support, and alignment with code variables.

🗂️ Naming Variables: Mirror Your Token System

If you’re using Figma Variables, match their naming with your design token taxonomy.

✅ Suggested Format:

color.text.primary
font.heading.xl
spacing.md
radius.lg

Use:

Dot notation for clarity
Consistent scales (e.g., xs, sm, md, lg, xl)
Logical grouping by category

💡 This structure scales across platforms and works well with design token tools like Style Dictionary.

🧪 Naming Modes and Variants

When naming modes (e.g., light/dark) or component variants (e.g., size, state), consistency is key.

✅ Use Simple, Predictable Labels:

Size: Small, Medium, Large
State: Default, Hover, Pressed, Disabled
Theme: Light, Dark

Stick to PascalCase or Title Case, and don’t over-abbreviate unless it’s standard (e.g., CTA, UI).

🧭 A Quick Naming Cheatsheet

Element	Naming Format Example
Layer	`Modal / Header`
Component	`Button / Secondary / Disabled`
Text Style	`Body / Medium`
Color Token	`Text / Accent`
Variable	`color.background.surface`
Variant Property	`Size: Large`, `State: Focused`

🧠 Final Tips

📏 Document your naming rules in a shared style guide
🤝 Align with dev teams to match code-side naming
🔄 Refactor in batches with plugins like Batch Rename
🧼 Clean as you go—naming hygiene saves hours later

Naming is invisible when it works—and painful when it doesn’t.
Start simple, stay consistent, and let your naming system scale with you.

➡️ Next up: “Figma for Product Managers: How to Give Feedback Without Breaking the Flow”