DESIGN TOKENS
Articles, Learning, Cheatsheets, Books, Tools, Plugins, Inspiration
Learning
Subatomic The Complete Guide To Design Tokens
World-renowned design systems experts Brad Frost (creator of Atomic Design) and Ian Frost teach you everything you need to know about creating an effective design token system to help your organization design and build at scale. Introduction to Design Tokens
Book by Michael Mangialardi Design Tokens for Dummies | A Complete Guide
Video tutorial by UI Collective Master Design Tokens - From Basics to Advanced
Video tutorial by UI Collective Ultimate Guide to Figma Variables and Design Tokens!
Video tutorial by Design Pilot Design Tokens Course
Complete guide to design tokens Course Tokens Glossary
By Marta Conde Tokens, variables, and styles
Video tutorial Naming Tokens in Design Systems
By Nathan Curtis Intro to design tokens
by Javier Cuello Introduction to Design Systems: Design Tokens
Video tutorial by Nolan Perkins Tools
Knapsack
Knapsack provides a consolidated platform to manage design and code decisions across your product and brand ecosystem enabling you to deliver better experiences to market, faster.
Design Tokens Name Generator
Create consistent and scalable design token naming conventions for your design system
Naming Tokens in Design Systems
Figma Design File
tokens studio
The scalable design tokens solution for Figma.
Supernova
Connect, manage, and document your design tokens — including Figma Variables — in one place. Supernova automates token imports, updates, and delivery to code.
Specify
Specify helps you unify your brand identity by collecting, storing and distributing design tokens and assets for your design system — automatically.
Penpot: Design Tokens
Penpot is the first tool to integrate native design tokens. Penpot is the web-based open-source design tool that bridges the gap between designers and developers.
Zeplin
Zeplin makes it simple to create or manage design tokens from tools like Figma, Sketch, and Adobe XD, so developers and designers stay in sync.
Diez
The Design Token Framework
Anima
Sync design tokens between Figma and GitHub.
Figma Tokens
A Figma plugin allowing you to define & use tokens directly in Figma, including smart aliases for colors, typography, spacing, border radii, etc.
Inspiration
Design Tokens
Workday Canvas Design System
Design Tokens
Gestalt Design System by Pinterest
Design Tokens
Twillo
Design Tokens
Nord
Design Tokens
Atlassian Design System
Design Tokens
Spectrum, Adobe’s design system
Design Tokens
Duet
Design Tokens
Engie
Design Tokens
Pajamas Design System by Gitlab
Design Tokens
Goldman Sachs
Design Tokens
Intuits Design System
Design Tokens
NewsKit
Design is the intermediary between information and understanding.Hans Hofmann