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.