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

Грег Рог

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, і текстове поле буде автоматично створено.