My collection of design token stuff.
Design Tokens 101
Super fast intro
Figma’s video on tokens and variables
https://help.figma.com/hc/en-us/articles/18490793776023-Update-1-Tokens-variables-and-styles
Intro article for stakeholders
https://freedium.cfd/https://uxdesign.cc/design-tokens-for-non-designers-f68b8b0fbf0a
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
Taxonomy
https://adobe.design/stories/design-for-scale/naming-colors-in-design-systems
Design Token Architecture Nomenclature
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://engineering.zalando.com/posts/2024/05/theming-the-zalando-design-system.html
https://blogs.halodoc.io/implementation-of-design-token-at-halodoc
https://dbanks.design/blog/documenting-design-tokens/#Overview
Examples
https://kickstand-ui.com/design-tokens/shadows.html
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://medium.com/@hurleymandrew/responsive-tokens-universal-design-systems-e90de50ac00a
Concept of ‘jumper’ spacing variables in the following video (define spacing change between desktop/tablet/mobile):
https://help.figma.com/hc/en-us/articles/15339657135383-Guide-to-variables-in-Figma
Plugins
Variables visualization
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://www.style-dictionary-play.dev
https://animaapp.github.io/design-token-validator-site
https://github.com/lukasoppermann/design-tokens
https://graph.beta.tokens.studio/editor
https://tokens.studio/tools/tokenflow (video demo)
Pipeline
https://docs.tokens.studio/token-storage-and-sync/sync-provider-overview
https://www.alwaystwisted.com/articles/a-design-tokens-workflow-part-1
https://zeroheight.com/help/article/manage-design-tokens
This video does a great job of showing how design tokens are converted into platform-specific formats like CSS:
https://matthewrea.com/blog/design-token-automation-from-figma-to-storybook