Atomic Design System in Frontend

Photo by Terry Vlisidis on Unsplash

I’m going to explain Atomic Design System regardless of languages/frameworks. You can apply the methodology in every frontend project if you would like to.

Atomic design is basically based on the concept that we remember from chemistry lessons. If we would like to recall this concept from the lesson, we can say the following lines,

• the smallest building blocks of matter are atoms,
• atoms combine together to form molecules,
• molecules and atoms combine with each other and create form organisms.

The methodology is similar to the above lines.

Atomic Design is a methodology created by Brad Frost seeking to build interface design systems more modular and reusable.

It consists of five stages.

1. Atoms
2. Molecules
3. Organisms
4. Templates
5. Pages

Let’s exemplify it on Yemeksepeti.com.

Atoms:

Atoms are the smallest building blocks in this methodology. They are basic building blocks that cannot be split into smaller blocks. These are used to create more complex components. E.g. basic HTML elements cannot be broken down, such as buttons, inputs, labels.

Molecules:

It is a structure formed by the combination of more than one atom. E.g. the search molecule is formed by the combination of an input and a button.

Organisms:

At this stage, more complex components formed by molecules and atoms are called organisms. E.g. an image atom, a select atom, and a search organism can join together to create a navbar molecule.

Templates:

Above all three stages (atoms, molecules, and organisms) are used to create templates. We can think that templates are pages without any endpoint connection or business logic. Aside from that, templates are usually created by using organisms. Sometimes, we might call molecules from templates.

Pages:

Pages are the final stage of this methodology. This is the most tangible stage of design. When users visit your application/website, they interact here. Pages are templates that have real data and business logic like a component having to send requests to an API.

Briefly, this methodology is based on structuring the components we create according to their complexity.

If we would like to structure the above example components to demonstrate the atomic design system, it would be as in below.

components/
   atoms/
      - Button
      - Input
   molecules/
      - Search
   organisms/
      - Navbar
templates/
   - LoggedIn
views/
   - Home

Why should we choose?

• It makes the project structure more manageable.
• It significantly reduces development time as the components can be reusable easily.
• Easier to update and remove parts of the application.
• Makes component style guides more meaningful.

I share resources for more detailed information:

Atomic Design

Atomic Design Methodology | Atomic Design by Brad Frost