Learn how to Build Design Systems with tokens for Figma & Flutter
summary
Shows a concrete pipeline: design tokens live in Token Studio inside Figma, exported to JSON and pushed through Supernova export to generate Flutter theme extension code, plus a small gallery app that switches themes live to prove it works. Workflows are only partially automated (manual export or a repo that creates PRs via GitHub Actions), tools crash sometimes, naming and hardcoded pixel values cause problems, and Figma’s new variables don’t yet replace the plugin.
AI-written summary · about
chapters (7)
- 0:00Introduction to design tokens
- 10:50Figma plugins for design systems
- 22:59Token structure and naming conventions
- 31:55Live Flutter token integration demo
- 44:15Automating token updates
- 59:55Live theme customization demo
- 1:12:29Future of design tokens
related talks
37mBuilding a Design System in Flutter Within Everyone's Reach
51mDesign system and tokens
18mOne design system to rule them all 1
45mBridge the Gap between Design and Development
49mExploring the Anatomy of Design Systems
23mHow design tokens can make us better collaborators
35mDesign Tokens for Cross-platform Design Systems
01h 00mDesign Token Architecture