Componentes no Figma: como criar, usar e fazer variantes

Componentes no Figma são elementos reutilizáveis: você cria um componente principal (um botão, um card, um ícone) e usa cópias dele, chamadas instâncias, em todas as telas. Para criar, selecione as camadas e use Option + Command + K no Mac ou Ctrl + Alt + K no Windows. Qualquer ajuste no componente principal chega a todas as instâncias de uma vez.

Variantes no Figma servem para agrupar versões parecidas do mesmo componente (tamanho, estado, cor) dentro de um único conjunto, controlado por propriedades no painel da direita. É assim que uma equipe evita ter 24 botões soltos na biblioteca e passa a ter um botão só, com opções.

Este guia mostra como criar componentes no Figma, como usar e editar instâncias sem quebrar o vínculo, quando usar variante ou propriedade de componente e os erros que mais bagunçam um design system de empresa. Os passos seguem a central de ajuda oficial do Figma.

O que são componentes no Figma

Um componente tem sempre dois lados:

Componente principal: é o original. Ele define a aparência e as propriedades do elemento. No painel Camadas, aparece com o ícone roxo de componente.
Instância: é a cópia que você espalha pelos layouts. Ela fica ligada ao principal e recebe toda alteração feita nele.

Você pode criar componentes a partir de qualquer camada ou objeto: um ícone, um campo de formulário, um menu inteiro. Eles podem ficar só no arquivo atual ou ir para uma biblioteca da equipe, para serem usados em outros arquivos e projetos.

O ganho aparece quando o projeto cresce. Se o cliente pede para trocar o raio da borda de todos os botões, quem usou componentes muda um lugar. Quem desenhou cada botão à mão revisa tela por tela.

Como criar componentes no Figma

Selecione as camadas que vão formar o componente.
Crie o componente de uma destas formas:
- clique no ícone Criar componente, ao lado do nome da seleção, na barra lateral direita;
- clique com o botão direito na seleção e escolha Criar componente;
- use o atalho Option + Command + K (Mac) ou Ctrl + Alt + K (Windows).
O Figma coloca as camadas dentro de um quadro especial de componente. Dê um nome claro a ele e, se quiser, adicione uma descrição e um link de documentação nas configurações do componente.

Dá para criar vários de uma vez. Selecione os quadros, grupos ou vetores, abra o menu de opções ao lado do botão de criar componente e escolha a opção de criar vários componentes. O Figma gera um componente para cada item selecionado.

Dois detalhes da documentação do Figma sobre criação de componentes que evitam susto:

Apagar o componente principal não apaga as instâncias. Elas continuam no arquivo.
Dá para restaurar um componente apagado a partir de qualquer instância que sobrou: selecione a instância e use a opção de restaurar componente na barra lateral direita (ou, pelo botão direito, em Componente principal).

Se o layout interno do componente precisa se adaptar ao texto, monte-o com auto layout no Figma antes de transformar em componente. Um botão com auto layout cresce sozinho quando o rótulo muda em cada instância.

Como usar instâncias

Existem quatro jeitos de colocar uma instância no layout:

Jeito	Como fazer
Painel de Recursos	Abra com Option + 2 (Mac) ou Alt + 2 (Windows), ache o componente e arraste para a tela
Inserção rápida	Shift + I abre a busca de componentes das bibliotecas do arquivo
Duplicar	Command + D (Mac) ou Ctrl + D (Windows) sobre um componente ou instância
Arrastar com modificador	Segure Option (Mac) ou Alt (Windows) e arraste. Solte o mouse antes da tecla, senão o Figma move o original

Para chegar ao original a partir de qualquer cópia, clique com o botão direito na instância e escolha Ir para o componente principal.

O que dá para mudar em uma instância

As mudanças locais em uma instância (os overrides) servem para adaptar a cópia ao contexto sem mexer no original. Pela documentação de alterações em instâncias, você pode alterar:

