DEV Community

Cover image for Atomic Design no Frontend (português)
Juliana Macêdo
Juliana Macêdo

Posted on • Originally published at Medium

Atomic Design no Frontend (português)

Tenho trabalhado com desenvolvimento web desde 2009, e, nesses anos, testemunhei uma grande evolução nos frameworks e padrões de desenvolvimento. Uma das mudanças mais significativas foi o surgimento do desenvolvimento baseado em componentes (ou component-based development), que hoje se destaca como uma das principais abordagens.

Desenvolvimento baseado em componentes é uma abordagem de desenvolvimento de software em que os sistemas são construídos a partir de partes independentes, chamadas componentes, que podem ser reutilizados em diferentes partes de um projeto ou até em projetos distintos. No front-end, ferramentas como React, Angular e Vue.js utilizam fortemente esse conceito.

Como sabemos, nada é perfeito, e essa abordagem vem com alguns desafios. Entre eles estão:

  • Qual seria o tamanho ideal para um componente?
  • Como organizá-los?
  • Como preservar a reutilização?

O Atomic Design nos ajuda justamente com isso.

O que é Atomic Design?

Atomic Design é uma metodologia de design de interface proposta por Brad Frost que visa criar sistemas de design mais consistentes e escaláveis. Ela se baseia no conceito de que uma interface pode ser decomposta em pequenas partes reutilizáveis.

No front-end, o Atomic Design é uma abordagem para criar sistemas de componentes de forma modular e escalável. A metodologia permite que a interface seja construída a partir de componentes reutilizáveis, organizados de maneira hierárquica, do mais simples ao mais complexo, facilitando o desenvolvimento, a manutenção e a escalabilidade do projeto.

O Atomic Design sugere dividir os componentes em 5 níveis:

1. Átomos (Atoms): São os elementos mais simples e básicos da interface, que não podem ser decompostos em partes menores. Eles são independentes e geralmente não têm comportamento por conta própria. Podem ser tags HTML básicas ou variáveis de CSS, como cores, fontes, espaçamentos e animações.

2. Moléculas (Molecules): São combinações de átomos que trabalham juntos para formar uma funcionalidade mínima. Essas moléculas já têm um comportamento mais definido e geralmente representam pequenas partes da interface.

3. Organismos (Organisms): São agrupamentos de moléculas e átomos que formam seções mais complexas e distintas da interface. Um organismo pode representar uma área funcional completa de uma página.

4. Templates: São layouts compostos por organismos arranjados de maneira estrutural para formar a estrutura da página. No entanto, os templates ainda estão no nível de layout, sem dados específicos.

5. Páginas (Pages): São instâncias específicas dos templates, onde o conteúdo real e os dados são preenchidos. As páginas são o estágio mais concreto do Atomic Design, representando a versão final que o usuário verá.


Para quem quiser se aprofundar, a versão completa do artigo está disponível no Medium. Lá, incluí exemplos práticos, snippets de código, e imagens para ilustrar cada conceito em detalhe.

👉 Confira o artigo completo no Medium

Espero que este conteúdo seja útil para quem está buscando melhorar a organização e escalabilidade de seus projetos frontend! Se tiverem dúvidas ou quiserem discutir mais sobre o assunto, fiquem à vontade para comentar por aqui ou no Medium.


Buy me a coffee

Top comments (0)