Руководство пользователя Отмена

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

  1. Руководство пользователя Adobe XD
  2. Введение
    1. Новые возможности Adobe XD
    2. Распространенные вопросы
    3. Создание дизайна, прототипов и совместная работа в Adobe XD
    4. Системные требования
      1. Требования к оборудованию и программному обеспечению
      2. Adobe XD, Big Sur и Apple Silicon | macOS 11
    5. Основные сведения о рабочей среде
    6. Изменение языка приложения в Adobe XD
    7. Доступ к наборам для дизайна пользовательского интерфейса
    8. Доступность в Adobe XD
    9. Сочетания клавиш
    10. Советы и рекомендации
    11. Варианты условий подписки на Adobe XD
    12. Изменения в начальном плане XD
  3. Дизайн
    1. Монтажные области, направляющие и слои
      1. Начало работы с монтажными областями
      2. Использование направляющих и сеток
      3. Создание прокручиваемых монтажных областей
      4. Работа со слоями
      5. Создание групп прокрутки
    2. Фигуры, объекты и путь
      1. Выделение, изменение размера и поворот объектов
      2. Перемещение, выравнивание, распределение и упорядочивание объектов
      3. Группирование, блокирование, дублирование, копирование и зеркальное отражение объектов
      4. Задание обводки, заливки и теней для объектов
      5. Создание повторяющихся элементов
      6. Создание перспективных проектов с помощью 3D-преобразований
      7. Редактирование объектов с помощью логических операций
    3. Текст и шрифты
      1. Работа с инструментами для рисования и создания текста
      2. Шрифты в Adobe XD
    4. Компоненты и состояния
      1. Работа с компонентами
      2. Работа с вложенными компонентами
      3. Добавление нескольких состояний для компонентов
    5. Маскировка и эффекты
      1. Создание маски с фигурами
      2. Работа с эффектами размытия
      3. Создание и изменение градиентов
      4. Применение эффектов наложения
    6. Макет
      1. Адаптивное изменение размера и ограничения
      2. Установка фиксированного отступа для компонентов и групп
      3. Создание динамичных проектов с подборками
    7. Видео и анимации Lottie
      1. Работа с видео
      2. Создание прототипов при помощи видео
      3. Работа с анимацией Lottie
  4. Создание прототипа
    1. Создание интерактивных прототипов
    2. Анимирование прототипов
    3. Свойства объекта, которые поддерживаются при автоматическом анимировании
    4. Создание прототипов с клавиатуры и геймпада
    5. Создание прототипов с помощью голосовых команд и воспроизведения
    6. Создание синхронизированных переходов
    7. Добавление наложений
    8. Создание голосовых прототипов
    9. Создание якорных ссылок
    10. Создание гиперссылок
    11. Предварительный просмотр проектов и прототипов
  5. Публикация, экспорт и проверка
    1. Публикация выбранных монтажных областей
    2. Предоставление совместного доступа к проектам и прототипам
    3. Настройка разрешений на доступ к ссылкам
    4. Работа с прототипами
    5. Просмотр прототипов
    6. Работа со спецификациями дизайна
    7. Предоставление общего доступа к спецификациям дизайна
    8. Проверка спецификаций дизайна
    9. Навигация в спецификациях дизайна
    10. Проверка и комментирование спецификаций дизайна
    11. Экспорт ресурсов дизайна
    12. Экспорт и загрузка ресурсов из спецификаций дизайна
    13. Корпоративный групповой совместный доступ
  6. Системы дизайна
    1. Системы дизайна с библиотеками Creative Cloud Libraries
    2. Работа с ресурсами документа в Adobe XD
    3. Работа с библиотеками Creative Cloud Libraries в Adobe XD
    4. Переход от связанных ресурсов к библиотекам Creative Cloud Libraries
    5. Работа с проектными токенами 
    6. Использование ресурсов из библиотек Creative Cloud Libraries
  7. Облачные документы
    1. Облачные документы в Adobe XD
    2. Совместная работа и совместное редактирование проектов
    3. Совместное редактирование документов, к которым вам предоставили доступ
  8. Интеграция и плагины
    1. Работа с внешними ресурсами
    2. Работа с ресурсами проекта из Photoshop
    3. Копирование ресурсов из Photoshop
    4. Как импортировать или открыть проекты Photoshop
    5. Работа с ресурсами Illustrator в Adobe XD
    6. Импортирование и открытие проектов Illustrator
    7. Копирование векторных объектов из Illustrator в XD
    8. Плагины для Adobe XD
    9. Создание плагинов и управление ими
    10. Интеграция Jira с XD
    11. Подключаемый модуль Slack для XD
    12. Подключаемый модуль Zoom для XD
    13. Публикация работы из XD на Behance
  9. XD для iOS и Android
    1. Предварительный просмотр на мобильных устройствах
    2. Часто задаваемые вопросы по Adobe XD для мобильных устройств
  10. Устранение неполадок
    1. Выявленные неполадки и исправленные ошибки
      1. Выявленные неполадки
      2. Исправленные неполадки
    2. Установка и обновления
      1. XD отображается как несовместимый в Windows
      2. Код ошибки 191
      3. Код ошибки 183
      4. Проблемы при установке плагинов XD
      5.  Запрос на удаление и переустановку XD в Windows 10
      6. Проблемы с миграцией предпочтений
    3. Запуск и сбой
      1.  XD аварийно завершает работу при запуске в Windows 10
      2.  XD закрывается при выходе из Creative Cloud
      3. Проблема со статусом подписки в Windows
      4. Предупреждение о заблокированном приложении при запуске XD в Windows
      5. Создание аварийного дампа в Windows
      6. Сбор и отправка журнала сбоев
    4. Облачные документы и библиотеки Creative Cloud Libraries
      1. Проблемы с облачными документами XD
      2. Проблемы со связанными компонентами
      3. Проблемы с библиотеками и ссылками
    5. Прототип, публикация и обзор
      1. Не удается записать взаимодействия прототипов в macOS Catalina
      2. Проблемы с процессами публикации
      3. Опубликованные ссылки не отображаются в браузерах
      4. Прототипы некорректно отображаются в браузерах
      5. На общих ссылках внезапно появляется панель комментариев
      6. Невозможно опубликовать библиотеки
    6. Импорт, экспорт и работа с другими приложениями
      1. Импорт и экспорт в XD
      2. Файлы Photoshop в XD
      3. Файлы Illustrator в XD
      4. Экспорт из XD в After Effects
      5. Файлы Sketch в XD
      6. В разделе экспорта не представлены сторонние приложения

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

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

