Как создать маску в adobe xd – Adobe XD – 30 Советов и трюков, которые вы хотели бы знать раньше! — XD KIT

Уроки Adobe XD. Начало работы с Adobe Experience Design

Если вы взгляните на Adobe Experience Design (Adobe XD), приложение от Adobe Creative Cloud, вы быстро осознаете, что это радуга, которая выходит из единорога для веб дизайнеров. Но вы ошибаетесь… Это даже лучше!

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

…

Создайте ваш первый дизайн проект в Adobe XD

Сразу после открытия Adobe XD, вы увидите большой набор опций для создания дизайна под мобильные, десктоп устройства, планшеты и возможность создания проектов для кастомных размеров. Или вы можете кликнуть на “начать с файла-примера” (эти виды файлов мы будем использовать во второй части статьи, когда я расскажу про режим прототипирования). Давайте начнем с создания рабочей области для iPhone 6. первое, что вы должны сделать – это назвать рабочую область. Например, “Home”. Двойной клик на имени рабочей области для изменения имени.

Создание нового проекта в Adobe XD

Изменение фона рабочей области

После выбора рабочей области, вы увидите панель свойств в правой части окна. Нажмите “Fill” под “Appearance” и изменяйте цвет фона вашей рабочей области.

Изменение цвета фона рабочей области

Создание шапки экрана

Для шапки мы будем использовать изображение и текст. Перейдите по File > Import для импорта изображения или перетяните его на рабочую область. Далее, мы используем инструмент “Текст” (горячая клавиша T) и вводим текст. Вы можете изменять свойства текста (размер шрифта, начертание, кернинг) в свойствах на панеле справа.

Совет: Вы можете использовать UI kits Apple iOS, Google Material and Microsoft Windows при помощи File > Open UI Kit и выбирать все, что вам нравится. Я буду использовать Apple UI kit для вставки строк статуса в дизайн.

Создание шапки с изображением и текстом

Добавление области контента

Добавьте область контента под шапку выбрав инструмент “прямоугольник” (горячая клавиша R). Как обычно, вы можете изменять свойства на панеле справа. Вы можете изменять область контента и вставить изображение и текст, как показано в предыдущем шаге.

Создание области контента

Дублирование сетки (один из моих любимых инструментов!)

Для дублирование области контента, используйте инструмент Repeat Grid. Выберите необходимые для копирования элементы зажав Shift. Выберите область контента, изображение и текстовые элементы. Затем нажмите кнопку Repeat Grid на панеле свойств. Теперь, ваша область имеет зеленую границу и два маркера, которые вы можете использовать для дублирование контента по-горизонтали или по-вертикали.

Совет: Вы можете выбрать разные изображения и перетянуть их на дублированное изображение. Прежнее изображение будет заменено на выбранное вами. Теперь вы можете изменить текст для каждой области индивидуально, но помните, что при изменении стиля элемента, он будет применен ко всем остальным областям!

Использование дублирование сетки в Adobe XD

Создавайте больше рабочих областей для вашего проекта

После создания дизайна “Home”, вы можете добавить рабочие области в ваш проект (другие шаги, например). Горячая клавиша “A”, откроет инструмент Artboard, в котором вы сможете выбрать размер вашей новой области справа в приложении. Кликните рядом с вашей первой работой и появится новая рабочая область.

Создание рабочих областей в Adobe XD

Изучение в процессе

Теперь вы можете попробовать то, что я описал выше и создать больше крутых рабочих областей для вашего дизайна!

Проект в Adobe XD

…

Прототипирование: Мы разберем прототипирование во второй части нашего гайда.

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

…

Жду ваших отзывов об этой статье по работе с Adobe XD. Задавайте вопросы. Подписывайтесь на меня в Twitter.

Все изображения взяты с моего проекта на сайте www.unsplash.com.

8 лайфхаков, которые упростят вам работу в Adobe XD

«Будущее UX-дизайна» — такой слоган имеет относительно новый продукт компании Adobe Systems — Adobe Experience Design. Как заявляют разработчики продукт разработан для создания и прототипирования макетов сайтов и мобильных приложений. Главным преимуществом нового продукта, по мнению создателей, является возможность редактирования макетов из Photoshop или Sketch, которые будут автоматически преобразованы в XD файлы. Переходите от концепции к прототипу с помощью универсального UX / UI-решения легко и быстро.

