Лайфхаки в работе с Adobe XD

«Будущее UX-дизайна» — такой слоган имеет относительно новый продукт компании Adobe Systems — Adobe Experience Design. Как заявляют разработчики продукт разработан для создания и прототипирования макетов сайтов и мобильных приложений. Главным преимуществом нового продукта, по мнению создателей, является возможность редактирования макетов из Photoshop или Sketch, которые будут автоматически преобразованы в XD файлы. Переходите от концепции к прототипу с помощью универсального UX / UI-решения легко и быстро. Эта программа вполне может перетянуть тех кто верен продуктам из линейки Adobe и пользователей, кого не зацепила статья пора переходить на Sketch.

Сегодня мы познакомим вас с хитростями программы, которые помогут сэкономить время на освоении программы.

Наследование текста

Текст

При работе с инструментов «Текст», по умолчанию установлен стандартный стиль текста. Просто перетащите текстовый объект в область ввода текста. Текст, который вы напечатаете далее унаследует копируемый, как шрифтом так, размером так и интервалами.

Смыкание кривой

Линия

Сомкнуть кривую в Adobe XD можно просто нажав на начальную точку, либо поставить точку в любом месте, при нажатом инструменте «Перо».

Преобразование объектов в кривую

Фигура

Если вам еще сложно создавать с нуля иконки, вы можете начать с несложных фигур, которые можно преобразовать в кривую. Например прямоугольник или круг. Для преобразования просто кликните дважды по фигуре. И если никаких изменений вы не внесете, она снова приобретет первоначальный вид. Если изменений не предполагается, а объект должен стать кривой линией – используйте горячие клавиши Cmd+8 на Mac или Ctrl+8 на Windows. Если вы находитесь на границе фигуры, инструмент поменяется на «Перо», чтобы добавить точку на линии. Существует возможность разорвать фигуру. Для этого выбирайте инструмент «Перо» и нажимайте на начальную точку.

Для перемещения пользуемся «Рукой»

Пример

Чтобы поменять текущий инструмент на «Руку» просто зажмите клавишу Space. После этого, зажмите левую кнопку мыши и перетащите объект в нужное место.

Горячие клавиши для выбора цвета

Вы можете набрать любое шестнадцатеричное значение, чтобы оно повторялось для всех шести значений.

  • Одиночные символы (например, a) повторяются для всех значений (#aaaaaa)
  • Двойные символы (например, az) повторяются по порядку (#azazaz)
  • Тройные символы (например, 123) каждый символ повторяется по порядку (#112233)

Копировать/Вставить

Пример

Чем отличается функция «Создать дубликат», от функций «Копировать» и «Вставить». Объясняем. При дублировании объект перемещается на тот же уровень про Z-координате. В другом случае переместит его вверх.

Экспорт исходников

Пример

Это является значимой частью работы любого дизайнера, особенно при передаче на верстку. По умолчанию программа будет экспортировать с различным разрешением, в зависимости от платформы. Например, если вы экспортируете для 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 версий.

Управление контекстом

Пример

Несколько хороших советов при работе с редактированием контекста:

  • Прямое выделение встроено в инструмент выделения. Чтобы его выбрать нажмите Cmd (Mac) или Ctrl (Windows 10) чтобы выбрать объект, вне зависимости от того, как глубоко от вложен;
  • Открытие контекста возможно прямо в группе, двойным щелчком по любому объекту. Внутри редактирования контекста, можно использовать все объекты в нем (выделять и выравнивать по отношению друг к другу).
  • После редактирование, просто нажмите Escape, чтобы выйти из него.

Хотите больше секретов, лайфхаков и хитростей? Делайте репосты и пишите в комментариях какую тему вы хотите, чтобы я подробно описал в следующих статьях.

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