Design Token Resources

Design Tokens 101

https://help.figma.com/hc/en-us/articles/18490793776023-Update-1-Tokens-variables-and-styles

Courses

https://designtokenscourse.com

Intro

https://martinfowler.com/articles/design-token-based-ui-architecture.html

https://medium.com/@nitishkmrk/design-tokens-beginners-guide-4424944bf5f9

https://gos.si/blog/inside-design-tokens-definitions-traits

https://designstrategy.guide/design-system/design-tokens-101/

https://specifyapp.com/blog/introduction-to-design-tokens

https://uxdesign.cc/the-ultimate-design-token-setup-cdf50dc841c8

https://css-tricks.com/what-are-design-tokens/

https://medium.com/eightshapes-llc/tokens-in-design-systems-25dd82d58421

https://uxdesign.cc/design-system-figma-variables-f3d9c4351bcc

https://www.contentful.com/blog/design-token-system

https://liferay.design/articles/2021/design-tokens-definition-process

W3C specification

https://tr.designtokens.org/format

https://second-editors-draft.tr.designtokens.org/format

https://backlight.dev/blog/design-tokens

https://amzn.github.io/style-dictionary/#/tokens

Taxonomy

Design Token Architecture & Nomenclature (Figma Community)

https://bradfrost.com/blog/post/the-many-faces-of-themeable-design-systems/

https://bradfrost.com/blog/post/creating-themeable-design-systems/

https://www.figmaflow.com/p/naming-design-tokens-the-art-of-clarity

https://designtokens.substack.com/p/naming-conventions-for-design-tokens

https://backlight.dev/blog/naming-conventions-for-design-systems

https://design.gitlab.com/product-foundations/design-tokens-reading

https://designtokens.substack.com/p/the-context-dilemma?r=ms02o

https://samiamdesigns.substack.com/p/a-new-approach-to-naming-design-tokens

https://medium.com/eightshapes-llc/naming-tokens-in-design-systems-9e86c7444676

https://docs.tokens.studio/guides/naming-design-tokens

https://www.designsystemscollective.com/when-semantic-tokens-are-no-longer-semantic-d65ef16fadd7

https://medium.com/eightshapes-llc/reimagining-a-token-taxonomy-462d35b2b033

https://medium.com/@NateBaldwin/component-level-design-tokens-are-they-worth-it-d1ae4c6b19d4

https://uxdesign.cc/naming-design-tokens-9454818ed7cb

https://uxdesign.cc/how-to-name-tokens-in-a-design-system-5b218589dadc

https://specifyapp.com/blog/crafting-consistency-a-thoughtful-approach-for-naming-design-tokens

https://uxdesign.cc/naming-design-tokens-347f630ba4f9

Case studies

https://medium.com/@NateBaldwin/creating-a-flexible-design-token-taxonomy-for-intuits-design-system-81c8ff55c59b

https://blogs.halodoc.io/implementation-of-design-token-at-halodoc

https://dbanks.design/blog/documenting-design-tokens/#Overview

Examples

https://www.lightningdesignsystem.com/design-tokens

https://paste.twilio.design/tokens

https://spectrum.adobe.com/page/design-tokens

https://base.uber.com/6d2425e9f/p/33fa5e-design-tokens

https://docs.tetrisly.com/foundations/overview/design-tokens

Figma

https://www.figma.com/community/plugin/1253571037276959291/variables2json

https://help.figma.com/hc/en-us/articles/15339657135383-Guide-to-variables-in-Figma

https://www.supernova.io/blog/understanding-the-differences-between-figma-variables-and-design-tokens

Versioning

https://designtokens.substack.com/p/versioning-design-tokens

https://keepachangelog.com/en/1.1.0

Tools

https://github.com/salesforce-ux/theo

https://github.com/lukasoppermann/style-dictionary-utils

https://www.notion.com/templates/design-tokens-manager

https://designtokens.substack.com/p/how-to-manage-design-tokens

https://amzn.github.io/style-dictionary/

https://www.style-dictionary-play.dev

https://animaapp.github.io/design-token-validator-site

https://github.com/lukasoppermann/design-tokens

https://proportio.app

https://graph.beta.tokens.studio/editor

https://tokens.studio/blog/revolutionising-design-systems-the-future-of-ui-design-using-graphs-node-based-design

https://tokens.studio/tools/tokenflow (video demo)

Pipeline

https://www.alwaystwisted.com/articles/a-design-tokens-workflow-part-1

https://zeroheight.com/help/article/manage-design-tokens

https://www.supernova.io

https://alexbuenodesign.medium.com/design-tokens-automation-pipeline-from-design-tools-to-cdks-part-1-aac045c8fb15

https://specifyapp.com

https://matthewrea.com/blog/design-token-automation-from-figma-to-storybook

https://diez.org

Lists

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