Чек-лист передачи Figma / PSD: как дизайн игрового UI избегает переделок

Когда инженеры переделывают UI, в половине случаев проблема не в эстетике — дело в том, что передача не соответствует требованиям движка. Вы правите фрейм в Figma или Photoshop, а инженерам приходится заново нарезать, пересобирать Canvas и выравнивать якоря. Сроки растягиваются, и это никак не связано с тем.

Ниже — чек-лист перед передачей, охватывающий сценарии с высоким намерением: Figma export Unity, PSD import Unity UI, game UI slicing, рескины событий и многоязычный UI. В заключительном разделе объясняется разрыв между «только PNG» и структурированным экспортом; инструменты — это ориентиры.

---

Что на самом деле нужно инженерам

Им нужно	А не это
Именованная иерархия (кнопки, панели, элементы списка)	Один полноэкранный JPG
Кнопка normal / pressed / disabled	Одно изображение, которое «выглядит кликабельным»
Заменяемые текстовые слои	Всё растрировано как акцидентный шрифт
Относительные позиции и семантика якорей	Референс макета + 20 разрозненных PNG
Переиспользуемая структура префабов	Пересборка с нуля для каждого события

Однострочный тест на приёмку: После импорта в Unity UGUI / Godot Control / Cocos UI изменение текста или рескин не должны требовать пересборки всего дерева.

---

12 проверок перед передачей

Структура и именование

#	Проверка	Примечания
1	Семантические имена Frame / групп	Panel_Shop, Btn_Buy — а не Group 12
2	Разделение интерактивных и декоративных слоёв	Фон, рамка, иконка, текст
3	Элементы списка как переиспользуемые группы	List_Item можно дублировать
4	Скрыть черновики и устаревшие Frame	Меньше шума при экспорте

Состояния и спецификации

#	Проверка	Примечания
5	Полные состояния кнопок	normal / pressed / disabled (или соглашение об именовании в команде)
6	Отмечены области 9-slice / растяжения	Панели и поля ввода не должны масштабироваться жёстко
7	Целевое разрешение и безопасная зона	Портретный мобильный: вырез и нижняя панель
8	Стратегия шрифтов	Текстовые слои для локализации; акцидентный шрифт выделен отдельно

Live-ops и локализация

#	Проверка	Примечания
9	Запас по длине текста	Немецкий / испанский часто на 30%+ длиннее английского
10	Рескин = только визуал	Скины событий: тот же макет, новая графика и цвета
11	Локализация: текст vs макет	Идеально: одна структура, несколько языковых файлов
12	Задокументирован формат экспорта	Слоистый PSD / ссылка Figma или согласованное именование нарезки

Подготовка Figma: Figma → Unity workflow. Подготовка PSD: Import PSD to Unity UI in 5 minutes.

---

Три пути передачи (объективное сравнение)

Путь	Подход	Лучше всего для	Болевые точки
A. Ручная нарезка	Экспорт PNG + скриншот макета; инженеры собирают вручную	Минимальный UI, разовые демо	Каждая правка = повторная нарезка и пересборка
B. Плагины движка	Figma Converter, Psd-Exporter и т. д.	Команды с фиксированными спецификациями	Мультидвижок часто означает переделку; качество плагинов разнится
C. Структурированный холст	Слоистый файл → игровой холст → разделение на месте → экспорт Prefab	Многоэкранный UI, частый рескин / глобальный запуск	Требует внедрения игрового процесса экспорта

Путь C распространён в таких продуктах, как VberAI Studio: разбор PSD / Figma → сохраняющее макет разделение UI → экспорт в Unity / Godot / Cocos (см. разделение игрового UI в движке). Дизайнеры по-прежнему могут работать в Figma; после утверждения используйте структурированный экспорт вместо ручного экспорта 20 PNG на каждую правку.

---

Типичные сценарии дизайнера

Нарезка игрового UI / нарезка на месте

Если полноэкранный концепт существует только в PNG, инженеры угадывают границы кнопок. Более безопасный процесс: перетащите экран на холст → разделите элементы управления на месте (нарезка на месте), чтобы данные о позиции передавались вместе с нарезкой — избегайте ситуации «нарезка выглядит правильно.

Экспорт Figma в Unity / Godot

Если плагин выдаёт только плоский набор спрайтов, инженерам всё равно приходится пересобирать дерево RectTransform / Control. При оценке спрашивайте: результат — это Prefab / иерархия или zip с разрозненными изображениями? Сравнение с Godot: Figma → Godot: ручной процесс против AI-процесса.

Рескин игрового UI (сезонный / события)

Хэллоуин, Рождество и т. д.: тот же макет, новые тематические ассеты. Если каждый рескин означает повторную нарезку и пересборку, темп live-ops замедляется. Инструменты рескина должны сохранять структуру узлов неизменной (рескин UI и тематические варианты).

Перевод игрового UI / многоязычность в Figma

Подводный камень глобального запуска: переведённый текст выходит за пределы макета. Идеальный процесс: менять только строки, не перестраивать Frame (одноклик перевод UI). В Figma используйте Auto Layout с min/max шириной для запаса.

Иконки и полупрозрачные ассеты

Иконки навыков и VFX UI часто требуют удаления фона перед импортом (волосы, прозрачность, свечение). Универсальное матирование размывает края; игровые инструменты делают акцент на альфе (матирование свечения / VFX).

---

Как это связано с инструментами генерации изображений

Midjourney, Jimeng, GPT Image 2 и т. д. хороши для визуального направления; если конечная цель — движок, всё равно нужны разделение и иерархия. Частая комбинация:

AI-концепт полноэкранного UI → дизайнер организует слои в Figma → структурированный экспорт в движок

Не рассматривайте «одиночное изображение плакатного качества» как финальную передачу. Сравнения инструментов: AI-генераторы арта для игрового дизайна.

---

FAQ

Можно передавать только PNG? Для демо — нормально; продакшн-UI будет многократно переделываться. Как минимум приложите заметки о макете и правила именования.

Обязательно ли Auto Layout в Figma должен быть идеальным? Не веб-идеальным — но группировка и именование важнее пиксельных подгонок.

Что инженеры имеют в виду под «нарезка неправильная»? Обычно: отсутствуют состояния, неверный 9-slice, зона попадания ≠ визуал или разрозненные изображения потеряли относительные позиции.

Рескин или переделка UI? Рескин: та же структура, новый визуал. Переделка: иерархия тоже меняется. Live-ops должны оставаться на пути рескина.

Нужно ли дизайнерам учить Unity? Не скриптинг — но основы Canvas / Anchor / Prefab резко снижают стоимость коммуникации.

VberAI Studio — то же самое, что Google AI Studio? Нет. Первый — это игровой холст и экспорт в движок; второй — универсальная среда разработки с ИИ от Google. См. сравнение.