Figma a Godot UI: Exporta una Jerarquía de Control con AI Studio (Paso a Paso)

Criterios de Finalización: Qué Significa “En Godot”

La mayoría de la UI de juegos comienza en Figma: menús principales, HUD, pantallas de tienda, ajustes. En Godot necesitas un árbol de Control mantenible—MarginContainer, VBoxContainer, TextureRect, Label, Button, y Theme—no una carpeta de PNGs sin agrupar.

El cuello de botella habitual está en el medio: el diseño cambia constantemente los Frames mientras la ingeniería reconstruye contenedores y anclas a mano. Este artículo cubre un camino repetible: usa VberAI Studio (AI Studio para abreviar) para convertir la estructura de Figma en una jerarquía de Control lista para Godot, desde la importación hasta las comprobaciones en el editor.

Para comparar cuándo tiene sentido hacerlo a mano vs. con AI Studio, consulta Figma a Godot: Manual vs AI Studio. Para el camino con Unity, consulta Figma a Unity UI.

Solo las texturas no cuentan. También deberías tener:

1. Un árbol de nodos que se corresponda con Frames significativos de Figma (barra superior, lista, barra inferior, etc.)
2. Chrome principal que aguante 16:9, vertical y tamaños de ventana sin reajustar todo el árbol
3. Capas de texto que sigan siendo Label (o los nodos de texto de tu proyecto) cuando sea posible—no horneadas en imágenes
4. Una forma de re-exportar después de que el chrome de Figma cambie, en lugar de reconstruir la escena desde cero

Las señales, el enlace de datos y las claves de localización siguen perteneciendo a Godot. AI Studio elimina “reconstruir el caparazón del layout desde el mock”.

Prerrequisitos

Elemento	Notas
Figma	Pantallas divididas en Frames con nombres legibles
AI Studio	Acceso a VberAI Studio
Godot	Prefiere un proyecto de Godot 4.x; establece el objetivo de exportación a Godot
Convenciones de assets	Acuerda carpetas de escenas de UI (ej. res://ui/generated/) y la ubicación del Theme

Evita enviar una captura de pantalla aplanada a pantalla completa—eso te lleva de vuelta al recorte manual.

Paso 1: Organiza Figma para que se lea como un árbol de UI

Una limpieza corta antes de importar es más barata que dividir nodos en el motor más tarde.

Práctica	Por qué
Nombres de Frame claros (Panel_HUD, Btn_Play, List_Item)	Los nombres se convierten en nombres de nodos de Godot
Usa Frames / Auto Layout para grupos; evita fusionar pantallas completas	La jerarquía sigue siendo reconocible después de importar
Mantén el texto como capas de texto cuando puedas	Mapeo de Label más fácil
Separa paneles de nueve parches de iconos fijos	Las reglas de estiramiento se mantienen claras
Oculta Frames de borrador y variantes no utilizadas	Menos ruido en el árbol de exportación

Paso 2: Importa Figma en AI Studio

1. Abre VberAI Studio
2. Inicia una importación, elige Figma, y sube el archivo (o usa la conexión de Figma soportada por el producto)
3. En el árbol de capas / Frames, confirma las pantallas que realmente envías—no cada borrador en el archivo

Idealmente ves la estructura a la izquierda, la vista previa del lienzo en el medio, y las opciones de exportación orientadas al motor a la derecha. Confirma la estructura antes de exportar.

Paso 3: Prueba la jerarquía antes de exportar

En el lienzo, verifica:

• El anidamiento de paneles coincide con cabeza / cuerpo / pie (o tus convenciones de chrome)
• Las áreas de clic de botones están separadas de los iconos decorativos
• El texto localizable sigue siendo capas de texto
• Los paneles estirables vs. iconos de tamaño fijo están distinguidos

Arregla nombres o agrupaciones en AI Studio cuando puedas. Desenredar un .tscn roto en Godot cuesta más.

Para pequeños ajustes de layout, describe la intención en lenguaje natural (aprieta el espaciado entre título y botón primario, unifica la altura de los elementos de lista, oculta insignias de borrador). El objetivo es asentar el chrome antes de que se convierta en objetos del motor—no redibujar todo el set de arte a través del chat.

Paso 4: Exporta para Godot

Establece el motor de destino a Godot. Prefiere una jerarquía de Control / escena sobre “solo sprites”.

Después de exportar, en Godot:

1. Coloca los assets en la carpeta acordada (ej. res://ui/generated/)
2. Adjunta la escena exportada bajo un CanvasLayer o la raíz de UI de tu proyecto
3. Confirma que la raíz sea un árbol Control (o contenedor) sensato
4. Previsualiza varias resoluciones en el editor
5. Conecta pressed y otras señales, además del llenado de datos, con GDScript / C# como de costumbre

La lógica permanece en el proyecto. Lo que te saltas es apilar manualmente cada TextureRect / Label / contenedor desde Figma.

Paso 5: Lista de verificación de aceptación en el editor

Verificación	Criterios de aprobación
Nombres de nodos	Se corresponden con Frames clave; no un montón de índices sin significado de Node2D / Control
Layout	El Chrome sigue siendo utilizable cuando la ventana se estira
Texto	Cambiar el texto de un Label no requiere re-exportar toda la pantalla como arte
Theme	Las fuentes y colores pueden conectarse al Theme del proyecto, o sabes que el Theme aún necesita un pase manual
Re-exportación	Después de cambios en el chrome de Figma, una nueva exportación puede reemplazar o colocarse junto a la escena—no te deja atascado

Los cambios de fuentes, áreas seguras y localización generalmente aún necesitan un pase. Eso es pulido normal, no un pipeline fallido.

FAQ

¿Es esto lo mismo que los plugins de Figma “a código”?
La mayoría de esos apuntan a la web. Godot necesita convenciones de Control / contenedor / Theme. La exportación amigable para motores no es el mismo producto que la generación de código web.

¿Seguimos diseñando en Figma?
Sí. AI Studio consume la estructura de diseño; no establece la dirección de arte. El layout y los tokens aún vienen de Figma.

¿Dónde encaja Godot MCP?
AI Studio maneja diseño → estructura de Control. Godot MCP ayuda después de que la escena está en el proyecto—renombrar nodos, conectar señales, inspeccionar el árbol desde Cursor y clientes similares. MCP no “genera una UI completa desde una imagen”. Configuración: Instalación de Godot MCP.

¿Será la primera exportación perfecta en píxeles?
Generalmente no. La victoria es la migración de estructura en minutos en lugar de una reconstrucción de medio día; los píxeles y el Theme se terminan en Godot.

Cómo Re-ejecutar Después de Cambios de Diseño

Cambio en Figma	Sugerencia
Filas/columnas de Chrome, nuevas pestañas	Re-exporta a través de AI Studio
Solo tinte de icono o texto	Prefiere la escena de Godot / Theme / tablas de traducción
Artboard completamente nuevo	Nueva exportación → nuevo .tscn o reemplaza la ruta acordada