Token Driven UI Development
summary
Argues that UI is driven by concrete design tokens (colors, fonts, corner radius, opacity) and demonstrates a SwiftUI implementation using protocols to define a design Library provider that gets injected into views. Uses Figma variables exported as JSON (or a backend-served JSON) to update tokens at runtime. Shows two theme libraries (lime and vintage) and a single card component that switches theme without code changes, with code and demo on GitHub. design tokens ensure one source of truth.
AI-written summary · about
chapters (13)
- 0:00Introduction
- 1:06Engineers vs designers
- 5:34Atomic design basics
- 7:44What are design tokens
- 9:51Token naming conventions
- 12:06Live demo overview
- 12:29Design system in Figma
- 16:29Tokens in Swift UI
- 17:34Swift protocols for tokens
- 21:49Concrete token implementation
- 23:12Switching themes easily
- 23:56Single source of truth
- 24:58Q&A session
related talks
29mHow to bridge the gap between design and development
01h 00mDesign Token Architecture
35mThe Evolution of Design Tokens
35mDesign Tokens for Cross-platform Design Systems
18mOne design system to rule them all 1
51mDesign system and tokens
29mCreating universal design systems across web and mobile with Utility First Styling
13mLightning Talk: Design Tokens – Searching for a Source of Truth