Opens in a new tab

Keep design file and code tokens in sync

Many designers keep tokens in two places: as variables in a design tool like Figma, and as CSS variables on the live site. If the two drift apart, designs will stop matching what actually gets built. A color renamed in Figma but not in the CSS, for example, can lead to guesswork and small mismatches.

So it’s best practice to use the same token names in both places and update them together. When you add or change a token, change it in the design file and on the site in the same sitting. It also helps to do a quick side-by-side check before each new project. Comparing the two lists only takes a few minutes, and it can save a lot of rework later.

George Wert
Created by George Wertgeorgewert.com

Get Free Design Lessons Every Monday Morning

Get Free Design Lessons Every Monday Morning

Three short lessons each Monday on a single design topic. They're written in plain language and give you ideas to use on your next site.

You're in!

Check your inbox for your first email.
Close