Antes de você começar

Quem pode usar este recurso

Usuários de qualquer plano

Qualquer pessoa com acesso de edição ao arquivo do Figma Design pode criar, gerenciar e usar propriedades do componente

Este artigo aborda como criar e configurar propriedades do componente. Aprenda como editar instâncias com propriedades do componente.

As propriedades do componente são os aspectos mutáveis dele. Elas permitem que você comunique quais partes de um componente podem ser alteradas, por exemplo:

• Quais camadas em um componente têm a opção de serem ocultas ou exibidas
• Se uma instância pode ser trocada e definir instâncias preferenciais para trocar
• Quais sequências de texto podem ser alteradas

As propriedades dos componentes são criadas e aplicadas aos componentes principais e aos conjuntos de componentes para definir partes de um design system e para facilitar o uso deles.

Qualquer pessoa que use um componente com propriedades de componente pode visualizar um único conjunto de controles consolidados no painel direito. Dessa forma, é possível entender rapidamente o que pode ser alterado e fazer edições em um só lugar.

Isso reduz o tempo necessário para consultar a documentação, melhora o uso preciso de componentes e design systems e diminui a necessidade de selecionar e substituir camadas individuais.

Tipos de propriedades de componentes

As propriedades do componente estão vinculadas a diferentes propriedades de design. Você pode criar propriedades do componente para qualquer componente principal ou variantes de um conjunto de componentes e aplicá-las a camadas aninhadas do componente ou variante.

Existem vários tipos de propriedades de componentes:

Tipo de propriedade do componente	Use isso para...
Propriedade booleana	Indicar quais camadas podem ter sua visibilidade ativada/desativada, como um ícone em um botão.
Propriedade de troca de instância	Indicar quais instâncias podem ser trocadas; definir as instâncias preferenciais para trocar.
Propriedade do texto	Indicar qual conteúdo de texto pode ser alterado.
Propriedade da variante	Defina as diferentes variações de um componente, como seus diferentes estados, tamanhos ou cores.

Criar e aplicar propriedades do componente

Propriedade booleana

Use propriedades booleanas para definir valores verdadeiro/falso, que permitem ativar ou desativar um atributo. Por exemplo, se um design system contiver botões com e sem ícone, em vez de criar variantes para cada estado, aplique uma propriedade booleana à visibilidade da camada do ícone.

Atualmente, as propriedades booleanas suportam apenas a visibilidade da camada. 

Criar uma propriedade booleana

Quando uma propriedade booleana é criada para a visibilidade da camada, um valor definido como falso significa que a camada ficará oculta. Se alternar para verdadeiro, a camada ficará visível.

1. Selecione um componente principal ou conjunto de componentes.
2. Na barra lateral direita, clique em na seção Propriedades e selecione Booleano no menu suspenso.
3. Na janela modal Criar propriedade do componente , use os campos e menus suspensos para configurar a propriedade.
   • Dê um nome à sua propriedade no campo de texto.
   • Defina o valor padrão como verdadeiro ou falso. Você também pode clicar em Aplicar variável para aplicar uma variável booleana existente, se disponível.
4. Clique em criar propriedade.

Aplique uma propriedade booleana a um componente

1. Selecione uma camada aninhada em um componente principal ou variante.
2. Se você estiver trabalhando com variantes, pode clicar em para ativar a edição múltipla, editar objetos correspondentes e acelerar o seu fluxo de trabalho. Aprenda sobre as variantes de edição múltipla.
3. Na barra lateral direita, encontre a seção Aparência e clique no ícone Aplicar variável/propriedade.
4. Escolha uma propriedade booleana da lista. Quando aplicado, você verá um balão roxo com o nome da propriedade na barra lateral direita.

Propriedade de troca de instância

A propriedade de troca de instância permite indicar quais instâncias aninhadas em um componente principal ou variante podem ser trocadas.

Ao criar uma propriedade de troca de instância, você pode definir uma instância padrão usando qualquer componente criado no arquivo, ou de bibliotecas adicionadas ao arquivo. Você também pode definir instâncias preferenciais para que outras pessoas saibam para quais instâncias trocar. Aprenda a trocar componentes usando a propriedade de troca de instância.

Criar propriedade de troca de instância

1. Selecione um componente principal ou conjunto de componentes.
2. Na barra lateral direita, clique na seção Propriedades e selecione Troca de instância no menu suspenso.
3. Na janela modal Criar propriedade do componente , use os campos e menus suspensos para configurar a propriedade.
   • Dê um nome à sua propriedade usando o campo de texto.
   • Defina o valor padrão usando o menu suspenso para selecionar uma instância de qualquer componente criado no arquivo ou de qualquer biblioteca adicionada ao arquivo.
   • Se desejar, configure quaisquer instâncias preferidas para que outros saibam de quais componentes devem escolher ao trocar a instância.
4. Clique em criar propriedade.

