DS & II

Capítulo 09 - Efeitos

Leitura de 5 min

🚀 Capítulo 09: Efeitos: Sombras, Blurs e Camadas (Tema: Inception)

NOTE

Este capítulo utiliza a temática de Inception (A Origem) para explicar os efeitos visuais. Crie camadas de profundidade no seu design para guiar o foco do usuário!

1. 🎯 Objetivo da Aula

Aprender a aplicar efeitos visuais no Figma (Drop Shadow, Layer Blur e Background Blur) e entender como eles criam a sensação de profundidade e hierarquia em interfaces digitais.

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

No filme Inception (A Origem), os personagens entram em sonhos dentro de outros sonhos. Cada nível de sonho é uma camada diferente da mente. Para sabermos em qual camada estamos, existem pistas visuais: a gravidade muda, a velocidade do tempo muda e a sensação de profundidade é diferente. Uma camada fica “sobre” a outra!

No design de interfaces, nós fazemos exatamente a mesma coisa!

  • A tela do celular ou do monitor é perfeitamente plana (2D).
  • Mas nós usamos truques visuais para fazer parecer que alguns elementos estão flutuando sobre outros.
  • Um botão de ação flutua sobre o card, e o card flutua sobre o fundo do aplicativo! Para criar essa ilusão de ótica e organizar as “camadas de sonho” do seu app, nós usamos os Efeitos do Figma! Seu desafio é criar profundidade!

🧠 Fundamentos: A Teoria Traduzida

No painel Effects da barra lateral direita do Figma, clicando no botão de +, você pode aplicar tipos de efeitos. Vamos focar nos mais importantes:

👤 1. Drop Shadow (Sombra Projetada):

É o efeito mais famoso da história do design! Ele cria uma sombra escura embaixo do objeto.

  • O que transmite: Faz o objeto parecer que está fisicamente “mais alto” ou flutuando sobre o fundo.
  • Uso comum: Botões flutuantes, cards de destaque e menus que sobrepõem a tela.

🌫️ 2. Layer Blur (Desfoque de Camada):

Esse efeito borra e embaça o próprio objeto que você desenhou (como se você estivesse olhando para ele sem óculos).

  • Uso comum: Para criar luzes brilhantes no fundo do design (efeito Neon) ou sombras personalizadas e artísticas.

🪟 3. Background Blur (Desfoque de Fundo):

Esse efeito não borra o objeto em si, mas borra tudo o que estiver atrás dele!

  • Uso comum: É o segredo para criar o efeito de Vidro Fosco (Glassmorphism), muito usado no sistema do iPhone (iOS) e no Windows 11. Você cria um retângulo branco com transparência e aplica o Background Blur: ele vira uma placa de vidro linda!

4. 📖 Exemplo Guiado: Menos é Mais!

O maior erro de quem está aprendendo a usar sombras no Figma é criar sombras muito escuras e duras. Isso deixa o design com cara de amador e pesado.

  • A Regra de Ouro: Uma boa sombra em UI design deve ser sutil! Use uma opacidade baixa (entre e ) e um desfoque (Blur) alto. A sombra deve ser tão suave que o usuário mal percebe que ela está ali, mas sente a sensação de profundidade!

5. 🛠️ Prática Obrigatória 1: Escolhendo o Efeito

Qual efeito do Figma você usaria para criar os seguintes elementos visuais?

  1. Um botão circular de ”+” que fica no canto inferior da tela e deve parecer que está flutuando bem acima do conteúdo do app.
  2. Uma barra de navegação no topo da tela que parece feita de vidro embaçado, deixando ver as cores do conteúdo que passa por trás dela.

6. 🛠️ Prática Obrigatória 2: A Profundidade das Camadas

  1. Imagine que você tem um fundo cinza claro. Você desenha um card branco sobre ele. Qual efeito você deve aplicar no card para que o usuário entenda imediatamente que o card é um elemento clicável que está “acima” do fundo?

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

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

💡 Checkpoint de Lógica

Para o efeito de Background Blur funcionar, a cor de preenchimento (Fill) do seu objeto obrigatoriamente precisa ter alguma transparência (ex: ). Se a cor for sólida, você não verá o desfoque atrás dela!

10. 🔥 Desafio de Fixação

Tente criar o efeito de “vidro fosco” no Figma criando um retângulo, mudando o preenchimento para branco com de opacidade e aplicando o Background Blur de .

🔑 Gabarito de Código/Fórmulas

Gabarito da Prática 1:

  1. Drop Shadow (Para dar a elevação e parecer que está flutuando acima).
  2. Background Blur (Para criar o efeito de vidro fosco). Gabarito da Prática 2:
  3. Aplicar um efeito de Drop Shadow suave. A sombra projetada criará a ilusão de ótica de que o card está fisicamente elevado em relação ao fundo cinza.

← Capitulo Anterior | Proximo Capitulo →

Visão de gráfico

Backlinks