Variantes

O que são variantes?

As 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 escuras, claras e verdes de um botão de pesquisa podem ser agrupadas em um conjunto de variantes, simplificando o gerenciamento e uso de ativos.

Criando um conjunto de variantes

• Selecione um grupo de componentes.
• Vá para o painel de Design e escolha Criar Conjunto de Componentes para agrupar os componentes em uma única variante.
• Use barras (por exemplo, botão/escuro/padrão) para organizar propriedades como estilo (escuro, claro, verde) e estado (padrão, hover).
• Renomeie os rótulos das propriedades para maior clareza, como mudar "Propriedade 1" para Estilo e "Propriedade 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, use o ícone de mais sob o conjunto de variantes para incluir variações adicionais.

Criando interações

Para protótipos interativos, conecte um botão padrão ao seu estado de hover na aba Protótipo. Defina o gatilho para "Enquanto Hover" e a animação para "Dissolver" com uma duração de 500ms. Use o botão de visualização próximo ao ponto de início do fluxo para testar interações diretamente.

Esta estrutura simplificada torna o processo mais fácil de entender e seguir. Deixe-me saber se você precisa de mais ajustes!