Figma To Unity Importer

Импортирует узлы из Figma прямо в Unity, превращая фрейм из макета в иерархию uGUI: где может — генерирует вёрстку и текст, где не может — подтягивает растровое изображение или SVG.

Бесплатно, открытый код (MIT): github.com/ManakhovN/FigmaToUnityImporter

примечание

В отличие от остальных инструментов в этой документации, это бесплатный сайд-проект, а не продукт Asset Store. Он работает и им пользуются, но он намеренно сыроват: часть возможностей Figma не имеет аккуратного эквивалента в uGUI, а развивается проект от случая к случаю. Issues и pull request'ы на GitHub приветствуются.

Обзор

• Превращает узел Figma и его дочерние элементы в иерархию uGUI на канвасе
• Для каждого узла свой выбор: сгенерировать как UI, подтянуть рендер, применить только трансформ или пропустить
• Импорт SVG при установленном пакете Vector Graphics
• Повторный импорт поверх существующей иерархии — узлы сопоставляются по идентификатору Figma
• Авторизация в Figma API через OAuth

Установка

Добавьте пакет через Window > Package Manager > + > Add package from git URL:

https://github.com/ManakhovN/FigmaToUnityImporter.git?path=/Assets/FigmaImporter

Требуется TextMeshPro. Для импорта SVG дополнительно установите пакет Unity Vector Graphics.

После установки инструмент появится в Window > FigmaImporter.

Импортер открывается из Window > FigmaImporter.

Подключение к Figma

Авторизация — разовый круг через браузер по OAuth.

1. Откройте окно импортера и нажмите OpenOauthUrl.

Окно импортера до авторизации: ClientCode, State и Token пустые.

2. Figma попросит разрешить доступ. Нажмите Allow access.

Страница выдачи доступа в Figma.

3. Figma перенаправит на страницу обратного вызова, где будут показаны ClientCode и State. Скопируйте оба значения в соответствующие поля окна импортера и нажмите GetToken.

Страница обратного вызова по адресу manakhovn.github.io/figmaImporter. Она только показывает значения, которые вернула Figma, — ничего не сохраняется и никуда не отправляется.

4. Если в поле Token появился токен, подключение готово. Если поле осталось пустым, повторите шаг с выдачей доступа.

Токен получен — импортер может обращаться к Figma API.

Импорт узла

1. В Figma кликните правой кнопкой по нужному фрейму и выберите Copy/Paste > Copy link.

Копирование ссылки на узел в Figma.

2. Вставьте её в поле Url, назначьте канвас в Root Object и нажмите Get Node Data. Импортер загрузит дерево узлов и подберёт разумное действие для каждого дочернего элемента.

Загруженное дерево узлов. У каждой строки есть ActionType и необязательная подмена Sprite; панель справа — превью, полученное через Figma API, а не результат генерации.

3. При необходимости поправьте действия и нажмите Generate nodes.

Действия

Действие	Что делает
Generate	Собирает узел компонентами uGUI. Значение по умолчанию для контейнеров и текста.
Render	Запрашивает растровое изображение узла через Figma API и подставляет его.
Transform	Применяет только позицию и размер к уже сгенерированному объекту.
None	Полностью пропускает узел.
Svg Render	Загружает узел как SVG. Доступно только при установленном пакете Vector Graphics.

Три кнопки меняют действия массово:

• To Generate — поведение по умолчанию: листовые фигуры в растр, контейнеры и текст генерируются.
• To Transform — выставить всем узлам Transform; удобно, когда изменения накатываются на существующую иерархию.
• To SVG — загрузить в SVG всё, что возможно.

Результат появится под назначенным канвасом:

Сгенерированные объекты несут идентификатор Figma в квадратных скобках — например, Home [0:392].

Повторный импорт поверх существующей иерархии

Назначьте в Root Object не канвас, а ранее сгенерированный объект — импортер обновит его на месте, вместо того чтобы создавать вторую копию. Объекты сопоставляются по идентификатору Figma в имени (суффикс вида [0:392]), так что не убирайте его, если планируете переимпорт.

Если в Root Object указан сгенерированный объект, изменения применяются к нему, а не создают новую иерархию.

Масштаб

Слайдер Scale задаёт разрешение генерируемых объектов и растровых изображений, от 0.01 до 4. Четыре — жёсткий потолок: Figma API не отдаёт рендер в большем масштабе.

Шрифты

Шрифты подбираются через ассет FontLinks, который создаётся из Assets > Create > FigmaImporter/FontLinks. Если импорт падает с ошибкой про шрифт, добавьте недостающий шрифт туда и сопоставьте с именем, которое использует Figma.

FontLinks связывает имена шрифтов из Figma с ассетами шрифтов в Unity.

Решение проблем

• После GetToken токен не появился: ClientCode и State одноразовые и живут недолго. Нажмите OpenOauthUrl заново и пройдите авторизацию со свежими значениями.
• Ошибка шрифта при импорте: добавьте шрифт в ассет FontLinks ровно под тем именем, которое используется в файле Figma.
• В списке действий нет Svg Render: установите пакет Unity Vector Graphics — без него этот вариант не компилируется.
• Повторный импорт создаёт дубликат вместо обновления: проверьте, что в именах объектов сохранился суффикс [id] и что существующий объект указан в Root Object.
• Узел импортировался плоской картинкой: не всё в Figma имеет эквивалент в uGUI — эффекты, маски и сложные векторные фигуры намеренно откатываются в Render.

Требования

• Unity 2019.4 или новее
• TextMeshPro
• Пакет Unity Vector Graphics (опционально, для SVG)
• Аккаунт Figma

Поддержка

Issues и pull request'ы: github.com/ManakhovN/FigmaToUnityImporter/issues. По остальным вопросам: nadirmanakhov@gmail.com

---

Другие инструменты: Командная строка | Редактор структур данных | Конвертер файлов | VCS Client