Atomic Design : A recipe for success
summary
Shows a concrete pipeline: inventory broken signup/login screens, extract atoms (colors, fonts, button atom), standardize to a style guide, build reusable molecules/organisms and templates, and restyle legacy pages to match. Implements a Swift UIKit and SwiftUI pizza library that stores particles (color, font) and produces identical buttons with a fixed 30px height and active/inactive substyles. Demonstrates SwiftUI integration via Xcode 12 view library and proves the components are reusable and consistent across platforms.
AI-written summary · about
chapters (29)
- 0:00Introduction
- 0:30About us
- 0:57Why we need a system
- 1:15Quick definition
- 2:07Anatomy of Atomic Design
- 4:00Kitchen Presentation
- 4:53Web Presentation
- 8:37Steps Methodology
- 9:00Research
- 9:17One Style Guide
- 10:03Style Guide
- 10:38Problem
- 11:03Group
- 11:23Style
- 12:14Similarities
- 12:35Example
- 13:57Particle
- 14:17Pizza Library
- 14:55UI Components
- 15:27Bottom Style
- 15:52Substyle
- 16:29Active Inactive Style
- 16:59Switching to SwiftUI
- 17:09Styling
- 17:45Vase Stack
- 18:21Code Usability
- 19:00Reusable
- 19:53Extract
- 20:15Food for thoughts
related talks
32mAtomic Design Theory in Practice
44mAtomic Design and Storybook to Boost Frontend Dev Productivity
40mAtomic Design Software Architecture Illustrated with Angular 2
30mAtomic Design: Breaking Up is Hard to Do
07mReact components, atomic design and storybook
26mHow we engineered our design system
37mIs Atomic Design Dead?
55mFrom Design to Swift: Best Practices in App Development - ROUNDTABLE