Atomic Design in React Native
Five levels for organizing an interface, from a button to a finished page, and how I apply them in a React Native project.
Atomic Design is a way of organizing an interface as a set of components that build on each other. The names come from chemistry. Atoms combine into molecules, and molecules combine into organisms.
It has five levels.
- Atoms are the building blocks. They can't be broken down further.
- Molecules are a few atoms grouped together.
- Organisms are molecules joined into a part of the interface.
- Templates are the structure of a page, without its content.
- Pages are templates filled with real data.
Atoms
Atoms are the basics, like buttons and inputs. They should be easy to find and usable anywhere in the project, so they're built to handle more than one situation. A button, for example, needs an enabled state and a disabled one.
Molecules
Two or more atoms together make a molecule, and the molecule does something its parts don't do alone.
Take a text input for passwords and an eye button that switches between showing and hiding the text. Together they're a password field. It's a bigger component than either atom, and still a small one.
Organisms
Several molecules together make an organism. An organism isn't the whole screen. It stays self-contained, so it can be used in different places.
Think of a post component like LinkedIn's. There's a profile picture next to the name and bio, and a Connect or Follow button on the right. Below that come the post's text and images, and a row of buttons to like, comment and share. You could split it into a header with the profile, a body with the post, and a footer with the actions. Each of those is a molecule. The post is the organism.
Templates
A template groups organisms into the structure of a page. It works like a blueprint. Unlike an organism, a template has no data of its own. It only has the defaults the design specifies.
That makes templates a natural place for loading states. You can render the whole template with no data while the real content loads.
Pages
A page is a template with real data in it. It's the final form of the design.
Pages are also where you find out whether a template holds up. A chat screen has to deal with text, images and videos. You only see how the design responds to each of them once the real data is on the screen.
This is the one level whose name doesn't come from chemistry. It's simply the end result of everything before it.
How I use it
Once you understand these levels you start seeing them everywhere, on the web and in mobile apps. I recommend trying the structure in your own project.
I use it with some changes. I adjusted the file structure to fit my project's requirements and its clean architecture, and I changed the names. I like the idea of atoms and molecules, but as folder names they aren't intuitive and can work against clean code. Adapt it to what your project needs.
Small pieces that work anywhere, joined into larger pieces that still stand on their own.