Frontend Academy · Aula

Design atómico: átomos, moléculas e organismos

Categorizar componentes como átomos, moléculas, organismos, modelos e páginas para criar um vocabulário partilhado entre design e engenharia.

Design atómico: átomos, moléculas e organismos é uma aula grátis de Frontend Academy no CoddyKit. Esta é a aula 1 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Frontend Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Frontend Academy inclui 4 aulas no total.

O que é o Design Atômico

O Design Atômico (Brad Frost, 2013) é um modelo mental para organizar componentes de interface em cinco níveis de complexidade: Átomos, Moléculas, Organismos, Modelos e Páginas. Ele fornece um vocabulário compartilhado para designers e engenheiros.

Átomos — os menores blocos de construção

Componentes de propósito único que não podem ser divididos mais. Botões, campos de entrada, ícones, rótulos e amostras de cores. São abstratos e reutilizáveis em qualquer contexto.

// Atoms (examples)
<Button variant="primary">Save</Button>
<Input type="email" name="email" />
<Icon name="chevron-right" />
<Label htmlFor="email">Email</Label>

Moléculas — grupos simples de componentes

Combine átomos para realizar algo útil. Um SearchBar é composto por um campo de entrada + botão + ícone. Um FormField é composto por um rótulo + campo de entrada + ErrorMessage. Ainda são componentes de uso geral.

function SearchBar({ onSearch }) {
  return (
    <div className="search-bar">
      <Input placeholder="Search..." />
      <Button onClick={onSearch}>
        <Icon name="search" />
      </Button>
    </div>
  );
}

Organismos — seções complexas

Composições maiores que formam seções distintas de uma interface: um cabeçalho (logotipo + navegação + barra de pesquisa + menu do usuário), um ProductCard (imagem + título + preço + botão) e um SignupForm. Têm mais consciência do contexto.

function Header({ user }) {
  return (
    <header>
      <Logo />
      <Navigation links={navLinks} />
      <SearchBar onSearch={handleSearch} />
      <UserMenu user={user} />
    </header>
  );
}

Modelos — estruturas de páginas

Layouts no nível de um wireframe que organizam organismos sem conteúdo real. Um BlogTemplate tem um cabeçalho, uma área principal com espaços reservados para artigos e uma barra lateral.

function BlogTemplate({ header, article, sidebar, footer }) {
  return (
    <div className="blog-layout">
      {header}
      <div className="main">
        <main>{article}</main>
        <aside>{sidebar}</aside>
      </div>
      {footer}
    </div>
  );
}

Páginas — conteúdo real

Modelos com conteúdo real. A página /blog/[slug] renderiza o BlogTemplate com a publicação real, widgets da barra lateral e elementos visuais.

Estrutura de pastas

Muitas equipes organizam os componentes por nível.

src/components/
  atoms/
    Button.tsx
    Input.tsx
    Icon.tsx
  molecules/
    SearchBar.tsx
    FormField.tsx
  organisms/
    Header.tsx
    ProductCard.tsx
  templates/
    BlogTemplate.tsx
  pages/
    BlogPage.tsx

Benefícios

Vocabulário compartilhado entre profissionais de design e desenvolvedores. Incentiva a composição em vez da duplicação. Facilita a criação de sistemas de interface. Promove o pensamento no menor componente reutilizável possível.

Crítica: a categorização rígida é difícil

Na prática, a linha entre molécula e organismo é indefinida. Muitas equipes acabam discutindo onde algo deve se encaixar — frustrando o objetivo de ter clareza.

Alternativa moderna: baseada em funcionalidades

Muitas bases de código grandes em React/Vue preferem organizar por funcionalidade (auth/, checkout/, dashboard/) em vez de seguir níveis atômicos rígidos. O modelo atômico ainda funciona para a camada compartilhada do sistema de interface.

Design Atômico no Storybook

O Storybook se adapta bem ao Design Atômico — categorias de nível superior como Átomos, Moléculas e Organismos tornam a biblioteca de componentes fácil de explorar.

Quando usar o Design Atômico

Mais indicado para: bibliotecas de sistemas de interface compartilhadas entre vários aplicativos, equipes grandes que precisam de um modelo mental comum e projetos com participação ativa de profissionais de design. Evite em: aplicativos pequenos, protótipos e SPAs com muitas funcionalidades, nas quais manter os elementos juntos é mais importante.

Verificação rápida

No Design Atômico, que tipo de componente é um SearchBar construído a partir de um campo de entrada + botão + ícone?

Recapitulação: Design Atômico

Cinco níveis: Átomos (botão, campo de entrada, ícone), Moléculas (SearchBar, FormField), Organismos (cabeçalho, ProductCard), Modelos (layouts) e Páginas (conteúdo real). Vocabulário compartilhado e pensamento orientado à composição. A estrutura de pastas reflete as camadas. É ideal para sistemas de interface compartilhados; pastas baseadas em funcionalidades costumam ser melhores para o código dos aplicativos.

Perguntas Frequentes

A aula “Design atómico: átomos, moléculas e organismos” é grátis?

Sim — o texto completo de “Design atómico: átomos, moléculas e organismos” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Frontend Academy, atualize para CoddyKit PRO. O curso de Frontend Academy inclui 4 aulas no total.

O que vou aprender em “Design atómico: átomos, moléculas e organismos”?

Categorizar componentes como átomos, moléculas, organismos, modelos e páginas para criar um vocabulário partilhado entre design e engenharia. Você pratica Frontend Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Frontend Academy?

Nenhuma experiência prévia é necessária. Frontend Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 4.

Quanto tempo leva a aula “Design atómico: átomos, moléculas e organismos”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Frontend Academy?

Sim. Cada aula de Frontend Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

Design atómico: átomos, moléculas e organismos
Configuração de monorepo com Turborepo
Microfrontends: Module Federation
Estrutura de pastas baseada em funcionalidades

← Voltar para Frontend Academy