texto (conteúdo, fonte, peso, tamanho, entrelinha);
preenchimento e contorno de qualquer camada;
sombras e desfoques;
instâncias aninhadas, como o ícone dentro de um botão;
configurações de exportação e o nome da camada.

O que não dá para mudar: a ordem das camadas, a posição das camadas dentro do componente (inclusive em auto layout), as restrições e os limites das caixas de texto. Para isso, você edita o componente principal ou desconecta a instância.

Resetar, enviar ao principal ou desconectar

Resetar: no menu de mais ações ao lado do nome do componente, use Reset para voltar uma propriedade (ou todas) ao que está no principal.
Enviar alterações ao principal: na mesma lista, a opção de empurrar as mudanças para o componente principal atualiza todas as outras instâncias. Só funciona quando o principal está no mesmo arquivo; não vale para bibliotecas publicadas.
Desconectar instância: Option + Command + B (Mac) ou Ctrl + Alt + B (Windows). A instância vira um quadro comum e para de receber atualizações. Use com moderação: cada instância desconectada é uma peça que sai do controle do design system.

Variantes no Figma: como criar e organizar

Variantes juntam componentes parecidos em um único conjunto de componentes. Cada variante é uma combinação de propriedades (por exemplo, Tipo, Tamanho, Estado) e valores (Primário/Secundário, Grande/Pequeno, Padrão/Pressionado/Inativo).

O exemplo da documentação de variantes é um botão com quatro propriedades e 24 variantes. Na biblioteca, ele aparece como um item só. Quem usa escolhe a combinação em listas suspensas no painel da direita.

Criar variantes do zero

Selecione um componente principal.
Na barra lateral direita, clique no botão de adicionar variante (ou clique com o botão direito em Componente principal > Adicionar variante).
O Figma cria uma cópia idêntica e coloca as duas dentro de um conjunto de componentes, com contorno tracejado roxo.
Renomeie as propriedades na seção Propriedades da barra lateral direita (clique duas vezes no nome).
Para mais variantes, duplique uma existente com Command + D / Ctrl + D ou arraste outros componentes para dentro do conjunto.

Transformar componentes que você já tem em variantes

Se a biblioteca já está cheia de botões separados, dá para converter:

Renomeie os componentes com barras, todos com o mesmo número de barras: Botao/Primario/Grande/Padrao.
Organize-os na tela em linhas e colunas.
Selecione todos e clique em Combine as variants na barra lateral direita (na interface em português, a opção de combinar como variantes).
O texto antes da primeira barra vira o nome do conjunto. O Figma cria propriedades genéricas (Variant, Property 2, Property 3), que você renomeia para nomes que façam sentido.

Por baixo, o nome de cada variante segue a sintaxe Propriedade1=valor, Propriedade2=valor. Se alguém digita errado esse nome no painel Camadas, o Figma acusa variante corrompida. Por isso, renomeie sempre pelo painel de propriedades, não pela camada.

Três regras do conjunto de variantes:

Cada variante precisa ser uma combinação única. Duas variantes com os mesmos valores geram erro de conflito, mesmo que sejam visualmente diferentes.
A variante do canto superior esquerdo é a padrão. É ela que aparece no painel de Recursos e que entra quando alguém arrasta o conjunto para a tela.
Conjuntos enormes pesam. Ao inserir uma instância, o Figma importa todas as variantes do conjunto. O próprio Figma não recomenda usar variantes para agrupar ícones diferentes.

Variante ou propriedade de componente?

Além das variantes, o Figma tem as propriedades de componente, que deixam o conjunto bem mais enxuto. São quatro tipos:

Tipo	Use para	Exemplo
Variante	Versões que mudam o visual	Tamanho, estado, cor
Booleana	Mostrar ou esconder uma camada	Botão com ou sem ícone
Texto	Indicar que texto pode ser trocado	Rótulo do botão
Troca de instância	Indicar qual instância aninhada pode ser trocada	Qual ícone vai no botão

Um botão com ícone opcional, feito só com variantes, dobra o número de variantes. Com uma propriedade booleana na camada do ícone, o número fica igual e quem usa só liga ou desliga uma chave.

