Экспорт ресурсов дизайна

Узнайте, как можно экспортировать готовые к использованию ресурсы из Adobe XD в форматах PNG, SVG, JPG и PDF.

Вы можете экспортировать ресурсы, такие как растровые изображения, значки и фоновые рисунки, текст и монтажные области из XD в форматах PNG, SVG, JPG и PDF. Эти экспортированные ресурсы оптимизированы для развертывания в iOS, Android или в веб-приложениях.

Если вы используете XD на Mac, вы также можете перенести свои дизайны в сторонние интегрированные продукты, например ZeplinAvocodeSympliKite Compositor и Protopie.

Экспорт ресурсов и монтажных областей

Mac

Выберите объект или монтажную область, перейдите в раздел Файл > Экспорт или нажмите Cmd+E.    

Windows

Выберите объект или монтажную область и перейдите в раздел Файл > Экспорт.  

  • Пакетная обработка. Вы можете выполнить пакетную обработку ресурсов для экспорта, отмеченных с помощью параметра Отметить для экспорта в инспекторе свойств. Чтобы экспортировать несколько объектов как один ресурс, сгруппируйте эти объекты перед экспортом.
  • Выбрано. Вы можете выбирать и экспортировать отдельные ресурсы.
  • Все монтажные области. Вы можете выбрать все монтажные области для экспорта из проекта дизайна.
  • After Effects. Вы можете выбрать ресурс для экспорта в After Effects.

Пометка слоев для экспорта

Слои, помеченные для экспорта, включены в спецификации дизайна как ресурсы. Чтобы пометить ресурсы для экспорта, выберите любой слой на холсте и выполните одно из следующих действий: 

  • Щелкните правой кнопкой мыши слой на холсте и выберите во раскрывающемся меню пункт «Пометить для экспорта». 
  • Откройте панель слоев и щелкните значок отметки для экспорта  рядом с названием слоя. 

Экспорт ресурсов в различных форматах файла

Ресурсы — это файлы дизайна, которые нужны разработчикам, чтобы воссоздать продукт вашего дизайна с помощью HTML/CSS/JS на веб-сайте или с помощью языков Swift или Java в приложениях для iOS и Android.

Как правило, самыми распространенными ресурсами являются растровые изображения, значки и фоновые рисунки, которые вы можете экспортировать в следующих форматах.

Один файл PDF. Вы можете выбрать несколько монтажных областей или ресурсов и экспортировать их в одном файле PDF. 

Отдельные файлы PDF. Вы можете выбрать несколько монтажных областей или ресурсов и экспортировать их как отдельные файлы PDF. Отдельные файлы PDF создаются для каждого из выбранных ресурсов или монтажных областей.

Когда вы экспортируете ресурсы как JPG, вы можете задавать уровень качества экспортируемого изображения в формате JPG соответственно. Выберите любой из процентных параметров в выпадающем списке Качество и против параметра Экспорт в выберите Дизайн или Интернет.

JPG не преобразуются в PDF. Растровые изображения импортируются как изображения, и в результате кажется, что они превращаются в файлы PDF.

При экспорте объектов или монтажных областей как SVG можно задать визуальный стиль Атрибуты представления илиВнутренние таблицы CSS

  • Атрибуты представления. Используются отдельные атрибуты XML для каждого отдельного свойства стиля в каждом теге SVG. Этот формат нужен для использования ресурсов SVG в Android Studio.
  • Внутренние таблицы CSS. С классами CSS применяется один тег стиля, и для объектов с одним и тем же стилем используются одинаковые настройки стиля, что позволяет уменьшить размер файлов.

Вы можете сохранять их как встроенные или связанные изображения.

  • Встроить. Растровое изображение кодируется в файл SVG.
  • Связать. Растровое изображение хранится отдельно со ссылкой на файл SVG.

При выборе PNG ресурсы можно экспортировать на следующих платформах:

  • Дизайн — параметр по умолчанию, когда ресурс экспортируется в PNG с разрешением 1x.
  • Интернет — ресурсы экспортируются с разрешением 1x и 2x.
  • iOS — ресурсы экспортируются с разрешением 1x, 2x и 3x.
    Размер монтажной области по умолчанию для различных устройств iOS определяется, исходя из того, что вы выполняете дизайн с разрешением 1x. Следовательно, если вы использовали значения по умолчанию, оставьте для экспорта разрешение 1x. Однако вы также можете по собственному усмотрению создавать дизайн с разрешением 2x, удвоив ширину и высоту монтажной области.

  • Android — ресурсы дизайна оптимизируются и экспортируются для следующих значений плотности экрана Android.
    • ldpi — низкая плотность (75%)
    • mdpi — средняя плотность (100%)
    • hdpi — высокая плотность (150%)
    • xhdpi — сверхвысокая плотность (200%)
    • xxhdpi — сверхвысокая плотность плюс (300%)
    • xxxhdpi — сверхвысокая плотность плюс плюс (400%)

Экспорт ресурсов в сторонние приложения

Вы также можете перенести свои проекты из XD в другие приложения, такие как Zeplin, Avocode, Sympli, Kite Compositor и Protopie

  1. Выберите монтажную область или слой в файле XD и щелкните Файл > Экспорт > Zeplin.

    Если у вас есть несколько приложений, интегрированных с XD, сочетание клавиш (⌥⌘E) запускает последнюю использованную вами интеграцию.

    Экспорт ресурсов в Zeplin
    Экспорт ресурсов в Zeplin

  2. Щелкните Импорт. Чтобы заменить существующие экраны в Zeplin с тем же именем, выберите экраны Заменить с тем же именем. Zeplin добавляет его в качестве новой версии того же экрана без потери ваших заметок.

    Если у вас возникли проблемы при работе с Zeplin в XD, поищите решения в этой статье.

Подробнее

Посмотрите это учебное пособие, чтобы подробнее ознакомиться с процессом экспорта ресурсов из XD.

Время просмотра: 2 минуты.

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

Возникли проблемы с экспортом ресурсов? Прочитайте эту статью, чтобы попытаться устранить проблемы.

Есть вопрос или идея?

Спросите сообщество

Хотите, чтобы ваш любимый инструмент для дизайна имел дополнительные процессы экспорта? Проголосуйте за существующий запрос или добавьте свой на форуме XD UserVoice.

Если вы хотите задать вопрос или поделиться интересной идеей, вступайте в сообщество Adobe XD. Мы будем рады услышать ваши идеи и увидеть ваши работы.

Логотип Adobe

Вход в учетную запись