How to duplicate variable-based text styles at scale?

Ask the community
1
  • I manage a large-scale multi-brand design system
  • The setup is pretty large - albeit standard IMHO
  • 1000+ text styles - where all text style properties are variable-based.

Duplicating styles individually/manually is straightforward, however, at this scale, it is prohibitive.

There are a few methods (cut/paste to another file) and plugins to help workflow in duplicating text styles without variables, but they don’t support/maintain variables.

Any thoughts on how to do this with Variable-based text styles?

Use case:
We already have 3 font variables per brand: “Body”, “Brand”, “Marketing”.
We want to add a “Serif” font (in variables) for each brand, by cloning (for example) the “Brand” version/tree of the text styles across all sizes/styles and applying “Serif” font variables.

Any thoughts/help appreciated.
Thanks.

Pierre

For anyone wondering about the sanity/validity of 1000+ text styles, I’d love to hear how to address the following requirements without such an approach.

Architecture of text-styles:

  • 4 style types addressing 15 sizes ranging from 60px down to 9px (in variables)
    • 3x display (Large, medium, small)
    • 6x headings (h1, h2, h3, h4, h5, h6)
    • 6x Paragraph (LG, MD, SM, XS, MI, NA)
    • 3x overline (LG, MD, SM)
  • Each brand (mode) has 3 fonts (Body, Brand, Marketing) (declared in variables)
  • Each font has 5 Font weights available (Light, regular, medium, semi-bold, bold) (in variables)
  • It therefore has over 1000+ styles

Text styles
Text styles1357×524 46.2 KB

2

Map them out, so you can see where you will insert an additional set depending on your Typography System.

I’ve done a multi-brand design system and typography is really something especially if you’re handling a lot of font styles. If I didn’t have the help of a plugin, this thing will consume my time by a lot. But when I’ve created it, what I did is set the most unique "variable?(not Figma variable), as the top of hierarchy of the entire thing—which is font family.

Afterwards, everything is the same from headings, bodies (paragraph), labels, and etc. So, if I want to insert a serif-type font, I’ll just duplicate the top of the hierarchy which is the font family. Just change the font-family to the serif font of my choice, and then everything is done.

image
image1025×634 11.9 KB

Before i add a different font

image
image1132×589 16.4 KB

After i add a different font

1 Like
3

Check Figma Tokens Studio, it may support that already

1 Like
4

If you tech tech-savvy I can recommend something

1 Like
5

Yes, I’m also using this one. And, i recommend it personally. :grin:

1 Like
6

Thanks @Raphael_M
Appreciate your response.
I have a clear sense of where the new font will sit, and what to duplicate.

What process did you follow specifically to duplicate your styles and retain variables?
Did you do it manually? or use a plugin? Which one?

I know how to do it manually. I’m trying to avoid that process - especially if I have larger future operations like this to perform.
Thanks

7

Thanks @Pavel_Kiselev
Appreciate your reply.
Reasonably savvy. I’ve experimented a fair bit with syncing Figma’s vars from git via Token studio - which would allow me to abstract the duplication step/process to code easily, and then re-sync from github. It was manageable, but when I experimented with this a few months ago, the nesting, cross-collection relations and token references never carried over properly when the new vars landed in Figma.

What do you have in mind?
Thanks