Design Tokens
- Makes things consistent
- Makes it faster/efficient to manage a design system (you don’t have to change every screen)
- Removes error + ambiguity in building product
- Design tokens are a method for managing design properties and values across a system
- Value is easier to refer to via token name
- Aliases can help tokens take on value of other tokens — can be organized in categories/subcategories
- Token organization
- Primitive tokens
- Primitive tokens tell us what properties and values exist within our designs
- Defines every value in system — these are the hard coded numbers and values
- Reference only, and are never applied directly in designs
- Semantic tokens
- Can be applied to designs
- “how” the token should be used
- conveys meaning, purpose, how it should be used — example: surface (for object) / brand (for identity) / contrast (used to grab attention)
- Component-specific tokens
- More specificity
- “where” a token is used
- Used directly in designs as well
- Decide between the two, or both
Implementing Tokens
- Set up primitives in Variables (tip: hide these from publishing so people don’t use them)
- Create Tokens in Variables for semantic or component-specific tokens
Naming Tokens
- Make sure they’re easy to understand, neutral language
- Full words instead of abbreviations (could be unclear)
- Be consistent with prefixes
- Use single or plural names based on context they’re being used
- Avoid using brand names — use names that could be used in broader context
- Future proof token naming so that it can scale