Variantes (de componente)

As versões de um mesmo componente agrupadas sob um único nome, controladas por propriedades.

Hard

O que é

Variante é cada estado ou versão de um componente que pertence à mesma família. Um botão pode ter variante primária e secundária, tamanho grande e pequeno, estado normal, hover e desabilitado. Em vez de criar um arquivo solto pra cada combinação, você junta tudo sob um nome só e troca de versão mexendo em propriedades.

Isso importa porque é o que faz um design system escalar sem virar bagunça. Quem usa o componente escolhe a variante numa lista, sem caçar o arquivo certo nem recriar do zero. Quando o time precisa mudar a cor do botão primário, muda em um lugar e propaga pra todo mundo.

Na prática, variante é organização que vira velocidade. Menos componentes duplicados, menos divergência entre telas, menos retrabalho quando a marca muda.

Em uma frase

Usa a variante secundária do botão aqui, que essa ação não é a principal da tela.

A pergunta que ele responde

Como organizo as várias versões de um botão sem criar um arquivo separado pra cada uma?

Quando usar

Quando um componente tem variações previsíveis (tipo, tamanho, estado) e você quer controlá-las sem multiplicar arquivos.

Como não usar

Criar variante pra diferença que não se repete, ou empilhar tantas propriedades que ninguém entende qual combinação usar.

Na prática

O time tinha cinco arquivos de botão soltos. Vira um componente Botão com variantes de tipo, tamanho e estado, e qualquer tela escolhe a combinação numa propriedade.

Não confunda com

Variante não é o mesmo que instância: a variante é uma versão dentro da definição do componente, a instância é cada cópia usada numa tela. Trocar a variante de uma instância não cria componente novo, só muda qual versão aquela cópia mostra.

Design

Em inglês

Component Variants

Pronúncia

n/a

Também chamado de

variants, variações de componente

Origem

n/a

Fonte

Saiba mais

Figma, documentação sobre component properties e variants