Conteúdo do Curso
UI/UX com Figma
UI/UX com Figma
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?
Obrigado pelo seu feedback!