Checklist de Handoff Figma / PSD: Como Designs de UI de Jogos Evitam Retrabalho

Quando a engenharia retrabalha a UI, metade das vezes não é um problema estético — é que o handoff não atende aos requisitos da engine. Você revisa um frame no Figma ou Photoshop, e a engenharia precisa refatiar, reconstruir o Canvas e realinhar âncoras. Os prazos se esticam.

Abaixo está um checklist pré-handoff cobrindo cenários de alta intenção: Figma export Unity, PSD import Unity UI, game UI slicing, reskins de eventos e UI multilíngue. A seção final explica a diferença entre “apenas PNG” e exportação estruturada; as ferramentas são pontos de referência.

---

O que a engenharia realmente precisa

Eles precisam	Não isto
Hierarquia nomeada (botões, painéis, itens de lista)	Um JPG de tela cheia
Botão normal / pressionado / desabilitado	Uma imagem que “parece clicável”
Camadas de texto substituíveis	Tudo rasterizado como tipografia de display
Posições relativas e semântica de âncoras	Referência de layout + 20 PNGs soltos
Estrutura de prefab reutilizável	Reconstruir do zero a cada evento

Teste de aceitação em uma linha: Após importar no Unity UGUI / Godot Control / Cocos UI, mudar o texto ou refazer o reskin não deve exigir reconstruir toda a árvore.

---

12 checagens antes do handoff

Estrutura e nomenclatura

#	Checagem	Notas
1	Nomes semânticos de Frame / grupo	Panel_Shop, Btn_Buy—não Group 12
2	Separar camadas interativas das decorativas	Fundo, borda, ícone, texto
3	Itens de lista como grupos reutilizáveis	List_Item pode ser duplicado
4	Ocultar rascunhos e Frames obsoletos	Menos ruído na exportação

Estados e especificações

#	Checagem	Notas
5	Estados completos do botão	normal / pressionado / desabilitado (ou convenção de nomenclatura do time)
6	Regiões de 9-slice / esticamento marcadas	Painéis e inputs não devem ser escalados de forma rígida
7	Resolução-alvo e área segura	Mobile retrato: notch e barra inferior
8	Estratégia de fontes	Camadas de texto para localização; tipografia de display sinalizada separadamente

Live ops e localização

#	Checagem	Notas
9	Margem para comprimento do texto	Alemão / Espanhol costumam ser 30%+ mais longos que o Inglês
10	Reskin = apenas visual	Skins de evento: mesmo layout, nova arte e cores
11	Localização: texto vs layout	Ideal: mesma estrutura, múltiplos arquivos de idioma
12	Formato de exportação documentado	PSD em camadas / link do Figma, ou nomenclatura de fatias acordada

Preparação no Figma: Fluxo Figma → Unity. Preparação no PSD: Importar PSD para Unity UI em 5 minutos.

---

Três caminhos de handoff (comparação objetiva)

Caminho	Abordagem	Melhor para	Pontos problemáticos
A. Fatiamento manual	Exportar PNG + screenshot do layout; engenharia monta à mão	UI mínima, demos pontuais	Cada revisão = refatiar e reconstruir
B. Plugins de engine	Figma Converter, Psd-Exporter, etc.	Times com especificações fixas	Multi-engine muitas vezes significa refazer; qualidade dos plugins varia
C. Canvas estruturado	Arquivo em camadas → canvas do jogo → divisão no lugar → exportação de Prefab	UI multi-tela, reskin frequente / lançamento global	Exige adotar um fluxo de exportação orientado a jogos

O caminho C é comum em produtos como o VberAI Studio: analisa PSD / Figma → divisão de UI preservando o layout → exporta para Unity / Godot / Cocos (veja dividir UI de jogo na engine). Designers ainda podem trabalhar no Figma; após a aprovação, use exportação estruturada em vez de exportar manualmente 20 PNGs por revisão.

---

Cenários comuns de designers

Game UI slicing / divisão no lugar

Se um conceito de tela cheia é apenas PNG, a engenharia adivinha os limites dos botões. Fluxo mais seguro: soltar a tela no canvas → dividir controles no lugar (divisão no lugar) para que os dados de posição acompanhem a divisão—evite “as fatias parecem certas mas tudo se desloca na engine”.

Exportação Figma para Unity / Godot

Se um plugin só gera um pacote de sprites achatado, a engenharia ainda reconstrói a árvore de RectTransform / Control. Pergunte ao avaliar: o entregável é um Prefab / hierarquia, ou um zip de imagens soltas? Comparação com Godot: Figma → Godot manual vs fluxo com IA.

Reskin de UI de jogo (sazonal / eventos)

Halloween, Natal, etc.: mesmo layout, novos assets de tema. Se cada reskin significa refatiar e reconstruir, o ritmo de live ops desacelera. Ferramentas de reskin devem manter a estrutura de nós inalterada (reskin de UI e variantes de tema).

Tradução de UI de jogo / Figma multilíngue

Armadilha do lançamento global: o texto traduzido transborda o layout. Fluxo ideal: trocar apenas as strings, não refluir os Frames (tradução de UI em um clique). No Figma.

Ícones e assets semitransparentes

Ícones de habilidades e UI de VFX frequentemente precisam de remoção de fundo antes da importação (cabelo, transparência, brilho). Recorte genérico borra as bordas; ferramentas orientadas a jogos enfatizam o alfa (recorte de brilho / VFX).

---

Como isso se relaciona com ferramentas de imagem com IA

Midjourney, Jimeng, GPT Image 2, etc. são bons para direção visual; se o destino é a engine, você ainda precisa de divisão e hierarquia. Combinação comum:

Conceito de UI de tela cheia com IA → designer organiza camadas no Figma → exportação estruturada para a engine

Não trate uma “imagem única de nível de pôster” como o handoff final. Comparações de ferramentas: Geradores de arte para design de jogos com IA.

---

FAQ

Posso entregar apenas PNGs? Ok para demos; UI de produção vai retrabalhar repetidamente. No mínimo.

O Auto Layout do Figma precisa ser perfeito? Não perfeito para web—mas agrupamento e nomenclatura importam mais que ajustes de pixel.

O que a engenharia quer dizer com “as fatias estão erradas”? Geralmente: estados faltando, 9-slice errado.

Reskin vs refazer a UI? Reskin: mesma estrutura, novos visuais. Refazer: a hierarquia também muda. Live ops devem permanecer no caminho do reskin.

Designers precisam aprender Unity? Não scripting—mas o básico de Canvas / Anchor / Prefab reduz drasticamente o custo de comunicação.

VberAI Studio é o mesmo que Google AI Studio? Não. O primeiro é canvas de jogo e exportação para engine; o segundo é o ambiente geral de desenvolvimento com IA do Google. Veja a comparação.