Awesome
Awesome-Design-Tokens
Design Tokens Community 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
- How design tokens empower better collaboration between designers and developers
- Simplifying design tokens
- Design tokens: how we use and automate them at GR8 Tech
- Design tokens generator: swift and rational design system foundation
- Standardising Design Tokens
- Making your design tokens future-proof
- Creating a flexible design token taxonomy for Intuitβs Design System
- Using BEM for design-system tokens (bem-tokens)
- Spicy specifications
- Tokens are the most valuable artifact a design system can provide
- Unlocking the Power of Design Tokens to Create Dark Mode UI
- Design Tokens β What Are They and How to Use Them?
- How design tokens impact design systems and why we should use them
- Reasonable and scalable taxonomy for tokens
Collections
- 1. Introduction to Design Tokens
- 2. Managing and Exporting Design Tokens With Style Dictionary
- 3. Exporting Design Tokens From Figma With Style Dictionary
- 4. Consuming Design Tokens From Style Dictionary Across Platform-Specific Applications
- 5. Generating Design Token Theme Shades With Style Dictionary
- 6. Documenting Design Tokens With Docusaurus
- 7. Integrating Design Tokens With Tailwind
- 8. Transferring High Fidelity From A Design File To Style Dictionary
- 9. Scoring Design Tokens Adoption With OCLIF and PostCSS
- 10. Bootstrap UI Components With Design Tokens And Headless UI
- 11. Linting Design Tokens With Stylelint
- 12. Stitching Styles to a Headless UI Using Design Tokens and Twind
- Building Rapidoβs Design System
- Token System
- create design tokens in 5 easy steps
- Inside Design Tokens Part 1: Definitions & Traits
- Inside Design Tokens Part 2: Features
- Inside Design Tokens Part 3: Modeling & Communication
- Inside Design Tokens Part 4: The Three Class Token Society
- Inside Design Tokens Part 5: Put your Tokens on a Scale
- Inside Design Tokens Part 6: Token Specification
- Inside Design Tokens Part 7: Naming
- Inside Design Tokens Part 8: Theming
- Inside Design Tokens Part 9: Internals
- Inside Design Tokens Part 10: The Hidden Knowledge
- Atomic design with tokens β The short version
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
- Cobalt UI
- Mole
- design-system-utils
- Design Tokens Explorer
- Theme.css
- Chromatic
- SuperPosition
- DesignTokens.dev
- Gorko
- Specify
- Design Tokens GitHub Actions Generator
- Theemo
- PostCSS Design Tokens
- Design tokens export plugin
- Design Tokens Generator
- another Design Tokens Generator
- Design Tokens Validator
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
- Design Tokens Manager (Figma)
- Figmagic (Figma)
- Figgo (Figma)
- Design Tokens
- JSON to Figma
- Wunderzin
- Theemo
- 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