Designilo

How to Name Text Styles in Figma (Like a Pro)

Text styles in Figma are essential for maintaining consistency across designs—and naming them well is just as important as creating them. Whether you’re designing a small website or building a full-scale design system, a clear naming convention helps your team quickly understand and apply the right typography choices.

In this article, you’ll learn how to create and name text styles in Figma using scalable conventions, best practices, and real-world examples.

How to Name Text Styles in Figma
How to Name Text Styles in Figma

🪄 How to Create a Text Style in Figma

Before we talk naming, here’s how to make a text style:

  1. Select a text layer and customize it—font family, size, weight, line height, letter spacing, etc.
  2. In the Text section of the right-hand panel, click the Style icon (four-dot diamond).
  3. Choose “Create style.”
  4. Enter a name for your new text style and click Create.

That’s it—your text style is now saved and can be reused across your file or team library.

🏷️ How to Name Text Styles (Best Practices)

Here are a few key principles to follow when naming your text styles:

✅ Be Clear and Consistent

Your names should make sense to everyone—not just you. Stick to a naming system your whole team can adopt.

✅ Use Slashes to Create Hierarchies

Figma supports naming styles using slashes (/). This organizes styles into folders, making them easier to browse and apply.

🧭 Common Naming Conventions

Here are three popular naming structures:

1. By Role and Weight

Heading/H1/Bold  
Heading/H2/Regular  
Body/Large/Medium  
Caption/Small/Italic

✅ Ideal for design systems where text usage (not just appearance) is important.

2. By Scale Only (for type ramp)

Type/Display  
Type/Hero  
Type/H1  
Type/H2  
Type/Body  
Type/Caption

✅ Useful when typography is more utility-based or you’re using fewer variations.

3. By Platform or Brand Context

Heading/H1  
iOS/Body/Medium  
DarkTheme/Caption/Italic  
BrandA/Heading/Large

✅ Great for multi-brand, multi-platform systems where variation needs to be scoped.

🎯 What Makes a Good Text Style Name?

  • Predictable: You should know what to expect before applying it.
  • Descriptive: It should convey size, weight, and purpose.
  • Scalable: As your system grows, the naming should still work.

🧠 Pro Tips

  • Use the same casing across all style names (e.g., Title Case or lowercase).
  • Avoid hardcoding font sizes into names like Body/16px—use semantic names like Body/Small instead.
  • If you’re using tokens or code integration, match your naming to your token structure.

✅ Final Thoughts

Naming text styles in Figma isn’t just a formality—it’s the foundation of a scalable, maintainable design system. By creating a clear naming convention from the start, you’ll reduce confusion, speed up collaboration, and make your design files easier to manage across teams.

Start small, keep it consistent, and always think from the user’s (or developer’s) point of view.

Ben Kemp
, , , , , , ,