Member-only story
Design tokens and why design systems need them?
One magic, simple concept and a one-stop-shop to contain our design equals one hell of a powerhouse.
What you will learn in this article
- Learn what design tokens are
- Learn how you can work with a “structured design” approach
This is an excerpt from a course I am making with Newline, called “The newline Guide to React Component Design Systems with Figmagic”.
You might also be interested in my article “How To Automate Design Handoffs and Set Up a Design System with Figmagic”.
Structured design and controlled evolution
Tokens offer a form of “contract” between a designer’s intent and its fulfillment by developers. This means that both sides agree to treat the individual parts of a complete design through the tokens that represent those values. As a format, they are super easy to read, understand, and adapt for consumption by many types of systems or applications. That’s very important as you start doing cross-platform apps and anything similarly complex.
Tokens ensure that values are not magic numbers or ”just picked at random”. This makes communication precise and effortless. Creating actual code for components, even complex ones, also becomes a lot less of a bore, since what you are doing is just pointing stuff like padding, Z indices and anything else to their token names.
For instance, we need to add margins to a box. Let’s see what we have available:
const spacings = {
small: “0.5rem”,
};Given the above, the small spacing is the single spacing you can use for your margins, paddings or other sizings. For sure you sometimes need to hardcode new unique values, but that should be a very small number of instance in which that happens. I call this “structured design” — no need to make it a big concept — but it’s an approach in which we leave as little as possible out to chance.
