Редактор Studio: экспорт дизайна из Figma
8 мин.
Используете Figma для дизайна секций и элементов? Плагин Wix Studio позволяет превратить статические дизайны в адаптивный опубликованный сайт с помощью одного оптимизированного процесса. Вы можете импортировать целые фреймы Figma, отдельные компоненты и секции или использовать наши вайрфреймы (UI-киты).
В Studio вы можете улучшить свои дизайны с помощью анимации без кода, пользовательского CSS, подключения к бизнес-решениям, таким как Wix Stores, и многого другого.
- Мы рекомендуем держать Figma и Редактор Studio открытыми в разных вкладках браузера, так как для этого процесса понадобятся оба окна.
- Нужна помощь в процессе работы? Ознакомьтесь с разделами Часто задаваемые вопросы и Устранение неполадок ниже.
Шаг 1 | Подготовка к экспорту
Перед импортом дизайна из Figma мы рекомендуем проверить несколько моментов. Это обеспечит плавный переход из Figma в Wix Studio.
Studio Editor: Загрузка собственных шрифтов в Wix Studio
Убедитесь, что все шрифты, которые вы используете в Figma, также доступны в вашем аккаунте Wix. Рекомендуется загрузить шрифты в Wix заранее — в противном случае системные шрифты заменят те, которые вы планировали использовать.
b | Сравните ширину фрейма с размером редактирования
Ширина фрейма Figma должна соответствовать размеру редактирования соответствующей страницы на сайте клиента. Если есть несоответствие, дизайн не будет экспортирован в том же соотношении, а значит, он не будет отображаться в правильных пропорциях в Wix Studio.
Экспорт элементов?
Рекомендуется проверить ширину фрейма, в котором они содержатся, чтобы обеспечить результат 1:1.
Шаг 2 | Установка плагина
Если вы еще этого не сделали, установите плагин Wix Studio из файла, который хотите экспортировать. После установки вы сможете легко получить доступ к плагину из любого другого дизайна в своем аккаунте.
Затем откройте панель плагина в Редакторе Studio
a | Установите плагин в Figma
- Откройте файл, который вы хотите экспортировать, в аккаунте Figma.
- Нажмите Ctrl + K на клавиатуре (Cmd + K на Mac).
- Перейдите на вкладку Плагины и виджеты.
- Введите в поиске «Wix Studio» и выберите Figma to Wix Studio в результатах.
- Нажмите Запуск.
- Войдите в свой аккаунт Wix в плагине.
b | Откройте инструмент на сайте клиента
- Перейдите на сайт клиента в редакторе.
- Нажмите на иконку Wix Studio
в левом верхнем углу. - Наведите курсор на Инструменты.
- Нажмите Импорт из Figma.
Совет: это добавит новую иконку
в левой части редактора.
Шаг 3 | Выбор элементов для экспорта из Figma
После установки плагина вернитесь к файлу в аккаунте Figma. Плагин позволяет выбрать, что экспортировать: фрейм или стили.
Мы рекомендуем сначала экспортировать стили (т. е. типографику и цвета), чтобы они уже были настроены в Редакторе Studio к моменту начала экспорта фреймов.
Какие элементы плагин распознает автоматически?
Чтобы экспортировать из Figma:
- (Если еще не открыт) Откройте нужный файл Figma.
- Откройте плагин Studio:
- Нажмите на иконку Figma
, чтобы открыть главное меню. - Наведите курсор на Плагины и нажмите Figma to Wix Studio.
- Нажмите на иконку Figma
- Нажмите Настроить экспорт.
- Нажмите Далее.
- Подтвердите (проверьте), что размер редактирования в Wix Studio соответствует ширине фрейма Figma. Когда будете готовы, нажмите Начать экспорт.
- Выберите, что экспортировать, и выполните следующие шаги:
Стили
Фрейм
Шаг 4 | Завершение импорта в редакторе
После завершения экспорта в Figma вернитесь в редактор и убедитесь, что в нем нет недостающих шрифтов или несоответствий размеров.
Работаете с фреймом? Вы можете выбрать, импортировать ли его как контейнер, раздел и т. д.
Чтобы завершить импорт:
- Перейдите на сайт клиента в редакторе.
- (Если панель еще не открыта) Нажмите на иконку Импорт из Figma слева.
- В зависимости от того, импортировали ли вы ранее из Figma в текущий аккаунт Wix, обновите панель:
- Первый импорт: Нажмите Обновить.
- Ранее импортировали: Нажмите на иконку Обновить импорт
.
- В зависимости от того, что вы импортируете, выполните следующие шаги:
Стили
Фрейм
Часто задаваемые вопросы
Нажмите на вопрос ниже, чтобы подробнее узнать об импорте дизайна из Figma.
Можно ли импортировать дизайн из Figma на существующий сайт?
Можно ли импортировать сразу несколько страниц?
Подключается ли дизайн из Figma автоматически к приложениям Wix (например, Wix Stores)?
Что происходит при импорте меню, форм и кнопок? Будут ли они работать на сайте клиента?
Как импортированный дизайн будет выглядеть на разных экранах?
Будут ли изменения в дизайне Figma автоматически синхронизироваться после импорта в Studio?
Можно ли экспортировать дизайн в обратном порядке — из Wix Studio в Figma?
Устранение неполадок
Возникли проблемы при экспорте дизайна из Figma в Wix Studio? Нажмите на проблему ниже, чтобы узнать причину и способы ее решения.
Прежде чем приступать к устранению неполадок:
Если вы не можете экспортировать свой дизайн, мы рекомендуем проверить, не достигнута ли стоимость (лимит) в вашем аккаунте Figma.
(В Figma) В панели не отображаются стили при попытке экспорта
(В редакторе) Не видна возможность добавить фрейм как страницу или раздел
(В редакторе) Дизайн выглядит непропорционально после импорта
Остались вопросы?
Какую информацию следует указать, если мне понадобится помощь?