Aula 16: Design, Prototipagem e Handoff 🎨

🎯 Nossa Missão

Entender o papel do Design no desenvolvimento.
Conhecer o Figma e suas ferramentas.
Dominar o processo de Handoff (passagem de bastão).
Aprender a inspecionar elementos para codar.

🧠 Por que desenvolvedores precisam entender design?

Para evitar o "Efeito Telefone Sem Fio".
Para saber o que é possível (ou não) implementar.
Para garantir que o produto final seja fiel ao planejado.
Designers e Devs devem ser melhores amigos!

🟦 O que é o Figma?

Ferramenta de design baseada em navegador.
Colaboração em tempo real (multi-player).
Foco em UI (Interface) e UX (Experiência).
Gratuito para estudantes!

🏗️ Conceitos: UI vs UX

mermaid graph LR UI[User Interface] --- A(Visual: Cores, Icones, Fontes) UX[User Experience] --- B(Sensacao: Fluxo, Rapidez, Facilidade)

📐 Prototipagem: Dando Vida ao Desenho

Conectar telas com cliques.
Testar o fluxo do usuário sem escrever uma linha de código.
Validar ideias com clientes rapidamente.

🤝 O Processo de Handoff

"A entrega do design para a engenharia." * O Designer termina o visual. * O Desenvolvedor recebe o acesso ao arquivo. * O arquivo deve conter as especificações técnicas.

🛠️ Figma Dev Mode

A visão "Matrix" do desenvolvedor. * Gera propriedades CSS automaticamente. * Mostra espaçamentos exatos (padding/margin). * Permite exportar ícones e imagens com um clique.

🎨 Cores e Tipografia

Hexadecimal: O padrão das cores (#FF5500).
Font-Family: Qual fonte usar?
Font-Weight: Qual o peso (negrito/leve)?

📦 Componentes e Design Systems

Não desenhamos telas, desenhamos peças. * Atômico: Botões, Inputs, Ícones. * Moléculas: Barra de buscas, Cards. * Organismos: Header, Footer. * No código, isso vira Componentes Reutilizáveis.

📐 Inspecionando Espaçamentos

Segure a tecla Alt para ver a distância entre elementos.
Evite o "olhômetro". Use os números do design!

🖼️ Exportando Assets

SVG: Para ícones e logos (vetorial, não perde qualidade).
PNG/JPG: Para fotos pesadas.
O Figma permite exportar em várias escalas (1x, 2x, 3x).

📱 Responsividade (Auto-Layout)

Como o design se comporta em telas pequenas?
O Auto-Layout do Figma simula o Flexbox do CSS.
Entender isso facilita muito a vida do dev frontend.

🦁 Bibliotecas de UI Reais

Empresas têm seus próprios padrões: * Material Design (Google). * Human Interface Guidelines (Apple). * Fluent (Microsoft).

Contraste de cores (texto legível).
Tamanho de clique adequado para dedos no mobile.
O designer planeja, o dev implementa o código semântico.

🔄 Ferramentas de Handoff Alternativas

Zeplin.
InVision.
(O Figma hoje domina o mercado quase sozinho).

🏆 Checklist de Design Pro

Sabe navegar pelo arquivo Figma.
Entende como usar o Dev Mode.
Diferencia SVG de PNG.
Consegue extrair cores e fontes sem ajuda.

📝 Prática de Hoje

Acessar um projeto público no Figma.
Inspecionar um botão e copiar seu CSS.
Exportar um ícone em formato SVG.

🏁 Dúvidas?

O design é o mapa, você é o construtor! 🚀🎨