Styleguide-Driven Development
summary
Styleguide-driven development establishes a shared component library, a root variables folder and live styleguide so design tokens map one-to-one into code (colors, typography using a golden-ratio scale, etc.), with components implemented in frameworks like Angular; a retrofit process audits screens, extracts unique UI elements and reduces redundancy — for one project Lego-like audit goes 174 to 69 unique elements — designers work in a Sketch replica of front-end library, and the approach speeds redesigns and improves consistency.
AI-written summary · about
chapters (9)
- 0:00Start
- 4:59Model - view - controller (MVC)
- 5:15Model-view-controller (MVC)
- 8:13Reverse engineering design system
- 9:32Messy design system
- 20:41Designers should work in browser
- 40:061. New product: start early
- 42:012. Existing product: analyze what you have
- 51:07Style guide driven development
related talks
48mA practical guide to style guide driven development
38mStyleguide-Driven Development
37mThe ABC of Coded Style Guides
42mThe Dream of Styleguide Driven Development
34mThe Dream of Styleguide Driven Development
25mBuilding a Design System as a team
45mMaintainable Style Guides
28mThe Night of the Living Style Guides