Atomic Design
Atomic design methodology
by Donata, Design Enterprise Studio Member, Feb 2021If you read my previous post, you should already know what a design system is and what its benefits are. In this article I will explain the modular approach which is used as foundation of many design systems – the atomic design.
Atomic design is a methodology for creating design systems and final products. It consists of atoms, molecules, organisms, templates and finally pages. Flashback to chemistry lectures? Hm, sort of! It’s not as complicated as it may sound though, and some people like to compare this approach to building with Lego blocks.
Atoms are the smallest, basic, universal building blocks that can be used to build molecules at the later stage. You can think of them as HTML elements, but atoms can also include foundation elements like colour palettes, fonts, styling or animations.
Molecules, like mentioned above, are atoms put together into fundamental units – components that can work on their own.
Organisms are grouped...