Aplicar uma propriedade de troca de instância a um componente

1. Selecione uma instância aninhada em um componente principal ou variante.
2. Se você estiver trabalhando com variantes, pode clicar em para ativar a edição múltipla, editar objetos correspondentes e acelerar o seu fluxo de trabalho. Aprenda sobre as variantes de edição múltipla.
3. No topo da barra lateral direita, clique em Aplicar propriedade de troca de instância.
4. Escolha uma propriedade de instância da lista. Quando aplicado, você verá um balão roxo com o nome da propriedade na barra lateral direita.

Escolha valores preferidos

Os valores preferenciais permitem que você crie um conjunto selecionado de componentes para escolher ao trocar instâncias (por meio da propriedade de troca de instâncias). Eles reduzem a adivinhação ao informar quais componentes específicos podem substituir um componente existente.

Por exemplo, você cria um botão de ícone com uma propriedade de troca de instância para indicar que o ícone pode ser trocado. Entretanto, sua biblioteca de ícones contém mais de 100 ícones, mas somente 8 deles devem ser usados para esse botão.

Para facilitar a localização desses 8 ícones e saber quais deles podem ser usados, você os adiciona como valores preferenciais. Agora, sempre que os designers forem trocar o ícone, eles terão uma lista selecionada de recursos que sabem que podem usar.

Ao usar um componente com um valor preferencial, uma lista de valores preferenciais aparece por padrão ao abrir o menu de propriedades de troca de instância.

Para adicionar valores preferenciais a uma instância:

1. Comece editando sua propriedade de troca de instância existente ou criando uma nova.
2. A partir dos respectivos modais, clique na seção Valores preferenciais e marque as caixas de seleção ao lado das instâncias que deseja incluir como valores preferenciais.

Para remover um valor preferencial, clique em ao lado do valor na seção Valores preferenciais do modal.

Propriedade do texto

Use propriedades de texto para indicar qual conteúdo de texto em um componente pode ser editado. O conteúdo do texto pode ser editado tanto a partir do painel direito quanto na tela de trabalho.

Criar uma propriedade do texto

1. Selecione um componente principal ou conjunto de componentes.
2. Clique na seção Propriedades da barra lateral direita e selecione Texto no menu suspenso.
3. No modal  Criar propriedade do componente , use os campos para configurar a propriedade.
   • Dê um nome à sua propriedade usando o campo de texto.
   • Defina a string de texto padrão usando o campo Valor. Você também pode clicar em Aplicar variável para aplicar uma variável de string existente, se disponível.
4. Clique em criar propriedade.

Aplique uma propriedade de texto a um componente

1. Selecione uma camada de texto aninhada em um componente principal ou variante.
2. Na seção Texto no topo da barra lateral direita, passe o mouse sobre o campo de texto e clique em Aplicar variável/propriedade.
3. Escolha uma propriedade de texto da lista.

Propriedade da variante

Uma variante é um componente individual em um conjunto de componentes.

Uma propriedade de variante permite que você defina atributos de suas variantes, como estado, cor ou tamanho.

Um conjunto de componentes contém múltiplas variantes, e as variantes carregam atributos que podem ser definidos por propriedades de variantes. As propriedades de variantes são específicas para variantes e conjuntos de componentes e não podem ser criadas ou aplicadas a componentes principais.

Aprenda como criar variantes e conjuntos de componentes.

No exemplo abaixo, temos um conjunto de componentes de botão com quatro variantes. Ele tem duas propriedades de variantes, tamanho e cor. Os valores de tamanho incluem pequeno e grande, enquanto os valores de cor incluem verde e vermelho.

Alterne para uma propriedade do componente diferente

Se uma camada tiver uma propriedade do componente aplicada a ela, você pode alterá-la para uma diferente a qualquer momento.

1. Na barra lateral direita, localize a seção correspondente à propriedade do componente que você gostaria de alterar.
   • Propriedade de troca de instância: topo da barra lateral direita.
   • Propriedade de texto: Topo da barra lateral direita na seção Texto.
   • Propriedade booleana: A seção Aparência.
2. Clique no balão roxo.
3. Selecione uma propriedade existente do mesmo tipo.

Personalizar uma propriedade de componente

Alterar o valor padrão

Alterar o valor padrão de uma propriedade de texto, booleana ou de troca de instância.

1. Selecione o conjunto de componentes ou o componente principal.
2. Clique em ao lado da propriedade da variante para abrir o modal de edição da propriedade.
3. Use o campo de texto ou o menu suspenso na seção Valor para atualizar o valor padrão.

A atualização do valor padrão será refletida no canvas se a camada de instância associada não tiver substituições de propriedade aplicadas.

Expor instâncias aninhadas

Exponha instâncias aninhadas específicas para revelar as propriedades de seus componentes juntamente com as da instância de nível superior. Isso ajuda os usuários do design system a descobrir instâncias aninhadas e as propriedades de seus componentes sem a necessidade de selecionar camadas profundas para encontrá-las.

