Редактор Studio: Экспорт дизайна из Figma

8 мин. чтения
Используете Figma для дизайна секций и элементов? Плагин Wix Studio позволяет превратить статический дизайн в адаптивный сайт с помощью одного оптимизированного процесса. Вы можете импортировать из Figma целые рамки, определенные компоненты и секции или использовать наши блоки (UI-комплекты).
Перейдя в Studio, улучшайте свой дизайн с помощью анимаций без кода, пользовательского CSS, подключения к бизнес-решениям, таким как Wix Stores, и многое другое.

Шаг 1 | Подготовьтесь к экспорту

Прежде чем приступить к импорту элементов дизайна из Figma, мы рекомендуем проверить несколько вещей. Это обеспечит плавный переход с Figma на Wix Studio.

а | Загрузите собственные шрифты в Wix Studio

Убедитесь, что все шрифты, которые вы используете в Figma, также доступны в вашем аккаунте Wix. Шрифты лучше загружать заранее – в противном случае системные шрифты заменят шрифты, которые вы хотели отобразить. 
Панель управления шрифтами в Wix Studio, куда вы можете загрузить пользовательские шрифты, используемые в Figma.

б | Сравните ширину рамки с размером редактирования

Ширина рамки Figma должна соответствовать размеру редактирования соответствующей страницы на сайте вашего клиента. Если есть несоответствие, ваш дизайн не будет экспортирован в тех же пропорциях, а это означает, что будет неправильно отображаться в Wix Studio.
Экспортируете элементы?
В любом случае вам требуется проверять ширину рамки, которая содержит элементы, чтобы обеспечить результат 1:1.
GIF, показывающий, как изменить размер страницы для редактирования в редакторе Studio

Шаг 2 | Установите плагин и подключите файл Figma

Перейдите на страницу сообщества Figma и установите плагин Wix Studio, если вы еще этого не сделали. После установки вы можете получить доступ к плагину любого дизайна с помощью нажатия правой кнопкой мыши.
Далее скопируйте ссылку на файл Figma и вернитесь в редактор, чтобы подключить его к сайту вашего клиента. 

а | Установите плагин на Figma

  1. Перейдите на страницу плагина Figma to Wix Studio.
  2. Добавьте плагин в свой аккаунт Figma.
  3. Откройте файл Figma, содержащий рамку, которую вы хотите экспортировать. 
  4. Скопируйте URL-адрес вашего файла Figma.

б | Подключите файл Figma к сайту клиента

  1. Перейдите на сайт клиента в редакторе.
  2. Нажмите на значок Wix Studio   в левом верхнем углу.
  3. Наведите курсор на Инструменты.
  4. Нажмите Импортировать из Figma.
    Совет: это добавит новый значок  в левой части редактора.
  5. Вставьте URL-адрес Файла Figma и нажмите Подключить.
  6. (Только в первый раз) Нажмите Разрешить доступ , чтобы завершить подключение файла.
Скриншот панели «Импортировать из Figma» в редакторе Studio после вставки ссылки на файл Figma

Шаг 3 | Выберите, что экспортировать из Figma

После установки плагина найдите соответствующий файл дизайна в своем аккаунте Figma. Плагин позволяет выбрать, что экспортировать – рамку или стили.
Мы рекомендуем сначала экспортировать стили (например, типографику и цвета), чтобы они уже были настроены в редакторе Studio к моменту начала экспорта рамок. 

Чтобы экспортировать из Figma:

  1. Откройте соответствующий файл Figma.
  2. Получите доступ к плагину Studio:
    1. Нажмите значок Figma , чтобы открыть главное меню.
    2. Наведите курсор на Plugins (Плагины) и нажмите Figma to Wix Studio (Из Figma в Wix Studio).
  3. Нажмите Set up Export (Настроить экспорт).
  4. Установите флажок I'm done connecting my file (Я завершил подключение моего файла) и нажмите Next (Дальше).
  5. Убедитесь, что размер редактирования в Wix Studio соответствует ширине рамки Figma. Когда будете готовы, нажмите Start Export (Начать экспорт).
  6. Выберите, что вы хотите экспортировать, и выполните следующие действия:

Шаг 4 | Завершите импорт в редакторе

После выбора стилей и / или рамок, которые вы хотите экспортировать, вернитесь на сайт клиента в редакторе. Вы заметите, что на панели «Импортировать из Figma» теперь отображаются выбранные элементы. 
Убедитесь, что нет отсутствующих шрифтов или несоответствий размерам, а затем выберите, следует ли импортировать рамку в качестве контейнера, секции и т. д.

Чтобы завершить импорт:

  1. Перейдите на сайт клиента в редакторе.
  2. (Если еще не открыто) Нажмите значок Импортировать из Figma слева.
  3. В зависимости от того, что вы импортируете, выполните следующие действия:

Часто задаваемые вопросы

Нажимайте на вопросы ниже, чтобы узнать больше.

Устранение неполадок

Испытываете проблемы при экспорте дизайна Figma в Wix Studio? Нажмите на неполадку ниже, чтобы узнать, что ее вызвало и как ее устранить.

Нужна помощь?

Если проблему не удается устранить, свяжитесь с нами и подготовьте следующую информацию: 
  • URL-адрес соответствующего проекта Figma.
    Примечание: обязательно сделайте его общедоступным, чтобы наша команда могла его просмотреть.
  • Видео или скриншот конкретной неполадки. 
  • (Если проблема относится к определенной рамке) Название рамки, отображаемое на панели слоёв в Figma.

Была ли статья полезна?

|