Checklist de handoff de Figma / PSD: cómo los diseños de UI de juegos evitan el retrabajo

Cuando ingeniería rehace la UI, la mitad de las veces no es un problema estético: es que el handoff no cumple los requisitos del motor. Revisas un frame en Figma o Photoshop, e ingeniería tiene que volver a cortar, reconstruir el Canvas y realinear los anchors. Los plazos se estiran.

A continuación tienes una checklist previa al handoff que cubre escenarios de búsqueda de alta intención: Figma export Unity, PSD import Unity UI, game UI slicing, reskins de eventos y UI multilingüe. La sección final explica la diferencia entre “solo PNG” y exportación estructurada; las herramientas son puntos de referencia.

---

Qué necesita realmente ingeniería

Necesitan	No esto
Jerarquía con nombres (botones, paneles, ítems de lista)	Un JPG a pantalla completa
Botón normal / pressed / disabled	Una imagen que “parece clicable”
Capas de texto reemplazables	Todo rasterizado como tipografía de display
Posiciones relativas y semántica de anchors	Referencia de layout + 20 PNG sueltos
Estructura de prefab reutilizable	Reconstruir desde cero en cada evento

Prueba de aceptación en una línea: tras importar en Unity UGUI / Godot Control / Cocos UI, cambiar el copy o hacer reskin no debería requerir reconstruir todo el árbol.

---

12 comprobaciones antes del handoff

Estructura y nombres

#	Comprobación	Notas
1	Nombres semánticos de Frame / grupo	Panel_Shop, Btn_Buy, no Group 12
2	Separar capas interactivas de decorativas	Fondo, borde, icono, texto
3	Ítems de lista como grupos reutilizables	List_Item se puede duplicar
4	Ocultar borradores y Frames obsoletos	Menos ruido en la exportación

Estados y especificaciones

#	Comprobación	Notas
5	Estados completos del botón	normal / pressed / disabled (o la convención de nombres del equipo)
6	Regiones de 9-slice / estiramiento marcadas	Los paneles e inputs no deberían estirarse sin 9-slice
7	Resolución objetivo y área segura	Móvil vertical: notch y barra inferior
8	Estrategia de fuentes	Capas de texto para localización; tipografía de display aparte

Live ops y localización

#	Comprobación	Notas
9	Margen para la longitud del copy	Alemán / español suelen ser 30%+ más largos que el inglés
10	Reskin = solo visual	Skins de evento: mismo layout, nuevo arte y colores
11	Localización: copy vs layout	Ideal: misma estructura, varios archivos de idioma
12	Formato de exportación documentado	PSD por capas / enlace de Figma, o convención de nombres de slices acordada

Preparación en Figma: flujo Figma → Unity. Preparación en PSD: importar PSD a Unity UI en 5 minutos.

---

Tres rutas de handoff (comparación objetiva)

Ruta	Enfoque	Ideal para	Puntos débiles
A. Corte manual	Exportar PNG + captura del layout; ingeniería construye a mano	UI mínima, demos puntuales	Cada revisión = volver a cortar y reconstruir
B. Plugins de motor	Figma Converter, Psd-Exporter, etc.	Equipos con especificaciones fijas	Multi-motor suele implicar rehacer; la calidad del plugin varía
C. Canvas estructurado	Archivo por capas → canvas del juego → split in situ → exportación a Prefab	UI multipantalla, reskin frecuente / lanzamiento global	Requiere adoptar un flujo de exportación orientado a juegos

La ruta C es habitual en productos como VberAI Studio: parsear PSD / Figma → split de UI que preserva el layout → exportar a Unity / Godot / Cocos (ver dividir UI de juego en el motor). Los diseñadores pueden seguir trabajando en Figma; tras la aprobación.

---

Escenarios habituales del diseñador

Game UI slicing / slice in situ

Si un concepto a pantalla completa solo existe como PNG, ingeniería adivina los límites de los botones. Flujo más seguro: soltar la pantalla en el canvas → dividir controles in situ (slicing in situ) para que los datos de posición viajen con el split y evitar que “los slices se vean bien pero todo se desplace en el motor”.

Exportar de Figma a Unity / Godot

Si un plugin solo genera un pack de sprites planos, ingeniería igualmente reconstruye el árbol de RectTransform / Control. Pregunta al evaluar: ¿el entregable es un Prefab / jerarquía o un zip de imágenes sueltas? Comparativa con Godot: Figma → Godot manual vs flujo con IA.

Reskin de UI de juego (temporadas / eventos)

Halloween, Navidad, etc.: mismo layout, nuevos assets temáticos. Si cada reskin implica volver a cortar y reconstruir, el ritmo de live ops se ralentiza. Las herramientas de reskin deben mantener la estructura de nodos intacta (reskin de UI y variantes de tema).

Traducción de UI de juego / Figma multilingüe

Escollo del lanzamiento global: el copy traducido desborda el layout. Flujo ideal: cambiar solo las cadenas, no reflowar los Frames (traducción de UI en un clic). En Figma.

Iconos y assets semitransparentes

Los iconos de habilidad y la UI de VFX a menudo necesitan eliminación de fondo antes de importar (pelo, transparencia, glow). El matting genérico difumina los bordes; las herramientas orientadas a juegos cuidan el alfa (matting de glow / VFX).

---

Cómo se relaciona esto con las herramientas de imágenes con IA

Midjourney, Jimeng, GPT Image 2, etc. son buenas para la dirección visual; si el destino es el motor, igualmente necesitas split y jerarquía. Combo habitual:

Concepto de UI a pantalla completa con IA → el diseñador organiza capas en Figma → exportación estructurada al motor

No trates “una sola imagen de calidad póster” como el handoff final. Comparativas de herramientas: generadores de arte para diseño de juegos con IA.

---

FAQ

¿Puedo entregar solo PNGs? Vale para demos; la UI de producción se rehará repetidamente. Como mínimo.

¿Tiene que ser perfecto el Auto Layout de Figma? No perfecto como en web.

¿Qué quiere decir ingeniería con “los slices están mal”? Normalmente: faltan estados, 9-slice incorrecto.

¿Reskin vs rehacer la UI? Reskin: misma estructura, nuevos visuales. Rehacer: la jerarquía también cambia. Las live ops deberían mantenerse en la ruta del reskin.

¿Los diseñadores necesitan aprender Unity? No scripting, pero los básicos de Canvas / Anchor / Prefab reducen muchísimo el coste de comunicación.

¿VberAI Studio es lo mismo que Google AI Studio? No. El primero es canvas de juego y exportación a motor; el segundo es el entorno general de desarrollo con IA de Google. Ver comparativa.