Um elemento reutilizável. O componente principal define o botão, card ou ícone, e as instâncias são cópias ligadas a ele que recebem toda alteração.
Selecione as camadas e use Option + Command + K no Mac ou Ctrl + Alt + K no Windows. Também dá pelo botão direito: Criar componente.
1. Painel de Recursos: Option + 2 ou Alt + 2
2. Inserção rápida: Shift + I
3. Duplicar: Command + D ou Ctrl + D
Texto, preenchimento, contorno, sombras e o ícone aninhado. Ordem e posição das camadas só mudam no componente principal.
Option + Command + B ou Ctrl + Alt + B transforma a instância em quadro comum. Ela para de receber atualizações do design system.
Versões do mesmo componente (tamanho, estado, cor) juntas em um conjunto. O exemplo do Figma: um botão com 24 variantes vira um item só na biblioteca.
Renomeie com barras, como Botao/Primario/Grande, selecione tudo e combine como variantes. Depois renomeie as propriedades no painel da direita.
Ícone opcional vira propriedade booleana. Rótulo vira propriedade de texto. Estado que precisa de interação no protótipo continua como variante.
1. Desconectar instância para um ajuste
2. Nomes sem padrão
3. Duas variantes com os mesmos valores
4. Renomear a variante pela camada
Passo a passo de variantes do zero, componentes interativos, tabela de erros e o checklist antes de publicar a biblioteca.
igluonline.com