С тех пор, как Adobe решила взять Sketch, наконец-то создав специализированный инструмент для проектирования пользовательского интерфейса, многие задавались вопросом, сколько времени потребуется, чтобы оба приложения сразились в одном весовом соотношении. Но если вы спросите меня, функция «Повторить сетки» в Adobe XD означает, что мы уже там.
Давайте посмотрим на новую функцию импорта активов в Adobe XD , а затем вы сможете решить сами. Вот как мы обычно импортируем активы сегодня:
-
Save AsFileImport -
Ctrl/Command+CCtrl/Command+V
Насколько я помню, «перетаскивание» также было функцией большинства дизайнерских приложений, но нет способа автоматизировать это действие с помощью различных повторно используемых компонентов, по сути, предлагая уникальный контент для набора компонентов, которые в остальном идентичны. с точки зрения визуальных эффектов — до сих пор.
Шаг 1: Разработка сетки карточек товаров
Начните с открытия нового «веб-документа» на заставке — не имеет значения, какой размер вы выберете, если есть прекрасный белый холст для работы. Нажмите R, чтобы создать и нарисовать прямоугольник, и убедитесь, что размеры составляют 400×300 пикселей.
Теперь создайте еще один прямоугольник (400x100px), удалите его границу, а затем используйте черный (# 000000) с непрозрачностью 80% для цвета «Заливка» — сначала выберите Color SlidersRGB Sliders .
Давайте создадим серию текстовых слоев для наложения на этот прямоугольник; через некоторое время станет ясно, что мы разрабатываем карточки статей, состоящие из категории, заголовка и даты статьи. Нажмите T, чтобы выбрать инструмент «Текст» и используйте следующие дополнительные стили:
- Заполните: # F39C12
- Текст: Helvetica Neue, 15, полужирный
- Высота: 18 (так же, как межстрочный интервал )
И опять:
- Текст: Helvetica Neue, 21, Сгущенный жирный
- Заполнить: #FFFFFF
- Высота: 26
Конечное время:
- Текст: Helvetica Neue, 14, Regular
- Заполнить: #FFFFFF
- Высота: 16
- Выровнять: правильно
Дублирование компонента с помощью повторяющихся сеток Adobe XD
Перетащите курсор мыши, чтобы выделить сразу все слои, затем выберите инструмент «Повторить сетку» на боковой панели. Вы заметите, что компонент теперь имеет боковые маркеры, которые можно перетаскивать — вы можете перетягивать эти маркеры, чтобы размещать компонент столько раз, сколько необходимо. То, что происходит с одной плиткой, произойдет со всеми из них (с точки зрения стиля, но не обязательно по содержанию, что очень удобно).
Совет: вы можете легко отрегулировать ширину желоба, перетаскивая промежутки между каждой строкой или столбцом сетки.
Массовый импорт изображений, безболезненно
Теперь здесь происходит волшебство. Прежде чем мы начнем, вот четыре изображения замечательной Евгении Пореченской, которые я использую на скриншотах: минимализм красной каллы , минимальная мода каллы , синие розы на малиновом фоне и букет красных тюльпанов .
Сохраните эти изображения на свой компьютер (образцы будут в порядке). Если вы затем перетащите одно из изображений в один из прямоугольников, изображение будет автоматически обрезано (и, конечно, применено к каждой плитке). Однако, если вы выберете все четыре изображения, одно изображение будет применено к каждой плитке; Таким образом, мы можем сэкономить кучу времени при импорте графических ресурсов в Adobe XD. Пока что это самый быстрый метод по сравнению со Sketch или Photoshop.
Почему?
- Нет необходимости маскировать, обрезать или изменять размер изображений, чтобы соответствовать
- Не нужно повторять шаги снова и снова
- Нет необходимости использовать переопределения (в Sketch)
Импорт текстовых файлов в повторяющиеся сетки
Мы можем сделать то же самое с текстом. Допустим, мы хотим заменить каждый экземпляр заголовка lorem ipsum уникальным заголовком, откроем TextEdit (или любое другое приложение, которое вы используете для создания простых файлов .txt ), напишите каждый заголовок на новой строке, а затем перетащите файл. в слой, как мы сделали с изображениями.
Adobe XD автоматически извлекает каждую новую строку и распределяет их по каждому экземпляру этого повторяющегося слоя.
Предупреждение: TextEdit по умолчанию использует Rich Text Format, но вы можете изменить это в FilePreferences .
Вывод
Не всегда дизайнер выбирает изображения или выбирает текст, но благодаря обновлению Adobe XD тот, кто отвечает за это, может создать папку ресурсов с изображениями и текстовыми файлами, а дизайнер может просто перетащить их прямо в Создайте файл и используйте его как есть. Этот высокоэнергетический рабочий процесс намного проще и может сэкономить вам огромное количество времени.
Как вы думаете? Станет ли Adobe XD реальным соперником против Sketch? Какие жизненно важные функции, по вашему мнению, отсутствуют в Adobe XD?
Обновление: он стал настоящим соперником против Sketch! Хотите узнать больше о тонкостях проектирования, создания прототипов и сотрудничества с Adobe XD? Члены SitePoint Premium могут загрузить нашу новую книгу Jump Start Adobe XD !