Agile Design Systems in Vue
summary
A practical report on building a design system for small teams: a custom generator called Herman reads structured Sass maps and produces live style docs so adding a color updates the style guide immediately. The pipeline uses recursive Sass functions to resolve token references, exports component examples (Nunjucks/Jinja), and pairs tokens with Vue template logic and components for consistent APIs. Trade-offs include tooling overhead versus portability; the setup proves effective at keeping docs current because automation is essential and the Sass maps approach makes tokens dynamic and queryable.
AI-written summary · about
chapters (15)
- 0:00Introduction
- 1:51Why Design Systems?
- 3:38Design Systems
- 4:44Integration of Design + Code
- 6:54Code Patterns add meaning
- 8:05Where do we start?
- 9:53What do we need?
- 12:48CSS was designed for patterns
- 13:37Design Tokens (Settings)
- 15:15Scss Maps
- 18:05Relationships are Dynamic
- 21:37Define the API
- 23:07HTML Template logic is great
- 23:35Components provide meaning
- 26:33Automation is Essential
related talks
35mBuilding effective design systems in Vue, React or whatever
49mA Better Design-Dev Handoff Experience: Code-based Design System
07mDesign Systems in Vue
35mDesign system - From a Developer Point-of-View
32mYour Guide to Making Scalable Design Systems
20mDesign Systems for the Rest of Us
29mCreating a Design System that People Actually Use
35mScalable Design Systems with TypeScript