Montar um design system no Figma costuma começar com uma ambição grande: biblioteca completa, dezenas de componentes, documentação para tudo. Três semanas depois, metade está pela metade e ninguém usa. O caminho que funciona é o contrário: começar pelos cinco componentes que aparecem em quase todas as telas e fazer esses direito.
Neste artigo você vai ver quais são esses cinco, como estruturar as variants de cada um e as regras de nomenclatura que evitam retrabalho quando o sistema crescer.
Por que um design system começa por cinco componentes
O custo de começar pela biblioteca inteira
Cada componente que entra na biblioteca vira manutenção: precisa de variants, estados, documentação e revisão sempre que algo muda. Quando você cria quarenta componentes antes de validar os primeiros, qualquer decisão de base (uma escala de espaçamento, um nome de propriedade, uma cor) obriga a refazer tudo.
Botão, campo de formulário, ícone, tipografia e cor cobrem a maior parte de qualquer interface. Se esses cinco estiverem sólidos, o resto (cards, modais, tabelas) nasce da combinação deles, e não do zero.
1. Botão
O botão é o componente mais usado e o que mais sofre com variants mal pensadas. É comum ver bibliotecas com dezenas de variants de botão, porque cada combinação virou uma variant separada.
Variants: tipo, tamanho, estado e ícone
Organize o botão em quatro eixos:
- Tipo: primário, secundário, terciário e destrutivo.
- Tamanho: pequeno, médio e grande. Três costumam bastar.
- Estado: padrão, hover, pressionado, foco e desativado.
- Ícone: em vez de criar variants “com ícone à esquerda” e “com ícone à direita”, use propriedades booleanas para mostrar ou esconder cada ícone, e uma propriedade de troca de instância para escolher qual ícone aparece.
Assim, tipo, tamanho e estado ficam como variants, e o ícone vira propriedade. O número de variants cai muito e o painel da direita fica legível para quem usa o componente.
Use auto layout com padding definido por tamanho. O botão cresce com o texto sem você ajustar a largura na mão.
Nomenclatura: a ordem das propriedades importa
O Figma mostra as propriedades no painel na ordem em que você as organiza no componente. Coloque primeiro as que mais mudam no dia a dia (tipo e tamanho) e por último as de uso pontual (estado). Quem monta telas vai agradecer.
Escolha também um padrão para os valores e mantenha nos cinco componentes: se o tamanho do botão é “pequeno, médio, grande”, o do campo também é.
2. Campo de formulário
Estados: vazio, preenchido, foco, erro, desativado
Esses cinco estados cobrem quase todos os formulários. Vale incluir também “somente leitura” se o produto tiver telas de consulta. Cada estado muda borda, fundo e cor do texto, e essas cores devem vir das variáveis (veja o componente 5), nunca de valores soltos.
Etiqueta, texto de ajuda e mensagem de erro no mesmo componente
Um erro comum é criar o campo só com a caixa de texto e deixar a etiqueta e a mensagem de erro como camadas soltas na tela. Resultado: cada designer posiciona de um jeito.
Monte o campo como um bloco único em auto layout vertical: etiqueta, caixa e texto de ajuda. Use propriedades booleanas para mostrar ou esconder a etiqueta e o texto de ajuda, e propriedades de texto para editar o conteúdo direto no painel. No estado de erro, o texto de ajuda dá lugar à mensagem de erro, com a cor e o ícone de erro.
3. Ícone
Grade, tamanho base e cor herdada
Defina um tamanho base (24 px é o mais comum) e coloque todos os ícones na mesma grade, dentro de um frame desse tamanho. Ícones com áreas diferentes desalinham botões e campos.
Antes de transformar em componente, una os vetores para que a cor fique numa única camada. Assim, quando o ícone estiver dentro de um botão, ele troca de cor junto com o texto em cada estado.
Um componente com propriedade de troca de instância
Cada ícone é um componente próprio, publicado na biblioteca. Nos componentes que usam ícone (botão, campo, item de menu), ele entra como instância com uma propriedade de troca de instância. Defina os valores preferidos dessa propriedade para mostrar só os ícones que fazem sentido ali, em vez da biblioteca inteira.
4. Estilos de tipografia
Tipografia não é um componente no sentido estrito, mas é a base de todos os outros. Sem estilos de texto definidos, cada botão e cada campo acaba com um tamanho de fonte um pouco diferente.
Escala e nomes que sobrevivem ao redesenho
Crie uma escala curta: dois ou três tamanhos de título, dois de corpo, um de legenda e um para rótulos de botão. Seis a oito estilos resolvem a maior parte dos produtos.
O nome é o que faz o sistema sobreviver a um redesenho. Nomes como “Inter 16 Regular” ficam errados no dia em que você troca de fonte. Nomes por função, como “corpo/médio” ou “título/grande”, continuam válidos mesmo que a fonte, o tamanho ou o peso mudem.
Se quiser ir além, guarde família, tamanho e altura de linha em variáveis e ligue os estilos a elas. Fica mais fácil ajustar a escala inteira de uma vez.
5. Cor, em variáveis e não em estilos soltos
Durante anos a cor no Figma viveu em estilos. Hoje as variáveis fazem melhor esse trabalho, porque permitem dois níveis e vários modos.
Primitivas e tokens semânticos
Separe as variáveis de cor em duas coleções:
- Primitivas: a paleta crua, com nomes como “azul/500” ou “cinza/100”. Ninguém usa essas variáveis direto nas telas.
- Semânticas: os tokens por função, como “fundo/padrão”, “texto/secundário”, “borda/erro” ou “ação/primária”. Cada um aponta para uma primitiva.
Os componentes usam só as semânticas. Se a marca mudar o azul, você altera a primitiva e todo o sistema acompanha. Se o botão primário passar a ser verde, você muda para onde aponta “ação/primária”, sem tocar no componente.
Modo claro e modo escuro sem duplicar o arquivo
Na coleção semântica, crie dois modos: claro e escuro. Cada token aponta para uma primitiva diferente em cada modo. Para ver uma tela no modo escuro, basta trocar o modo no frame. Nada de manter duas bibliotecas ou duas páginas de componentes.
Regras de nomenclatura que valem para os cinco
Barras para agrupar, minúsculas e nada de abreviações
- Barras para agrupar: o Figma usa a barra para criar grupos no painel de assets e nas listas de variáveis. “ícone/seta/direita” fica organizado; “Ícone Seta Direita” vira uma lista sem fim.
- Minúsculas: um só padrão evita duplicados como “Botão” e “botão”.
- Nada de abreviações: “secundário” em vez de “sec”, “desativado” em vez de “dis”. Quem entrar no time daqui a seis meses não precisa adivinhar.
- Os mesmos nomes nos cinco: se o estado se chama “desativado” no botão, também se chama “desativado” no campo.
O que fazer a seguir
Comece pela cor e pela tipografia, porque os outros três dependem delas. Depois monte o ícone, o campo e, por último, o botão, que usa tudo o que veio antes. Publique a biblioteca só quando os cinco estiverem prontos e use em um projeto real por algumas semanas antes de adicionar o sexto componente.
Se você está montando seu ambiente de trabalho no Figma, veja também os plugins do Figma que mais economizam tempo para freelancers.