Adobe XD

Adobe XD предоставляет возможности для совместной работы команды специалистов.

Используется для разработки дизайна веб-сайтов, мобильных приложений, голосовых интерфейсов, игр и другого.

Рис. 1 Проект Adobe XD 

Особенности Adobe XD

Дизайн удивительных впечатлений

Определяйте внешний вид пользовательских интерфейсов с помощью инструментов векторного рисования, цветов, стилей символов, сеток, направляющих и др.

Совместное редактирование

Adobe XD  поддерживает командную проектную работу в режиме реального времени.

Работайте быстрее в едином документе. Больше не придется дублировать усилия или объединять изменения.

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

Повторяющиеся компоненты

Задавайте элементы дизайна для повторного использования в ваших проектах или совместных проектах группы.

Автоанимация

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

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

Делитесь дизайном с вашей командой, клиентами и заинтересованными сторонами в процессе работы, чтобы презентовать концепцию и получать обратную связь.

Adobe Live

Смотрите, как работают другие дизайнеры, и делитесь лучшими практиками. Найдите вдохновение для ваших собственных проектов.

Возможности

Пакет инструментов для UX/UI дизайна

Создавайте дизайн-проекты и прототипы пользовательских интерфейсов для мобильных и веб-приложений.

Создание дизайна в Adobe XD

• Создавайте эффекты наведения, микровзаимодействия.
• Создавайте повторяющиеся элементы, такие как галереи, списки контактов и многое другое. Используйте объемные изображения и текстовые файлы.
• Сохраняйте часто используемые цвета, стили символов и компоненты, чтобы поддерживать актуальность проектов.
• Настраивайте дизайн для всех экранов с инструментом Responsive Resize. Создавайте и адаптируйте дизайн для настольного ПК, мобильного телефона, планшета. Настраивайте целые артборды или отдельные группы элементов, изменяйте размеры и сохраняйте относительное расположение и масштаб между объектами.
• Создавайте и переопределяйте компоненты из часто используемых элементов для дальнейшей автоматизации их использования в проектах.
• Настраивайте связь между ресурсами для поддержания проектов в актуальном состоянии без необходимости редактирования нескольких источников.
• Синхронизируйте изменения.

Оживляйте дизайны с помощью UnDraw

Бесплатные иллюстрации для использования в веб- или мобильных проектах. unDraw для Adobe XD предлагает сотни дизайнов для личного или коммерческого использования.

Подготовка макета

• Создавайте базовые переходы, перетаскиваемые галереи и даже красивые анимации.
• Создавайте всплывающие меню навигации.
• Задавайте простое взаимодействие, используя триггер перетаскивания и автоанимацию.
• Настраивайте простую анимацию Графиков.
• Создавайте числовые счетчики с автоанимацией.
• Создавайте Меню FAB для скрытия редко используемых пунктов меню.

Импорт ресурсов

Adobe XD позволяет загружать и редактировать материалы:

• Файлы Photoshop, а затем дорабатывать их, используя повторяющиеся сетки, создание прототипов и многое другое.
• Иллюстрации и логотипы из Adobe Illustrator, а также значки или любые другие элементы для использования в ваших проектах UI или UX.
• Файлы эскиза из существующих проектов Sketch.
• Используйте библиотеки Creative Cloud, чтобы хранить ресурсы, быстро редактировать их и синхронизировать.

Связь данных

При внесении изменений в дизайн, автоматически обновляется и прототип, дополнительной синхронизации не требуется.

Редактирование в Adobe Photoshop

Открывайте и редактируйте изображения в Adobe Photoshop прямо из Adobe XD. Щелкните правой кнопкой мыши изображение, откройте и отредактируйте его в Photoshop и нажмите «Сохранить» - ваши изменения будут автоматически обновлены в XD.

Рис. 2 Доработка проекта в Adobe Photoshop

Массивы элементов

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

Инструменты векторного рисования

Adobe XD содержит набор инструментов рисования, набор логических операторов, режимы наложения и другие функции векторного редактирования для создания значков, компонентов и других элементов дизайна.

Интеграция с Adobe Fonts

Шрифты Adobe автоматически активируются при открытии документа XD.

Триггеры

Adobe XD поддерживает задание прототипов под любой тип взаимодействия: от обычных сенсорных жестов на мобильных устройствах до ввода с клавиатуры и переходов на игровые контроллеры.

Предварительный просмотр

Просматривайте свои работы на реальных устройствах с помощью мобильного приложения XD для iOS и Android.

Поддержка всплывающих окон

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

Фиксация позиции при прокрутке

Фиксируйте элементы в определенном положении, чтобы они оставались на месте при прокрутке. Функция часто применяется для фиксирования верхних и нижних колонтитулов.

Экспорт информации

• Быстро пометьте элементы для экспорта, выберите пакетный экспорт для вашей целевой платформы или включите эти элементы в спецификации проекта для загрузки разработчикам.
• Экспортируйте проекты и улучшайте анимацию с помощью Adobe After Effects, ведущего инструмента анимации.
• Экспорт информации программистам позволяет отправлять разработчикам ссылку на спецификации проекта, которая включает последовательность монтажных областей, загружаемые ресурсы, цвета, стили символов, измерения и фрагменты кода CSS, которые разработчики могут скопировать в свою базу.

История документа

Adobe XD автоматически сохраняет проект во время работы, поэтому вы всегда можете вернуться к предыдущим версиям. Отмечайте версии этапов, чтобы сохранить доступ к ключевым этапам процесса проектирования.

Совместная работа

• Пользователь может пригласить редактировать других специалистов для совместной работы над документом. XD предоставляет каждому специалисту доступ к последней версии.
• Частное приглашение заинтересованных лиц помогает граничить доступ к работе. Пользователь может управлять, кто будет просматривать, комментировать прототипы, а кто получит доступ к спецификациям дизайна.
• Перевод проекта в облачный документ помогает быстро поделиться с коллегами информацией. XD автоматически обновляет облачные документы, поэтому все наработки будут гарантированно сохранены.
• Используйте связанные активы. Функция позволяет добавлять цвета, стили символов и компоненты из общих облачных документов на панель «Ресурсы». Когда будут внесены изменения в связанный ресурс, вы получите уведомление и сможете принять обновления.

Библиотеки Creative Cloud

Adobe XD поддерживает доступ и применение растровых изображений, векторной графики, цветов, стилей символов и других ресурсов, созданных в Photoshop, Illustrator и других приложениях Adobe Creative Cloud.

Расширяемая платформа

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

MacOS

Windows