Как перенести UI из Figma в Godot: Control-иерархия пошагово

Как перенести UI из Figma в Godot

Figma (Фигма) → Godot (Годот): импорт именованных Frame в VberAI Studio → проверка дерева на канвасе → экспорт иерархии Control → .tscn под CanvasLayer в Godot 4.

Пять шагов ниже (подробно — по разделам):

1. Подготовить Figma (Frame, Auto Layout, текст отдельными слоями)
2. Импорт в VberAI Studio
3. Проверка иерархии перед экспортом
4. Экспорт для Godot (Control / сцена, не «только спрайты»)
5. Приёмка в редакторе + сигналы в GDScript

Сравнение с ручной сборкой: Figma в Godot: вручную или с AI Studio. Путь в Unity: Как перенести UI из Figma в Unity.

Критерии готовности: что значит «в Godot»

Одни текстуры не считаются. У вас также должно быть:

1. Дерево узлов, соответствующее значимым Frame из Figma (верхняя панель, список, нижняя панель и т. д.)
2. Основной каркас, который выдерживает 16:9, портретную ориентацию и оконные размеры без перенастройки всего дерева
3. Текстовые слои, которые остаются Label (или текстовыми узлами вашего проекта), когда это возможно — не вшитыми в изображения
4. Способ повторного экспорта после изменений каркаса в Figma, вместо пересборки сцены с нуля

Сигналы, привязка данных и ключи локализации остаются в Godot. AI Studio устраняет «пересборку каркаса из макета».

Предварительные требования

Элемент	Примечания
Figma	Экраны разделены на Frame с читаемыми именами
AI Studio	Доступ к VberAI Studio
Godot	Предпочтительно проект Godot 4.x; установите цель экспорта в Godot
Соглашения об ассетах	Договоритесь о папках для UI-сцен (например, res://ui/generated/) и размещении темы

Избегайте экспорта одного плоского полноэкранного скриншота — это вернет вас к ручной нарезке.

Шаг 1: Организуйте Figma так, чтобы она читалась как дерево UI

Небольшая очистка перед импортом дешевле, чем разделение узлов в движке позже.

Практика	Зачем
Понятные имена Frame (Panel_HUD, Btn_Play, List_Item)	Имена становятся именами узлов Godot
Используйте Frame / Auto Layout для групп; избегайте слияния целых экранов	Иерархия остается узнаваемой после импорта
Держите текст текстовыми слоями, когда можно	Легче сопоставление с Label
Отделяйте панели с девятью срезами от фиксированных иконок	Правила растяжения остаются ясными
Скрывайте черновые Frame и неиспользуемые варианты	Меньше шума в дереве экспорта

Шаг 2: Импортируйте Figma в AI Studio

1. Откройте VberAI Studio
2. Начните импорт, выберите Figma и загрузите файл (или используйте поддерживаемое подключение Figma в продукте)
3. В дереве слоев / Frame подтвердите экраны, которые вы реально поставляете — а не каждый черновик в файле

В идеале вы видите структуру слева, предпросмотр холста в центре и параметры экспорта, ориентированные на движок, справа. Подтвердите структуру перед экспортом.

Шаг 3: Проверьте иерархию перед экспортом

На холсте проверьте:

• Вложенность панелей соответствует шапке / телу / подвалу (или вашим соглашениям о каркасе)
• Области нажатия кнопок отделены от декоративных иконок
• Локализуемый текст все еще текстовые слои
• Растягиваемые панели и иконки фиксированного размера различимы

Исправьте имена или группировку в AI Studio, когда можете. Распутывание сломанного .tscn в Godot стоит дороже.

Для небольших правок макета опишите намерение на естественном языке (уменьшите отступ между заголовком и основной кнопкой, выровняйте высоту элементов списка, скройте черновые бейджи). Цель — зафиксировать каркас до того, как он станет объектами движка, а не перерисовывать весь набор артов через чат.

Шаг 4: Экспорт для Godot

Установите целевую платформу Godot. Предпочтите иерархию Control / сцену вместо «только спрайтов».

После экспорта в Godot:

1. Поместите ассеты в согласованную папку (например, res://ui/generated/)
2. Подключите экспортированную сцену под CanvasLayer или корень UI вашего проекта
3. Убедитесь, что корень — разумное дерево Control (или контейнеров)
4. Просмотрите несколько разрешений в редакторе
5. Подключите pressed и другие сигналы, а также заполнение данными, с помощью GDScript / C# как обычно

Логика остается в проекте. Вы пропускаете ручную укладку каждого TextureRect / Label / контейнера из Figma.

Шаг 5: Чек-лист приемки в редакторе

Проверка	Критерии прохождения
Имена узлов	Соответствуют ключевым Frame; не куча бессмысленных индексов Node2D / Control
Макет	Каркас остается удобным при растяжении окна
Текст	Изменение текста Label не требует повторного экспорта всего экрана как арта
Тема	Шрифты и цвета могут подключаться к теме проекта, или вы знаете, что тема все еще требует ручной доработки
Повторный экспорт	После изменений каркаса в Figma новый экспорт может заменить или дополнить сцену — не оставляя вас в тупике

Замена шрифтов, безопасные зоны и локализация обычно все еще требуют доработки. Это нормальная полировка, а не провал пайплайна.

FAQ

Как перенести UI из Figma в Godot?
Импорт Frame в VberAI Studio → экспорт Control‑иерархии → импорт .tscn в проект. Шаги 1–5 в этой статье.

Figma to Godot — можно без ручной нарезки?
Да, если экспортируете структуру Control, а не один PNG на весь экран.

Это то же самое, что плагины Figma «в код»?
Большинство из них нацелены на веб. Godot нуждается в соглашениях Control / контейнеров / темы. Экспорт, дружественный к движку, — не тот же продукт, что веб-генерация кода.

Мы все еще проектируем в Figma?
Да. AI Studio потребляет структуру дизайна; он не задает арт-направление. Макет и токены по-прежнему приходят из Figma.

Как вписывается Godot MCP?
AI Studio обрабатывает структуру дизайна → Control. Godot MCP помогает после того, как сцена в проекте — переименовывать узлы, подключать сигналы, инспектировать дерево из Cursor. MCP не «генерирует полный UI из изображения». Установка: Как настроить MCP для Godot.

Будет ли первый экспорт попиксельно точным?
Обычно нет. Выигрыш — миграция структуры за минуты вместо пересборки за полдня; пиксели и тема дорабатываются в Godot.

Как перезапустить после изменений дизайна

Изменение в Figma	Предложение
Строки/столбцы каркаса, новые вкладки	Повторный экспорт через AI Studio
Только оттенок иконки или текст	Предпочитайте сцену Godot / тему / таблицы перевода
Совершенно новый артборд	Новый экспорт → новый .tscn или замена согласованного пути