Сегодня мы познакомим вас с хитростями программы, которые помогут сэкономить время на освоении программы.

Наследование текста

При работе с инструментов «Текст», по умолчанию установлен стандартный стиль текста. Просто перетащите текстовый объект в область ввода текста. Текст, который вы напечатаете далее унаследует копируемый, как шрифтом так, размером так и интервалами.

Смыкание кривой

Сомкнуть кривую в Adobe XD можно просто нажав на начальную точку, либо поставить точку в любом месте, при нажатом инструменте «Перо».

Преобразование объектов в кривую

Если вам еще сложно создавать с нуля иконки, вы можете начать с несложных фигур, которые можно преобразовать в кривую. Например прямоугольник или круг. Для преобразования просто кликните дважды по фигуре. И если никаких изменений вы не внесете, она снова приобретет первоначальный вид. Если изменений не предполагается, а объект должен стать кривой линией – используйте горячие клавиши Cmd+8 на Mac или Ctrl+8 на Windows. Если вы находитесь на границе фигуры, инструмент поменяется на «Перо», чтобы добавить точку на линии. Существует возможность разорвать фигуру. Для этого выбирайте инструмент «Перо» и нажимайте на начальную точку.

Для перемещения пользуемся «Рукой»

Чтобы поменять текущий инструмент на «Руку» просто зажмите клавишу Space. После этого, зажмите левую кнопку мыши и перетащите объект в нужное место.

Горячие клавиши для выбора цвета

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

