Adobe Experience Design — отличное приложение для UI / UX дизайнеров, среди всех прочих функций, оно предоставляет вам возможности как для разработки дизайна, так и для создания взаимодействия прототипа с переходами между монтажными областями. Вот список моих любимых советов и трюков, которые позволят вам использовать потенциал XD.
Вот 40-минутное видео, которое я сделал, а ниже вы найдете резюме:
#1 — Макеты в Adobe Comp
Вы можете создавать простые макеты и вайрфреймы с помощью мобильного приложения Adobe Comp для iOS и Android. Преимущественно быстрое и интуитивное прототипирование с применением пальца или стилуса с множеством предопределенных жестов. Также легко создать вайрфрейм на встрече с вашим клиентом. Несмотря на то, что Adobe Comp не поддерживает экспорт в Adobe XD, вы можете экспортировать в Illustrator, а затем скопировать и вставить в Adobe XD для редактирования векторных фигур.
#2 — Импорт векторных объектов из Photoshop
Если вы хотите передать растровые изображения между Photoshop и Adobe XD, просто сделайте выделение в Photoshop, а затем нажмите Cmd + Shift + c (скопировать все объединенные копии, которые отображаются при выделении), а затем нажмите Cmd + v в Adobe XD. Однако, вы также можете экспортировать векторные слои из Photoshop, щелкнув правой кнопкой мыши на слой и выбрав “Копировать SVG” и вставить в XD.
#3 — Сдвиг 10 px 👉 сетка 10 px
В Adobe XD вы можете включить сетку для монтажных областей с помощью горячих клавиш Cmd + ‘. По умолчанию сетка имеет значение 8 px, поэтому сдвиг Shift + стрелка влево / вправо не помещается в сетку. Нажмите на название монтажной области, чтобы выбрать её, и измените значение по умолчанию 8px на 10 пиксельную сетку, чтобы соответствовать значению сдвига. Сделайте это по умолчанию для дальнейших проектов.
#4 — С направляющими или без направляющих 🤔
Сейчас в Adobe XD, нет таких направляющих, как в Photoshop, тем не менее умные направляющие появляются при перетаскивании и обеспечивают более удобное позиционирование элементов. Однако иногда такое поведение по умолчанию может привести к нежелательной привязке. Просто нажмите Cmd, а затем перетащите, чтобы временно отключить умные направляющие.
#5 — Руководства по стилю в помощь!
Лучше всего создать отдельную монтажную область для руководства по стилю, в которую вы поместите все атрибуты айдентики, а также цвета бренда, типографику, общие стили и элементы управления, такие как кнопки, ввод данных и общие иконки.
#6 — Текстовый ритм и повторное использование стилей 🔥
Для вертикального текстового ритма, вы можете использовать gridlover.net. Повторное использование текстовых стилей в Adobe XD работает следующим образом: Выберите текстовую область, которую вы хотите использовать в качестве эталона для стилей в следующей текстовой области, затем создайте новую, и стили будут наследоваться.
#7 — Сладкий 🍭 трюк с размером шрифта
Вы можете увеличить и уменьшить размер шрифта, перетащив маленький овал в нижнем контуре текста. У текстового поля есть точка набора, это означает, что оно может быть создано одним щелчком мыши, а не перетаскиванием текстового поля.
#8 — Текстовые подстили
Каждое текстовое поле может содержать подстили с различными свойствами текста, такими как цвет и вес.
#9 — Создание текстовой области во время вставки
Скопируйте любой текст и вставьте его непосредственно в Adobe XD, и текстовое поле будет создано автоматически.
#10 — Сброс высоты строки с помощью 0
После экспериментирования с высотой строки шрифта, вы возможно захотите сбросить её до значения по умолчанию. Нет необходимости угадывать его — просто введите 0 в строку высоты линии (line height) и оно сбросится.
#11 — Смещение цветовых значений
Используйте Shift + стрелка влево / вправо, чтобы управлять значениями исходных данных, таких как альфа-канал или цвет.
#12 — Цветовые значения #HEX 👨🏼👨🏾👨🏿
В диалоговом окне выбора цвета используйте шестнадцатеричные (HEX) значения для точного соответствия цвету. Вы можете ввести одну букву / номер, например: #f, чтобы получить результат #ffffff или использовать комбинации 2- или 3- буквы / числа для разных результатов.
#13 — Простые иконки в XD
Иногда проще и быстрее, использовать инструменты по умолчанию в Adobe XD, такие как формы и перо, а также логические операции с формами, чтобы нарисовать простые иконки.
#14 — Преобразование текста в фигуры
Чтобы преобразовать текст в фигуры, а затем редактировать векторные точки каждой буквы, используйте горячие клавиши Cmd + 8.
#15 — Копирование и маскировка изображений
Вы можете перетаскивать и бросать изображения прямо на холст Adobe XD, из Finder или даже с веб-сайта. Кроме того, вы можете бросить изображение на любую фигуру, чтобы заполнить её. В некоторых случаях вы можете предпочесть замаскировать часть изображения. Помните, что маска применяется из слоя, который находится сверху, и не воздействует деструктивно на изображение.
#16 — Повтор сетки 💫
Используйте опцию повтор сетки (Repeat Grid, клавиши Ctrl + r), чтобы размножить одну группу или слой. Затем растягивайте регулятор горизонтально или вертикально, чтобы сделать копии. Вы можете отрегулировать внешние отступы, наведя курсор мыши между копиями.
#17 — Неочевидный повтор сетки
Иногда вы можете использовать опцию повтора сетки для таких операций, как создание иконок. Помните, что вы также можете установить отрицательные значения внешних отступов на непрозрачных фигурах, чтобы получить сложные узоры.
#18 — Сгенерированный текст
Adobe XD может считывать, разделенный возвратом текст из .txt файла, который вы можете бросить прямо на текстовое поле. Лучше всего работает при использовании фиктивного или реального текста для элементов повторяющейся сетки.
#19 — Избавление от повтора сетки
Иногда работа с повтором сетки (Repeat Grid) может оказаться не оптимальным решением. Бывают случаи, когда вы хотите использовать сетку для копирования и удаления элементов, в этом случае нажмите клавиши Cmd + Shift + g для её дальнейшего редактирования.
#20 — Переопределение символа 💥
Символы — это элементы многократного использования в Adobe XD. Вы можете использовать множество экземпляров объекта. Например возьмите кнопку, затем измените один экземпляр, и все остальные кнопки в макетах будут соответствующим образом обновлены. Лучше всего использовать символы в своих руководствах по стилю.
#21 — Трюк со скруглением рамок
Отрегулируйте свойство border-radius, перетащив маленькие точки вблизи углов формы. Нажмите и удерживайте Alt, чтобы отрегулировать скругление только одного угла.
#22 — Блокировка против скрытия слоя
Заблокированный слой нельзя изменить, но его всё ещё можно выбрать, скрытый слой может работать лучше, если вы хотите выбрать нижние слои. Временно скройте слой для реорганизации и работы над слоями, которые находятся внизу.
#23 — Прозрачность и номера 🕶
Используйте числа на клавиатуре, чтобы отрегулировать прозрачность. Или нажмите например, 5 для 50%, или 4, а затем 7 для 47%.
#24 — Переименование слоев
Дважды щелкните по имени слоя, чтобы переименовать его. Нажмите Tab, чтобы перейти к следующему слою, не выходя из режима редактирования. Нажмите Shift + Tab, чтобы подняться вверх.
#25 — Логические операции 👉 с контурами
Если вы хотите иметь точный контроль над каждой векторной точкой, после некоторых логических операций с формой, расширьте их с помощью клавиш Cmd + 8.
#26 —Проникните внутрь группы
Нажмите и удерживайте Cmd + щелкните по слою внутри группы, чтобы выбрать его напрямую.
#27 — Предварительный просмотр на устройстве
Установите бесплатное iOS приложение и подключите устройство через USB, чтобы получить мгновенный предварительный просмотр своей работы. Это лучший способ узнать, правильно ли установлены цвета или размеры шрифта.
#28 — Создание значимых переходов
В Adobe XD вы можете работать над дизайном и впоследствии создавать кликабельный прототип с переходами между монтажными областями. Переключайтесь между режимами Design и Prototype, с помощью горячих клавиш Ctrl + Tab.
#29 — Использование комплектов UI
Вы можете получить доступ к комплектам пользовательских интерфейсов iOS, Material и Windows прямо из меню File > UI Kits в Adobe XD.
#30 — Делиться прототипами и оставлять комментарии
Вы можете получать мгновенную обратную связь от других участников проекта, делясь своими прототипами — просто получите ссылку и отправьте её вашим товарищам по команде, или используйте код для встраивания (Embed Code) живого прототипа на UpLabs, Dribble, Behance или на своём персональном сайте. Пользователи, которые получают ссылку могут оставлять комментарии и прикреплять их к точному месту на прототипе.
Это все. Оставляйте свои комментарии. Надеюсь, вы научились чему-то полезному 😉 Если это так — пожалуйста, подпишитесь на рассылку новых полезных статей и лучших ресурсов для Adobe XD.
