Building Design Systems for Scale: From Tokens and Components to Motion & AI Tools
summary
Shows a monorepo (app + nexus-library) with PNPM, Vite build config and a styled‑components theme provider that outputs a consumable React library; claims typical UI builds drop from ~3 days to ~2 hours by shipping semantic tokens (global palette + semantic layer) and reusable components. Adds motion presets using transform/opacity so animations run on the GPU for smoothness, and an AI workflow where an MCP server plus Figma-to-code tools scaffold a dashboard and even a working step form, claiming some UIs in ~15 minutes — demos build and run.
AI-written summary · about
chapters (18)
- 0:00Introduction to design systems
- 3:49What is a design system?
- 8:04Design system vs system design
- 14:02Setting up the demo
- 22:34Bundling setup for libraries
- 27:49Implementing style components
- 30:01Token architecture basics
- 33:13Global and semantic tokens
- 39:52Spacing and elevation tokens
- 40:54White labeling in design systems
- 44:03Component API design
- 48:46Component anatomy and hierarchy
- 50:07Adding motion to components
- 53:17Motion performance and GPU
- 56:15AI tools for faster development
- 57:26How MCP servers work
- 1:00:16AI-powered design system demo
- 1:03:06Q&A and closing
related talks
35mDesign system - From a Developer Point-of-View
58mChasing the holy grail: reusable web components and design tokens
32mUI Development Made Simple
41mBuilding a design system with React in 2025, what's new?
56mChasing the holy grail Reusable Web Components and Design Tokens
39mDesigning with Components
54mBuilding design systems together
44mIt’s all about components