Projeto 07: Composição com Imagens, Máscaras e Modos de Mesclagem 🖼️

🎯 1. Contexto & Desafio Prático

Apresentar dados com apelo visual requer o domínio do tratamento de imagens no Figma. Você criará um card de perfil de usuário com avatar circular mascarado, badge de status e um banner de cabeçalho com gradiente sobreposto via modo de mesclagem.

📋 2. Requisitos Técnicos Obrigatórios

• R1 (Máscara Vetorial): Utilizar formas vetoriais com Use as Mask para recortar avatares e ilustrações sem deformar a proporção da foto.
• R2 (Image Fill Modes): Aplicar e distinguir Fill, Fit, Crop e Tile de acordo com a finalidade do elemento.
• R3 (Gradiente e Blending Mode): Criar sobreposição de gradiente preto com modo Multiply sobre foto de capa para garantir legibilidade de títulos brancos.
• R4 (Card de Perfil Completo): Montar um componente de perfil de usuário integrando avatar com máscara, capa, badges e bio.

📐 3. Diagrama Conceitual & Fluxo Visual

graph LR
    Foto["Foto Original (High Res)"] --> Mask["Máscara Circular Vetorial"]
    Mask --> Cropped["Avatar Perfeito (Proporção 1:1)"]
    Cover["Foto de Capa"] --> Grad["Gradiente Preto (Multiply 60%)"]
    Grad --> Text["Título Branco Legível (Contraste 10:1)"]
    style Foto fill:#e1f5fe,stroke:#01579b
    style Mask fill:#fff3e0,stroke:#e65100
    style Cropped fill:#e8f5e9,stroke:#2e7d32
    style Text fill:#e0f2f1,stroke:#00695c

💻 4. Especificação Técnica & Código de Referência

// checklist_imagens.txt
ESTRUTURA DA MÁSCARA:
[Frame: Avatar-Wrapper] (80x80px)
├── [Circle: Mask-Base] (80x80px, Use as Mask: True)
└── [Image: User-Photo] (Fill: Crop, Centralizada)
Overlay: Linear Gradient (0% Transparent -> 100% #000000 70% Opacity)

📦 5. Critérios de Avaliação e Entrega

1. Zero imagens esticadas ou fora de proporção aspecto original.
2. Uso correto de máscara vetorial mantendo o arquivo editável.
3. Legibilidade perfeita de textos sobrepostos a fotos.