Atomic Design Systems
In under 3 minutes…
There has been plenty of discussion on design systems over the last year as they have progressed both in terms of technical ability and of course popularity. A few months ago I wrote a post on if design systems were the end of design if we knew it and influenced me to search for a more coherent way to express what they are and how they work.
In short, a design system is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications. Design systems are a method to translate a consistent experience and visual language across a product when working on different touch-points. Think of your assets as a box of lego, not only are the pieces readily available but there are infinite possibilities in how to assemble them.
Let’s be clear that design systems are no style guide though, it’s essential to not only understand the pieces of your design system but the context of their use and the ‘why’ behind them…
Enter, Atomic Design
Just like you can think of a design system as a set of Lego as your assets you can equally consider your design system as Atomic. The Atomic Design Systems methodology considers all the details that go into creating and maintaining robust design systems whilst providing a pretty coherent way of explaining itself using chemistry. Let’s get into it.
Atoms: In chemistry atoms are the basic building blocks of all matter. Each chemical element has distinct properties, and they can’t be broken down further without losing their meaning. When we relate this to our design systems the atoms are very much the basic assets of our product. They are the foundational building blocks that comprise all our user interfaces such as type, labels, colours and spacing.
Molecules: Molecules are a group of atoms pieced together to take on new properties or to complete a function. In design systems, we can think of our molecules as our building blocks or ‘atoms’ that we are piecing together to form a functional element. Perhaps we are putting together an image header with a title label for a profile molecule or doing something more complex such as constructing a checkout function using atoms to form the molecule.
Organisms: Both atoms and molecules are simple functional forms in our design systems that can be reused across a product. Organisms are slightly more complex and form bigger chunks of our product. We can think of these organisms in our design systems as groups of molecules. Where atoms make up a molecule to form a search feature it can be combined with another molecule that forms the page navigation to make an organism — a complete page navigation with a search feature. These will be used as a distinct pattern across a product.
Templates & touchpoints: Now we have covered the basic structure of a design system through atoms, molecules and organisms it’s time to see how we can use them to create a consistent product. Organisms can be used to make up different templates of larger layouts which can contain multiple features. These templates are then used to make up the majority of a products touch points.
Atomic design is one such method to describe and practice design systems whilst they are becoming essential in today’s world of rapid growth and need for holistic products. These design systems allow teams to build better products faster which are understood by users as the language is consistent across each and every touch point.
With a more consistent experience, we can work harder to focus on the most important parts of our products experience.
This post would not have been possible without first reading…
Thanks for reading — I’m currently a user experience intern at Bosch Power Tools and an Industrial Design student at Loughborough University. Feel free to get in touch or check out my website.
