Design Tokens and You
summary
A single source-of-truth JSON of design tokens (about 6,790-line tokens.json) lives in a GitHub repo and designers edit it from Figma via the Design Tokens Studio plugin. GitHub Actions run a token-transformer GitHub Action and an icon sync, use Style Dictionary to emit Sass, Kotlin and Swift files, and open automated PRs to React, Android and iOS repos. Changes require manual review before merge. The pipeline standardizes colors, spacing, icons and component tokens across apps and successfully keeps UIs in sync.
AI-written summary · about
chapters (9)
- 0:00Introduction
- 1:09Design systems overview
- 4:38What are design tokens
- 12:10Project goals at Outdoorsy
- 15:04Pipeline and workflow
- 18:34Figma and token management
- 22:29Tokens repository structure
- 25:20Style Dictionary tool
- 26:24Pull request process
related talks
35mDesign Tokens for Cross-platform Design Systems
35mThe Evolution of Design Tokens
23mHow design tokens can make us better collaborators
01h 00mDesign Token Architecture
13mLightning Talk: Design Tokens – Searching for a Source of Truth
11mDesign Tokens: Getting Agents to Follow Brand Guidelines
18mOne design system to rule them all 1
23mDesign Tokens on Asana's Design Systems Team