Dia 14: Revisão da sua biblioteca de componentes

Parabéns por concluir a Semana 2! Hoje vamos organizar nossas criações e consolidar a base do seu Design System.

🏆

Você construiu o esqueleto de uma interface real!

Se na primeira semana você aprendeu a fazer os tijolos, nesta segunda semana você construiu as paredes. Cada componente criado é uma peça fundamental, e agora você tem uma coleção pronta para montar telas complexas. O mais difícil já passou, continue com essa força!

O que é uma biblioteca de componentes?

Uma biblioteca de componentes é uma coleção centralizada e organizada de todos os elementos de UI reutilizáveis de um projeto. É a evolução natural do guia de estilos que fizemos no Dia 7. Em vez de ter apenas os estilos (cores, fontes), agora temos os componentes funcionais (botões, cards, inputs) que usam esses estilos.

Manter essa biblioteca organizada no Figma é uma das tarefas mais importantes de um UI Designer, pois garante consistência e agiliza imensamente o trabalho de criação de novas telas.

Exemplo de uma biblioteca de componentes organizada no Figma

Indo além: dicas para uma biblioteca profissional

Os exemplos acima mostram como organizar os componentes que criamos na Semana 2. No entanto, uma biblioteca de verdade é ainda mais completa! O ideal é que você detalhe tudo, incluindo também os fundamentos que definimos na Semana 1 (sua paleta de cores, escala tipográfica e espaçamentos).

Dica de mestre: automatize seu guia de estilos

Para uma melhor organização, considere separar seus fundamentos e componentes em páginas diferentes dentro do seu arquivo Figma.

E para te ajudar a criar um Guia de Estilos (Style Guide) de forma rápida e profissional, existe um plugin fantástico chamado Figr Identity. Ele pode gerar automaticamente a documentação para os itens que você vê na imagem abaixo, desde que você crie as variáveis de estilo corretamente no Figma.

Exemplo de guia de estilos gerado com o plugin Figr Identity

Seu desafio de hoje: o curador de UI

Sua missão é pegar todos os componentes que você criou ao longo da Semana 2 (Dias 8 a 13) e organizá-los em uma única página no Figma, criando sua primeira Biblioteca de Componentes.

Checklist do desafio:

Crie uma nova página no seu arquivo Figma chamada "Biblioteca de Componentes".
Copie e cole uma versão de cada componente que você criou: Cards, Navegação, Breadcrumbs, Listas, Tabs, Acordeões e Feedbacks.
Organize-os em seções com títulos (ex: "Cards", "Navegação", "Feedbacks").
(Bônus de Mestre) Se ainda não fez, transforme cada item em um Componente principal no Figma (clicando com o botão direito -> "Create component").