Visão geral
Atomic Design organiza o trabalho de processo para criar vocabulário compartilhado e estrutura hierárquica para componentes de interface — permitindo construir sistemas de design coerentes, reutilizáveis e escaláveis em vez de coleções de páginas desconectadas. A abordagem ajuda o time a entender a lógica do processo, não apenas memorizar fases ou nomes mais conhecidos.
Na prática, Atomic Design conecta átomos, Moléculas, Organismos, Templates e Páginas para produzir hierarquia de componentes documentada, Biblioteca de design com nomenclatura consistente, Design system reutilizável por múltiplos produtos e Vocabulário compartilhado entre design e desenvolvimento. O ganho aparece quando as etapas são usadas como apoio à tomada de decisão, e não como cerimônias desconectadas do problema real do projeto.
Como entra no fluxo
Atomic Design entra como estrutura de condução quando o desafio envolve múltiplas etapas, pessoas e decisões que precisam ser coordenadas ao longo do tempo.
Atenção ao usar
Fronteira entre molécula e organismo é subjetiva e gera debate.
Combina bem com
Para que serve
Criar vocabulário compartilhado e estrutura hierárquica para componentes de interface — permitindo construir sistemas de design coerentes, reutilizáveis e escaláveis em vez de coleções de páginas desconectadas.
Quando usar
Use ao criar ou estruturar um design system, ao estabelecer nomenclatura e organização de componentes entre design e desenvolvimento, ou ao escalar biblioteca de UI para múltiplos produtos ou times.
Fases
Átomos
Elementos básicos e indivisíveis da interface — botão, input, label, ícone, cor, tipografia. Não funcionam de forma isolada mas são a matéria-prima de tudo o que vem acima.
Moléculas
Combinações simples e funcionais de átomos — campo de busca (input + botão), card de produto (imagem + título + preço). Têm propósito único e claro.
Organismos
Componentes complexos formados por moléculas e átomos — header, formulário completo, seção de produtos. Têm lógica própria e podem ser reutilizados em contextos diferentes.
Técnicas relacionadas
Templates
Estruturas de página sem conteúdo real — esqueleto de layout que combina organismos em arranjo específico. Define hierarquia visual e proporções sem depender de conteúdo final.
Páginas
Templates preenchidos com conteúdo real — onde a qualidade do sistema é validada em contexto de uso. Revelam problemas invisíveis nos níveis anteriores.
Técnicas relacionadas
Saídas
- 01Hierarquia de componentes documentada
- 02Biblioteca de design com nomenclatura consistente
- 03Design system reutilizável por múltiplos produtos
- 04Vocabulário compartilhado entre design e desenvolvimento
Tags
Outros nomes
Saiba mais
Ajude a melhorar este conteúdo
Encontrou erro, lacuna técnica ou exemplo fraco? Envie uma correção com contexto para revisão.
