Изучаем Adobe XD. Часть 1

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

Как создать проект в Аdobe XD.

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

Аdobe XD

Чтобы изменить фон рабочей области, справа на панели свойств нажимаем «Fill».

Adobe XD

«Свяжу шапку» экрана.

В шапке проекта мы будем использовать текст и изображение. Чтобы вставить необходимое изображение в меню File нажимаем Import, и выбираем в окне нужное изображение. Если проще можно просто перетянуть нужную картинку на рабочую область.
Чтобы добавить текст нажимаем горячую клавишу Т, или выбираем инструмент «Текст». Изменить параметры текста (шрифт, размер) можно на панели справа.

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

Adobe XD

Как добавить область контента.

В область под шапкой профиля добавляем область будущего контента (для этого нажимаем горячую клавишу R, или выбираем инструмент прямоугольник на панели). По сложившейся традиции меняем нужные нам настройки на панели справа.

Adobe XD

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

Чтобы продублировать область контента, понадобится инструмент Repeat Grid. Копируем нужные элементы и зажимаем Shift. После копирования нажимаем вышеуказанный инструмент на панели свойств.Теперь выделенная область приобрела зеленые границы и маркеры, по которым можно дублировать область вверх/вниз влево/вправо.

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

Adobe XD

Создайте несколько артбордов в вашем проекте

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

Adobe XD

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

Пробуйте и создавайте больше крутых областей для вашего дизайна!

Adode XD

 

Обсуждение закрыто.