Atomic Design

O Atomic Design é uma metodologia de design que divide a interface em componentes reutilizáveis, organizados em cinco níveis hierárquicos.

Níveis da Hierarquia

Atoms

Componentes básicos e indivisíveis, como botões, inputs, ícones e badges.

Badge
Avatar
Chip

Molecules

Combinação de atoms formando componentes mais complexos e funcionais.

UserCard
FeatureCard

Organisms

Seções completas da interface compostas por molecules e atoms.

LoginForm
TeamGrid

Exemplos Práticos

Atoms (Átomos)

Componentes mais simples e indivisíveis da interface:

5New!
RN
TypeScript
Nuxt
Molecules (Moléculas)

Combinação de atoms formando componentes funcionais:

R

Rafael Nunes

Developer

Online

PrimeVue

Biblioteca de componentes UI para Vue 3

Components
UI
Organisms (Organismos)

Seções complexas compostas por molecules e atoms:

Login

Nossa Equipe

Conheça os profissionais que fazem a diferença

R

Rafael Nunes

Full Stack Developer

Online
M

Maria Silva

UI/UX Designer

Ausente
J

João Santos

DevOps Engineer

Offline
3 membros 1 online
Benefícios do Atomic Design
  • Reutilização: Componentes podem ser usados em múltiplos contextos
  • Consistência: Mantém o design system uniforme em todo o projeto
  • Manutenibilidade: Fácil atualização e correção de bugs
  • Escalabilidade: Facilita o crescimento do projeto
  • Colaboração: Equipes entendem a estrutura facilmente
Estrutura de Pastas 
app/components/
├── atoms/
│   ├── AtomBadge.vue
│   ├── AtomAvatar.vue
│   └── AtomChip.vue
├── molecules/
│   ├── MoleculeUserCard.vue
│   └── MoleculeFeatureCard.vue
├── organisms/
│   ├── OrganismLoginForm.vue
│   └── OrganismTeamGrid.vue
└── templates/
    └── (layouts completos)