O cuidado é com protótipos. Ligações de protótipo precisam conectar dois objetos. Se você consolidou dois estados com uma propriedade booleana, não dá para criar uma interação entre eles. Estado que precisa de interação (hover, pressionado, marcado) fica como variante.

Componentes interativos

Com variantes prontas, você pode criar interações entre elas na aba Protótipo, com a ação Mudar para. Uma caixa de seleção alterna entre marcada e desmarcada sozinha em qualquer protótipo que use a instância. O exemplo do Figma: cinco caixas de seleção sem componentes interativos exigiriam 32 quadros e 160 conexões.

Erros comuns com componentes no Figma

Erro	O que acontece	Como evitar
Desconectar instância para fazer um ajuste	A peça deixa de receber atualizações	Crie uma variante ou uma propriedade nova no principal
Nomes sem padrão	Ninguém acha nada no painel de Recursos	Use barras: `Formulario/Campo/Erro`
Uma variante para cada combinação possível	Conjunto pesado e difícil de manter	Use propriedade booleana e de texto onde der
Editar o nome da variante na camada	Erro de variante corrompida	Renomeie pelo painel de propriedades
Variantes duplicadas	Erro de conflito	Garanta uma combinação única de valores
Componente sem auto layout	Texto estoura quando o rótulo muda	Monte com auto layout antes de criar o componente

Se a sua equipe está montando ou arrumando uma biblioteca, vale seguir o Instagram da Iglu para acompanhar mais conteúdo de design e de ferramentas como Figma, Photoshop e Illustrator.

Checklist antes de publicar uma biblioteca

[ ] Todo componente tem nome com barras e descrição curta.
[ ] Botões, campos e cards foram montados com auto layout.
[ ] Estados com interação (hover, pressionado) são variantes.
[ ] Ícone opcional é propriedade booleana; rótulo é propriedade de texto.
[ ] A variante padrão está no canto superior esquerdo do conjunto.
[ ] Não há variantes em conflito nem corrompidas.
[ ] O arquivo da biblioteca está em uma equipe com plano pago, que é o que permite publicar componentes para outros arquivos.

Uma biblioteca bem organizada também facilita a passagem para o desenvolvimento. Se o próximo passo é transformar o layout em site, um bom briefing para criação de site junto com os componentes economiza várias rodadas de ajuste.

Perguntas frequentes

Qual o atalho para criar componente no Figma?

Option + Command + K no Mac e Ctrl + Alt + K no Windows. Você também pode clicar com o botão direito na seleção e escolher Criar componente.

Qual a diferença entre componente e instância no Figma?

O componente principal é o original, que define o elemento. A instância é a cópia usada nos layouts, que herda as mudanças do principal e aceita alterações locais de texto, cor e efeitos.

Como desagrupar ou desconectar um componente no Figma?

Selecione a instância e use Option + Command + B (Mac) ou Ctrl + Alt + B (Windows), ou clique com o botão direito e escolha desconectar instância. Ela vira um quadro comum e perde o vínculo com o principal.

Como adicionar componentes de outra biblioteca no Figma?

Abra o painel de Recursos (Option + 2 ou Alt + 2), adicione a biblioteca pelo ícone de bibliotecas e arraste o componente para a tela. Para usar componentes de uma biblioteca, basta ter acesso de visualização a ela.

Variantes no Figma funcionam no plano gratuito?

Sim. Criar componentes e variantes está disponível em todos os planos para quem tem acesso de edição ao arquivo. Publicar o conjunto em uma biblioteca compartilhada exige plano pago.

Próximo passo

Comece pelo componente que mais se repete nos seus layouts, geralmente o botão, e transforme as versões soltas em um conjunto de variantes com propriedades booleanas e de texto. Para acompanhar os próximos guias de ferramentas de design, siga o Instagram da Iglu.

Acompanhe a Iglu no Instagram e no LinkedIn, e o fundador André Lug no Instagram.