Criar e inserir instâncias de componentes

Quem pode usar esse recurso

Disponível em todos os planos

Qualquer pessoa com acesso de editor a um arquivo em uma equipe paga tem acesso ao playground de componentes

Qualquer pessoa com acesso de visualizador ao arquivo pode usar componentes dessa biblioteca

Os componentes são novidade para você? Guia para bibliotecas de estilo e componentes →

Componentes são elementos de UI que você pode reutilizar em seus designs.

• O componente principal define as propriedades do elemento.
• A instância é uma cópia do componente que você pode reutilizar nos designs.

Existem algumas maneiras de criar e inserir instâncias de componentes em seus designs:

• A partir do painel de recursos na barra lateral esquerda
• A partir do modal de detalhes do componente, acessível a partir do painel de recursos
• Usando a aba de Recursos do menu de ações
• Ao copiar ou duplicar uma instância

Painel de recursos

O painel de Recursos na barra lateral esquerda permite que você pesquise componentes para adicionar ao seu arquivo. Você pode escolher quais bibliotecas estão disponíveis no painel de Recursos.

Para abrir o painel de recursos:

1. Selecione a aba Recursos na barra lateral esquerda ou use o atalho:
   • Mac: ⌥ Option 2
   • Windows: Alt 2
2. Selecione uma biblioteca com o componente que você gostaria de usar
3. Encontre o componente que você quer usar
4. Clique e arraste o componente para a tela de trabalho para criar uma instância desse componente.

• Gerenciar bibliotecas para seus rascunhos
• Gerenciar bibliotecas em arquivos de design
• Gerenciar bibliotecas nas equipes
• Gerenciar bibliotecas padrão da organização

Modal de detalhes do componente

O modal de detalhes do componente mostra:

• Documentação do componente
• A biblioteca onde ele está
• Uma visualização do estado padrão do componente

Se você tiver acesso de edição a uma biblioteca em uma equipe paga, terá acesso adicional a um playground de componente. 

A partir do playground de componentes, você pode:

• Visualizar as variantes do componente
• Visualizar e definir as propriedades do componente
• Visualizar e definir propriedades do componente aninhadas, se instâncias aninhadas são expostas
• Visualizar e alterar os modos da variável para quaisquer variáveis aplicadas ao componente
• Insira o componente na tela de trabalho

1. Selecione a aba Recursos na barra lateral esquerda ou use o atalho:
   • Mac: ⌥ Option2
   • Windows: Alt2
2. Encontre o componente e selecione-o para abrir o modal de detalhes do componente.
3. Use os controles para configurar seu componente.
4. Para inserir a instância, clique em Inserir instância ou arraste a visualização para a tela de trabalho.

Inserção rápida a partir do menu de ações

Insira instâncias de componentes do seu teclado usando a inserção rápida. A inserção rápida abre o menu Ações, onde você pode encontrar e visualizar componentes de bibliotecas que foram adicionadas ao arquivo.

1. Use o atalho Shift I para abrir a inserção rápida.
2. Use a barra de pesquisa para encontrar um componente específico.

Copiar ou duplicar uma instância na tela de trabalho

Duplicar usando o atalho de teclado

Se você estiver trabalhando no mesmo arquivo, pode duplicar um componente para criar uma instância. Use o atalho de teclado para duplicar:

• Mac: ⌘ Command D
• Windows: Ctrl U

Arraste para copiar

Você também pode arrastar para copiar um componente dentro do mesmo arquivo:

1. Mantenha pressionada a tecla ⌥ Option para Mac ou Alt para Windows e arraste para criar uma instância.
2. Solte o clique antes de soltar a tecla modificadora. Caso contrário, o Figma moverá o componente original em vez de duplicá-lo.

Copiar e colar

Você pode copiar e colar qualquer componente dentro do mesmo arquivo para criar uma instância.

Instâncias de componentes e componentes principais publicados podem ser copiados e colados entre arquivos.

• Mac: ⌘ CommandC e ⌘ CommandV
• Windows: CtrlC e CtrlV