Awesome-Design-Tokens
Design Tokens Working Group
Live Sites
A list of company design systems Design Tokens section
- Salesforce Lightning Design System
- Formstack
- Comet (Discovery Education)
- Hex (Bitnami)
- Mineral UI
- Goldman Sachs - Color Tokens
- Nordhealth Design Tokens
GitHub Repositories
A list of repos that contain a companies Design Tokens
- Salesforce
- Open Table
- Kiwi.com
- Mozilla Protocal Design System
- Bloomberg
- Firefox Photon
- Shopify Polaris
- Infor Design
- Backpack
- BuildIt Gravity Particles
- Cedar Design System Tokens
- Adobe Spectrum
Articles
A list of articles that discuss Design Tokens, including any tutorials found on how they're being created.
- Design tokens as your DNA
- How we implement Semantic Tokens in Tangram
๐ต๐น - The context dilemma: design tokens and components
- Design tokens โ What are they & how will they help you?
- Tokenize It
- Design Tokens with Figma
- Documenting Design Tokens
- Tokens in Design Systems
- Article on UX Collective
- Using design tokens to promote collaboration and maintainability of a design system
- How we use Sass Maps for Design Tokens and Developer Happiness
- How to manage your Design Tokens with Style Dictionary
- What Are Design Tokens?
- Making Design Tokens Work Across Platforms with Amazon Style Dictionary
- Manage design tokens with TypeScript and styled-components
- Building a Visual Studio Code Theme with Style Dictionary
- Theo Design Tokens Using Node-Sass Importer For Any Build Method
- Design Tokens for Dummies
- Naming Tokens in Design Systems
- Building better products with a design token pipeline
- Design Tokens Only Exist In A Pre-Processed State
- Minumum Viable Design Tokens
- Where to Start with Design Tokens
- Dynamic Design Tokens
- Design Tokens Cheatsheet
- Design Tokens in Figma - Setting Up Your Design System
- Cรณmo implementamos Design Tokens en Bnext (How we implement Design Tokens in Bnext)
๐ช๐ธ - JSON to Figma, from Vanilla JS to React
- Collaboration with design tokens and storybook
- Full Featured Themes in Figma
- Creating design systems based on design tokens with Figma Tokens
- Design Systems, Design Tokens & Atomic Design โ The Art of Scaling Design
- Component-Specific Design Tokens
- Design Systems @ Replit: Better Tokens
- The Anatomy of a Design Token
- Design Tokens and Components in TruePay
๐ต๐น - Implementing Design Tokens in Workflows
- Share design tokens across projects with JSX files
- Turf- Designing the rules of play!
- Introducing Style-Dictionnary
- Keeping it consistent: Design Tokens
- Becoming a design tokens ambassador
- Standardized Design Tokens and CSS for a consistent, customizable, and interoperable WordPress future
- Use Design Tokens to Connect Design System and Code Production
- Design tokens and why design systems need them?
- Design Tokens and how a W3C specification will help going forward
- TypeScript Design Tokens with Styled Components
- Design Tokens: How to adopt Design Tokens from 0 to 1
- Design token scales
- Design tokens: what they are and how to work with them
- Setting up Design Tokens for Multi-themes in Figma
- Design tokens as your DNA
- Dark mode with design tokens
- The Pyramid Design Token Structure: The Best Way to Format, Organize, and Name Your Design Tokens
- Evolution of design tokens and component styling, part 1
- Design Tokens- Future of Design Systems
- How we implement Semantic Tokens in Tangram
- Improving Accessibility with Design Tokens (with video)
- Reference Token vs System Token
- A Primer on Design Tokens
- Figma Design Tokens with Github Repositores
- Piping Design Tokens from Figma
- Component-level Design Tokens: are they worth it?
- Evolution of Design Tokens and Component Styling, part 2
- Life of a Design Token
- Design Tokens 101
- What are design tokens?
- Installing & Syncing Design Tokens
- Creating & Crafting a Design Token System
- Design tokens, a bridge between designers and developers
๐ฏ๐ต - Design Tokens in Your React Design System โ The Right Way
- Reimagining a Token Taxonomy
- Creating a design tokens automation pipeline with Figma and Style Dictionary
- Icons, in the Design Tokens way
- Design Tokens for better Design Systems
- Complementary Space - Design spacing tokens semantically
- W3C Design Tokens with Style Dictionary
- Product Designers take note โ tokens save time and money
- Design tokens 101: A short and practical guide
- Design Token Clusters
- Creating tokens for your design system with ChatGPT assistance
- Design Systems: Understanding Design Tokens and their use in Style Dictionary
- Expanding the Reach of Design Tokens: How to Use Them in Non-UI Design
- How To Use style-dictionary to manage colours in SwiftUI
- Design Token Clusters
- Design Tokens: Unlocking the Power of a Unified Design Language
- How To Use style-dictionary to manage colours in SwiftUI
- Creating tokens for your design system with ChatGPT assistance
- Creating & crafting a design token system
- Are design tokens the superpower of design systems?
- Figma Token Engine: Quick Start
- tokens studio for figma quickstart
- Design Tokens 2.0 โ The Ultimate Guide.
- Versioning Design Tokens
- A Semantic Approach to Buttons (& More) Using Design Tokens
- Design token automation from Figma to Storybook
- Building a Sustainable and Scalable Workflow Around Design Tokens
- The future possibilities of design tokens
- Design Tokens: Beginnerโs Guide
- Design Tokens: What do you need to know?
- Exposing Figma tokens to design system consumers
- Standardizing the Design Systems by tokenization: Integrating designers and developers workflows
Collections
-
2. Managing and Exporting Design Tokens With Style Dictionary
-
4. Consuming Design Tokens From Style Dictionary Across Platform-Specific Applications
-
5. Generating Design Token Theme Shades With Style Dictionary
-
8. Transferring High Fidelity From A Design File To Style Dictionary
-
10. Bootstrap UI Components With Design Tokens And Headless UI
-
12. Stitching Styles to a Headless UI Using Design Tokens and Twind
Tools
A list of tools that help you generate other files from your design tokens
- Toolabs DSM
- Arcade
- Supernova
- Design Tokens Cli
- Theo
- Style Dictionary
- Style Dictionary Utils
- Mole
- Dragoman
- design-system-utils
- Design Tokens Explorer
- Theme.css
- Chromatic
- SuperPosition
- DesignTokens.dev
- Gorko
- Specify
- Toolabs
- Design Tokens GitHub Actions Generator
- Theemo
- PostCSS Design Tokens
- Design tokens export plugin
- Design Tokens Generator
Resources
Lists of 'ready made' pages, or starter kits
Figma
Notion
Plugins
A list of plugins to help you move tokens from apps to wherever you want
Figma
- Figmagic (Figma)
- Figgo (Figma)
- Design Tokens
- JSON to Figma
- Wunderzin
- Theemo
- Figmagic (Figma)
- Figgo (Figma)
- Design Tokens (Figma)
- Toolabs DSM (Figma)
- Figma Token Engine
- Tokens Studio
- Use Design Tokens
Sketch
Adobe XD
- Style Mate (XD)
- Generating a Style Dictionary from a Design System Palette (DSP) using the Adobe XD Extension in VSCode
MockFlow
Invision DSM
Slides, Videos, Podcasts
Videos
๐ฝ WTF are Design Tokens?๐ฝ Design Tokens โ Searching for a Source of Truth๐ฝ Building Consistent Cross-Platform Interfaces๐ฝ Design Tokens and CSS๐ฝ Design Tokens 101๐ฝ Mikolaj Dobrucki - Getting More with Design Tokens๐ฝ Louis Chenais - Standardisation des design tokens : le futur du design ร grande รฉchelle ? (๐ซ๐ท )๐ฝ An introduction to the design tokens file format๐ฝ Understanding design tokens, from UX tool to production by Debora Ornellas
Slides
๐ Tokens in Design Systems๐ Design Tokens and CSS๐ Louis Chenais - Design Tokens: To Infinity and Beyond
Podcasts
๐ง Design Tokens: Scaling Design with a Single Source of Truth (๐ฒ )๐ง Smashing Podcast Episode 3 With Jina: What Are Design Tokens?๐ง Toolsday 104. Design Tokens with Jina๐ง Using design tokens to standardize deliverables๐ง Design Token Takes Part 1 Part 2