A Better Design-Dev Handoff Experience: Code-based Design System
summary
Proposes translating a graphic design system into a code-based design system by building a central UI library of Vue components, CSS variables, utility classes and JavaScript palettes for D3, plus concentrated overrides for preexisting frameworks; requires initial investment and a small maintenance squad (one designer + one developer) and hooks into each repo as a dependency. Implementation reports saved 18,000 and 40,000 lines of code and keeps design and front end in sync.
AI-written summary · about
chapters (10)
- 0:00Start
- 0:54James Hayden Wang
- 4:57Design Systems
- 6:41Is Design System a New Concept
- 10:40Solutions for Design and Development Handoff
- 17:34Design into a Component Library
- 20:15Components
- 23:08Variations
- 27:32Conclusion
- 38:54Stop Relying on Tools like Zeppelin
related talks
28mAgile Design Systems in Vue
14mRethinking Designer-Developer Collaboration
34mDesigners, Developers, Let’s Create the Difference!
26mLaunching a New Design System With Zero Downtime
22mInclusive development through web components
07mDesign Systems in Vue
01h 05mStyleguide-Driven Development
48mA practical guide to style guide driven development