Variantes no Figma: Otimizando Componentes de UI para Eficiência

O que são variantes?

Variantes permitem agrupar várias variações de um componente, como diferentes estilos ou estados de um botão, em um único contêiner. Por exemplo, versões dark, light e green de um botão de busca podem ser agrupadas em um único conjunto de variantes, simplificando o gerenciamento e uso dos ativos.

Criando um conjunto de variantes

• Selecionar um grupo de componentes.
• Ir ao Painel de Design e escolher Criar Conjunto de Componentes para agrupar os componentes em uma única variante.
• Utilizar barras (por exemplo, button/dark/default) para organizar propriedades como estilo (dark, light, green) e estado (default, hover).
• Renomear os rótulos das propriedades para maior clareza, como alterar "Property 1" para Estilo e "Property 2" para Estado.

Gerenciando variantes

Instâncias de variantes podem ser criadas copiando qualquer uma delas. As propriedades de cada instância podem ser ajustadas no Painel de Design, permitindo alternar entre diferentes estilos ou estados. Para adicionar mais variantes, utilize o ícone de mais abaixo do conjunto de variantes para incluir variações adicionais.

Criando interações

Para protótipos interativos, conecte um botão padrão ao seu estado hover na aba Prototype. Defina o Trigger como "While Hovering" e a Animação como "Dissolve" com duração de 500ms. Utilize o botão Preview próximo ao ponto inicial do fluxo para testar as interações diretamente.

Essa estrutura simplificada torna o processo mais fácil de entender e seguir. Avise caso precise de mais ajustes!