What are Design Tokens?
Design Tokens are just one part of a design system, including, but not limited to components, patterns, icons, guidelines, principles, accessibility standards, and more. Tokens typically represent color and typography to keep designs consistent and on-brand across all media, but can even extend to things like grid systems, styling, animations, and more.
UXLord has a great 6-minute explainer video if you’re new to the concept:
If you’ve ever sunk time into syncing colors, typography, borders, spacing, and other values from Figma to code and vice-versa, an automated Design Token System can speed up that process while reducing errors and reducing manual labor. Terrazzo is an open-source, MIT-licensed system for managing your design tokens built on the open standard W3C Design Tokens Community Group (DTCG) format.
The Workflow
The main idea is your tokens get saved in a JSON format (DTCG) we’ll refer to as tokens.json on this site. The main flow is:
- Export tokens.json from Figma (or whatever design program you use)
- Import tokens.json into Token Lab: powerful color and typography tools to polish your design system
- Save your new tokens.json: keep it safe!
- Use the Terrazzo CLI to generate code: make your developers happy in any language of your stack.
1. Export tokens.json from Figma
Figma supports DTCG natively if you are keen to write code yourself, but if not, the open-source TokensBrücke plugin (German for “bridge”) can export tokens.json file for you (just be sure to turn the “Use DTCG keys Format” switch on).
Once you have that .json file on your computer, you’re ready for the next step!
PenPot
If using PenPot, an open-source Figma alternative, the penpot-export extension can output tokens.json in DTCG format.
2. Import tokens.json into Token Lab
Drag-and-drop tokens.json into the code editor on the Token Lab sidepanel and get to work. As you work, this will automatically be updated for you. Be sure to save often since Terrazzo won’t handle versions / unlimited undos (yet).
3. Save your tokens.json
Click the Save button in the top menu, or hit ⌘ + S to open a save dialog. Save the tokens.json file in a safe place (also use this to keep versions, e.g. tokens-2024-01-18.json).
4. Use the Terrazzo CLI to generate code
The Terrazzo CLI can generate CSS, Sass, JavaScript/TypeScript, JSON, Tailwind, and more. You can also write your own plugin easily to generate any type of format you need.