Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/sturobson/Awesome-Design-Tokens

A list of resources on all things to do with Design Tokens
https://github.com/sturobson/Awesome-Design-Tokens

List: Awesome-Design-Tokens

design-system design-systems design-tokens

Last synced: about 2 months ago
JSON representation

A list of resources on all things to do with Design Tokens

Awesome Lists containing this project

README 

        
# Awesome-Design-Tokens



## Design Tokens Community Group



- [Design Tokens Community Group Repo](https://github.com/design-tokens/community-group)

- [Design Tokens on 𝕏](https://x.com/DesignTokens)



## Live Sites



A list of company design systems Design Tokens section



- [Salesforce Lightning Design System](https://www.lightningdesignsystem.com/design-tokens/)

- [Formstack](https://www.formstack.com/brand/design-system/variables-colors)

- [Comet (Discovery Education)](https://comet.discoveryeducation.com/visual-language/tokens.html)

- [Hex (Bitnami)](https://design.bitnami.com/category/Design-Tokens/)

- [Mineral UI](https://mineral-ui.netlify.com/tokens)

- [Goldman Sachs - Color Tokens](https://design.gs.com/foundation/color-system/color-tokens#grid)

- [Nordhealth Design Tokens](https://nordhealth.design/tokens/)



## GitHub Repositories



A list of repos that contain a companies Design Tokens



- [Salesforce](https://github.com/salesforce-ux/design-system/tree/master/design-tokens)

- [Open Table](https://github.com/opentable/design-tokens)

- [Kiwi.com](https://github.com/kiwicom/orbit/tree/master/packages/orbit-design-tokens)

- [Mozilla Protocal Design System](https://github.com/mozilla/protocol)

- [Bloomberg](https://github.com/bloombergbna?utf8=✓&q=fishtank&type=&language=)

- [Firefox Photon](https://github.com/FirefoxUX/design-tokens)

- [Shopify Polaris](https://github.com/Shopify/polaris/tree/main/polaris-tokens)

- [Infor Design](https://github.com/infor-design/design-system/tree/master/design-tokens)

- [Backpack](https://github.com/Skyscanner/backpack-foundations)

- [BuildIt Gravity Particles](https://github.com/buildit/gravity-particles)

- [Cedar Design System Tokens](https://github.com/rei/rei-cedar-tokens)

- [Adobe Spectrum](https://spectrum.adobe.com/page/design-tokens/)



## Articles



A list of articles that discuss Design Tokens, including any tutorials found on how they're being created.



- [Design tokens as your DNA](https://zeroheight.com/blog/design-tokens-as-your-dna/)

- [How we implement Semantic Tokens in Tangram](https://medium.com/design-rd/como-implementamos-tokens-semânticos-no-tangram-bbf64ae24dc4)🇵🇹

- [The context dilemma: design tokens and components](https://frontside.com/blog/2021-01-15-design-tokens-and-components/)

- [Design tokens — What are they & how will they help you?](https://lukasoppermann.medium.com/design-tokens-what-are-they-how-will-they-help-you-b73f80f602ab)

- [Tokenize It](https://blog.prototypr.io/tokenize-it-2a544ef1413b)

- [Design Tokens with Figma](https://blog.prototypr.io/design-tokens-with-figma-aef25c42430f)

- [Documenting Design Tokens](https://dbanks.design/blog/documenting-design-tokens/)

- [Tokens in Design Systems](https://medium.com/eightshapes-llc/tokens-in-design-systems-25dd82d58421)

- [Article on UX Collective](https://uxdesign.cc/design-tokens-for-dummies-8acebf010d71)

- [Using design tokens to promote collaboration and maintainability of a design system](http://thibault.mahe.io/blog/design-tokens.html)

- [How we use Sass Maps for Design Tokens and Developer Happiness](https://www.bigeng.io/how-we-use-sass-maps-for-design-tokens-and-developer-happiness/)

- [How to manage your Design Tokens with Style Dictionary](https://medium.com/@didoo/how-to-manage-your-design-tokens-with-style-dictionary-98c795b938aa)

- [What Are Design Tokens?](https://css-tricks.com/what-are-design-tokens/)

- [Making Design Tokens Work Across Platforms with Amazon Style Dictionary](https://writing.mariusz.cc/amazon-style-dictionary-design-tokens/)

- [Manage design tokens with TypeScript and styled-components](https://www.erikverweij.dev/blog/manage-design-tokens-with-typescript-and-styled-components/)

- [Building a Visual Studio Code Theme with Style Dictionary](https://dbanks.design/blog/vs-code-theme-with-style-dictionary/)

- [Theo Design Tokens Using Node-Sass Importer For Any Build Method](https://basalt.io/blog/theo-design-tokens-using-node-sass-importer-for-any-build-method)

- [Design Tokens for Dummies](https://uxdesign.cc/design-tokens-for-dummies-8acebf010d71)

- [Naming Tokens in Design Systems](https://medium.com/eightshapes-llc/naming-tokens-in-design-systems-9e86c7444676)

- [Building better products with a design token pipeline](https://uxdesign.cc/building-better-products-with-the-design-token-pipeline-faa86aa068e8)

- [Design Tokens Only Exist In A Pre-Processed State](https://carbonemike.com/design-tokens-only-exist-pre-processed)

- [Minumum Viable Design Tokens](https://bootcamp.uxdesign.cc/minimum-viable-design-tokens-e5cdbe69db96)

- [Where to Start with Design Tokens](https://mcapoz.medium.com/where-to-start-with-design-tokens-fbfd1c168101)

- [Dynamic Design Tokens](https://mcapoz.medium.com/where-to-start-with-design-tokens-fbfd1c168101)

- [Design Tokens Cheatsheet](https://uxdesign.cc/design-tokens-cheatsheet-927fc1404099)

- [Design Tokens in Figma - Setting Up Your Design System](https://www.headway.io/blog/design-tokens-in-figma-setting-up-your-design-system)

- [Cómo implementamos Design Tokens en Bnext (How we implement Design Tokens in Bnext)](https://bnextdesign.medium.com/cómo-implementamos-design-tokens-en-bnext-e75e25c40289) 🇪🇸

- [JSON to Figma, from Vanilla JS to React](https://medium.com/weekly-webtips/json-to-figma-plugin-from-vanilla-js-to-react-6229a64b3a3e)

- [Collaboration with design tokens and storybook](https://zure.com/en/blog/collaboration-with-design-tokens-and-storybook/)

- [Full Featured Themes in Figma](https://gos.si/blog/full-featured-themes-in-figma/)

- [Creating design systems based on design tokens with Figma Tokens](https://www.jansix.at/blog/creating-design-systems-based-on-design-tokens-figma-tokens)

- [Design Systems, Design Tokens & Atomic Design — The Art of Scaling Design](https://www.bornfight.com/blog/design-systems-design-tokens-atomic-design-the-art-of-scaling-design/)

- [Component-Specific Design Tokens](https://cloudfour.com/thinks/component-specific-design-tokens/)

- [Design Systems @ Replit: Better Tokens](https://blog.replit.com/rui-tokens)

- [The Anatomy of a Design Token](https://medium.com/@jonas_duri/effective-design-token-structure-111e4bd934c8)

- [Design Tokens and Components in TruePay 🇵🇹](https://medium.com/truepay/design-tokens-e-componentes-na-truepay-928d1aa4f58c)

- [Implementing Design Tokens in Workflows](https://www.nearform.com/blog/implementing-design-tokens-in-workflows/)

- [Share design tokens across projects with JSX files](https://motiondeveloper.com/blog/design-tokens-jsx)

- [Turf- Designing the rules of play!](https://d11engg.medium.com/turf-designing-the-rules-of-play-1c8738d743d2)

- [Introducing Style-Dictionnary](http://www.intothesystem.blog/2021/09/17/introducing-style-dictionnary/_)

- [Keeping it consistent: Design Tokens](https://bootcamp.uxdesign.cc/keeping-it-consistent-design-tokens-eaecdbdfee50)

- [Becoming a design tokens ambassador](https://specifyapp.com/blog/becoming-a-design-tokens-ambassador)

- [Standardized Design Tokens and CSS for a consistent, customizable, and interoperable WordPress future](https://mrwweb.com/standardized-design-tokens-css-wordpress-future/)

- [Use Design Tokens to Connect Design System and Code Production](https://medium.com/imgcook/use-design-tokens-to-connect-design-system-and-code-production-25f5381a3a0)

- [Design tokens and why design systems need them?](https://mikaelvesavuori.medium.com/design-tokens-and-why-design-systems-need-them-35aec05fe584)

- [Design Tokens and how a W3C specification will help going forward](https://backlight.dev/blog/design-tokens/)

- [TypeScript Design Tokens with Styled Components](https://dev.to/mattisadev/typescript-design-tokens-with-styled-components-42ma)

- [Design Tokens: How to adopt Design Tokens from 0 to 1](https://medium.com/@mewomewoliu/how-to-adopt-design-token-from-0-to-1-e7fc73d3e05c)

- [Design token scales](https://chienchwu.medium.com/design-token-scales-88286ebb6a30)

- [Design tokens: what they are and how to work with them](https://medium.com/interactive-design-company/design-tokens-what-they-are-and-how-to-work-with-them-1cd4501523f4)

- [Setting up Design Tokens for Multi-themes in Figma](https://www.samrosecruz.com/blog/setting-up-design-tokens-for-multi-themes-in-figma/)

- [Design tokens as your DNA](https://zeroheight.com/blog/design-tokens-as-your-dna/)

- [Dark mode with design tokens](https://uxdesign.cc/dark-mode-with-design-tokens-8d7b9d9753a)

- [The Pyramid Design Token Structure: The Best Way to Format, Organize, and Name Your Design Tokens](https://stefaniefluin.medium.com/the-pyramid-design-token-structure-the-best-way-to-format-organize-and-name-your-design-tokens-ca81b9d8836d)

- [Evolution of design tokens and component styling, part 1](https://medium.com/fast-design/evolution-of-design-tokens-and-component-styling-part-1-f1491ad1120e)

- [Design Tokens- Future of Design Systems](https://bootcamp.uxdesign.cc/design-tokens-future-of-design-systems-ccdb15ee2db)

- [How we implement Semantic Tokens in Tangram](https://medium.com/design-rd/como-implementamos-tokens-semânticos-no-tangram-bbf64ae24dc4)

- [Improving Accessibility with Design Tokens (with video)](https://solomon.io/improving-accessibility-with-design-tokens/)

- [Reference Token vs System Token](https://medium.com/@a.v2599/reference-token-vs-system-token-9d8f5de50342)

- [A Primer on Design Tokens](https://medium.com/@renakuai/a-primer-on-design-tokens-f7dd432f06ae)

- [Figma Design Tokens with Github Repositores](https://bootcamp.uxdesign.cc/figma-design-tokens-with-github-repositories-cb0554156137)

- [Piping Design Tokens from Figma](https://medium.com/@dznjudo/piping-design-tokens-from-figma-8a086a6ac17c)

- [Component-level Design Tokens: are they worth it?](https://medium.com/@NateBaldwin/component-level-design-tokens-are-they-worth-it-d1ae4c6b19d4)

- [Evolution of Design Tokens and Component Styling, part 2](https://medium.com/fast-design/evolution-of-design-tokens-and-component-styling-part-2-1018e8bae62)

- [Life of a Design Token](https://zeroheight.com/blog/life-of-a-design-token/)

- [Design Tokens 101](https://designstrategy.guide/design-system/design-tokens-101/)

- [What are design tokens?](https://bootcamp.uxdesign.cc/what-are-design-tokens-828c67410069)

- [Installing & Syncing Design Tokens](https://satellytes.com/blog/post/installing-and-syncing-figma-design-tokens/)

- [Creating & Crafting a Design Token System](https://satellytes.com/blog/post/creating-and-crafting-a-design-token-system/)

- [Design tokens, a bridge between designers and developers 🇯🇵](https://medium.com/@fcheukyin/デザイントークン-デザイナーとデベロッパーの架け橋-3f5f35b32be5)

- [Design Tokens in Your React Design System — The Right Way](https://javascript.plainenglish.io/design-tokens-in-a-react-component-design-system-the-right-way-f55d392fb540)

- [Reimagining a Token Taxonomy](https://medium.com/eightshapes-llc/reimagining-a-token-taxonomy-462d35b2b033)

- [Creating a design tokens automation pipeline with Figma and Style Dictionary](https://medium.com/@gabrielrudy575/creating-a-design-tokens-automation-pipeline-with-figma-and-style-dictionary-304272d5465f)

- [Icons, in the Design Tokens way](https://valentinoafb.medium.com/icons-in-the-design-tokens-way-24c39cdcbc6a)

- [Design Tokens for better Design Systems](https://bootcamp.uxdesign.cc/design-tokens-for-better-design-systems-ab6d833e8d2f)

- [Complementary Space - Design spacing tokens semantically](https://complementary.space)

- [W3C Design Tokens with Style Dictionary](https://lukasoppermann.medium.com/w3c-design-tokens-with-style-dictionary-f7ff5f2ba98c)

- [Product Designers take note — tokens save time and money](https://medium.com/weareuntilnow/product-designers-take-note-tokens-save-time-and-money-31eed539ed0a)

- [Design tokens 101: A short and practical guide](https://aufaitux.com/blog/what-are-design-tokens/)

- [Design Token Clusters](https://medium.com/towkns/design-token-clusters-9b172c18ee7f)

- [Creating tokens for your design system with ChatGPT assistance](https://uxdesign.cc/design-tokens-abd32379015b)

- [Design Systems: Understanding Design Tokens and their use in Style Dictionary](https://b-benjithomas.medium.com/design-systems-understanding-design-tokens-and-their-use-in-style-dictionary-ee762c614234)

- [Expanding the Reach of Design Tokens: How to Use Them in Non-UI Design](https://uxplanet.org/expanding-the-reach-of-design-tokens-how-to-use-them-in-non-ui-design-60aa4a8e87c)

- [How To Use style-dictionary to manage colours in SwiftUI](https://www.swiftforjs.dev/blog/style-dictionary-colours-swiftui)

- [Design Token Clusters](https://medium.com/towkns/design-token-clusters-9b172c18ee7f)

- [Design Tokens: Unlocking the Power of a Unified Design Language](https://medium.com/@wkhankk/design-tokens-unlocking-the-power-of-a-unified-design-language-fa68bb86937d)

- [How To Use style-dictionary to manage colours in SwiftUI](https://www.swiftforjs.dev/blog/style-dictionary-colours-swiftui)

- [Creating tokens for your design system with ChatGPT assistance](https://uxdesign.cc/design-tokens-abd32379015b)

- [Creating & crafting a design token system](https://bootcamp.uxdesign.cc/creating-crafting-a-design-token-system-b661a9ba9d55)

- [Are design tokens the superpower of design systems?](https://medium.com/nntech/are-design-tokens-the-superpower-of-design-systems-6f512557c7a0)

- [Figma Token Engine: Quick Start](https://medium.com/@jdanielca/figma-token-engine-quick-start-b6e0bc08a388)

- [tokens studio for figma quickstart](https://bootcamp.uxdesign.cc/tokens-studio-for-figma-quickstart-8d3ca9ae6585)

- [Design Tokens 2.0 — The Ultimate Guide.](https://bootcamp.uxdesign.cc/design-tokens-2-0-the-ultimate-guide-32b4a047503)

- [Versioning Design Tokens](https://designtokens.substack.com/p/versioning-design-tokens)

- [A Semantic Approach to Buttons (& More) Using Design Tokens](https://bootcamp.uxdesign.cc/a-semantic-approach-to-buttons-more-a218aee69f47)

- [Design token automation from Figma to Storybook](https://matthewrea.com/blog/design-token-automation-from-figma-to-storybook/)

- [Building a Sustainable and Scalable Workflow Around Design Tokens](https://www.knapsack.cloud/blog/building-a-sustainable-and-scalable-workflow-around-design-tokens)

- [The future possibilities of design tokens](https://www.knapsack.cloud/blog/the-future-possibilities-of-design-tokens)

- [Design Tokens: Beginner’s Guide](https://uxplanet.org/design-tokens-beginners-guide-4424944bf5f9)

- [Design Tokens: What do you need to know?](https://medium.com/@stalinthomas.zbb/design-tokens-what-do-you-need-to-know-b0c2b6e92c8d)

- [Exposing Figma tokens to design system consumers](https://rangle.io/blog/exposing-figma-tokens-to-design-system-consumers)

- [Standardizing the Design Systems by tokenization: Integrating designers and developers workflows](https://bootcamp.uxdesign.cc/standardizing-the-design-systems-by-tokenization-integrating-designers-and-developers-workflows-e649ae1462dc)

- [How design tokens empower better collaboration between designers and developers](https://bootcamp.uxdesign.cc/how-design-tokens-empower-better-collaboration-between-designers-and-developers-c40ab14edb86)

- [Simplifying design tokens](https://medium.com/@erickrubiales/simplifying-design-tokens-e4412812b073)

- [Design tokens: how we use and automate them at GR8 Tech](https://uxplanet.org/design-tokens-how-we-use-and-automate-them-at-parimatch-tech-139d2daad478)

- [Design tokens generator: swift and rational design system foundation](https://bootcamp.uxdesign.cc/design-tokens-generator-simplifying-design-token-management-19fec7be3084)

- [Standardising Design Tokens](https://fullystacked.net/posts/design-tokens/)

- [Making your design tokens future-proof](https://dev.to/andrico1234/making-your-design-tokens-future-proof-3adp)

- [Creating a flexible design token taxonomy for Intuit’s Design System](https://medium.com/@NateBaldwin/creating-a-flexible-design-token-taxonomy-for-intuits-design-system-81c8ff55c59b)

- [Using BEM for design-system tokens (bem-tokens)](https://medium.com/@wfercanas/using-bem-for-design-system-tokens-bem-tokens-46795339a893)

- [Spicy specifications](https://blog.damato.design/posts/spicy-specifications/)

- [Tokens are the most valuable artifact a design system can provide](https://www.knapsack.cloud/blog/tokens-are-the-most-valuable-artifact-a-design-system-can-provide)

- [Unlocking the Power of Design Tokens to Create Dark Mode UI](https://ambitiousdesigner.substack.com/p/unlocking-the-power-of-design-tokens)

- [Design Tokens – What Are They and How to Use Them?](https://dodonut.com/blog/design-tokens-what-are-they-and-how-to-use-them/)

- [How design tokens impact design systems and why we should use them](https://blog.better.care/how-design-tokens-impact-design-systems-and-why-we-should-use-them)

- [Reasonable and scalable taxonomy for tokens](https://medium.com/@andrzej.delgado/ui-crux-reasonable-and-scalable-design-taxonomy-for-tokens-2e97ac36830)



### Collections



- [1. Introduction to Design Tokens](https://www.michaelmang.dev/blog/introduction-to-design-tokens)

- [2. Managing and Exporting Design Tokens With Style Dictionary](https://www.michaelmang.dev/blog/managing-and-exporting-design-tokens-with-style-dictionary)

- [3. Exporting Design Tokens From Figma With Style Dictionary](https://www.michaelmang.dev/blog/exporting-design-tokens-from-figma-with-style-dictionary)

- [4. Consuming Design Tokens From Style Dictionary Across Platform-Specific Applications](https://www.michaelmang.dev/blog/consuming-design-tokens-from-style-dictionary-across-platform-specific-applications)

- [5. Generating Design Token Theme Shades With Style Dictionary](https://www.michaelmang.dev/blog/generating-design-token-theme-shades-with-style-dictionary)

- [6. Documenting Design Tokens With Docusaurus](https://www.michaelmang.dev/blog/documenting-design-tokens-with-docusaurus)

- [7. Integrating Design Tokens With Tailwind](https://www.michaelmang.dev/blog/integrating-design-tokens-with-tailwind)

- [8. Transferring High Fidelity From A Design File To Style Dictionary](https://www.michaelmang.dev/blog/transferring-high-fidelity-from-a-design-file-to-style-dictionary)

- [9. Scoring Design Tokens Adoption With OCLIF and PostCSS](https://www.michaelmang.dev/blog/scoring-design-tokens-adoption-with-oclif-and-postcss)

- [10. Bootstrap UI Components With Design Tokens And Headless UI](https://www.michaelmang.dev/blog/bootstrap-ui-components-with-design-tokens-and-headless-ui)

- [11. Linting Design Tokens With Stylelint](https://www.michaelmang.dev/blog/linting-design-tokens-with-stylelint)

- [12. Stitching Styles to a Headless UI Using Design Tokens and Twind](https://www.michaelmang.dev/blog/stitching-styles-to-a-headless-ui-using-design-tokens-and-twind)

- [Building Rapido’s Design System](https://medium.com/rapido-labs/building-rapidos-design-system-54a0e94bf5dc)

- [Token System](https://medium.com/@leejesslin/token-system-81e83ed9dc4a)

- [create design tokens in 5 easy steps](https://designtokens.substack.com/p/create-design-tokens-in-5-easy-steps)

- [Inside Design Tokens Part 1: Definitions & Traits](https://gos.si/blog/inside-design-tokens-definitions-traits)

- [Inside Design Tokens Part 2: Features](https://gos.si/blog/inside-design-tokens-features)

- [Inside Design Tokens Part 3: Modeling & Communication](https://gos.si/blog/inside-design-tokens-modeling-communication)

- [Inside Design Tokens Part 4: The Three Class Token Society](https://gos.si/blog/inside-design-tokens-the-three-class-token-society)

- [Inside Design Tokens Part 5: Put your Tokens on a Scale](https://gos.si/blog/inside-design-tokens-put-your-tokens-on-a-scale)

- [Inside Design Tokens Part 6: Token Specification](https://gos.si/blog/inside-design-tokens-token-specification)

- [Inside Design Tokens Part 7: Naming](https://gos.si/blog/inside-design-tokens-naming)

- [Inside Design Tokens Part 8: Theming](https://gos.si/blog/inside-design-tokens-theming)

- [Inside Design Tokens Part 9: Internals](https://gos.si/blog/inside-design-tokens-internals)

- [Inside Design Tokens Part 10: The Hidden Knowledge](https://gos.si/blog/inside-design-tokens-the-hidden-knowledge)

- [Atomic design with tokens — The short version](https://medium.com/@mr.matan.rosen/atomic-design-with-tokens-the-short-version-921aba7d3faa)



## Tools



A list of tools that help you generate other files from your design tokens



- [Toolabs DSM](https://www.toolabs.com)

- [Arcade](https://usearcade.com)

- [Supernova](https://www.supernova.io)

- [Design Tokens Cli](https://github.com/Heydon/design-tokens-cli)

- [Theo](https://github.com/salesforce-ux/theo)

- [Style Dictionary](https://github.com/amzn/style-dictionary)

- [Style Dictionary Utils](https://github.com/lukasoppermann/style-dictionary-utils#shadowcss)

- [Mole](https://github.com/limitlessloop/mole)

- [Dragoman](https://github.com/NateBaldwinDesign/dragoman)

- [design-system-utils](https://github.com/mrmartineau/design-system-utils)

- [Design Tokens Explorer](https://github.com/here-erhe/Design-Token-Exporter)

- [Theme.css](https://github.com/ds-tools/theme.figma/blob/master/readme.md)

- [Chromatic](https://github.com/ui-js/chromatic)

- [SuperPosition](https://superposition.design)

- [DesignTokens.dev](https://www.designtokens.dev)

- [Gorko](https://github.com/hankchizljaw/gorko)

- [Specify](https://www.specifyapp.com)

- [Toolabs](https://www.toolabs.com)

- [Design Tokens GitHub Actions Generator](https://design-tokens-github-actions-generator.netlify.app)

- [Theemo](https://gossi.github.io/theemo/)

- [PostCSS Design Tokens](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-design-tokens)

- [Design tokens export plugin](https://github.com/design-meets-development/design-tokens-plugin)

- [Design Tokens Generator](https://tokens.layoutit.com/)

- another [Design Tokens Generator](https://www.design-tokens.dev)

- [Design Tokens Validator](https://animaapp.github.io/design-token-validator-site/)



## Resources



Lists of 'ready made' pages, or starter kits

### Figma

- [Mini Design Token](https://www.figma.com/community/file/1223864407347233084)

- [Resources and Templates from Zeroheight](https://www.figma.com/@zeroheight)

### Notion

- [Design Tokens Manager](https://zetareticoli.gumroad.com/l/design-tokens-manager)



## Plugins



A list of plugins to help you move tokens from apps to wherever you want

###  Figma

- [Design Tokens Manager (Figma)](https://www.figma.com/community/plugin/1263743870981744253/design-tokens-manager)

- [Figmagic (Figma)](https://github.com/mikaelvesavuori/figmagic)

- [Figgo (Figma)](https://github.com/B3nnyL/figgo)

- [Design Tokens](https://github.com/lukasoppermann/design-tokens)

- [JSON to Figma](https://www.figma.com/community/plugin/789839703871161985/JSON-to-Figma)

- [Wunderzin](https://github.com/PavelLaptev/wunderzin)

- [Theemo](https://www.figma.com/community/plugin/791262205400516364)

- [Figmagic (Figma)](https://github.com/mikaelvesavuori/figmagic)

- [Figgo (Figma)](https://github.com/B3nnyL/figgo)

- [Design Tokens (Figma)](https://github.com/lukasoppermann/design-tokens)

- [Toolabs DSM (Figma)](https://www.figma.com/community/plugin/862818788004280193/Toolabs-Design-System-Manager)

- [Figma Token Engine](https://www.npmjs.com/package/figma-token-engine)

- [Tokens Studio](https://tokens.studio)

  - [Documenting Multiple Tokens 📽️](https://share.cleanshot.com/28hCmzbz)

- [Use Design Tokens](https://usedesigntokens.com)



### Sketch

- [Design Tokens (Sketch)](https://design-tokens.netlify.app)

- [Abstract Connect](https://github.com/MichaelZaporozhets/abstractconnect)

- [Design Tokens Exporter](https://github.com/icona79/sketch-design-tokens-exporter)



### Adobe XD

- [Style Mate (XD)](https://useratio.com/stylemate/)

- [Generating a Style Dictionary from a Design System Palette (DSP) using the Adobe XD Extension in VSCode](https://medium.com/@yokesh_ks/generating-a-style-dictionary-from-a-design-system-palette-dsp-using-the-adobe-xd-extension-in-5035ea837aa6)



### MockFlow

- [Design Tokens](https://mockflow.com/mockstore/#/powerup/Dbf4986ea1bacffca316048f9bc337ff8/Design%20Tokens)



### Invision DSM

- [Organizing Design Tokens](https://support.invisionapp.com/hc/en-us/articles/360049483372)



## Slides, Videos, Podcasts



### Videos



- 📽 [WTF are Design Tokens?](https://www.youtube.com/watch?v=q5qIowMyVt8)

- 📽 [Design Tokens – Searching for a Source of Truth](https://youtu.be/oYhPtoc4TqE)

- 📽 [Building Consistent Cross-Platform Interfaces](https://youtu.be/OCMt-aA8XBA)

- 📽 [Design Tokens and CSS](https://youtu.be/map-zXfy6y0)

- 📽 [Design Tokens 101](https://kilianvalkhof.com/2020/design/design-tokens-101/)

- 📽 [Mikolaj Dobrucki - Getting More with Design Tokens](https://vimeo.com/356648535)

- 📽 [Louis Chenais - Standardisation des design tokens : le futur du design à grande échelle ?](https://www.youtube.com/watch?v=vs8DjsdOroc) (🇫🇷)

- 📽 [An introduction to the design tokens file format](https://youtu.be/ssOdzxZdg58)

- 📽 [Understanding design tokens, from UX tool to production by Debora Ornellas](https://youtu.be/uZk9J8asEcY)



### Slides



- 📊 [Tokens in Design Systems](https://speakerdeck.com/jina/design-tokens-in-design-systems)

- 📊 [Design Tokens and CSS](https://noti.st/sturobson/H9SeXk/design-tokens-and-css-systemising-the-design-of-components)

- 📊 [Louis Chenais - Design Tokens: To Infinity and Beyond](https://noti.st/louischenais/byPUwK/design-tokens-to-infinity-and-beyond)



### Podcasts

- 🎧 [Design Tokens: Scaling Design with a Single Source of Truth](https://aycl.uie.com/virtual_seminars/design_tokens_scaling_design_with_a_single_source_of_truth) (💲)

- 🎧 [Smashing Podcast Episode 3 With Jina: What Are Design Tokens?](https://www.smashingmagazine.com/2019/11/smashing-podcast-episode-3/)

- 🎧 [Toolsday 104. Design Tokens with Jina](https://spec.fm/podcasts/toolsday/309795)

- 🎧 [Using design tokens to standardize deliverables](https://www.designsystemspodcast.com/episodes/episode/48e64e62/28-matthew-strom-from-simplehealth-using-design-tokens-to-standardize-deliverables)

- 🎧 Design Token Takes [Part 1](https://www.designsystemspodcast.com/episodes/episode/796fa1b9/66-design-token-takes-part-one-amber-stickel-and-taylor-cashdan) [Part 2](https://www.designsystemspodcast.com/episodes/episode/7944adfb/67-design-token-takes-part-two-kaelig-deloumeau-prigent-and-darren-simons)



## Other



- [Universal Design Tokens](https://udt.design)

- [Component Tokens & Themes Example, learning Figma Tokens](https://www.figma.com/community/file/1077953107713783283?preview=fullscreen)