Building design systems together
summary
Shows a real mini system called rewind design system and its working web components, not just slides about why systems matter. Demonstrates Figma variables mapped to CSS via a codegen plugin and code syntax, exports JSON, plus scripts to keep names in sync; builds buttons, notifications, an accessible image carousel and ties them to a simple codebase with live dev-mode previews and integration examples on github com figmads. Concrete demos and tooling decisions are shown and working.
AI-written summary · about
chapters (19)
- 0:00Introduction
- 0:45Design Systems
- 2:55Design is important
- 5:50Design is inefficient
- 10:26Reusing patterns
- 13:04Design systems journey
- 16:03Design systems evolution
- 20:04Demo
- 24:49Code
- 27:24Code Syntax
- 29:29Typography
- 32:49Button
- 33:59Button example
- 34:29Variant approach
- 35:39Props
- 41:04Icon swap
- 43:19Image gallery
- 45:59Carousel gallery
- 50:34Conclusion
related talks
50mManaging Design Systems, from Features to Roadmaps
39mDesigning with Components
01h 04mBuilding Design Systems for Scale: From Tokens and Components to Motion & AI Tools
30mDesigning with React
35mDesign system - From a Developer Point-of-View
25mPanel discussion about design systems
18mBridging the gap between design prototyping and code
46mBuilding & Managing Design Systems