Atomic Design and Storybook to Boost Frontend Dev Productivity
summary
Atomic Design with a component library and Storybook is proposed to speed front-end development by encapsulating CSS in reusable atoms and composing molecules and templates to avoid duplicated markup and manual styling. The talk shows practical techniques: utility CSS (Tailwind or Bootstrap) and design tokens for theming and dark mode, Tailwind purge to shrink CSS (example from 3MB to 200KB), a component example with 5× less CSS, and using Storybook to document stories, provide copyable code and Figma links, and support multi-framework and microfrontend setups; it notes upfront setup costs but faster, more consistent development afterward.
AI-written summary · about
chapters (14)
- 0:00Atomic Design intro
- 4:24Atomic Design theory vs practice
- 6:55Reusable component implementation
- 9:42Storybook for docs
- 13:12Essential CSS utilities
- 18:08CSS variables and themes
- 20:41Tailwind vs Bootstrap
- 24:14Bad CSS example
- 27:48Atomic Design benefits
- 29:16Storybook demo
- 32:55Multi-project design system
- 33:56French state design system
- 35:45NG design system example
- 36:53Conclusion
related talks
07mReact components, atomic design and storybook
48mAtomic CSS Deep Dive
24mBuild React Apps Fast Using Storybook, DDD, and Atomic Design
24mAtomic Design : A recipe for success
30mAtomic Design: Breaking Up is Hard to Do
32mAtomic Design Theory in Practice
37mIs Atomic Design Dead?
40mAtomic Design Software Architecture Illustrated with Angular 2