Adobe XD - 30 порад та підказок, про які ви хотіли б знати раніше!

Грег Рог

19 липня 2017 · 8 хв читання

Adobe Experience Design - чудовий додаток для дизайнерів UI/UX - серед усіх інших функцій він дає можливість як проектувати, так і взаємодіяти прототипи та переходи між монтажними областями. Ось список моїх улюблених порад та підказок, які дозволять вам використати потенціал XD.

Ось 40-хвилинне відео, яке я зробив, і нижче ви знайдете підсумок:

За допомогою мобільного додатка Adobe Comp для iOS та Android ви можете створювати прості макети та дроти. Перевагами є швидке та інтуїтивне створення прототипів за допомогою пальця чи стилуса з великою кількістю заздалегідь визначених жестів. Також легко створити каркас на зустрічі зі своїм клієнтом. Незважаючи на те, що Adobe Comp не підтримує Adobe XD Export, ви можете експортувати в Illustrator, а потім скопіювати> вставити в Adobe XD для редагування векторних фігур.

Якщо ви хочете перенести растрові зображення між Photoshop та Adobe XD, просто зробіть вибір у Photoshop та Cmd + Shift + c (Копіювати об’єднані копії всього, що видно під виділенням), а потім Cmd + v у Adobe XD. Однак ви також можете експортувати векторні шари з Photoshop, клацнувши правою кнопкою миші на шарі та вибравши “Копіювати SVG” та вставивши в XD.

В Adobe XD ви можете ввімкнути Grid для монтажної області за допомогою комбінації клавіш Cmd +. За замовчуванням сітка встановлена на 8 пікселів, тому штовхання за допомогою Shift + стрілки вліво/вправо не поміщається в сітці. Клацніть на назві монтажних областей, щоб вибрати його, і змініть значення за замовчуванням на 8 пікселів сітки на 10 пікселів, щоб відповідати руху Зробіть це за замовчуванням для подальших проектів.

Немає таких напрямних, як у Photoshop в Adobe XD (поки), але розумні напрямні з’являються під час перетягування та дозволяють краще позиціонувати елементи. Однак іноді така поведінка за замовчуванням може спричинити небажане прив'язку. Просто натисніть Cmd під час перетягування, щоб тимчасово вимкнути розумні напрямні.

Найкраще створити окрему монтажну область для Посібника зі стилів, куди ви помістите всі об’єкти ідентифікації, а також кольори бренду, типографіку, загальні стилі та елементи керування, такі як кнопки, входи та загальні піктограми.

Для ритму вертикального типу ви можете використовувати gridlover.net. Повторне використання стилів тексту в Adobe XD працює наступним чином: виберіть текстову область, яку ви хочете використовувати як посилання на стилі в наступній текстовій області, потім створіть нову, і стилі успадкують.

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

Кожне текстове поле може містити підстилі з різними властивостями тексту, наприклад кольором та вагою.

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

Після експерименту з висотою рядка шрифту, можливо, ви захочете скинути значення за замовчуванням. Не потрібно цього вгадувати - просто поставте 0 у введенні висоти рядка, і він скине.

Використовуйте Shift + стрілка вліво/вправо для обробки значень у введеннях, таких як альфа або колір.

У діалоговому вікні вибору кольору використовуйте шістнадцяткові значення для точного збігу кольорів. Ви можете ввести одну букву/цифру, наприклад. #f, щоб отримати результат #ffffff або використовуйте комбінації 2- або 3- літери/цифри для різних результатів.

Іноді простіше і швидше використовувати інструменти Adobe XD за замовчуванням, такі як фігури та перо, а також логічні операції з фігурами для малювання простих піктограм.

Для перетворення тексту у фігури та редагування векторних точок кожної літери використовуйте комбінацію клавіш Cmd + 8.

Ви можете перетягувати зображення безпосередньо на полотно Adobe XD, з Finder або навіть з веб-сайту. Крім того, ви можете залити зображення на будь-яку фігуру, щоб заповнити його. У деяких випадках ви можете віддати перевагу маскуванню частини зображення. Пам’ятайте, що ця маска наноситься із шару, що знаходиться зверху, і не руйнує.

Використовуйте опцію Повторити сітку (Ctrl + r), щоб помножити одну групу або шар. Потім розгорніть ручки горизонтально або вертикально, щоб зробити копії. Ви можете відрегулювати поле під час наведення курсору між копіями.

Іноді ви можете використовувати опцію Повторити сітку для таких операцій, як створення значків. Пам’ятайте, що ви також можете встановити від’ємні поля для непрозорих фігур, щоб отримати складні візерунки.

Adobe XD може читати відокремлений від повернення текст, опущений у .txt. файл у текстове поле. Найкраще працює при застосуванні фіктивного або реального тексту до елементів повторної сітки.

Іноді робота з Repeat Grid може бути не обов'язково оптимальною. Бувають випадки, коли ви хочете використовувати сітку для копіювання елементів та видалення її, натиснувши Cmd + Shift + g для подальшого редагування.

Символи є елементами багаторазового використання в Adobe XD. Ви можете використовувати багато екземплярів, наприклад. кнопку, потім змініть один екземпляр, і всі інші оновляться відповідно. Найкраще використовувати символи у своїх Посібниках по стилю.

Налаштуйте властивість радіуса межі, перетягуючи маленькі крапки біля кутів фігури. Натисніть і утримуйте Alt, щоб відрегулювати радіус лише одного кута.

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

Використовуйте цифри на клавіатурі для регулювання непрозорості. Або натисніть, наприклад. 5 для 50%, або 4, а потім 7 для 47%.

Двічі клацніть назву шару, щоб перейменувати його. Натисніть Tab, щоб перейти до наступного шару, не виходячи з режиму редагування. Натисніть Shift + Tab, щоб рухатися вгору.

Якщо ви хочете мати точний контроль над кожною векторною точкою після деяких булевих операцій над фігурами, розгорніть їх за допомогою Cmd + 8.

Cmd + клацніть на шар, перебуваючи всередині групи, щоб вибрати його безпосередньо.

Встановіть безкоштовну програму iOS і підключіть пристрій через USB, щоб миттєво переглянути роботу. Це найкращий спосіб виявити, чи правильно встановлені кольори або розмір шрифту.

В Adobe XD ви можете як працювати над дизайном, так і згодом, створити клікабельний прототип із переходами Artboards. Перемикайтеся між двома режимами, натискаючи Ctrl + Tab.

Ви можете отримати доступ до iOS, Material та Windows UI Kit з меню Файл> Набори інтерфейсу користувача в Adobe XD.

Ви можете миттєво отримати відгук від інших, поділившись своїми прототипами - просто отримайте посилання та надішліть його своїм товаришам по команді, або скористайтеся вбудованим кодом для вбудовування, щоб вести дриблінг або Behance. Користувачі, які отримують посилання, можуть розміщувати коментарі та закріплювати їх на точному місці прототипу.