A way to export/import styles (text + colors)

Design System Organizer plugin allows to import/export styles, relink components, etc.

Does your automation rename the layers based on the styles that are applied to them? That’s what I’ve been looking for to help create local styles from a shared library of styles that I need to experiment with for a different project. Would love a link to that automation if you can share.

I see a lot of complex use cases for this problem, however I am simply trying to add the list of text styles to an existing project that was done with the wrong typography. Ideally I should be able to select each incorrect H1, H2, H3 etc… and in the character panel choose the correct text style we’ve created and apply it to the selection. I would allow of use apply the same typography across all of our various designs and landing page files very easily, without having to change every single text box individually, every time. Similar to adobe libraries having a shared library of character and paragraph styles. Is this not possible? I keep looking for this feature and only finding these more complex discussion that seem to go in circles anyway.

Styler is awesome, thank you for your recommendation. But unfortunately Styler only exports the text title, not with the text properties ( Line Height, Letter spacing, etc.). Is there any plugin or tips to export text style along with the properties?. Any help would be really appreciated.

👋 Hey @Rian_cintiyo,

I’m a bit confused, why are you saying that line height and letter spacing are not generated/extracted by the Styler plugin: I don’t get the same behavior.

It is true that Styler can’t get the advanced text properties found in “Type settings” panel because these properties are not available through Figma plugin API – no plugin should be able to create a text style that have these properties.

👋 Hello @Andrei_Iancu,

What I mean by Styler isn’t generated/extracted text properties is that Styler only generated/extracted the title of the style, for example in the image above. Styler only generated " Open Sans 18px Semi Bold" this is the title that I made for this certain style.

On the another hand, the result that I expected is like this :

Styler also generated the font-size, font-weight, line-height, letter-spacing etc.

I hope this can give more explanation about what I said previously.

Thanks.

Ah, so you need something to add the properties of the text as characters of a text layer. Unfortunately, Styler doesn’t support that, but I hope you’ll be able to find a plugin that does that! 🤞

If not, you can write a script for that exact purpose only.
You’ll have to basically take each property from the selected node (layer) and join these values into a string. This string you’ll be able to use to override the node characters.

Great solution for colour styles. Solved my problem fast and smooth. 🤘

This is a feature I would use. There are times when it’s necessary to fork a design system but it’s a huge time sink to make the styles over again.

Hey!

This post doesn’t mean to be an ad/promotion. I’ve recently given a try to Design System Organizer mentioned above. Easily have sorted all the problems out: I moved not only color/text styles but easily relinked all the necessary components. On their YouTube channel, they have instructions on how to perform this task. In case you want to check before buying if it’s worth it, you can have a look on your own.

Best,
Vlad