foi criado em 2013 por Brad Frost e se baseia na química para criar uma metodologia em que os componentes são aplicados ao design de interfaces.
Aprendemos nas aulas de química que toda matéria é composta por átomos e essas unidades atômicas se unem para formar moléculas, que por sua vez se combinam em organismos mais complexos para criar toda a matéria existente no universo.
Da mesma forma, as interfaces são feitas de componentes menores e podemos quebrá-las em blocos de construção fundamentais e trabalhar a partir daí. Essa é a essência do Atomic Design.
O Atomic Design é divido em em cinco componentes que trabalham juntos com o intuito de criar interfaces hierárquicas. Cada um dos cinco estágios desempenha um papel fundamental no design de interface. São eles:
São blocos de construção básicos da matéria que formam a interface.
Exemplo: um label isolado é um átomo, um input é um átomo, um button é um átomo…
Grupos simples de elementos da interface do usuário que funcionam juntos como uma unidade.
Exemplo: o label, o input e o button, juntos, formam uma molécula.
Conjuntos de moléculas que funcionam juntas como uma unidade. Uma molécula com outra molécula (ou mais), formam um organismo
Exemplo: um header de um site.
Saindo um pouco dos termos da química, os templates são objetos no nível de página, onde colocamos componentes em um layout formando a estrutura de página.
É o resultado final, exatamente como o template, só que completa de informações reais. As páginas são o nível de fidelidade mais alto e, por serem as mais tangíveis, normalmente é onde a maioria das pessoas envolvidas em seu processo de criação, passa grande parte do tempo. É em torno dela, também, que gira a maioria das avaliações.
O Atomic Design é uma metodologia que auxilia na criação do Design System, ajudando a criar um design sistemático. O conceito nos permite criar projetos com consistência e escalabilidade, entendendo cada etapa da construção.
A metodologia nos permite ver o design de interface dividido em seus elementos atômicos e também nos permite ver como esses elementos se unem para formar nossas UIs finais.