Photo by Eugenia Kozyr on Unsplash

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.