Por exemplo, você cria um componente de cartão de rede social com vários componentes aninhados: um avatar, nome, botões e assim por diante. Você quer alterar o ícone do botão padrão para um ícone de "enviar" e alterar seu texto. Você também quer alterar o estado do botão cancelar para desabilitado .

Em vez de fazer uma seleção profunda em cada camada para encontrar os controles de propriedade dos componentes, a exposição de instâncias aninhadas permite clicar apenas no componente de nível superior (nesse caso, o cartão de rede social) e editar a instância em um único local.

Quando você seleciona uma instância de nível superior com instâncias aninhadas expostas, uma lista de propriedades de componentes para as instâncias de nível superior e aninhadas é exibida no painel direito.

Ao passar o mouse sobre uma linha de propriedade, um destaque roxo claro aparece ao redor do objeto correspondente no canvas para que você saiba o que está editando.

Escolher instâncias aninhadas para expor

Com um componente principal ou conjunto de componentes selecionado, clique em na seção Propriedades do painel direito e escolha Instâncias aninhadas em Expor propriedades de.

No modal Expor instâncias aninhadas, marque as caixas das instâncias que você pretende revelar no nível superior.

Uma lista das instâncias aninhadas escolhidas aparecerá no painel direito.

Para impedir que alguma instância aninhada seja exposta, passe o mouse sobre o nome da instância nessa lista e clique em .

Simplificar instâncias

A simplificação de uma instância ajuda a reduzir a desordem no painel de camadas e propriedades, ocultando camadas sem propriedades de componentes aplicadas. O Figma pressupõe que uma camada sem propriedade de componente é uma camada que não deve ser editada e, portanto, pode ser ocultada.

Para simplificar uma instância, selecione um componente principal ou conjunto de componentes e clique em Configuração de componentes no painel direito. No pop-up, marque a caixa de seleção simplificar todas as instâncias.

Ao usar uma instância de um componente simplificado, as camadas em excesso serão recolhidas em Ver todas as camadas. Clique em Ver todas as camadas para expandir e ver as camadas. Você pode recolhê-las novamente clicando fora do painel de camadas ou selecionando uma camada diferente.

Gerenciar uma propriedade de componente

Depois de criar as propriedades do componente e seus valores, você pode gerenciá-las a qualquer momento. É possível renomear, reorganizar, excluir, alterar valores padão e muito mais.

Desvincular uma propriedade

Desvincular texto, trocar instâncias ou propriedades booleanas de uma camada.

1. Selecione uma camada aninhada com uma propriedade de componente aplicada.
2. Clique em no painel lateral direito ao lado da propriedade que você deseja desvincular.

Isso remove a propriedade do componente da camada, mas a propriedade do componente não é excluída.

Renomear, reordenar ou excluir

Propriedades

Para renomear, reordenar ou excluir uma propriedade de componente existente:

1. Selecione o componente principal ou o conjunto de componentes.
2. Na seção Propriedades na barra lateral direita:

   • Renomear: clique duas vezes em um nome de propriedade. Digite um novo nome e pressione return / enter ou clique fora do campo para aplicar.

   • Reordenar: passe o mouse sobre uma propriedade para revelar as alças. Clique e arraste para reordenar, depois solte para aplicar.

     As propriedades de variantes sempre ficam acima de outros tipos de propriedade na barra lateral direita. Elas podem ser reordenadas com outras propriedades de variantes, mas não com outros tipos de propriedades.

   • Excluir: clique com o botão direito do mouse em uma propriedade e clique em Excluir propriedade. Ou selecione uma propriedade e pressione delete.

     Se o conjunto de componentes ou o componente principal contiver apenas uma propriedade de variante, a exclusão da propriedade excluirá todo o conjunto de componentes ou o componente principal.

Valores

Para alterar ou reordenar valores de uma propriedade de variante:

1. Selecione o conjunto de componentes ou o componente principal.
2. Clique em ao lado da propriedade da variante para abrir o modal de edição da propriedade.
   • Mudar: Na seção Valores, use os campos de texto para alterar ou atualizar os valores.
   • Reordenar: passe o mouse sobre uma propriedade para revelar as alças. Clique e arraste para reordenar.

Playground de componentes no Dev Mode

Ao selecionar um componente ou uma instância no Dev Mode, você verá uma visualização do componente, um link para o componente principal, bem como links para documentação relevante e recursos de desenvolvimento.

O playground de componentes aparece no painel de inspeção quando uma instância de componente é selecionada. Use o playground para fazer testes com as diferentes propriedades do componente sem alterar de fato o design. Para abrir o playground de componentes no Dev Mode:

1. Selecione uma instância de componente no canvas.
2. Clique em Abrir no playground no painel de inspeção.

Saiba mais sobre como usar o Dev Mode para inspecionar designs.