Highlights from the Atomic Design book by Brad Frost

Since his talk at Fronteers I was interested in the thinking of Brad Frost, his blog posts, etc., but never actually read his book Atomic design until recently, as it got more and more relevant to an internal discussion at an organization I was working for. A few notes:

• Most importantly, what it is not: Atomic Design is not about being a practical guide for implementing design systems (although it has some examples in Pattern Lab, which was originally built by him). I was also hoping it would also give guidance on naming things / structuring CSS when building atomic design based design systems, but it does not. But don’t mind, plenty of good content(!)
• Atomic design sounds like an too obvious idea and while I didn’t dismiss it because of that, I realized I also didn’t try to understand it thoroughly enough. Reading the book helped me to better understand it and especially thinking about the intermediate forms (molecules) was actually despite its obviousness, quite an eye opener (think about recognizing headers in a cards, a search block, etc.)
• Much attention also to organisational buy in. Less relevant when you’re working in smaller companies where you typically can connect directly to colleagues and simply use it as a tool to optimize the speed of delivery, but for sure it is important if your organization’s size doesn’t allow you to directly connect to all stakeholders.
• The holy grail is full synchronization of design throughout the Organization.

As to implementation: I was initially skeptical when I saw someone proudly sharing his react components collection as ongoing work in storybook.js as a way to power the design as it really focussed on JS-frameworks such as React and Vue, but after better understanding the use of these tools I can see how even storybook (basically pattern lab with (too many?) bells and whistles). Not all apps should handle the weight of React.

But Atomic Design never was about Javascript-frameworks: It is about creating a central place where code is shared to build interfaces. Start with HTML+CSS+JS, create React components, create ViewComponents or a collection of erb/haml templates if you’re using Rails, or simply present twig or handlebar templates.

Anyway. Good quick read for a weekend. You can buy the ebook for $10, or read it for free online. We’re moving forward with a single CSS repo, demonstrated by a react component library developed in storybook, producing simple html with BEM syntax.