• Одиночные символы (например, a) повторяются для всех значений (#aaaaaa)
• Двойные символы (например, az) повторяются по порядку (#azazaz)
• Тройные символы (например, 123) каждый символ повторяется по порядку (#112233)

Копировать/Вставить

Чем отличается функция «Создать дубликат», от функций «Копировать» и «Вставить». Объясняем. При дублировании объект перемещается на тот же уровень про Z-координате. В другом случае переместит его вверх.

Экспорт исходников

Это является значимой частью работы любого дизайнера, особенно при передаче на верстку. По умолчанию программа будет экспортировать с различным разрешением, в зависимости от платформы. Например, если вы экспортируете для iOS, вам понадобятся 1x, 2x, и 3x версии ресурсов. Если вы создаете иконку в разрешении 100 x 100 и установите «designed at 1x», мы будем экспортировать версии 100 x 100, 200 x 200 и 300 x 300 для полного набора. Однако, если вы создадите иконку в разрешении 90 x 90 и установите «designed at 3x,» мы будем экспортировать в 30 x 30, 60 x 60, и 90 x 90 для создания 1x, 2x, и 3x версий.

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

Несколько хороших советов при работе с редактированием контекста:

• Прямое выделение встроено в инструмент выделения. Чтобы его выбрать нажмите Cmd (Mac) или Ctrl (Windows 10) чтобы выбрать объект, вне зависимости от того, как глубоко от вложен;
• Открытие контекста возможно прямо в группе, двойным щелчком по любому объекту. Внутри редактирования контекста, можно использовать все объекты в нем (выделять и выравнивать по отношению друг к другу).
• После редактирование, просто нажмите Escape, чтобы выйти из него.

Хотите больше секретов, лайфхаков и хитростей? Делайте репосты и пишите в комментариях какую тему вы хотите, чтобы я подробно описал в следующих статьях.

Тестируем Auto-Animate от Adobe XD

На ежегодном мероприятии Adobe Max 2018, прошедшем в октябре, Adobe анонсировала обновленную версию Adobe XD и представила новую функцию автоматической анимации Auto-Animate.

Вот как это описывает Adobe: Adobe XD эволюционировал и представил различные опции для создания прототипов, такие как Время (Time), Тап (Tap), Перетаскивание (Drag) и Голос (Voice). Дизайнеры могут использовать автоматическую анимацию в сочетании с жестами перетаскивания, чтобы создавать микровзаимодействия между артбордами для получения богатых возможностей прототипов. Например, анимации каруселей, карточек и списков или индикаторов прогресса. Обманчиво простая в использовании, функция auto-animate создает потрясающие эффекты и переходы, которые помогут вам передать анимированный опыт конечного пользователя. Жесты перетаскивания в XD продвигает функцию auto-animate на шаг вперед, позволяя имитировать опыт перетаскивания на устройствах с сенсорным экраном.

Я решил провести тест-драйв этой новой функции и провел несколько экспериментов. Это чисто эксперименты с интерфейсом, проверяющие функцию автоматической анимации, поэтому, пожалуйста, не судите о юзабилити этих концептов ;).

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

Ниже представлены результаты и извлеченные уроки…

1. Карусель ленты активности

Используя некоторые из моих статей на Medium, я создал эту карусель с параллакс-эффектом изображений, используя функции auto-animate и перетаскивания Adobe XD #MadeWithAdobeXD

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

Мои настройки Adobe XD:

Моя настройка функции автоматической анимации артборда

2. Apple Music — Темный режим

Создано в Adobe XD при помощи автоматической анимации перетаскивания, и регулирования времени перехода. #MadeWithAdobeXD

Я играл с приложением «Музыка» на своем iPhone, переключая различные режимы, и задался вопросом, смогу ли я сделать это в Adobe XD. Я запустил XD и был поражен тем, как легко это мне удалось. Позже я сделал темный режим, потому что мне было интересно, как бы выглядела темная тема приложения «Музыка».

Мои настройки Adobe XD:

Мои настройки auto-animation артборда в двух разных визуальных исполнениях

3. Анимированные гистограммы

#MadeWithAdobeXD

Нюанс Adobe XD заключается в том, что он не переключается между цветами, а переключается на новый цвет, прежде чем анимировать до следующего состояния. Чтобы вышеуказанный переход цвета фона имел эффект затухания, мне пришлось создать фоновые блоки и уменьшить их непрозрачность до 0% или увеличить до 100%, чтобы создать переходы затухания фона.

Мои настройки Adobe XD:

4. 3D карусель

Карусель изображений Unsplash использует 3D параллакс-эффект. Она полностью анимирована при помощи новой функции Adobe XD auto-animate #MadeWithAdobeXD

Несмотря на простоту, было немного утомительно настраивать карусель. Я настроил разные карточки изображений, масштабируя их до разных размеров в z-index и регулируя их непрозрачность. Нажатие на стрелки делает переход между этими состояниями, создавая иллюзию 3D глубины. Все изображения были взяты с Unsplash, а фотографы указаны в прототипе.

Вначале я создал простой обучающий переход с инструкцией «Нажимайте стрелки для навигации», чтобы помочь объяснить интерфейс.

Мои настройки Adobe XD:

Простое обучениеИнтерактивная настройка артборда

5. Эффект слайдера

Слайдер, используемый для параллельного сравнения черно-белого и оригинального изображения, созданный в Adobe XD с помощью перетаскивания и автоматической анимации. #MadeWithAdobeXD

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

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

Мои настройки Adobe XD:

Настройка последовательности загрузки с использованием временного перехода между артбордамиСлайдер настройки артборда

6. Концепт папки «Входящие»

Концепт прототипа папки «Входящие» с использованием функции auto-animate Adobe XD. #MadeWithAdobeXD

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

Мои настройки Adobe XD:

7. Свайп, чтобы удалить

#MadeWithAdobeXD

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

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

Мои настройки Adobe XD:

8. Последовательность загрузки

Полоса загрузки. #MadeWithAdobeXD

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

Графики были анимированы с непрозрачностью от 0% до 100%, а числа графиков на вертикальной оси были показаны с использованием маски и изменения положения списка чисел.

Мои настройки Adobe XD:

9. Слайдер День/Ночь

#MadeWithAdobeXD

Переход Солнца в Луну был создан при помощи пересечения двух кругов. Линии вокруг Солнца переходят от коротких точек к линиям, а фон просто постепенно исчезает и появляется.

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

Мои настройки Adobe XD:

Настройка перехода солнца и луныЧтобы артборды составляли эту последовательность

10. Строим из LEGO

Я создал этого маленького LEGO-человечка в Adobe XD используя функции auto animate и перетаскивание #MadeWithAdobeXD

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

Мои настройки Adobe XD:

11. Credit Card Wallet

Создано и анимировано в Adobe XD. #MadeWithAdobeXD

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

Я также хотел раскрыть немного деталей о каждой карте, поэтому, после нажатия на нее, я настроил еще один переход с использованием auto-animate, чтобы детали появлялись под картой. Остальная часть прототипа просто должна была быть подключена, чтобы позволить выбрать карту из любого состояния артборда.

Мои настройки Adobe XD:

12. Выбор радиочастоты

Использование функций перетаскивания и auto-animate в Adobe XD. #MadeWithAdobeXd

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

Мои настройки Adobe XD:

13. Параллакс-скроллинг

Простой параллакс-эффект, созданный с использованием функций автоматической анимации и перетаскивания в Adobe XD. #MadeWithAdobeXD

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

Мои настройки Adobe XD:

14. Эмодзи реакции

Я перерисовал эти эмодзи, чтобы оживить различные элементы, например, глаза и рот. Я копировал и вставлял различные элементы между артбордами, меняя их положение и непрозрачность, чтобы позволить auto-animate творить свою магию.

Затем артборды были подключены с использованием события касания (tap event) и временных переходов (timed-transitions).

Мои настройки Adobe XD:

15. Потяните, чтобы обновить

#MadeWithAdobeXD

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

Затем капля воды переходит в каркас круга в элементе списка, когда открывается следующий элемент списка.

Мои настройки Adobe XD:

Фоновые круги используют большую площадь в повторяющейся сетке и расположены со смещением между артбордами

16. Слайдер в форме волны

#MadeWithAdobeXD

Я создал волну, изменив положение плоских волн на разных слоях. Волновые линии имеют разную длину, что позволяет каждой волне перемещаться с разной скоростью во время перехода.

Затем я использовал функцию перетаскивания на слайдере в сочетании с автоматической анимацией для перемещения между двумя состояниями артборда.

Мои настройки Adobe XD:

Скачайте файлы проектов автора

https://www.dropbox.com/s/77ticrpsindrxks/AdobeXD-Auto-Animate.xd?dl=0

Оставляйте комментарии и делитесь статьей с коллегами.

Узнайте больше

Чтобы узнать больше о функции auto-animate, посмотрите это видео от Adobe.

Как создать UI-прототип мобильного приложения в Adobe XD

Исторически в Adobe Creative Cloud отсутствовал инструмент для дизайнеров, который позволял бы быстро и качественно создавать макеты прототипов или получать фидбек от команды перед созданием финальной версии UI-дизайна. Этот пробел недавно был восполнен выходом Adobe Experience Design CC (Adobe XD). Приложение сначала было представлено как “Project Comet” во время Adobe MAX 2015, и теперь доступно для скачивания в бета-версии из Adobe Creative Cloud. Это десктопное приложение, которое позволяет дизайнерам прототипировать интерфейсы для веба, мобильных устройств и планшетов. Рассмотрим его возможности!

Знакомство с Adobe XD

У Adobe XD поразительно простой, но удобный интерфейс; стиль не отличается других приложений в пакете Creative Cloud. В нем собраны инструменты для прототипирования под разные платформы, включая веб, мобильные устройства, планшеты и др.

При запуске приложения на приветственном экране вы увидите массу шаблонов со стандартными размерами экрана и возможностью добавить свой кастомный размер документа. Вдобавок здесь есть доступ к ряду исходников, которые можно использовать на старте для изучения возможностей инструмента, а также элементы UI-дизайна для разных мобильных устройств, таких как iOS и Android, доступ к онлайн-урокам и прочему.

Приветственный экран Adobe XD

Рабочая область Adobe XD поделена на две части – Design и Prototype, к ним можно получить доступ с правой стороны окна. В разделе Design дизайнеры могут использовать набор инструментов и опций для дизайна элементов макета, добавления артбордов для представления страниц макетов, импорта ресурсов из других приложений, включая Adobe Illustrator и Adobe Photoshop.

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

Второй раздел Adobe XD называется Prototype, и здесь вы можете линковать между собой артборды (страницы) и определять связи между ними посредством взаимодействий. Как только проект завершен, дизайнеры могут просмотреть прототип, кликнув на иконку preview в верхнем правом углу, или поделиться им с командой через веб-ссылку. Дизайнеры могут также сохранять разные экраны в растровых и векторных форматах.

Урок по работе в Adobe XD

После знакомства с базовой анатомией интерфейса Adobe XD, следующий пример демонстрирует пошаговый процесс создания первого UI-прототипа в Adobe XD. Мы создаем прототип для экрана iPhone 6. Вы можете скачать исходники из Github-репозитория. Или же скачайте изображения прямо из Pixapay:

Первая часть этого урока посвящена созданию макета в разделе Design.

1. Создайте проект прототипа

Откройте Adobe XD, в приветственном окне выберите размер iPhone 6 (375 × 667px). Затем кликните на иконку iPhone и создайте проект. Из Apple iOS вы можете взять элементы iPhone UI для использования в прототипе. Как только создан артборд, дважды кликните на его название, измените на “Home”.

Приветственный экран Adobe XD

2. Создайте фон прототипа

Кликните на артборд, чтобы отобразить его свойства в панели Properties с правой стороны окна приложения, и кликните на цвет Fill, чтобы открыть селектор цвета. Выберите темно-серый оттенок и закройте диалоговое окно.

Задайте темно-серый цвет фона

3. Настройка шапки экрана

Перейдите в меню File > Import. В браузере файлов перейдите к изображению шапки и нажмите Import. Задайте нужный размер, чтобы он подходил размеру экрана. Можете дважды кликнуть на изображении, чтобы активировать crop (кадрирование).

Выберите инструмент Text в панели Tools, кликните на области шапки и введите “Nature”. Дважды кликните на тексте и из панели Properties справа выберите “Helvetica”, жирность “bold” и размер “32”. Дважды кликните на цвете заливки Fill и выберите темно-серый.

4. Фон области контента

Выберите инструмент Rectangle из панели Tools справа и нарисуйте прямоугольник под шапкой. В панели Properties справа выберите темно-серый цвет для заливки (Fill) и снимите галочку с опции Border, чтобы убрать контур.

Создание фона для области контента

5. Добавление контента

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

Добавление контента под шапку страницы

6. Создание контентной сетки

Одним из наиболее полезных инструментов в Adobe XD является создание сетки существующего контента без ручного дублирования. Нажмите Shift на клавиатуре и выберите картинку, фон контента и текст. Затем кликните на кнопку Repeat Grid в панели Properties. Это преобразует созданный контент в сетку.

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

7. Создание новой страницы (Артборд)

Чтобы создать новую страницу макета, нажмите на инструмент Artboard в панели инструментов слева. Затем выберите шаблон iPhone 6 справа, чтобы создать новую страницу.

Создайте новый артборд

8. Создание дополнительных страниц

Повторите вышеописанные шаги, чтобы создать новые страницы и добавить на них контент, как показано выше. Финальный вид макета должен быть примерно как на скриншоте ниже:

Финальный прототип макета UI-дизайна

Когда макет дизайна готов, переходим в раздел Prototype, чтобы перелинковать созданные страницы между собой.

9. Настройка домашней страницы проекта

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

Задание домашней страницы проекта

10. Построение связей между страницами

Чтобы перелинковать страницы, выделите домашнюю страницу, нажмите на стрелку с правой стороны. Появится плавающее меню Target; выделите следующую страницу, задайте тип анимации перехода (например, “Dissolve”). Повторите этот шаг, чтобы перелинковать другие страницы.

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

11. Создание взаимодействий

В этом прототипе первый блок контента на домашней странице должен вести к первому артборду контента, а второй блок контента – ко второму артборду… и т.д. Выделите первый блок контента, кликните на правой синей стрелке, чтобы настроить цель так же, как мы делали в шаге 10. Повторите этот же шаг со вторым блоком контента.

Добавление взаимодействия с контентом

После создания прототипа есть два метода его предпросмотра. Можете воспользоваться опцией Preview в самом Adobe XD, а также прототип можно сделать доступным по веб-ссылке, чтобы можно было показать его своей команде.

12. Превью прототипа

Нажмите на иконку Preview в правом верхнем углу приложения. Отобразится экран превью, который позволяет просматривать и передвигаться по разным страницам. Вдобавок, есть иконка Record, которая позволяет записывать сценарий по мере передвижения по страницам и сохранять их в формат Quicktime (MOV).

Превью прототипа в Adobe XD

13. Как поделиться прототипом с другими

Мы подошли к завершению! Теперь нужно только показать документ членам команды и клиентам, без необходимости доступа к XD. Кликните на кнопку Share в верхнем правом углу приложения; появится плавающее меню, которое покажет URL – ее можно скопировать и отослать членам команды:

URL прототипа

В заключение

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

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

10 плагинов Adobe XD, которые необходимо испытать

Первая волна плагинов Adobe XD, которая изменила правила игры для пользователей была выпущена в октябре 2018 года . Как только в августе 2019 года платформа была объявлена открытой, многие крупные компании, такие как Dribbble, Airtable и Stark, адаптировали свои инструменты и сервисы непосредственно в XD, а уже чуть позднее появились новые плагины от Trello, Google Cloud, UserTesting.com и т.д.

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

Чтобы улучшить ваш рабочий процесс, мы подобрали самые лучшие плагины для Adobe XD.

Что на самом деле делает Adobe XD?

Adobe XD – это мощный инструмент проектирования, который позволяет дизайнерам разрабатывать, анимировать, создавать прототипы и делиться своими проектами в одном приложении. Он получил широкое распространение благодаря своей непревзойденной производительности как на Mac, так и на Windows. Он также является частью Creative Cloud, это означает, что Adobe XD действительно хорошо взаимодействует с другими продуктами Adobe, такими как Photoshop, Illustrator и After Effects, и даже может открывать файлы из программного обеспечения конкурента Sketch, сохраняя при этом оригинальные элементы.

Итак, давайте приступим к обзору лучших плагинов Adobe XD.

UI Faces позволяет дизайнерам выбирать атрибуты и находить нужные грани для макетов

Поиск фотографий людей для ваших проектов может занять у вас много времени. UI Faces объединяет фотографии (аватары пользователей) и помечает их атрибутами, связанными с возрастом, полом, эмоциями и цветом волос, чтобы поиск нужного изображения происходил как можно быстрее и проще. Этот плагин Adobe XD позволяет дизайнерам выбирать параметры этих атрибутов и заполнять любую выбранную фигуру одним щелчком мыши.

Color Ranger улучшает цвета в дизайне

Color Ranger позволяет дизайнерам легко улучшать цвета в дизайне. Больше не нужно редактировать каждый элемент в Photoshop, независимо от настройки яркости, насыщенности, оттенка, глубины цвета или непрозрачности отдельных элементов или целых монтажных областей. Color Ranger также позволяет сохранять пресеты и управлять ими, а это значит, что создание тем или редактирование наборов пользовательского интерфейса можно выполнить всего одним щелчком мыши.

Stark – это инклюзивный плагин, который проверяет контраст и моделирует формы дальтонизма

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

Мы тратим очень много времени на организацию и переименование слоев и артбордов. Rename позволяет очень легко и быстро переименовать все слои последовательно, в порядке возрастания или убывания, а также изменять регистр имени слоя. Также, с помощью простых сочетаний клавиш можно находить и заменять слова или символы.

Редактирование заглавных букв в тексте с помощью Change Case

Change Case – это действительно простой, но мощный плагин, который позволяет пользователям изменять капитализацию текста в XD. Кажется, что функции данного плагина так не значительны, но в действительности он экономит очень много времени.

Импорт актуальной копии из Google Sheets в Adobe XD

Ввод и разметка шрифта должно быть одна из самых сложных задач для дизайнеров. Это приводит к тому, что либо одни и те же элементы копируются и вставляются по нескольку раз, либо во всем проекте используется lorem ipsum. К сожалению, lorem ipsum плохо тестирует свои продукты перед выпуском и это часто приводит к тому, что пользователи отвлекаются и обращают внимание на ошибки. Плагин Google Sheets позволяет импортировать фактическую копию в документ Adobe XD из документа Google Sheets. Даже если содержание в документе Google Sheets изменяется, вы все равно можете обновить копию в своем документе .

Делитесь арт досками с командой, не выходя из Adobe XD

Trello – это продуктивная платформа, которая позволяет пользователям и целым командам организовывать продуктивную совместную работу. С помощью плагина Trello дизайнеры могут без труда отправлять свои работы XD, что позволяет им обмениваться арт бордами с командой, не покидая Adobe XD.

Без проблем делитесь своими работами благодаря Angle

Время от времени дизайнеру необходимо делиться своей работой в виде презентации. Ухудшение качества в статических экранах сильно подводит дизайнеров. Все знакомы с этим рабочим процессом: откройте макет в Photoshop и экспортируйте туда дизайн. Angle позволяет делать то же самое, не выходя из Adobe XD. Благодаря этому плагину требуется гораздо меньше времени, чтобы добавить что-то более совершенное в презентацию или загрузить шот в Dribbble.

Icondrop предоставляет вам доступ к иконкам, иллюстрациям и изображениям

Icondrop делает доступными миллионы дизайнерских ресурсов, с помощью одного щелчка мыши – предоставляя доступ к иконкам, иллюстрациям и фотографиям, и для этого не нужно покидать Adobe XD. Благодаря простой функции поиска и легкому доступу к предыдущим загрузкам, вскоре Icondrop позволит создавать макеты на лету.

Web Export – отличный способ обмена файлами и спецификациями дизайна с разработчиками.

Для дизайнеров, которые не очень хорошо знакомы с программированием, Adobe XD предлагает отличный способ обмена файлами и спецификациями дизайна с разработчиками, чтобы они могли видеть ключевые атрибуты элементов в документе. Однако для дизайнеров, которые работают над личным проектом и не имеют доступа к разработчикам, Web Export может незаменимым. Этот плагин позволяет экспортировать HTML и CSS из ваших файлов XD, а также предлагает вложенные макеты, центрированные ограничения и возможность добавлять дополнительные стили, атрибуты и разметку.

2 простых шага для экспорта объектов из Adobe XD

Экспорт объектов из Adobe XD

Я был приятно удивлен, когда впервые попробовал Adobe XD. Для дизайнера, который до сих пор использует Photoshop для UI дизайна и никогда не пробовал Sketch – это просто глоток свежего воздуха.

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

Но вот, какой вопрос мучил меня с самого начала. И этот вопрос на самом деле является очень болезненным и знакомым: Как экспортировать объекты для передачи их разработчику? Вот истинная причина, почему я не использую Sketch в работе. Дело в том, что большинство разработчиков, с которыми я сталкиваюсь, ожидают получить именно PSD файл.

И вот, что я сделал:

Создал артборд для каждой иконки/объекта и отключил заливку фона так, чтобы все элементы были на прозрачном фоне. Если вы используете шрифт иконок, убедитесь, что он у вас переведен в векторный формат: Выберите все иконки и перейдите по Object / Path / Convert to Path

Шаг 1: Создание артбордов

Теперь переходим к File / Export и экспортируем все артборды в PNG (1x, 2x, 3x) или в SVG формате. Таким образом, у вас каждый объект будет отдельным файлом к большой радости разработчика.

Шаг 2: Экспорт артбордовЭкспортированные объекты в PNG (1x, 2x, 3x)Экспортированные объекты в SVG

Также вы можете экспортировать один объект. Выберите его и  снова перейдите по File / Export и вам будет экспортирован только один объект

Правда я заметил одну проблему: при экспорте к SVG файлу добавляется квадратный фон (хотя я удаляю заливку фона). Надеюсь, что это баг и Adobe его скоро пофиксит.

Баг при экспорте в SVG

Спасибо за внимание, надеюсь моя статья вам поможет. Кстати, я – фриланс UX/UI дизайнер. Оцените мои работы на Product Hunt и следите за моими обновлениями в Twitter @mightyalex.