Criar componentes soltos é fácil. Criar um Sistema que escala para 50 desenvolvedores e 200 telas é arte. A metodologia Atomic Design, de Brad Frost, continua sendo a base mais sólida para isso.
A Hierarquia da Matéria
-
Átomos: Os blocos indivisíveis.
- Ex: Botão, Input, Label, Ícone, Cores, Fontes.
- Regra: Não fazem nada sozinhos e têm pouca lógica.
-
Moléculas: Grupos de átomos que funcionam juntos.
- Ex: Um Input de Busca (Input + Botão de Lupa + Label).
- Regra: Têm uma função específica (fazer uma busca).
-
Organismos: Grupos complexos de moléculas e átomos.
- Ex: Header do Site (Logo + Menu de Navegação + Campo de Busca).
- Regra: Definem uma seção distinta da interface.
-
Templates: A estrutura da página sem conteúdo real.
- Ex: Wireframe da Home Page.
-
Páginas: O template preenchido com conteúdo real.
Por que usar isso no React?
Muitos devs jogam tudo na pasta /components. O Atomic Design sugere uma organização melhor:
/components
/atoms
Button.jsx
Icon.jsx
/molecules
SearchBar.jsx
UserCard.jsx
/organisms
Navbar.jsx
Footer.jsx
O Benefício da Reutilização
Se você precisa alterar a cor primária do site, você altera o Átomo de cor (ou variável CSS). Automaticamente, todos as Moléculas e Organismos que usam essa cor são atualizados.
Isso garante consistência visual e reduz drasticamente o tempo de refatoração.
Tokens de Design
O elo entre Figma e Código são os Design Tokens.
color-primary-500spacing-md(ex: 16px)font-size-xl
Defina isso no seu tailwind.config.js e obrigue o time a usar APENAS os tokens, nunca valores mágicos (w-[17px]).