DS & II

Capítulo 11 - Componentes

Leitura de 4 min

🚀 Capítulo 11: Componentes: O Jutsu de Clonagem (Tema: Naruto)

NOTE

Este capítulo utiliza a temática de Naruto para explicar os Componentes. Crie clones do seu design e controle todos eles alterando apenas o original!

1. 🎯 Objetivo da Aula

Compreender o que são Componentes no Figma, a diferença entre o Componente Principal e as Instâncias, e como eles revolucionam a criação de interfaces consistentes e fáceis de manter.

2. 🏢 O Cenário Prático (Seu Desafio)

O ninja Naruto Uzumaki tem uma técnica especial famosa chamada Jutsu Clone das Sombras. Com ela, ele consegue criar dezenas de clones idênticos a ele mesmo para ajudá-lo na batalha. O melhor de tudo: se o Naruto original aprender um golpe novo ou mudar a cor da sua roupa, todos os clones herdam essa mudança automaticamente! Eles estão magicamente conectados ao original.

No Figma, o Componente é o nosso Jutsu de Clonagem!

  • Imagine que você desenhou um botão perfeito (com Auto Layout, cor e texto). Você vai precisar desse botão em telas diferentes do seu aplicativo.
  • Em vez de copiar e colar o botão vezes (o que criaria objetos independentes), você transforma o primeiro botão em um Componente Principal!
  • Depois, você cria Instâncias (clones) dele para usar nas outras telas. Seu desafio é dominar essa técnica ninja!

🧠 Fundamentos: A Teoria Traduzida

💎 1. Componente Principal (Main Component):

É o “Naruto Original”. É o primeiro elemento que você cria e transforma em componente (clicando no ícone de losangos na barra superior ou usando o atalho Ctrl + Alt + K).

  • No Figma, ele é identificado por um ícone de losango preenchido de roxo na lista de camadas.

👥 2. Instâncias (Instances):

São os “Clones das Sombras”. São as cópias que você faz do componente principal para usar nas telas.

  • No Figma, elas são identificadas por um ícone de losango vazio (apenas a borda) na lista de camadas.

🧬 3. O Superpoder da Herança:

Se você mudar a cor do Componente Principal de azul para verde, todas as instâncias (clones) espalhadas pelo projeto mudam para verde sozinhas no mesmo segundo! Você não precisa alterar tela por tela.

4. 📖 Exemplo Guiado: O “Override” (Sobrescrita)

E se você quiser que um clone específico tenha um texto diferente (ex: o original diz “Ok” e o clone deve dizer “Cancelar”)?

  • Você pode dar dois cliques no texto do clone e digitar “Cancelar”.
  • O Figma permite que você mude o texto ou a cor de um clone sem quebrar a conexão dele com o original!
  • Se você mudar a cor do original para verde, o clone do “Cancelar” vai ficar verde, mas continuará escrito “Cancelar”! Isso se chama Override.

5. 🛠️ Prática Obrigatória 1: Identificando os Elementos

Olhando para a lista de camadas à esquerda no Figma, você vê os seguintes ícones roxos ao lado dos nomes dos objetos. Diga se o objeto é o Original ou um Clone:

  1. Um ícone formado por pequenos losangos formando um losango maior.
  2. Um ícone de um único losango vazio (apenas o contorno).

6. 🛠️ Prática Obrigatória 2: O Poder da Mudança

  1. Você criou um componente de um botão azul e espalhou clones dele pelo projeto. Em um desses clones, você mudou a cor para vermelho (fez um override). Se agora você for no botão original e mudar a cor dele para verde, de qual cor ficará aquele clone que você tinha pintado de vermelho?

7. 📤 Instruções de Entrega (GitHub Desktop + Microsoft Teams)

  1. Faça o Commit: No GitHub Desktop, digite a mensagem (ex: Finaliza Capítulo 11 UIFigma) e clique em Commit to main.
  2. Envie para a Nuvem (Push): Clique em Push origin.

8. 📂 Estrutura de Pastas

mod_03_design_de_interfaces_ui_ux/
├── capitulos/
│   ├── capitulo_11_componentes.md
│   └── codigos/
│       └── cap11/
│           └── jutsu_clonagem.txt

💡 Checkpoint de Lógica

Mantenha os seus Componentes Principais organizados em uma página separada do projeto. Isso evita que você apague o “Naruto Original” sem querer enquanto mexe nas telas!

10. 🔥 Desafio de Fixação

Crie um botão no Figma e transforme-o em componente usando o atalho Ctrl + Alt + K.

🔑 Gabarito de Código/Fórmulas

Gabarito da Prática 1:

  1. Original (Componente Principal).
  2. Clone (Instância). Gabarito da Prática 2:
  3. Ele continuará Vermelho! Quando você faz uma alteração manual (Override) em um clone, o Figma entende que aquela propriedade específica não deve mais seguir o original. O clone continuará seguindo o original em tudo (tamanho, fonte), menos na cor!

← Capitulo Anterior | Proximo Capitulo →

Visão de gráfico

Backlinks