I’m a big fan of atomic design because it works well for designers, and it brings us closer to the approach that front-end developers use in their work. While we use the same approach, we can collaborate more effectively. With this in mind, I was trying to find a way to maximize the usage of the atomic design in my components library, and finally with the new Auto Layout it’s possible. Let’s take a look at what I’ve learned.

The approach

If you aren’t familiar with the atomic design concepts, I highly recommend you to read more about atomic design first.

Atomic design applied to the native mobile app Instagram. Source: https://atomicdesign.bradfrost.com/

The picture above illustrates the logic that I use for my components. With this approach, it’s easy to design components and–what is very important–to support them after.

Below you can see the page I’ll use as an example. That’s a real page that I’ve designed and use in the project I’m working on at Chainstack.com. In this post I’ll focus only on the components that use Auto Layout.

If you don’t want to dive into details, I put a link to the final result in Figma at the end of this post.