This blog post will describe how to get started with the semantic naming of colors and the benefits of working with them. Semantic naming of colors uses “foregroundPrimary” and not “green,” now, let’s dive into how you apply it.
Example design
Here’s our example design; as you can see, it’s just a text with an underline and a background.
Semantic naming of example design
The text color is the first color in the foreground, so it’s “foreground/primary”. Underline color is the second color in the foreground, so it’s “foreground/secondary”. And the background color is “background/primary” since there’s only one.
Visualise the color scheme
Now that we have established a naming convention, let’s add the color scheme as cards in Figma. It gives everyone an easy way to overview the “one source of truth” for colors in the design system library.
Add a dark color scheme
The dark mode of the color scheme is just an inverted version of the light color scheme. Add a second row of cards for the dark scheme and “/dark” and “/light” at the string’s ending for each color scheme.
Add as color styles in Figma
Go ahead and add both of your new color schemes as color styles in Figma. It should look something like this when finished.
Install Design Tokens
Design Tokens ↗ for Figma is a plugin that lets you export all kinds of tokens like colors, spacing, and typography to code. It’s a simple way to have Figma as your source of truth for a design system. So let’s go ahead and install the plugin.
Make the tokens useable
We need to use Design Tokens Transformer ↗ to transform our exported tokens into working variables for each programming language. There are a few steps to get it working. The documentation is pretty straightforward.
Our tokens are now formatted with the proper syntax for CSS, and ready to be used.
-
That was the final step, and I hope you found this blog post helpful.