Atomic design – Meetup

In partnership with the Apéro Web Lyon association, Peaks hosted this Thursday, February 23, in its Lyon premises, a meet-up in two stages. Topics: continuous integration and atomic design.

The second talk of this evening, on atomic design, was presented by Nicolas, from the Apéro Web Lyon association.

This talk is an introduction to what atomic design is, what it is for and a tool that Nicolas uses to do atomic design.

The atomic design

The atomic design was conceptualized by Brad Frost in 2013, who also published a book about it in 2016.

The idea behind atomic design is to get out of screen thinking. In the 80s and 90s, when we were doing computing, there were one or two sizes of screens. Today, in 2022-2023, there are thousands: laptops, tablets, PCs. We can therefore no longer think of our web and mobile applications as in the 90s with a single screen.
Concepts have also evolved, we have gone from very hassle-free interfaces (those who have used Windows 95 will understand 😉) to today and UX/UI issues. Our ways of thinking about our interfaces and our applications have changed.

What Brad Frost is proposing is to start again in the opposite logic: not starting from the screen but starting from the most atomic, simplest elements of our interface, hence the name atomic design.

What are the atomic elements of a web or mobile application?

The smallest possible elements:

Once we combine these elements, we go from an atom to a molecule that will contain several elements. For example: I have a link, an image and a paragraph. If I combine these elements I get a product sheet. In web, it's a div with an image, title, link, etc.

When I combine several molecules, it can give an organism. For example, a list of products with each their sheets.

All of this makes up a system. The advantage of a system is that it can be used on several sites. A very good example of an atomic system used at several sites is that of the BBC. Indeed, dozens of sites all have the same atoms, the same molecules and the same organisms. The experience is then unified, with an identical visual grammar (example: buttons), which makes the user experience simple, clear and unified. The point is to have something consistent within the company itself.

The interest for the developer is to reuse as much as possible. If the color of the "link" atom is set to red, all our applications will already have our red "link" atom.

To see the examples presented during the meetup, go to our Youtube replay:

React, a way to create atomic design components

The idea is to use them to make this atomic design. Not being a framework, React allows greater modularity but it is quite possible to use Angular, Vue, Web Component, Polymer…

The concept of Virtual Dom

In React, it's the idea that if you modify an element, it will understand which elements of the page are to be refreshed. Components will refresh other components without impacting the complete page. We then have a lightness and a capacity of modification of the desired elements only.

Create an atomic component

With React we can make our components/atoms, we can have components/molecules having component/atom childrenNodes…

In short, we have what it takes.

But something is missing to make the presentation

Storybook, the opensource component development tool

This tool makes it possible to present these atoms to the developers, to the designers to test them.

Storybook is compatible with React, Vue, Angular and WebComponents.