Atomic Design is a design system created by Brad Frost and inspired by chemistry. It is a modular system founded on the principle that a whole system can be subdivided into smaller parts (modules) that can be independently created, replaced, modified, or exchanged with other smaller parts or across different systems. It is a methodology that has helped develop modern, structured design systems capable of evolving and incorporating the input of various designers. Atomic Design is an interesting topic if you are looking to improve the way you design, which is why we’ve created this brief overview to help you understand how it all works.
Atomic Design: Atoms, Molecules, and Organisms
As mentioned earlier, this modular system is inspired by chemistry. When you studied chemistry at school, you probably learned (but you may have forgotten by now!) that atomic elements combine to make molecules. In turn, molecules combine with other molecules and atoms to create organisms. Organisms combine with atoms, molecules, and other organisms to create even more complex structures.
Here’s a quick chemistry refresher:
- Atoms are the basic building blocks of everything. All matter consists of atoms, the smallest functional unit of ordinary matter. Each element has unique properties and cannot be reduced further without losing its chemical meaning. As a result, they often must be combined with other factors to create sense.
- Molecules are formed when two or more atoms are held together by chemical bonds. Molecules have their purpose and are slightly more complex than an atom. A design system generally has more than one function or purpose.
- Organisms combine molecules and atoms (and sometimes other microorganisms). Organisms tend to be much more complex, larger in size, and in a design system, are multi-functional elements.
This is a very simplified version of the chemical composition of the universe, but it should help you understand the basic principles behind Atomic Design. Everything can be broken down into atoms, and subsequently, anything can be built by combining any variety of particles. It is more of a mental model than a consistent linear process and is a way to think creatively and methodically design.
How do you create a design system using atomic design?
The Atomic Design framework can inform the way you think about design and the practical steps you take to implement designs. Using the chemical hierarchy we’ve just highlighted, Atom Design functions via five stages, in the following order:
- Atoms – Labels, buttons, inputs, etc.
- Molecules – Tangible UI elements such as search forms, survey forms, list forms, etc.
- Organisms – When atoms and molecules combine to create complex structures such as headers or form entry modals
- Templates – Page-level objects that solidify the content structure, such as a dashboard, landing page, or login screen
- Pages – Templates with specific content that represent the final product
As mentioned, Atomic Design is a mental model. Therefore, it is essential to see all UI elements as parts of a whole. However, only atoms can stand on their own. Therefore, all molecules, organisms, templates must be smaller components. The best way to start using the atomic design system is by thinking about all of the basic needs for your website and understanding which essential components you’ll need to create your more significant design elements, such as:
- Labels
- Iconography
- Buttons
- Interactive Elements (Checkboxes, switches, radio buttons, etc.)
- Typography
- Form Fields
Am I limited to creating my designs using only the atomic design system?
Remember, Atomic Design is a modular system. This means that not every single UI element you create needs to be part of the design system; only the UI element components need to originate from the design system. If a new atom needs to be created for a molecule or organism, you should work with the owner of your design library to be added to the design system officially. There is room for expression within the atomic design system, as it is a system of thinking that encourages and rewards experimentation. Furthermore, once you have a library of UI elements, there are so many variations to experiment with that it is unlikely you will feel limited in any way.
When should I consider creating/adding a new element to the design system?
It would help if you considered creating or adding a new element when you have used the same few elements multiple times on multiple projects. One of the ways you can make sustainable progress to your design system, and prevent it from growing stale, is by adding elements that force you to innovate and come up with exciting ideas.
Equally, you can create new UI elements with pre-existing atomic elements and store these new UI elements locally in your design file. You don’t have to start from scratch every time. The atomic design system also ensures that you have solid foundational elements in your designs to create reliable and robust designs.
To learn more about creating structured design systems, feel free to contact our team of UI and UX experts.
