Neste mini-projeto, você vai construir um kit de UI enxuto, porém completo, com componentes essenciais para a maioria dos produtos digitais. A proposta é sair do “componente isolado” e chegar a um conjunto coerente: peças que se encaixam, cobrem casos reais e podem ser usadas imediatamente em telas e fluxos. O foco aqui não é reexplicar fundamentos já vistos (tokens, Auto Layout, variants, documentação, handoff etc.), e sim aplicar tudo isso em um roteiro prático de construção, validação e empacotamento do kit.
O que é um “kit de UI” e o que torna ele essencial
Um kit de UI é um conjunto de componentes prontos para uso (e suas variações) que cobre necessidades recorrentes de interface: ações (botões), entrada de dados (inputs), seleção (checkbox/radio/switch), navegação (tabs), feedback (alert/toast), estrutura (cards) e elementos auxiliares (badges, tags, ícones). Ele é “essencial” quando atende três critérios:
- Amplitude suficiente: cobre os padrões mais usados no produto sem exigir que cada time “invente” componentes paralelos.
- Coerência: os componentes compartilham decisões de espaçamento, hierarquia, densidade e comportamento visual.
- Operabilidade: é fácil montar telas reais com ele, sem gambiarras (por exemplo, sem precisar “desanexar instância” para ajustar um detalhe comum).
Neste capítulo, você vai construir um kit com um escopo controlado: um conjunto de componentes que, juntos, permitem criar uma tela de formulário com validação, uma listagem com ações e um fluxo simples de confirmação.
Escopo do mini-projeto: o kit que vamos construir
Para manter o projeto guiado e objetivo, vamos montar os seguintes componentes, com variações mínimas necessárias para uso real:
- Button (primário, secundário, terciário; tamanhos; estados; com ícone opcional)
- Text Field (label, placeholder, helper; estados; ícone opcional; mensagem de erro)
- Select (campo fechado; estado aberto como composição; opção selecionada)
- Checkbox e Radio (com label; estados)
- Switch (on/off; estados)
- Badge (status; tamanhos)
- Alert (tipos; com/sem ação)
- Card (estrutura base; header/body/footer opcionais)
- Tabs (2–5 itens; ativo/inativo; com contador opcional)
- Modal (estrutura; variação com 1 ou 2 botões; título e descrição)
Além dos componentes, você vai criar uma pequena “tela de prova” (um playground) para validar se o kit funciona em um cenário real, e um checklist de consistência para evitar que o kit cresça com divergências.
Continue em nosso aplicativo
Você poderá ouvir o audiobook com a tela desligada, ganhar gratuitamente o certificado deste curso e ainda ter acesso a outros 5.000 cursos online gratuitos.
ou continue lendo abaixo...
Baixar o aplicativo
Preparação: decisões rápidas antes de desenhar
Antes de começar a desenhar, defina três decisões que evitam retrabalho durante a construção:
1) Densidade do kit (compacto, regular, confortável)
Escolha uma densidade padrão para o kit. Isso afeta alturas de campos, padding de botões e espaçamento interno de cards. Exemplo prático:
- Regular: botão altura 40–44, campo altura 44–48, card padding 16–20.
- Compacto: botão altura 32–36, campo altura 36–40, card padding 12–16.
Escolha uma e mantenha como padrão. Se você precisar de outra densidade, trate como variação planejada (não como exceção pontual).
2) Raio e bordas (consistência visual)
Defina um raio padrão (por exemplo, 8) e um raio menor (por exemplo, 4) para elementos menores (badge, checkbox). Defina também a espessura padrão de borda (por exemplo, 1). Essas decisões impactam todos os componentes e ajudam a manter unidade visual.
3) Ícones: tamanho e alinhamento
Defina um tamanho padrão de ícone (por exemplo, 16 ou 20) e uma regra de alinhamento vertical com o texto. Isso evita que cada componente “empurre” o ícone de um jeito. Exemplo: ícone 16, alinhado ao centro do container, com gap 8 para o texto.
Passo a passo: construindo o kit componente por componente
A sequência abaixo foi pensada para reduzir dependências e permitir reutilização: você começa por componentes que viram “blocos” para outros (Button e Text Field), depois monta estruturas (Card, Modal) e por fim navegação e feedback.
Passo 1 — Button: a peça mais usada do kit
Objetivo: criar um componente de botão que suporte hierarquia (primário/secundário/terciário), tamanhos e ícone opcional, sem explodir em dezenas de variantes.
Estrutura recomendada:
- Container com Auto Layout horizontal
- Opcional: ícone à esquerda
- Texto do botão
- Opcional: ícone à direita (se seu produto usa)
Propriedades sugeridas (nomes exemplificativos):
- Type: Primary / Secondary / Tertiary
- Size: Sm / Md / Lg
- State: Default / Hover / Pressed / Disabled / Loading
- Icon left: None / On
- Icon right: None / On
Passos práticos:
- Crie o botão base (Md, Primary, Default) com padding e altura definidos pela densidade escolhida.
- Defina o comportamento do texto: centralizado, com truncamento se necessário (ex.: “Hug contents” com limites).
- Adicione o slot de ícone como camada que pode ser ligada/desligada via propriedade.
- Crie as variações de Type alterando preenchimento/borda e cor do texto.
- Crie os estados. Para “Loading”, substitua o texto por um spinner (ou mantenha texto e adicione spinner, dependendo do padrão do produto).
Teste rápido: instancie 6 botões em uma linha (3 tipos × 2 tamanhos) e verifique alinhamento, gaps e consistência de altura. Se algum botão “parece” mais alto, revise padding e line-height do texto.
Passo 2 — Text Field: entrada de dados com mensagens e ícones
Objetivo: criar um campo de texto que suporte label, placeholder, helper, erro e ícone opcional, mantendo alinhamento e espaçamento previsíveis.
Estrutura recomendada:
- Container vertical (Auto Layout)
- Label (opcional)
- Campo (container com borda e padding)
- Helper text (opcional) ou mensagem de erro
Propriedades sugeridas:
- State: Default / Focus / Filled / Error / Disabled
- Label: On / Off
- Helper: None / Helper / Error
- Icon: None / Leading / Trailing
- Size: Sm / Md (se necessário)
Passos práticos:
- Desenhe o campo base com altura consistente com a densidade.
- Crie o placeholder como texto com estilo mais fraco (não confundir com valor preenchido).
- Para “Filled”, troque placeholder por valor e ajuste cor.
- Para “Error”, altere cor da borda e exiba mensagem de erro no helper.
- Para “Disabled”, reduza contraste e bloqueie ícones (se aplicável).
Teste rápido: crie uma coluna com 4 campos: Default, Focus, Error, Disabled. Verifique se o layout não “pula” quando o helper aparece. Se pular, reserve espaço para helper (mesmo quando vazio) ou use uma variação com altura fixa do bloco inferior.
Passo 3 — Checkbox e Radio: seleção com label e estados
Objetivo: criar controles de seleção com área clicável consistente e alinhamento com texto.
Estrutura recomendada:
- Container horizontal
- Controle (quadrado para checkbox, círculo para radio)
- Label
Propriedades sugeridas:
- State: Unchecked / Checked / Indeterminate (checkbox) / Disabled
- Interaction: Default / Hover / Focus (se você representar visualmente)
Passos práticos:
- Defina um tamanho fixo do controle (ex.: 16–20) e um gap fixo para o label (ex.: 8).
- Crie o estado “Indeterminate” para checkbox (muito usado em seleção em massa).
- Garanta que o container tenha padding vertical suficiente para facilitar clique em listas.
Passo 4 — Switch: alternância simples com feedback claro
Objetivo: criar um switch com trilho e “thumb” que funcione bem em diferentes fundos e estados.
Propriedades sugeridas:
- State: Off / On / Disabled
- Label: On / Off (se seu padrão inclui texto ao lado)
Passos práticos:
- Construa o trilho com raio máximo (pill) e o thumb circular.
- Para “On”, mova o thumb e altere cor do trilho.
- Teste em fundo claro e em cima de um card para garantir contraste suficiente.
Passo 5 — Select: campo fechado e lista aberta como composição
Objetivo: criar um select que reutilize o padrão visual do Text Field, mas com affordance de dropdown e estados de item.
Abordagem prática: trate o Select como duas partes:
- Select Field: visualmente semelhante ao Text Field, com ícone de chevron
- Dropdown: uma lista (menu) com itens, separadores e estado selecionado
Passos práticos:
- Duplique a estrutura do Text Field e substitua o conteúdo por “valor selecionado” + chevron.
- Crie um componente “Menu Item” com estados: Default / Hover / Selected / Disabled.
- Monte o dropdown como um container vertical de Menu Items, com padding e borda/sombra.
- Crie uma variante do Select com “Open: true/false” que, quando aberta, inclui o dropdown como componente aninhado.
Teste rápido: instancie o Select ao lado de um Text Field e compare alturas, padding e alinhamento do texto. Eles devem parecer da mesma família.
Passo 6 — Badge: status e contadores
Objetivo: criar um badge que funcione como status (ex.: “Ativo”, “Pendente”) e como contador (ex.: “12”).
Propriedades sugeridas:
- Variant: Neutral / Success / Warning / Danger / Info
- Size: Sm / Md
- Icon: None / On (opcional)
Passos práticos:
- Use Auto Layout com padding horizontal pequeno e altura mínima.
- Garanta que números de 1 a 3 dígitos não quebrem o layout.
- Teste badges dentro de Tabs (contador) e dentro de Card (status).
Passo 7 — Alert: feedback inline com ação opcional
Objetivo: criar um alerta para mensagens importantes (sucesso/erro/aviso/info), com ícone e ação opcional (ex.: “Tentar novamente”).
Estrutura recomendada:
- Container horizontal
- Ícone
- Bloco de texto (título opcional + descrição)
- Ação (link ou botão pequeno) opcional
Propriedades sugeridas:
- Type: Info / Success / Warning / Danger
- Layout: Simple / With action
- Title: On / Off
Passos práticos:
- Defina um padding consistente com Card (para parecer parte do sistema).
- Crie uma variação “With action” que inclui um botão terciário pequeno ou link.
- Teste o alerta dentro de um formulário (acima dos campos) e dentro de um card (como aviso contextual).
Passo 8 — Card: estrutura para agrupar conteúdo
Objetivo: criar um card que sirva como contêiner para diferentes composições, com header/body/footer opcionais.
Estrutura recomendada:
- Container vertical com background e borda
- Header (opcional): título + ação (ex.: botão/ícone)
- Body: conteúdo livre
- Footer (opcional): ações (ex.: botões alinhados)
Propriedades sugeridas:
- Header: On / Off
- Footer: On / Off
- Padding: Default / Dense (se necessário)
Passos práticos:
- Faça o card base com padding e gap consistentes.
- Crie divisórias (linha) opcionais entre header/body e body/footer, se fizer sentido no seu estilo.
- Teste o card com: (1) lista de itens, (2) formulário curto, (3) alerta dentro.
Passo 9 — Tabs: navegação local com contador opcional
Objetivo: criar tabs que suportem 2 a 5 itens, com estado ativo claro e opção de contador (badge) por item.
Estrutura recomendada:
- Container horizontal
- Tab item (repetível) com label e opcionalmente badge
Propriedades sugeridas:
- Count: None / On
- State: Active / Inactive / Disabled
- Size: Sm / Md (opcional)
Passos práticos:
- Crie o Tab Item como componente separado e depois componha o Tabs.
- Defina a regra de largura: tabs podem ser “hug” (conteúdo) ou “fill” (distribuir). Escolha um padrão e crie a outra opção apenas se necessário.
- Teste com labels curtos e longos para evitar que o indicador (underline/pill) quebre.
Passo 10 — Modal: estrutura de confirmação e formulários curtos
Objetivo: criar um modal com layout previsível e ações consistentes, pronto para confirmações e pequenos formulários.
Estrutura recomendada:
- Overlay (fundo escurecido)
- Container do modal (card elevado)
- Header: título + botão de fechar
- Body: descrição e/ou conteúdo
- Footer: ações (1 ou 2 botões)
Propriedades sugeridas:
- Footer: One action / Two actions
- Close: On / Off
- Width: Sm / Md (opcional)
Passos práticos:
- Monte o modal usando o Card como base (reaproveitando padding e raio).
- Use o Button do kit no footer (não crie botões “do modal”).
- Teste com texto curto e longo para garantir que o body expanda sem quebrar o footer.
Playground: montando uma tela real para validar o kit
Agora que os componentes existem, a validação mais eficiente é montar uma tela realista. Crie uma tela de “Cadastro de usuário” com:
- Header com título e botão “Salvar” (Button Primary) e “Cancelar” (Button Secondary)
- Card com formulário: Nome (Text Field), Email (Text Field), Perfil (Select), Ativo (Switch)
- Seção de permissões: lista de Checkbox (ex.: “Acesso ao painel”, “Exportar relatórios”)
- Tabs no topo do card: “Dados”, “Permissões”, “Histórico” com badge de contagem em “Histórico”
- Alert de erro no topo do formulário (ex.: “Revise os campos destacados”)
- Modal de confirmação ao clicar em “Cancelar” (Two actions)
O que observar no playground:
- Alinhamento vertical: labels e campos formam uma grade visual? Botões alinham com campos?
- Ritmo de espaçamento: gaps entre seções são consistentes? O card “respira”?
- Coerência de estados: erro no Text Field combina com Alert de erro (mesma família visual)?
- Reuso real: você conseguiu montar tudo sem desanexar instâncias? Se não, isso indica falta de propriedade/variante ou estrutura rígida demais.
Checklist de consistência do kit (para ajustar antes de expandir)
Use este checklist enquanto ajusta o kit após o playground. Ele serve para encontrar inconsistências que passam despercebidas quando você olha componente por componente.
- Alturas padrão: Button Md e Text Field Md têm alturas compatíveis? Select segue o mesmo padrão?
- Padding e gaps: ícone + texto em Button, Alert e Tabs usam o mesmo gap? Cards e Modals compartilham padding base?
- Raio e borda: checkbox/radio/badge parecem parte do mesmo sistema? Bordas têm a mesma espessura?
- Estados: Disabled é consistente em todos? Focus tem a mesma linguagem visual em inputs e controles?
- Tipografia: tamanhos e pesos de label, helper e texto de botão estão coerentes?
- Composição: Modal usa Card e Button do kit (sem duplicar estilos)? Select reutiliza o padrão do Text Field?
Refinamentos práticos: ajustes que elevam a qualidade do kit
Normalização de espaçamentos internos
Se você perceber que cada componente “inventou” um padding, normalize. Uma técnica prática é definir três “zonas” de padding e aplicá-las consistentemente:
- Zona de controle (botões, campos): padding horizontal X, altura fixa
- Zona de contêiner (card, modal): padding maior
- Zona de microcomponentes (badge, checkbox): padding mínimo
Depois, revise cada componente e ajuste para encaixar em uma dessas zonas, evitando valores únicos sem justificativa.
Redução de variantes por composição
Se um componente está ficando com muitas variantes, tente mover parte da flexibilidade para composição. Exemplo: em vez de criar 6 tipos de Alert com e sem ação e com e sem título, mantenha poucas variantes e use propriedades booleanas (Title On/Off, Action On/Off) e slots de conteúdo.
Padronização de ações
Garanta que ações secundárias tenham aparência consistente em todo o kit. Exemplo prático: no Alert com ação, use o mesmo estilo do Button Tertiary (tamanho Sm) em vez de inventar um “link especial”. No Modal, use a mesma hierarquia de botões que você usa em páginas (Primary para confirmar, Secondary para cancelar).
Entrega do mini-projeto: o que deve existir ao final
Ao final, você deve ter um kit utilizável e verificável. Confirme se você tem:
- Componentes essenciais listados no escopo, com propriedades suficientes para uso real
- Um playground com uma tela completa montada apenas com instâncias
- Consistência visual revisada com o checklist (alturas, padding, estados, tipografia)
- Componentes compostos reutilizando componentes base (ex.: Modal usando Card e Button; Select reaproveitando padrões do Text Field)
// Sugestão de roteiro de validação (executar sempre que ajustar o kit) 1) Abra o playground e troque o tamanho do Button (Sm/Md/Lg) 2) Verifique se o layout da tela não quebra (alinhamento e espaçamento) 3) Coloque 2 campos em Error e veja se o card aumenta de forma previsível 4) Abra o Select (Open=true) e confira se o dropdown alinha com o campo 5) Troque Tabs para 5 itens e veja se o comportamento de largura faz sentido 6) Abra o Modal e valide hierarquia de ações (Primary/Secondary) 
