Adobe Experience Design (Adobe XD) - одна з останніх новинок від компанії Adobe, покликана стати конкурентом полюбився всім дизайнерам інтерфейсів Sketch.app.
Маючи в своєму арсеналі схожі зі Sketch.app функції, а також дедалі зростаючу кількість UI-китів. придатних для використання в Adobe XD, незабаром ця програма може перетягнути на себе значну частину користувачів, які або ще не злізли з Photoshop і створюють веб-проекти в ньому або ще тільки вибирають підходящу під свої завдання програму.
Спадкування налаштувань тексту
Коли ви вибираєте інструмент «Текст» і починаєте друкувати, то XD за замовчуванням використовує стандартний стиль тексту. Однак, якщо у вас є стиль, який ви б хотіли скопіювати, просто клікніть по об'єкту інструментом виділення. Потім перейдіть на інструмент «Текст» і або клікніть курсором, щоб встановити точку введення тексту, або перетягніть копіюється об'єкт в область введення тексту. Текст, який ви надрукуєте після цього буде успадковувати скопійований, в тому числі шрифт, міжрядковий інтервал та інтервал між символами.
замикання кривої
Як правило, редагувати криву в Adobe XD дуже легко-просто клікніть і додайте точку в будь-якому місці, коли у вас вибраний інструмент «Перо». Однак, ви також можете замкнути криву, натиснувши на початкову точку. Якщо ви хочете замкнути криву заокругленням, клікніть і перетягніть її. І, звичайно, як щодо цієї початкової точки? Утримуйте Cmd, якщо ви працюєте в Mac або клавішу Ctrl, якщо працюєте в Windows 10, коли ви натискаєте і перетаскуєте цю початкову точку, щоб перемістити її, без приєднання.
Реалістичне розмиття фону
З функцією розмиття фону тепер ви можете створювати реалістичне розмиття фону, яке ваші розробники зможуть дублювати. Деякі з найбільш популярних прототипів, якими я поділилася пов'язані з регулюванням емуляції налаштувань iOS: Dark, Light і ExtraLight.
- Dark. Розумієте 25, Яскравість 0, Непрозорість 55%
- Light. Розумієте 30, Яскравість 15, Непрозорість 0%
- ExtraLight. Розумієте 24, Яскравість 40, Непрозорість 50%
Конвертація базових об'єктів в криву
Замість того, щоб створювати свої іконки з нуля, часто легше почати з простих фігур, таких як прямокутник або овал. Щоб перетворити її в криву, просто двічі клацніть по простій фігурі, для її конвертації. (Якщо ви не внесете ніяких змін, вона повернеться в початковий стан.) Якщо з якоїсь причини ви хочете переконатися, що ваші об'єкти залишаються кривої незважаючи ні на що, використовуйте Cmd + 8 на Mac або Ctrl + 8 на Windows 10, щоб конвертувати об'єкт в криву. Якщо ви перебуваєте на кордоні фігури, ваш курсор зміниться на «Перо», щоб додати точку вздовж лінії. Ви навіть можете розірвати існуючу фігуру, вибравши інструмент «Перо» і натиснувши на початкову точку.
Переміщення за допомогою інструменту «Рука»
Мені часто ставлять запитання про інструмент «Рука». Все дуже просто: утримуйте Space, щоб тимчасово перетворити ваш поточний інструмент на інструмент «Рука». Потім натисніть ліву кнопку миші і перетягніть курсор для переміщення по полотну. Ще одна порада від профі - якщо ви працюєте на ноутбуці з трекпедом або використовуєте Magic Mouse, ви можете провести двома пальцями по екрану, щоб переміщатися по полотну.
Гарячі клавіші вибору кольору
Це з наших недавніх і улюблених нововведень. У минулому році ми додали підтримку шістнадцятирічних колірних значень. Ви можете надрукувати будь шістнадцяткове значення, щоб воно повторювалося для всіх шести значень.
- Поодинокі символи (наприклад, f) повторюються для всіх значень (#ffffff)
- Подвійні символи (наприклад, ab) повторюються по порядку (#ababab)
- Потрійні символи (наприклад, 123) кожен символ повторюється по порядку (# 112233)
Дублювання vs. Копіювати і вставити
На наших форумах нас часто запитують, навіщо в нашій програмі є команда «Створити дублікат», коли є функції Копіювати »та« Вставити ». Суть в тому, що при дублюванні об'єкт поміщається на той же рівень по Z-координаті, в той час як «Копіювати» + «Вставити» перемістить його вгору по Z-координаті. Це важливо пам'ятати, коли ви працюєте над складними файлами! Ви також можете використовувати функції «Копіювати» + «Вставити», щоб переміщати об'єкти по групах.
експорт початкових кодів
Експорт ресурсів є важливою частиною робочого процесу дизайнера, особливо при передачі розробникам. Наш експортний процес враховує, що ресурси різних розмірів є важливою частиною сучасного дизайну графічного інтерфейсу користувача.
За замовчуванням XD буде експортувати з різним дозволом, в залежності від платформи. Наприклад, якщо ви експортуєте для iOS, вам знадобляться 1x, 2x, і 3x версії ресурсів. Якщо ви створюєте іконку в дозволі 100 x 100 і встановіть «designed at 1x», ми будемо експортувати версії 100 x 100, 200 x 200 і 300 x 300 для повного набору. Однак, якщо ви створите іконку в дозволі 90 x 90 і встановіть «designed at 3x," ми будемо експортувати в 30 x 30, 60 x 60, і 90 x 90 для створення 1x, 2x, і 3x версій.
Управління редагуванням контексту
До того, як ми створили панель шарів, єдиним способом обійти це було можливо, використовуючи редагування контексту. Групи і повторювані сітки (repeat grids) - дуже потужні функції, які ви можете використовувати для вирівнювання, виділення і повторення. Часто, я використовую вкладені групи для роботи з чимось на зразок складної панелі піктограм, що містить такі елементи як іконки, текст і фон. В цьому випадку іконка являє собою групу, і ця група знаходиться на тому ж рівні, що і текстовий елемент, і прямокутник. Кілька концепцій, які я зазвичай виділяю в радах:
Пряме виділення. Зазвичай люди запитують, де інструмент «Пряма виділення», і відповідь така: він вбудований прямо в інструмент виділення! Утримуйте Cmd (Mac) або Ctrl (Windows 10) щоб вибрати об'єкт, незалежно від того, як глибоко від вкладений.
- Відкриття редагування контексту. Ви можете відкрити редагування контексту прямо в групі або повторюваної сітці подвійним клацанням по будь-якому об'єкту всередині них. Тепер усередині редагування контексту, можна маніпулювати з усіма об'єктами в ньому (наприклад, виділяти і вирівнювати по відношенню один до одного).
- Закриття редагування контексту. Тепер, коли ви в редагуванні контексту, ви можете натиснути Escape, щоб вийти з нього.
Цей набір функцій дозволяє легко переміщатися між групами, без необхідності шукати їх на панелі шарів. Зосереджуючи свою роботу на полотні, ви можете бачити речі в контексті всього дизайну.
Якщо вам сподобалися ці поради та хитрості за деякими найменш відомим функцій Adobe XD, подивіться мій детальний розбір Repeat Grid - однієї з найпопулярніших функцій нашого продукту.