Импорт из Figma

Импорт работает в обратную сторону от экспорта: готовый фрейм Figma становится редактируемым экраном UXMagic, над которым можно дальше работать с ИИ.

Шаги#

1. Подключите Figma в разделе Интеграции (соединение по OAuth — вы разрешаете доступ один раз).
2. Вставьте адрес фрейма Figma или выберите файл и фрейм в списке.
3. Решите, импортировать ли собственные стили фрейма как тему проекта или наложить его на уже имеющуюся тему.
4. Импортируйте.

Что переносится#

• Раскладка и иерархия, включая структуру auto-layout.
• Текст вместе с его типографскими стилями.
• Цвета и эффекты, включая градиенты и тени.
• Изображения, скопированные в ресурсы вашего проекта.
• Векторы и иконки, пересобранные в вёрстку.

Чего ожидать#

Figma — векторный холст, а веб — блочная модель, поэтому импорт — это достоверный перевод, а не побайтовая копия. Ожидайте очень близкую структуру и отступы с небольшими различиями в отрисовке текста и в эффектах, у которых нет прямого веб-аналога.

Точнее всего импорт работает, когда фрейм Figma использует auto-layout. Свободные раскладки с абсолютным позиционированием импортируются, но с меньшей структурной точностью.

Как взять правильную ссылку#

Выделите фрейм в Figma, затем правая кнопка → Скопировать ссылку на выделение. Ссылка на файл без выбранного узла импортирует не то или вообще ничего.

После импорта#

Импортированный экран ведёт себя как любой другой: правки через чат, режим редактирования, темы, версии, экспорт. Это самый быстрый путь для ситуации «макеты у нас уже есть, но теперь мы хотим двигаться быстрее».

Дизайн-системы и библиотеки компонентов#

Можно также импортировать библиотеку компонентов или дизайн-систему, чтобы сгенерированные экраны использовали ваши компоненты. См. Библиотеки компонентов.