Skip to main content

  • 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

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


Before i add a different font


image


After i add a different font

Check Figma Tokens Studio, it may support that already

If you tech tech-savvy I can recommend something

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

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

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

It took me a bit to make it so here we go.


Get my plugin → https://www.figma.com/community/plugin/1297031341980383999/source-foundation


It does all sorts of things to generate tokens and stuff, but not only that. If you have a file with variables and styles that use these variables, you can export these as JSON. Run the plugin and click the export button at the bottom right


image


Then navigate to “Export Tokens” tab and copy a code. Later you can update this code by hand, just stick to the format and you are going to be good. I believe this way to can easily extend your text styles without going through tedious manual flow in Figma.


image


In another file, where you want to transfer you tokens, do the same but use the “Import Tokens” button, go to “Import Tokens” tab and use the code you got from the other file


image


This should transfer variables, effects and text styles with bound variables. If the target file already have them it will update the values thus all links to stay intact


I just made this piece today, it’s not very well tested, so I hope you can help me to get it refined.

Hey @Pavel_Kiselev

This is great. Thanks for putting this together and sharing. In theory, this would indeed solve the problem.


The plugin freezes when I import my new JSON with added tokens though, so I haven’t been able to fully solve, yet.


What I did:



  1. Export existing tokens via SF plugin

  2. Make edits to JSON file in external text editor to add new text styles

  3. Import tokens via SF plugin

  4. Long Figma freeze


Text styles not appearing in app - or in JSON export afterwards…


If you want to reach out directly pierrelord oa] gmail.

Happy to get on a call and help test.


Thanks

There was a minor issue which I discovered just few hours ago. Should be fixed now, mind giving it a go one more?

@Pavel_Kiselev Same issue.

I’ve tried where I clone all my styles, and tried where i only add 1 style to the JSON.

Both cases hang and produce no text styles.

@Pavel_Kiselev PMd you video of workflow.

Thought I’d close the loop here on how this was successfully achieved.


I was successfully able to duplicate hundreds of text styles (with bound variables) programatically in a few hours, saving days of menial work. Very grateful for the plugin and time spent by Pavel adding a few features to his plugin to get this to work.


As described by @Pavel_Kiselev in this thread:



  1. Run the Source Foundation plugin (which does a lot more powerful stuff than just the simple token export/import feature needed here) https://www.figma.com/community/plugin/1297031341980383999/source-foundation

  2. Export your tokens to a text file

  3. Manipulate your tokens offline (clone/rename/edit your text-style tokens)

  4. Import your tokens back into your file. (Make sure to uncheck “Text Styles” and “Effects” from the Import tokens / “Add styles and effect from Foundation” prompts)

  5. You newly created/renamed text-styles will appear, ready for use.


This process will surface issues with your variables, forcing you to clean up any inconsistencies and bugs… Ex:



  • Variables referring to deleted variables will be flagged by the plugin with an alert - and fail import. You’ll want to clean those up.

  • String variables (for example: for “FontWeight”) need to match EXACTLY the name of the font weight used in the font. Ex: Some fonts use “Semi Bold” whereas others use “SemiBold”. While this will not cause the import to fail, you need to get this right.

  • The import process can take some time - 6000 variables took about 20 minutes for the plugin to process/import back in before spitting out new text-styles.


Hope this helps someone else.

Thanks again Pavel.

Reply


Terms & ConditionsCookie settings