Coding Design Systems - ep23 - Atomic Design Fundamentals
Every Tuesday at 4:30PM UTC, join @Georges_Gomes, @m4d_z, and their guests in a new live coding session about design systems, on Backlight.dev!
⎯⎯⎯ In this episode ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
00:00 - Intro: Welcome Brad Frost, creator of Atomic Design philosophy 03:40 - 10 years after Atomic Design: How do we organize architectures nowadays? 08:49 - Using design systems like a Rosetta Stone helps teammates to communicate 13:30 - The missing parts of the design system realm 25:27 - Is the themable behavior a must-have of every design system? 31:18 - Design system of design systems? 38:23 - Design systems to solve the upcoming complexity of building interfaces 42:39 - Feedback on building and using design systems 52:22 - Outro: human is the most important part of any project
⎯⎯⎯ Description ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
A passionate and insightful conversation with the inventor of the design system philosophy. We cover different topics, from atomic design concerns to design systems implementation, best practices, and the future of the technology.
Most of all, we talk more about human beings rather than very technical aspects, and how design systems are a tool to empower people’s communication in a team where everybody works together.
⎯⎯⎯ Resources ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
-
Creating themable design systems: https://bradfrost.com/blog/post/creating-themeable-design-systems/
-
Themable design systems demo: https://codepen.io/bradfrost/pen/vYmggWW
-
Design system components, recipes, and snowflakes: https://bradfrost.com/blog/post/design-system-components-recipes-and-snowflakes/
-
Using WebComponents in a design system - demo: https://studio.backlight.dev/edit/tGmOtdUt3F9jBEOluAJr/readme/src/?p=doc&utm_campaign=sessions%3Acds
-
Figma UI Kits from code, Learn with Jason episode: https://www.learnwithjason.dev/generate-figma-ui-kits-from-code
-
🐥 @brad_frost: https://twitter.com/brad_frost
-
https://atomicdesign.bradfrost.com/: https://atomicdesign.bradfrost.com/
-
🪄 Backlight Design Systems Editor: https://backlight.dev/?utm_campaign=sessions%3Acds
-
🐥 m4dz: https://twitter.com/m4d_z