Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Aprenda Propriedades do Componente | Prototipagem
UI/UX com Figma
course content

Conteúdo do Curso

UI/UX com Figma

UI/UX com Figma

1. Ferramentas Básicas do Figma
2. Criando e Organizando Objetos
3. Criando Visuais
4. Prototipagem
5. Submetendo Trabalho

book
Propriedades do Componente

As propriedades de componentes no Figma permitem a criação de elementos personalizáveis dentro dos componentes, facilitando a reutilização e adaptação de designs em projetos. Existem três tipos principais de propriedades de componentes:

1. Propriedade de Troca de Instância

Esta propriedade permite trocar componentes aninhados, como ícones, dentro do componente principal. Ícones ou valores pré-selecionados podem ser adicionados para fácil personalização.

Para criar esta propriedade:

  • Selecione as instâncias que deseja trocar.
  • Use a opção Criar Propriedade de Troca de Instância no painel de Design.

2. Propriedade Booleana

A propriedade booleana permite alternar elementos ativados ou desativados, como mostrar ou ocultar ícones ou texto.
Por exemplo, uma propriedade chamada "Tem Ícone à Esquerda?" pode controlar a visibilidade de um ícone no lado esquerdo de um botão. Esta propriedade é adicionada na seção Aparência.

3. Propriedade de Texto

A propriedade de texto permite alterar o texto dentro de um componente diretamente do painel de Design.

Para criar esta propriedade:

  • Selecione o elemento de texto.
  • Use o ícone Aplicar Propriedade ou Variante no canto superior direito do painel de Design para criar a propriedade.

Essas propriedades podem ser reordenadas no painel de Design para melhor organização. Alterações feitas nas propriedades, como alternar uma propriedade booleana, ajustam automaticamente outras propriedades relacionadas para funcionalidade perfeita. Testar todas as propriedades criando uma instância do componente garante adaptabilidade para projetos futuros.

As propriedades de componentes melhoram significativamente a eficiência na construção e gerenciamento de componentes reutilizáveis, como bibliotecas de botões, economizando tempo e garantindo consistência no design.

1. Qual é a cor padrão das propriedades de componentes no Figma para identificação?

2. Qual dos seguintes cenários é um exemplo de uso de uma Propriedade Booleana?

Qual é a cor padrão das propriedades de componentes no Figma para identificação?

Qual é a cor padrão das propriedades de componentes no Figma para identificação?

Selecione a resposta correta

Qual dos seguintes cenários é um exemplo de uso de uma Propriedade Booleana?

Qual dos seguintes cenários é um exemplo de uso de uma Propriedade Booleana?

Selecione a resposta correta

Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 4. Capítulo 7
We're sorry to hear that something went wrong. What happened?
some-alt