🚀 Capítulo 14: Figma: O Anel do Poder (Tema: Lanterna Verde)
NOTE
Este capítulo utiliza a temática de Lanterna Verde para explicar o Figma. Use o seu anel do poder para materializar as telas que você imaginar antes de gastar tempo programando!
1. 🎯 Objetivo da Aula
Compreender o que é o Figma, para que serve (prototipagem e design de interfaces) e como ele ajuda a fazer a ponte entre os designers e os programadores de frontend.
2. 🏢 O Cenário Prático (Seu Desafio)
O herói Lanterna Verde usa o seu anel do poder para criar qualquer objeto físico que ele imaginar. Ele pensa em uma parede verde para se defender, e a parede aparece. Ele pensa em uma espada gigante, e a espada aparece. O limite é a imaginação e a força de vontade dele!
No desenvolvimento de software, antes de escrevermos milhares de linhas de código para criar as telas de um aplicativo, nós precisamos “imaginar” e desenhar como elas vão ser.
- Programar uma tela direto no código demora muito tempo. Se o cliente não gostar, mudar tudo dá um trabalho gigante.
- O Figma é o nosso Anel do Poder!
- Ele permite que a equipe desenhe as telas do aplicativo de forma super rápida e visual, arrastando componentes. Você pode criar botões, menus, escolher cores e até simular cliques (se eu clicar aqui, vai para aquela tela). Seu desafio é materializar a sua ideia!
🧠 Fundamentos: A Teoria Traduzida
O Figma é uma ferramenta de design baseada na nuvem. Várias pessoas podem mexer no mesmo desenho ao mesmo tempo (igual ao Google Docs).
🎨 UI vs. UX:
O Figma é usado por profissionais dessas duas áreas:
- UI (User Interface - Interface do Usuário): Foca na beleza e no visual da tela. Ex: Qual será a cor do botão? Qual será a fonte do texto? Onde fica o logotipo?
- UX (User Experience - Experiência do Usuário): Foca na usabilidade e no sentimento do usuário. Ex: É fácil achar o botão de comprar? O usuário fica confuso nessa tela? Quantos cliques são necessários para finalizar o pedido?
🤝 O “Handoff” (A Entrega):
Antigamente, o designer desenhava a tela no Photoshop e mandava uma imagem para o programador. O programador tinha que adivinhar o tamanho da fonte e as cores exatas. No Figma, o programador clica em cima do botão desenhado pelo designer e o próprio Figma já mostra o código CSS pronto daquele botão (com a cor exata em hexadecimal, tamanho e espaçamento)! É só copiar e colar no código!
4. 📖 Exemplo Guiado: Prototipagem
Um Protótipo no Figma é um desenho que “funciona”.
- Você desenha a Tela A e a Tela B.
- No Figma, você puxa uma linha ligando o botão “Entrar” da Tela A até a Tela B.
- Quando você dá o Play, você pode clicar no botão e ele realmente muda de tela! É excelente para mostrar para o cliente como o aplicativo vai funcionar antes de gastar dinheiro com programação.
5. 🛠️ Prática Obrigatória 1: UI ou UX?
Diga se a tarefa descrita é mais focada em UI (Interface/Beleza) ou em UX (Experiência/Uso):
- Decidir que o botão de “Cancelar” deve ser vermelho e o de “Confirmar” deve ser verde.
- Mudar a posição do menu porque os usuários estavam tendo dificuldade para encontrá-lo no celular.
- Escolher a foto de fundo que vai aparecer na tela de abertura do aplicativo.
6. 🛠️ Prática Obrigatória 2: O Poder do Protótipo
- Por que é muito mais barato e inteligente errar e mudar o desenho de uma tela no Figma do que errar e mudar a mesma tela depois que ela já foi programada?
7. 📤 Instruções de Entrega (GitHub Desktop + Microsoft Teams)
- Faça o Commit: No GitHub Desktop, digite a mensagem (ex:
Finaliza Capítulo 14 GuiaFerramentas) e clique em Commit to main. - Envie para a Nuvem (Push): Clique em Push origin.
8. 📂 Estrutura de Pastas
extra_guia_de_ferramentas/
├── capitulos/
│ ├── capitulo_14_figma.md
│ └── codigos/
│ └── cap14/
│ └── link_prototipo.txt💡 Checkpoint de Lógica
O Figma é gratuito para uso pessoal e estudantes. Vale muito a pena criar uma conta e aprender o básico para conseguir criar telas bonitas para os seus próprios projetos!
10. 🔥 Desafio de Fixação
Pesquise o que significa o termo Wireframe e a diferença dele para um protótipo de alta fidelidade.
🔑 Gabarito de Código/Fórmulas
Gabarito da Prática 1:
- UI (Escolha de cores e estética).
- UX (Melhoria de usabilidade e facilidade de navegação).
- UI (Escolha de elementos visuais). Gabarito da Prática 2:
- Porque no Figma você só precisa arrastar um retângulo e mudar de lugar (leva 5 segundos). No código, mudar uma tela de lugar pode exigir reescrever dezenas de linhas de HTML e CSS, além de testar para ver se não quebrou em tamanhos de tela diferentes!