Работа с Adobe XD

Особенности Adobe XD и инструкции по работе в этой программе от нашего дизайнера.

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

Adobe XD – одна из популярных бесплатных программ для проектирования UI/UX и создания прототипов для мобильного дизайна. Интуитивно-понятный интерфейс, весь нужный набор инструментов, Adobe Creative Cloud.

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

Adobe XD initial window
Adobe XD tutorial workspace

Руководство расскажет об основных инструментах и прототипах. После изучения появляется вопрос:

"Вау! Почему я не познакомился с этой программой раньше?"

1. Превью

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

Preview window for Campvives app

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

2. Артборды

Выбрав инструмент артборды (Клавиша “A”) можно создать рабочее поле вручную или выбрать один из размеров в панели справа, что очень удобно.

Adobe XD Design workspace. Artboard tool options

Опции программы позволяют легко перемещать, переименовывать и копировать артборды.

Color palette menu, from the Appearance options

3. Сетки

Layout and Grid visualization

4. Направляющие

Эта опция появилась совсем недавно и сделала работу еще удобнее. Направляющие можно копировать и вставить на другой артборд.

Работа с направляющими

5. Изображения

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

Masking images and editing shapes

6. Repeat Grid

Этот инструмент позволяет копировать повторяющиеся элементы. Такие, как записи в блоге, меню, списки.

Extending grid

Прототипы

В XD есть режим прототипирования.

Каждый объект может быть связан с другим экраном или элементом экрана. Интерфейс прототипирования позволяет создавать несложные анимации графика или счетчика.

Открытие поста
Overlay menu connection and preview

Другие возможности

Adobe XD дает возможности на экспорт из Adobe Photoshop и Illustrator. Вы можете поделиться своим дизайном с командой, сохранить его как .png или .svg изображение.

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

Поделиться:

Теги:

    Сделаем это вместе -
    У вашего бизнеса есть история

    Заказ обратного звонка

    Мы перезвоним вам в течение часа или в удобное для вас время

    Live Chat
    ×