Что понадобится
Для переноса нужны две вещи: ссылка на файл Figma и личный токен доступа Figma. Сам файл скачивать не нужно: Morfa читает его через API Figma прямо из вашего браузера.
Импорт бесплатный на любом плане. Результат — новый файл в Morfa: он считается в лимите файлов (на плане «Бесплатный» — 10 файлов), а картинки из него занимают место под изображения (1 ГБ на том же плане).
- Ссылка на файл: из адресной строки Figma или через «Copy link».
- Токен доступа Figma с правом «File content — Read only».
- Аккаунт Morfa, в котором появится новый файл.
Как получить токен доступа Figma
Токен — это ключ, по которому Figma отдаёт содержимое ваших файлов. Его создают в настройках аккаунта Figma и там же в любой момент отзывают.
Откройте настройки Figma
В Figma нажмите на свой аватар и выберите Settings, затем вкладку Security.
Создайте токен
В разделе Personal access tokens нажмите Generate new token и дайте ему понятное имя.
Выберите право доступа
Для переноса достаточно права «File content — Read only». Остальные права не нужны.
Скопируйте токен
Скопируйте токен сразу после создания и вставьте его в окно импорта.
Перенос по шагам
Импорт запускается из файлового менеджера Morfa, а не из открытого макета: перенос всегда создаёт новый файл.
Откройте «Импорт из Figma…»
В файловом менеджере нажмите «Импорт» и выберите «Импорт из Figma…».
Вставьте ссылку и токен
Ссылку на файл — в первое поле, токен доступа — во второе.
Выберите страницы
Перенесите все страницы сразу или только нужные. Компоненты, которые лежат на невыбранных страницах, перенесутся отдельной страницей «Компоненты».
Нажмите «Перенести файл»
Пока идёт перенос, вкладку лучше не закрывать: файл читается из вашего браузера.
Прочитайте отчёт
В конце видно, что перенеслось иначе и почему: какие шрифты заменены, какие эффекты не поддерживаются, какие экземпляры стали фреймами.
Что переносится как есть
Слои остаются слоями, а не картинками: после переноса их можно выделять, двигать и править, как будто макет нарисован в редакторе с самого начала.
Структура
Страницы, фреймы, группы, секции и фрагменты для нарезки.
Компоненты
Компоненты и наборы вариантов, экземпляры с переопределениями.
Автолейаут
Направление, отступы, выравнивание и перенос строк; ограничения для слоёв вне автолейаута.
Оформление
Стили, заливки, обводки с профилями толщины, эффекты и картинки.
Векторы и текст
Фигуры, контуры, булевы операции, текст и текст по контуру.
Прототип
Связи между экранами и сценарии: прототип можно сразу запустить в плеере.
Что переносится иначе
Некоторые вещи Figma не отдаёт через API или в редакторе их пока нет. Всё это перечислено в отчёте после импорта, поэтому сюрпризов при работе не будет.
| В Figma | В Morfa после переноса | Что делать |
|---|---|---|
| Переменные | Слои получают текущие значения переменных | Создать коллекцию заново; Figma отдаёт переменные через API только на плане Enterprise |
| Шрифт не из каталога | Заменяется похожим: Helvetica — на Inter, Gilroy и Poppins — на Montserrat | Выбрать замену вручную из 87 шрифтов каталога, все с кириллицей |
| Экземпляры из командных библиотек | Становятся обычными фреймами | Перенести файл библиотеки и опубликовать его как библиотеку команды |
| Шум, текстура, стекло, видео в заливке | Не переносятся | Заменить картинкой или обычными эффектами |
| Сетка автолейаута | Становится фиксированным расположением | Собрать заново из вложенных автолейаутов |
| Переменные и условия в прототипе | Не переносятся | Сделать варианты и переключать их через «Изменить на» |
Очень большой макет за один раз не перенести: если редактор пишет, что макет слишком большой, выберите меньше страниц и перенесите файл частями.
Нужен ли VPN для переноса
Morfa работает без VPN. Но импорт обращается к самой Figma, поэтому если Figma открывается у вас только через VPN, на время переноса его придётся включить. Если Figma открывается и так, VPN не нужен.
Когда файл перенесён, он хранится в вашем аккаунте Morfa, и Figma для работы с ним больше не нужна. Копию файла можно сохранить на компьютер в формате .rdesign.
Что сделать после переноса
Пройдитесь по отчёту и проверьте замены шрифтов: они сильнее всего влияют на вид макета. Затем запустите прототип кнопкой ▶ и проверьте связи между экранами.
Дальше всё как обычно: горячие клавиши те же, что в Figma, автолейаут и компоненты работают так же, а разработчику можно сразу дать роль с доступом к вкладке «Код».