Voltar ao início do site
Manual do Usuário Figma

Variantes de Componentes

Variantes permitem agrupar diferentes versões de um mesmo componente (como estados de um botão: ativo, focado ou desabilitado) em um único conjunto organizado.

  • Seleção de Elementos

    Selecione dois ou mais componentes que possuam a mesma finalidade, mas aparências distintas.

  • Captura de tela do Figma selecao de elementos

    Captura de tela da interface do Figma demonstrando a Seleção de Elementos, onde dois componentes com a mesma finalidade (botões "Learn more") são destacados para comparação de suas aparências distintas, como as diferentes cores de preenchimento. Elementos selecionados que possuem o ícone de quatro diamantes roxos são identificados como Componentes Master, servindo de modelo para as demais cópias no projeto.

  • Agrupamento

    No painel lateral direito, clique na opção "Combine as Variants".

  • Captura de tela do Figma em agrupamento de variantes

    Captura de tela da interface do Figma demonstrando o Agrupamento de Variantes, onde dois elementos selecionados com a mesma finalidade, mas aparências distintas, podem ser organizados através do botão Combine as variants no painel lateral direito. Esse processo permite consolidar componentes individuais (como diferentes estilos de botões "Learn more") em um único conjunto de variantes, facilitando a troca de propriedades diretamente na instância.

  • Definição de Propriedades

    Nomeie as características que diferenciam cada versão (ex: Propriedade: "Estado"; Valores: "Default", "Hover", "Disabled").

  • Alternância de Estados

    Ao selecionar uma instância no projeto, o usuário poderá alternar entre as variantes disponíveis através de um menu suspenso no painel de configuração, sem a necessidade de substituir o objeto manualmente

Vinicius Zapella
09 de fevereiro de 2026