How to bridge the gap between design and development
summary
A simple NFT card uses four concrete tokens—Corner radius, typography, color, opacity—to switch between Lime and Vintage themes by swapping a single injected design library. Implementation uses SwiftUI, protocol composition and protocol composition and injection to define base colors, clustered tokens and concrete providers; toggling the injected library updates every view. Example shows one extra base token enabling flexible brand variation, and outlines exporting Figma tokens as JSON for SDKs and cross‑platform theming.
AI-written summary · about
chapters (16)
- 0:00Intro
- 1:41Engineers vs Designers
- 3:24Mo’ pages, mo’ problems
- 4:34How can be solve? (Solutions)
- 6:11Our solution
- 8:40What are Tokens?09:00 Why Tokens?
- 10:52Token definition
- 12:09How do we name Tokens?
- 13:25Let’s get down to business
- 14:55Color
- 18:23Let’s talk about tokens in Swift
- 19:10Protocols
- 23:38Concrete implementation
- 25:16Design library
- 26:12Other use cases $ future development
- 27:52Resources
related talks
36mToken Driven UI Development
45mBridge the Gap between Design and Development
01h 00mDesign Token Architecture
18mOne design system to rule them all 1
35mThe Evolution of Design Tokens
35mDesign Tokens for Cross-platform Design Systems
23mDesign Tokens on Asana's Design Systems Team
51mDesign system and tokens