Feature Request: Font Variations

Idea summary:
Empower designers with the same flexibility over their type settings, as you do with components. (Without us having to manage dozens of distinct styles.)

More details:
The biggest challenge for me using Figma over the past few years is how to build a design system that (1) retains a clear rule-set, (2) stays connected to a single source of truth, and (3) provides clear, semantic details for developers.

The introduction of component variants was a massive step in the right direction for me! However, this has shone a light on how inflexible the current implementation of type settings are currently.

I’d love to see a similar implementation with type styles; where a designer can quickly mix and match between different weights, line-heights, letter spacing etc…

In CSS, these are independent variables, so the idea of having to define a large list of similar but distinct styles to choose from in Figma is frustrating.

This would also help many avoid a common pitfall of design system management - disconnecting a style to make minor changes to meet a deadline, which now adds debt to your designs.

I’m sure that I could set my type up as components, but that’s definitely a hack, and removes the speed and power of cross-file libraries.

For example, the design system I am currently authoring uses:

  • Body and heading styles,
  • Three distinct weights of type (plus italics),
  • Line-height variations of 100%, 115%, and 140%,
  • 10 font sizes (5 for body, 5 for headings).

Here is an example of how I could imagine that implementation in the current UI.:

3 Likes

this would be super useful! I would love to have a feature like this because it’d take down the number of styles (and space in the editor) I use by more than half. Great recommendation.

Yes, please! The current system is an absolute pain when you’re using multiple properties like font weights and letter cases. These should be presented as options instead of completely different text styles.