Design Tokens

Summary

The smallest, named design decisions (a specific color hex, a spacing value, a font size) stored as reusable variables — changing a token updates every component that references it, keeping the whole system consistent.

• 1Define a small set of color and spacing tokens in Figma's variables feature.
• 2Apply your tokens to a component and change one token to see it propagate.
• 3Learn why tokens make theming (like dark mode) far easier to implement consistently.