Figma para Godot UI: Exporte uma Hierarquia de Control com AI Studio (Passo a Passo)

A maioria das UIs de jogos começa no Figma: menus principais, HUD, telas de loja, configurações. No Godot, você precisa de uma árvore de Control sustentável—MarginContainer, VBoxContainer, TextureRect, Label, Button e Theme—não uma pasta de PNGs não agrupados.

O gargalo usual é o meio: o design continua mudando os Frames enquanto a engenharia reconstrói contêineres e âncoras manualmente. Este artigo cobre um caminho repetível: use o VberAI Studio (AI Studio, para abreviar) para transformar a estrutura do Figma em uma hierarquia de Control pronta para Godot, desde a importação até as verificações no editor.

Para comparar quando construir manualmente vs. usar AI Studio faz sentido, veja Figma para Godot: Manual vs AI Studio. Para o caminho Unity, veja Figma para Unity UI.

Critérios de Conclusão: O Que “No Godot” Significa

Apenas texturas não contam. Você também deve ter:

1. Uma árvore de nós que mapeia para Frames significativos do Figma (barra superior, lista, barra inferior, e assim por diante)
2. Chrome principal que se sustenta em 16:9, retrato e tamanhos de janela sem reajustar toda a árvore
3. Camadas de texto que permanecem Label (ou os nós de texto do seu projeto) quando possível—não embutidas em imagens
4. Uma maneira de reexportar após mudanças no chrome do Figma, em vez de reconstruir a cena do zero

Sinais, vinculação de dados e chaves de localização ainda pertencem ao Godot. AI Studio remove “reconstruir a casca do layout a partir do mock”.

Pré-requisitos

Item	Notas
Figma	Telas divididas em Frames com nomes legíveis
AI Studio	Acesso ao VberAI Studio
Godot	Prefira um projeto Godot 4.x; defina o alvo de exportação para Godot
Convenções de assets	Combine pastas de cenas de UI (ex.: res://ui/generated/) e localização do Theme

Evite enviar uma única captura de tela em tela cheia achatada—isso o leva de volta ao corte manual.

Passo 1: Organize o Figma Para Que Ele Leia Como uma Árvore de UI

Uma pequena limpeza antes da importação é mais barata do que dividir nós no motor depois.

Prática	Por quê
Nomes claros de Frames (Panel_HUD, Btn_Play, List_Item)	Nomes se tornam nomes de nós no Godot
Use Frames / Auto Layout para grupos; evite mesclar telas inteiras	Hierarquia permanece reconhecível após a importação
Mantenha o texto como camadas de texto quando puder	Mapeamento de Label mais fácil
Separe painéis de nove fatias de ícones fixos	Regras de estiramento permanecem claras
Oculte Frames de rascunho e variantes não utilizadas	Menos ruído na árvore de exportação

Passo 2: Importe o Figma no AI Studio

1. Abra o VberAI Studio
2. Inicie uma importação, escolha Figma e envie o arquivo (ou use a conexão Figma suportada pelo produto)
3. Na árvore de camadas / Frames, confirme as telas que você realmente envia—não todos os rascunhos no arquivo

Idealmente, você vê a estrutura à esquerda, a pré-visualização do canvas no meio e as opções de exportação orientadas ao motor à direita. Confirme a estrutura antes de exportar.

Passo 3: Prove a Hierarquia Antes de Exportar

No canvas, verifique:

• O aninhamento de painéis corresponde a cabeçalho / corpo / rodapé (ou suas convenções de chrome)
• As áreas de clique dos botões são separadas dos ícones decorativos
• O texto localizável ainda é camadas de texto
• Painéis esticáveis vs. ícones de tamanho fixo são distinguidos

Corrija nomes ou agrupamentos no AI Studio quando puder. Desembaraçar um .tscn quebrado no Godot custa mais.

Para pequenos ajustes de layout, descreva a intenção em linguagem natural (apertar o espaçamento entre título e botão primário, unificar a altura dos itens da lista, ocultar emblemas de rascunho). O objetivo é resolver o chrome antes de se tornar objetos do motor—não redesenhar todo o conjunto de arte via chat.

Passo 4: Exporte para Godot

Defina o motor de destino como Godot. Prefira uma hierarquia de Control / cena em vez de “apenas sprites”.

Após a exportação, no Godot:

1. Coloque os assets na pasta combinada (ex.: res://ui/generated/)
2. Anexe a cena exportada sob uma CanvasLayer ou a raiz de UI do seu projeto
3. Confirme que a raiz é uma árvore Control (ou contêiner) sensata
4. Pré-visualize várias resoluções no editor
5. Conecte pressed e outros sinais, além do preenchimento de dados, com GDScript / C# como de costume

A lógica permanece no projeto. O que você evita é empilhar manualmente cada TextureRect / Label / contêiner do Figma.

Passo 5: Checklist de Aceitação no Editor

Verificação	Critérios de aprovação
Nomes de nós	Mapeiam para Frames-chave; não uma pilha de índices sem sentido de Node2D / Control
Layout	Chrome permanece utilizável quando a janela estica
Texto	Alterar o texto do Label não requer reexportar a tela inteira como arte
Theme	Fontes e cores podem se conectar ao Theme do projeto, ou você sabe que o Theme ainda precisa de um ajuste manual
Reexportação	Após mudanças no chrome do Figma, uma nova exportação pode substituir ou ficar ao lado da cena—não deixá-lo travado

Trocas de fonte, áreas seguras e localização geralmente ainda precisam de um ajuste. Isso é polimento normal, não um pipeline falho.

FAQ

Isso é o mesmo que plugins de Figma “para código”?
A maioria deles tem como alvo a web. Godot precisa de convenções de Control / contêiner / Theme. Exportação amigável ao motor não é o mesmo produto que geração de código web.

Ainda projetamos no Figma?
Sim. AI Studio consome a estrutura do design; não define direção de arte. Layout e tokens ainda vêm do Figma.

Onde o Godot MCP se encaixa?
AI Studio lida com design → estrutura de Control. Godot MCP ajuda depois que a cena está no projeto—renomear nós, conectar sinais, inspecionar a árvore do Cursor e clientes semelhantes. MCP não “gera uma UI completa a partir de uma imagem”. Instalação: Godot MCP install.

A primeira exportação será perfeita em pixels?
Geralmente não. A vitória é a migração de estrutura em minutos em vez de uma reconstrução de meio dia; pixels e Theme terminam no Godot.

Como Reexecutar Após Mudanças de Design

Mudança no Figma	Sugestão
Linhas/colunas do chrome, novas abas	Reexporte através do AI Studio
Apenas tonalidade de ícone ou texto	Prefira cena do Godot / Theme / tabelas de tradução
Artboard totalmente novo	Nova exportação → novo .tscn ou substitua o caminho combinado