Skip to main content

Additive Type Styles

Phil_Larsen

In CSS you can have multiple classes added together to create a style. In Figma, you need to make a type style for each variation you might need ie:

font-size: 14px;
font-weight: 400;
line-height: 20px;

font-size: 14px;
font-weight: 400;
line-height: 24px;

It would be incredible to be able to have some form of additive styles in design, controlling a single attribute—That way you can macro edit those attributes across styles, but gaining flexibility of mixing and matching.

One style that declares font size, one that declares line-height, one that declares font-weight. Could be similar to variants on a component how you can create combinations that are commonly used. Thoughts?

3 replies

B
  • b111
  • 15 replies
  • August 12, 2021

please this. requiring unique styles for each weight at each size of each face is hugely cumbersome. we use 2 faces, with 4 weights, at 14 different sizes. so we have to maintain 112 different styles, for what should be do-able in 20.

thankfully we do not use different line-height, character spacing, paragraph spacing, cases, decorations, etc for any of these.

Phil_Larsen
1 person likes this
  • Phil_Larsen
    Phil_Larsen
Rebekka_Karrengarn

Thats what some design-software is solving with paragraph-styles and character-styles. Character-styles are able to overwrite some properties but reuse the not-overwritten paragraph-styles, without loosing connection!

You see a disappointed typography-nerd using your software to build up a design-system for different digital-platforms. We do not want to confrontate building up all thinkable variant-combinations as own styles, that will rather need hundreds of styles, that could be less then 30!

Phil_Larsen
Sebastian16
2 people like this
  • Phil_Larsen
    Phil_Larsen
  • Sebastian16
    Sebastian16
Phil_Larsen
  • Phil_Larsen
  • Author
  • Active Member
  • 130 replies
  • April 20, 2022

One plugin I’ve been using to help simplify this is the Utopia Batch Type Style editor. It is a workaround, and I’m hoping for a first party solution to this, but it helps address styles in batches at least.

Figma

Reply


Terms & ConditionsCookie settingsAccessibility statement

Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings