🚀 Capítulo 13: Propriedades de Componentes (Tema: Matrix)
NOTE
Este capítulo utiliza a temática de Matrix para explicar as Propriedades de Componentes. Controle as variáveis do seu design direto pelo painel de controle, sem precisar entrar no código do objeto!
1. 🎯 Objetivo da Aula
Compreender o uso de Component Properties (Propriedades de Componentes) no Figma: Boolean, Text e Instance Swap, e entender como elas tornam os componentes mais dinâmicos e fáceis de usar.
2. 🏢 O Cenário Prático (Seu Desafio)
No filme Matrix, o mundo digital em que as pessoas vivem é controlado por linhas de códigos verdes que caem pela tela. O operador da nave (como o personagem Tank) fica do lado de fora olhando para os monitores e pode mudar as regras da simulação em tempo real apenas mudando algumas variáveis no computador. Ele pode dizer: “Dê uma arma para o Neo”, “Desligue a gravidade” ou “Mude o cenário para um prédio”. Ele não precisa recriar a Matrix inteira do zero, ele apenas altera as propriedades do sistema!
No Figma, as Propriedades de Componentes são as nossas variáveis da Matrix!
- Antigamente, se você quisesse um botão com um ícone de estrela e outro botão sem ícone, precisava criar duas variantes (duas caixas desenhadas).
- Hoje, você cria uma propriedade que funciona como uma chave de liga/desliga na barra lateral! Seu desafio é programar essas propriedades!
🧠 Fundamentos: A Teoria Traduzida
As propriedades de componentes permitem que você controle o que está dentro do componente sem precisar dar dois cliques para selecionar as camadas internas.
🟩 Os 3 Tipos de Propriedades da Matrix:
1. Boolean (Chave Liga/Desliga):
Serve para mostrar ou esconder um elemento dentro do componente.
- Exemplo: Você cria uma propriedade chamada
Mostrar Ícone?. Na barra direita, aparece uma chavinha. Se você desligar, o ícone some do botão. Se ligar, ele reaparece!
2. Text (Caixa de Texto):
Serve para você alterar o texto do componente direto pela barra lateral direita, sem precisar clicar duas vezes em cima do desenho da palavra.
- Exemplo: Uma propriedade chamada
Texto do Botão. Você digita “Comprar” na caixinha lateral e o desenho do botão se atualiza.
3. Instance Swap (Troca de Instância):
Serve para você trocar um ícone que está dentro do componente por outro ícone da sua biblioteca rapidamente.
- Exemplo: O botão vem com um ícone de “Seta”. Você usa a propriedade para trocá-lo por um ícone de “Carrinho” com apenas um clique no menu lateral.
4. 📖 Exemplo Guiado: Simplificando o Multiverso
No capítulo anterior, vimos que as Variantes são ótimas, mas se você tiver muitas opções (com ícone, sem ícone, texto grande, texto pequeno), o número de variantes multiplica e a sua caixa roxa fica gigante!
- A Boa Prática: Use Variantes para mudanças visuais grandes (como cores e estados de Hover).
- Use Propriedades de Componentes para coisas simples de ligar/desligar ou mudar textos! Isso deixa o seu projeto muito mais leve e inteligente.
5. 🛠️ Prática Obrigatória 1: Escolhendo a Propriedade
Qual tipo de propriedade de componente (Boolean, Text ou Instance Swap) você usaria no Figma para os seguintes casos?
- Você quer poder trocar rapidamente o ícone de “Coração” por um ícone de “Estrela” dentro de um card de produto.
- Você quer uma chavinha para poder ligar ou desligar a bolinha vermelha de “Nova Notificação” em cima do ícone de sino.
6. 🛠️ Prática Obrigatória 2: Mudando a Matrix
- Um colega de equipe disse que prefere dar dois cliques no texto do botão para mudá-lo, em vez de usar a propriedade de texto na barra lateral. Cite uma vantagem de usar a propriedade de texto na barra lateral, especialmente para programadores que estão inspecionando o seu design.
7. 📤 Instruções de Entrega (GitHub Desktop + Microsoft Teams)
- Faça o Commit: No GitHub Desktop, digite a mensagem (ex:
Finaliza Capítulo 13 UIFigma) e clique em Commit to main. - Envie para a Nuvem (Push): Clique em Push origin.
8. 📂 Estrutura de Pastas
mod_03_design_de_interfaces_ui_ux/
├── capitulos/
│ ├── capitulo_13_propriedades.md
│ └── codigos/
│ └── cap13/
│ └── variaveis_matrix.txt💡 Checkpoint de Lógica
Você cria essas propriedades selecionando a camada de texto ou o ícone dentro do componente principal e clicando no pequeno ícone de seta com um retângulo (Apply property) que aparece ao lado da propriedade na barra direita!
10. 🔥 Desafio de Fixação
Pesquise como criar uma propriedade do tipo Boolean no Figma para ocultar uma camada.
🔑 Gabarito de Código/Fórmulas
Gabarito da Prática 1:
- Instance Swap (Para trocar um componente filho por outro).
- Boolean (Para ligar/desligar a visibilidade de uma camada). Gabarito da Prática 2:
- Usando a propriedade na barra lateral, o texto fica exposto logo no primeiro nível do componente. Isso facilita muito para os programadores verem qual é o conteúdo daquele botão sem precisarem ficar “mergulhando” em dezenas de camadas de grupos e frames para achar o texto!