DS & II

Capítulo 12 - Variantes

Leitura de 4 min

🚀 Capítulo 12: Variantes: O Multiverso dos Botões (Tema: Marvel / Multiverso)

NOTE

Este capítulo utiliza a temática de Multiverso para explicar as Variantes. Organize as diferentes versões e estados do seu componente dentro de um único portal!

1. 🎯 Objetivo da Aula

Compreender o que são Variantes no Figma, para que servem e como elas ajudam a organizar diferentes estados e estilos de um mesmo componente dentro de um único contêiner visual.

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

No universo dos quadrinhos e filmes da Marvel, fomos apresentados ao conceito de Multiverso. Existem linhas do tempo alternativas onde o mesmo herói existe em versões diferentes. Temos o Homem-Aranha clássico (Peter Parker), o Homem-Aranha jovem (Miles Morales), uma Mulher-Aranha (Gwen Stacy) e até um Porco-Aranha! Todos eles são, na essência, o “Homem-Aranha”, mas em variantes diferentes de si mesmos.

No Figma, nós usamos as Variantes para organizar o nosso multiverso de componentes!

  • Um botão em um aplicativo real não tem apenas uma aparência fixa. Ele muda de estado:
    • Default: O estado normal dele.
    • Hover: Como ele fica quando o usuário passa o mouse por cima.
    • Pressed: Como ele fica quando é clicado.
    • Disabled: Quando ele fica cinza e bloqueado.
  • Em vez de criar componentes separados com nomes gigantes e confusos, nós criamos um único componente “Botão” e adicionamos as suas Variantes dentro dele! Seu desafio é organizar esse multiverso!

🧠 Fundamentos: A Teoria Traduzida

As Variantes permitem agrupar componentes semelhantes dentro de uma caixa tracejada roxa no Figma.

🌌 Como funciona o Multiverso das Variantes:

  1. A Caixa Roxa: Quando você seleciona dois ou mais componentes e clica em Combine as variants na barra lateral direita, o Figma cria uma caixa pontilhada roxa ao redor deles. Isso significa que eles agora pertencem à mesma família!
  2. As Propriedades (Properties): Você dá nomes para as características que mudam.
    • Exemplo: Você cria uma propriedade chamada Estado.
    • Para o botão normal, você define Estado = Default.
    • Para o botão de passar o mouse, define Estado = Hover.
  3. A Troca Mágica: Quando você arrasta um clone (instância) desse botão para a sua tela, aparece um menu cascata na barra direita. Você pode simplesmente mudar de Default para Hover no menu e o botão muda de aparência sozinho na tela!

4. 📖 Exemplo Guiado: Botão Primário e Secundário

Você também pode usar variantes para estilos diferentes:

  • Botão Primário: Aquele botão principal, todo preenchido com a cor da empresa (Ex: Azul).
  • Botão Secundário: Um botão menos importante, apenas com a borda azul e o fundo transparente. Você pode criar uma propriedade chamada Estilo e definir as variantes como Estilo = Primario e Estilo = Secundario.

5. 🛠️ Prática Obrigatória 1: Mapeando os Estados

Imagine que você está criando um componente de Campo de Texto (onde o usuário digita o e-mail). Quais seriam as variantes de estado que esse campo precisaria ter para ser completo e profissional?

6. 🛠️ Prática Obrigatória 2: Organização é Tudo

  1. Por que usar Variantes deixa a barra lateral de “Assets” (onde ficam os componentes prontos para você arrastar para a tela) muito mais limpa e organizada do que criar componentes separados para cada estado?

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

  1. Faça o Commit: No GitHub Desktop, digite a mensagem (ex: Finaliza Capítulo 12 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_12_variantes.md
│   └── codigos/
│       └── cap12/
│           └── multiverso_componentes.txt

💡 Checkpoint de Lógica

Para criar uma variante rapidamente a partir de um componente já existente, basta selecioná-lo e clicar no símbolo de + roxo que aparece na barra superior ou dentro da própria caixa pontilhada!

10. 🔥 Desafio de Fixação

Tente criar um componente de botão com duas variantes de estado: Normal (preenchido) e Hover (com uma cor um pouco mais escura).

🔑 Gabarito de Código/Fórmulas

Gabarito da Prática 1:

  1. Default/Vazio: O campo esperando o usuário digitar.
  2. Ativo/Focado: Quando o usuário clica nele para digitar (geralmente ganha uma borda colorida).
  3. Erro: Quando o usuário digita algo errado (o campo ganha borda vermelha e uma mensagem de erro). Gabarito da Prática 2:
  4. Porque em vez de aparecerem 4 ou 5 botões diferentes na lista de busca, aparece apenas um único botão. Você o arrasta para a tela e depois escolhe qual versão quer usar através do menu lateral. Isso poupa muito espaço visual e tempo de busca!

← Capitulo Anterior | Proximo Capitulo →

Visão de gráfico

Backlinks