Contenido del curso
Arquitetura e auditoria de componentes no Figma
Antes de desenhar qualquer componente no Figma, precisas de uma base sólida: a arquitetura e auditoria de componentes dentro do Atomic Design. Esta etapa define variantes, prioridades e estados, e evita que comeces a desenhar sem rumo.
Quando organizas a arquitetura primeiro, ganhas clareza para construir botões, cartões, headers e heros de forma consistente. E quando documentas a auditoria, comunicas à tua equipa em que ponto está cada peça do design system.
O que é a arquitetura de componentes em Atomic Design?
A arquitetura é o conjunto de características que definem cada componente antes de ser desenhado. No Figma, essas características chamam se variantes, e tu mesmo decides quais aplicar segundo a necessidade do produto.
No caso de um botão, por exemplo, há três variantes típicas que vale a pena mapear desde o início:
¿Qué son las variantes en Figma? São as características que diferenciam versões de um mesmo componente, como tamanho, estilo ou estado. Permitem-te ter um único componente flexível em vez de vários ficheiros soltos.
Essa definição prévia poupa-te dúvidas no momento de desenhar e dá uma noção global do que vais construir.
Para que serve a auditoria de componentes?
A auditoria é a documentação que regista o estado atual de cada componente do teu design system. Funciona como um mapa partilhado: a tua equipa sabe o que existe, o que falta e o que está em progresso.
E não precisa de ferramenta sofisticada. Podes fazê-la num Excel, no Notion ou em qualquer espaço colaborativo, desde que cumpra estes objetivos:
¿Por qué hacer una auditoría antes de diseñar? Porque te permite priorizar, não duplicar trabalho e comunicar o estado real do sistema à equipa. Sem auditoria, perdes visibilidade sobre o que já existe.
Com isto, qualquer pessoa que entre no projeto entende rapidamente o terreno onde vai pisar.
Como organizar a arquitetura no Figma passo a passo?
A prática começa por revisar o ficheiro de componentes do projeto base e replicar a estrutura para cada novo componente. Cada bloco vai conter um título, um espaço visual e um texto informativo com as variantes.
Como preparar o frame base de cada componente?
No Figma, crias um frame para cada componente: botão, cartão, header e hero. Aplicas estilo segundo a tendência de design, com traço de 2 píxeis e raio de 12, e copias o desenho que já fizeste em Foundations para manter coerência visual.
Um detalhe importante: respeita o espaçamento. Define 40 píxeis entre elementos para que tudo fique harmonioso. Construir um design system desalinhado é abrir caminho a dívida técnica, e essa dívida custa cara mais à frente.
Que arquitetura aplicar a cada componente?
Cada componente tem variantes próprias, e elas escrevem-se como texto informativo dentro do frame, com marcadores claros:
Repara que o header tem apenas uma variante de tipo. Não é obrigatório carregar todos os componentes com muitas variantes; depende do que o produto precisa.
Como aplicar auto layout para alinhar tudo?
Depois de escreveres as variantes, selecionas tudo e aplicas auto layout com Shift + A. Alinhas à esquerda, defines espaçamento externo de 24 píxeis e mantens o traço de 2 com raio de 12.
O auto layout dá-te flexibilidade para ajustar conteúdo sem partir o desenho, e é um dos melhores hábitos para escalar um design system.
Que ganhas ao terminar a arquitetura antes de desenhar?
Quando chegas ao momento de criar o botão real, já não começas do zero. Tens o nome do componente, as variantes documentadas, o espaçamento definido e o estilo visual alinhado.
Essa base elimina a pergunta paralisante de e agora, por onde começo? e transforma o processo de design num caminho previsível. É a diferença entre desenhar por intuição e construir um sistema com método.
Agora é a hora de partir para a prática e construir o primeiro botão. Conta nos comentários como está a tua auditoria atual e que variantes consideras essenciais nos teus componentes.
