Atomic design is a methodology for designing and developing user interfaces in a modular manner by putting the focus on building components rather than applications.

Modern user interfaces are composed of many small UI elements in the form of labels, buttons, links, and cards that are combined together. As an application becomes more complex, user interfaces commonly become too big to manage efficiently.

The atomic design principle offers a bottom-up approach in the development process by building small, reusable, standalone components that can be assembled to form the entire user interface.

The atomic design system takes inspiration from chemistry. It consists of five distinct stages as follows:

• Atoms
• Molecules
• Organisms
• Templates
• Pages

Implementing the atomic design process starts with developing the Atoms, or the smallest building blocks in the world.

Applied to user interfaces built with React, atoms are standalone web components that can be assembled with other atoms to form a more complex interface. For example, Atoms can be a Button, a Link, or a Card component:

These atoms don’t make sense as a single component, but they can be combined to form Molecules. In web development, molecules are small, functional units that have the responsibility to do one thing.

For example, the Label, Input, and Button atoms can be combined to form a SearchBar molecule that’s responsible for accepting and passing user input to the application so that a search can be performed on the website:

The next stage in the process is the Organisms stage. In this stage, molecules and atoms are combined to form a relatively complex part of the interface.

For example, a Calendar component is a distinct organism that can be made of atoms and molecules.

A Header component that’s comprised of Link, NavBrand, and Input components can also be an organism because it’s a complete one part of the interface:

Once you have created the organisms, you are done with creating components. The last two stages (templates and pages) are where you assemble the components to create a meaningful user interface for your application.

Templates are concrete interface designs formed using the atoms, molecules, and organisms you’ve created in the previous stages. They provide specific context and use for the components:

Once you have the template ready, it’s time to create the page by replacing placeholder content with real content that’s representative of the content for production.

Here’s an example of a page from the above template:

The atomic design offers a process that allows you to compose a complex user interface using small, encapsulated components that are reusable and easier to maintain.

When new requirements are added to your application, you can easily modify the components at the atom, molecule, or organism level without worrying it will break the entire UI.

Alright, atomic design sounds great in theory. But how can you actually implement the design system for your project? More importantly, how should you structure your design system and share it with other projects of the same team?

This is where Bit comes along to help you out.

Implementing Atomic design using Bit

Bit is a toolchain for component-driven development. It is everything you need to create, render, version, and share components independently.

Bit also handles dependencies for you, so you can easily compose independent components, to form more complex components.

Since atomic design is, essentially, a “flavor” of component-driven design, it is not surprising that Bit fits right in, like a glove.

Independent components are shared, not to git repositories, but to scopes. A remote bit scope looks as follows:

In the above screenshot, you can see the Button atom component that I’ve created following the Atomic design principle. The Button can then be reused in other components, like in the molecules/Search component below:

I’ve also namespaced my components to fit the Atomic Design principles (atoms/button , molecules/search , etc. ).

Bit it lists my components in its UIs (in the left sidebar) according to my components’ namespace hierarchy.

When you open the Dependency tab of the Search molecule, you can see that Bit keeps track of the components imported by the molecule:

As mentioned before, Bit handles dependencies for you. One example of this is the way it versions and tests components.

Bit creates a dependency graph for each component and for the entire Bit workspace. When you modify a component, Bit uses these dependency graphs to test and version that component dependents, as well.

This means when you modify the Button or Input atom component above, Bit will ensure that the Search molecule component doesn't break. Very nice!

Once you export your components to a remote Bit scope, you can install your components like any other NPM package by using either npm install or yarn add command, or clone them into your Bit workspace using bit import.

By building small, reusable, and encapsulated components in Bit, you can easily implement the atomic design principle. Let’s see an example in the next section.

Example of Bit Atomic design workspace

Let’s try to implement atomic design and compose the following interfaces from startbootstrap.com for a home and a single post page:

Using the Atomic design principle, I broke down the two interfaces above to their atom, molecule, and organism components before combining them to form templates and pages.

The components are then organized in Bit workspace, where I also wrote the documentation for each component. Although testing is omitted from this example project, you can also integrate a test-driven approach to building components in Bit.

You can see the complete Bit workspace that implements the atomic design methodology for the two templates above here:

In the end, I created 12 distinct components that are reused in the 2 pages above.

Conclusion

Atomic design and Bit can be combined to create a solid component-driven development strategy for developing modern applications.

Bit is a powerful development toolchain that naturally encourages you to think in terms of components. A web application is just a single complex component composed of many small, reusable components.

Think of your web components as LEGO bricks, because LEGOs can be combined to build many things (a castle, a rocket, or even a death star!)

If you’re interested in using Bit for your next web application project, be sure to check out its documentation to learn about everything it can do for you.

Learn More