Если вы используете XD на macOS, вы также можете добавить свои проекты в сторонние среды, например Zeplin, Avocode, Sympli, Kite Compositor и Protopie.

Выбор ресурсов и монтажных областей для экспорта

macOS

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

Windows

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

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

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

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

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

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

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

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

Экспорт в формате PNG

Экспорт в формате PNG
Экспорт в формате PNG

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

  • Предустановленный или стандартный размер экспорта. Выберите один из предустановленных размеров экспорта: 0,5x, 1x, 1,5x, 2x, 3x, 4x. Кроме того, вы можете ввести размер экспорта от 0,1x до 10х.
  • Интернет — ресурсы экспортируются с разрешением 1x и 2x.
  • iOS — ресурсы экспортируются с разрешением 1x, 2x и 3x.
  • Android — ресурсы дизайна оптимизируются и экспортируются для следующих значений плотности экрана Android.
    • ldpi — низкая плотность (75 %)
    • mdpi — средняя плотность (100 %)
    • hdpi — высокая плотность (150 %)
    • xhdpi — сверхвысокая плотность (200 %)
    • xxhdpi — сверхвысокая плотность плюс (300 %)
    • xxxhdpi — сверхвысокая плотность плюс плюс (400 %)

Экспорт в формате SVG

Экспорт в формате SVG
Экспорт в формате SVG

Когда вы экспортируете объекты или монтажные области как SVG, вы можете установить параметры, описанные ниже.

Визуальное оформление

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

Встроенные или связанные изображения

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

Экспорт в формате PDF

Экспорт в формате PDF
Экспорт в формате PDF

Экспортировать ресурсы как файлы PDF можно способами, описанными ниже.

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

Экспорт в формате JPG

Экспорт в формате JPG
Экспорт в формате JPG

Когда вы экспортируете ресурсы как файлы JPG, вы можете установить параметры, описанные ниже.

Качество: 20 %, 40 %, 60 %, 80 % или 100 %.

Размер для экспорта

  • Предустановленный или стандартный размер экспорта. Выберите один из предустановленных размеров экспорта: 0,5x, 1x, 1,5x, 2x, 3x, 4x. Кроме того, вы можете ввести размер экспорта от 0,1x до 10х.
  • Интернет — ресурсы экспортируются с разрешением 1x и 2x.

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

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

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

Ниже представлен шаблон рабочего процесса XD на macOS с Zeplin.

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

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

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

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

    Если у вас возникли проблемы при работе с Zeplin в XD, отметьте  Не удается увидеть поддерживаемое стороннее приложение в параметрах экспорта.

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

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

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

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

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

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

Логотип Adobe

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