Creating design systems with Figma Tokens | by Marc Andrew | Nov, 2021


You’re now good to go to use these libraries in your Figma file!

Simply import the Light library and apply some styles to your designs. Once you’ve done that you can start trying out Figma’s Swap libraries feature. Go to the Assets tab, click Libraries, select the Theme you’re using in a file, and select Swap library. Now choose the Dark library you’ve previously created.

Nice! All Styles that were previously Light are now Dark.

By using the plugin this way your designers don’t have to use the plugin at all, they can keep using Color styles like they did before. But your library files are now much easier to maintain, have a source of truth outside of Figma, and you’d be able to create a new theme in a matter of seconds. You can do the same thing with Text styles where your designers could just keep using styles, but you’d create them atomically.

The plugin also allows you to use design tokens like border radii or spacing units for AutoLayout. This requires you to apply the tokens via the plugin UI, though. I usually recommend teams just getting started to stay to color and text styles as the Apply part of the plugin requires it to be open all the time (and is a little hacky compared to just using Styles).

Source link

Leave a reply

Please enter your comment!
Please enter your name here