Naming and organizing text styles

Naming text styles

The right name can help designers understand when and where to use a text style, as well as help developers identify if the typography they are implementing already exists as part of the design system.

Go through the process of naming your text styles in tandem with engineering to ensure consistent terminology between your Figma designs and production code. The names of text styles will appear in the code mode view in Figma, both as a comment in the CSS view and as an itemized style name in the table view. Coordinating your text style names with your engineering team in advance will greatly simplify the hand-off process.

You can take a few different approaches to naming text styles:

  • Sized-based naming system (XS, S, M, L, XL)
  • Semantic naming system that corresponds to respective html tags in production (caption, paragraph, h1, h2)
  • Descriptive or functional naming system that explains the styles' intended use (alert, modal-header, button-label)

The descriptive naming approach can help you communicate where these styles get used. That said, you'll likely wind up creating more styles with this approach (since some styles may share the exact same properties) hidden behind a more descriptive name to help communicate their intended use.

Organizing text styles

The power of prefixes

To make your styles easier to browse, you can prefix your style names with a forward slash (prefix/style-name) which will group your styles under subheads in the style picker.

Separate libraries

The more text styles you add, the longer the style picker list will be. To make it easier to parse, you may want to consider sharing your text styles from separate libraries instead of one centralized library. It's worth breaking them up if the designers are using different styles for different projects, that way they don't have to scan through styles they won't need.

For example, let's say you have a separate set of type styles for mobile native from text styles targeting responsive web. You'd probably want those styles in two different libraries, so people working on a responsive web project can just turn on that specific library.