Bridge the Gap between Design and Development
summary
Shows a practical pipeline: capture decisions as JSON design tokens in Figma using the Token Studio plugin, push via GitHub sync to a safe branch, and let engineers consume tokens in React (breaking-name changes cause immediate failures). Demonstrates theme switching in Figma, Penpot, InDesign and PowerPoint, and a graph engine alpha that generates contrast-checked color scales algorithmically. Builds a standalone token platform and version-controlled workflow that mostly works but requires coordinated naming and repeatable rollbacks.
AI-written summary · about
chapters (6)
- 0:00Introduction and context
- 2:22What are design tokens?
- 11:30Lessons from failure
- 23:24A collaborative workflow
- 28:53Future-friendly solutions
- 35:54Q&A and closing
related talks
23mHow design tokens can make us better collaborators
49mExploring the Anatomy of Design Systems
14mRethinking Designer-Developer Collaboration
35mDesign Tokens for Cross-platform Design Systems
40mHow to optimise the workflow between designers and developers using design..
23mHow to create Figma design loved by developers
16mDesign Language on Autopilot: How Figma and Code Can Automate Your Workflow
27mDesign Tokens and You