DS & II

Capítulo 18 - Handoff

Leitura de 4 min

🚀 Capítulo 18: Handoff: Entregando para o Desenvolvedor (Tema: Star Trek)

NOTE

Este capítulo utiliza a temática de Star Trek para explicar o Handoff. Teletransporte o seu design para o mundo do código sem perder nenhuma informação no caminho!

1. 🎯 Objetivo da Aula

Compreender o que é o Handoff (Passagem de Bastão) no Figma, aprender a usar o Dev Mode (Modo do Desenvolvedor) e entender como os programadores extraem cores, tamanhos e códigos CSS do seu design.

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

No universo de Star Trek, os tripulantes da nave Enterprise usam uma tecnologia incrível chamada Teletransporte. A pessoa entra em uma plataforma, o computador lê cada molécula do seu corpo, transforma tudo em dados digitais e reconstrói a pessoa exatamente igual em outro planeta. Não há perda de informação: a pessoa que chega é idêntica à que saiu!

No desenvolvimento de software, o Handoff é o nosso teletransporte!

  • É o momento em que o Designer termina de desenhar as telas no Figma e precisa “passar” o projeto para o Programador escrever o código e criar o aplicativo de verdade.
  • Antigamente, essa passagem era cheia de falhas: o programador tinha que “adivinhar” o tamanho da letra e a cor no olho, e o app final ficava bem diferente do desenho.
  • Com o Figma, o teletransporte é perfeito! O programador consegue ler cada detalhe do seu desenho. Seu desafio é garantir um teletransporte sem falhas!

🧠 Fundamentos: A Teoria Traduzida

O Figma possui um modo especial chamado Dev Mode (Modo do Desenvolvedor), feito exclusivamente para quem vai programar. Quando o desenvolvedor clica em um objeto do seu design nesse modo, a barra lateral direita mostra informações técnicas:

📡 O que o Desenvolvedor extrai do Figma:

  1. Código CSS: O Figma gera o código de estilo pronto! Ele mostra o código da cor (HEX), o tamanho da fonte, o arredondamento do canto (border-radius) e as sombras. O programador pode simplesmente copiar e colar no código dele!
  2. Medidas e Espaçamentos: Se o programador passar o mouse entre um título e um botão, o Figma mostra uma linha vermelha dizendo exatamente a distância em pixels entre eles (Ex: ). Chega de adivinhações!
  3. Exportação de Assets: O programador pode clicar em um ícone ou ilustração que você desenhou e baixá-lo nos formatos SVG (vetor) ou PNG (imagem com fundo transparente) para colocar no aplicativo.

4. 📖 Exemplo Guiado: Facilitando a Vida do Dev

Para que o teletransporte funcione bem, o designer precisa ser organizado:

  • Dê nomes claros para as camadas (em vez de Frame 452, mude para Card_Produto).
  • Use os Estilos de Cores e de Texto que aprendemos. O programador verá o nome do estilo (Ex: Cor_Principal) em vez de um código HEX aleatório, facilitando a criação do código!

5. 🛠️ Prática Obrigatória 1: O que vai para o código?

Imagine que você é o programador e está inspecionando um botão criado pelo designer no Figma. Cite informações numéricas ou de código que você conseguiria extrair desse botão direto pela barra lateral do Figma para usar no seu código CSS.

6. 🛠️ Prática Obrigatória 2: O Problema do Teletransporte

  1. O designer desenhou um ícone incrível no Figma usando várias formas geométricas sobrepostas (operações booleanas). O programador precisa desse ícone para colocar no aplicativo. Como o designer deve preparar esse ícone no Figma para que o programador consiga baixá-lo como um único arquivo de imagem pronto?

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

  1. Faça o Commit: No GitHub Desktop, digite a mensagem (ex: Finaliza Capítulo 18 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_18_handoff.md

💡 Checkpoint de Lógica

O Dev Mode do Figma tornou-se uma ferramenta tão poderosa que hoje existem empresas onde os programadores passam mais tempo dentro do Figma inspecionando layouts do que os próprios designers desenhando!

10. 🔥 Desafio de Fixação

Pesquise o que significa a sigla SVG e por que esse formato é o melhor para os programadores usarem em ícones de aplicativos.

🔑 Gabarito de Código/Fórmulas

Gabarito da Prática 1:

  1. O código hexadecimal da cor (Ex: #FF0000).
  2. O tamanho da fonte do texto (Ex: 16px).
  3. O valor do arredondamento do canto (Ex: border-radius: 8px). Gabarito da Prática 2:
  4. O designer deve selecionar o grupo do ícone e ir na barra lateral direita, na seção Export, clicar no botão de + e escolher o formato SVG ou PNG. Pronto! Agora o programador verá um botão de download para baixar o ícone completo e unificado.

← Capitulo Anterior | Proximo Capitulo →

Visão de gráfico

Backlinks