Building effective design systems in Vue, React or whatever
summary
A design system built as an npm package called Kitsune uses design tokens and an atomic design hierarchy so colors, typography and components stay meaningful and changeable; documentation lives in markdown on Git so designers edit without Storybook overhead; integration tests run at component and app levels, commit hooks enforce linting, and code reviews plus versioned Git flow prevent regressions. The result is a collaborative, scalable library that actually reduces duplication and speeds feature work.
AI-written summary · about
chapters (26)
- 0:00Intro
- 2:44Who uses design systems
- 4:47How to build effective design systems
- 5:09Working together
- 5:39Establish common language
- 6:08People get annoyed
- 7:04Establish a common language
- 9:00Share
- 11:12Keep structure
- 11:32Creativity
- 11:53Basic values
- 13:48Hierarchy
- 14:26Atomic Design
- 17:48Composing Components
- 18:53Making Components
- 19:12Digital Artist
- 19:36Collaboration
- 21:49Naming
- 22:28Defining a name
- 25:40The next step
- 26:05Writing documentation
- 27:40Kitsune
- 29:13Mac
- 29:49Testing
- 32:06Summary
- 32:35Final words
related talks
35mDesign system - From a Developer Point-of-View
25mBuilding a Design System as a team
28mFrom Sketch to Code Designing a Component Kit
28mAgile Design Systems in Vue
21mDesign Systems 101: The Developer Approach to Better Frontends
24mFrom Sketch to Code Designing a Component Kit
01h 04mBuilding Design Systems for Scale: From Tokens and Components to Motion & AI Tools
21mShared Components Beyond the Design System