DS & II

Capítulo 10 - Máscaras e Booleanas

Leitura de 4 min

🚀 Capítulo 10: Máscaras e Operações Booleanas (Tema: Pac-Man)

NOTE

Este capítulo utiliza a temática de Pac-Man para explicar máscaras e operações booleanas. Corte, junte e mude as formas para criar ícones e elementos únicos!

1. 🎯 Objetivo da Aula

Aprender a usar as Operações Booleanas (União, Subtração, Interseção e Exclusão) e as Máscaras no Figma para criar formas complexas e ícones personalizados a partir de formas geométricas simples.

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

O famoso personagem dos videogames Pac-Man é basicamente um círculo amarelo perfeito com uma “fatia de pizza” faltando (a sua boca aberta). Ele sai pelo labirinto comendo pastilhas e fugindo de fantasmas coloridos. Se você precisasse desenhar o Pac-Man no Figma, como faria?

  • Você poderia tentar desenhar ponto por ponto usando a caneta vetor, mas daria muito trabalho e dificilmente ficaria perfeito.
  • A forma mais inteligente e rápida é pegar um círculo perfeito e subtrair um triângulo dele!
  • No Figma, nós usamos as Operações Booleanas e as Máscaras para fazer exatamente isso: combinar formas simples (os blocos de LEGO do Capítulo 3) para criar desenhos complexos e profissionais. Seu desafio é desenhar o Pac-Man!

🧠 Fundamentos: A Teoria Traduzida

Na barra superior do Figma, quando você seleciona duas ou mais formas ao mesmo tempo, aparece o ícone de Operações Booleanas (dois quadrados sobrepostos). Clicando na setinha ao lado, você tem opções:

✂️ 1. As 4 Operações Booleanas:

  1. Union Selection (União): Funde as duas formas em uma só. (Ex: Juntar vários círculos para fazer o desenho de uma nuvem).
  2. Subtract Selection (Subtração): Usa a forma que está em cima para cortar a forma que está embaixo. (É o efeito da boca do Pac-Man!).
  3. Intersect Selection (Interseção): Apaga tudo e fica apenas com a parte onde as duas formas estavam se sobrepondo. (Ex: A intersecção de dois círculos cria a forma de uma folha).
  4. Exclude Selection (Exclusão): O contrário da interseção. Mantém tudo, mas deixa um buraco transparente exatamente onde as formas se cruzavam.

🎭 2. O que são Máscaras (Masks)?

Uma máscara serve para “recortar” uma imagem usando uma forma geométrica como molde.

  • Exemplo clássico: Você tem uma foto quadrada do usuário. Você desenha um círculo perfeito e coloca embaixo da foto. Ao clicar em Use as Mask (ícone de lua crescente na barra superior), a foto quadrada fica redondinha, aparecendo apenas dentro do círculo!

4. 📖 Exemplo Guiado: Ícone de Lua

Quer criar um ícone de lua crescente perfeito no Figma?

  1. Desenhe um círculo perfeito (O) e pinte de amarelo.
  2. Duplique esse círculo e arraste o clone um pouquinho para o lado.
  3. Selecione os dois círculos.
  4. Vá no menu booleano e clique em Subtract. O círculo de cima vai “morder” o de baixo, deixando uma lua crescente perfeita!

5. 🛠️ Prática Obrigatória 1: Escolhendo a Operação

Qual operação booleana do Figma você usaria para criar as seguintes formas?

  1. Você desenhou um retângulo e quer fazer um buraco circular no meio dele para criar o desenho de uma fechadura.
  2. Você desenhou círculos e retângulo e quer juntar todos eles para criar o ícone de um boneco de neve unificado.

6. 🛠️ Prática Obrigatória 2: Foto de Perfil

  1. Um aluno tentou aplicar uma máscara em uma foto, mas a foto sumiu da tela! Sabendo que a regra do Figma diz que a forma que serve de molde deve ficar atrás da foto na lista de camadas, o que o aluno provavelmente fez de errado?

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

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

💡 Checkpoint de Lógica

As operações booleanas no Figma não destroem as formas originais! Se você der dois cliques no seu Pac-Man, você ainda consegue mover o triângulo da boca para deixá-la mais aberta ou mais fechada!

10. 🔥 Desafio de Fixação

Tente criar o ícone de uma nuvem no Figma usando a operação de Union com círculos de tamanhos diferentes e um retângulo na base.

🔑 Gabarito de Código/Fórmulas

Gabarito da Prática 1:

  1. Subtract (Subtração - O círculo corta o retângulo).
  2. Union (União - Junta todas as formas em uma só). Gabarito da Prática 2:
  3. Ele provavelmente colocou a forma do círculo na frente da foto na lista de camadas (Layers) à esquerda. No Figma, a máscara (o molde) sempre deve ficar na camada de baixo!

← Capitulo Anterior | Proximo Capitulo →

Visão de gráfico

Backlinks