Одним из инструментов, который долго был в моем списке желаний в Sketch — это возможность работать с адаптивными макетами. Следующий релиз Sketch, версия 3.9 (сейчас в бета тестировании), наконец представит новый инструмент Group Resizing. Функционал автоматического расположения элементов доступен еще с версии 3.3 при помощи плагина Sketch Constrains, но работать с такой обработкой макетов без сторонних плагинов было бы огромным плюсом.

Будучи не самым большим фанатом бета версий Sketch, Group Resizing достаточно вдохновил меня для установки тестовой версии на диск. И я рад сказать, что результат работы полностью оправдал мои ожидания. Я создал простой «Music News» просмотр для вымышленного музыкального приложения чтобы опробовать данный функционал. Я создал оригинальный макет с элементами для iPhone SE (320×568 пикселей). Масштабирование макета для iPhone 6 (375×667) и iPhone 6 Plus (414×736) было сделано быстро и безболезненно.

iPhone
Рабочая область оригинального размера для iPhone SE (слева) и простой ресайз в размеры iPhone 6 и iPhone 6 Plus.

Как это работает?

Новый Group Resizing инструмент позволяет индивидуально назначать поведение для каждого слоя в рамках группы. Каждому слою назначается возможность изменения размера одним из четырех доступных способов:

4 варианта поведения макета в процессе использования Group Resizing в Sketch 3.9
Stretch (растягивание): Это дефолтное поведение для слоя в группе, название говорит за себя. Растягивание полезно для фона и градиентов, но быстро выходит за ограничения (растягивание не является масштабированием) когда применяется к фото, иконкам или логотипам.

Pin to corner (фиксация в углу): Когда вам необходимо, чтобы элемент макета находился на определенном расстоянии от границы рабочей области, Pin to Corner — то, что нужно. Ранее, я полагал, что фиксация доступна только для одного угла (напр. верхнего левого), судя по иконке и стандартного X/Y позиционирования в Sketch, но этот функционал намного обширнее. Эта опция предполагает БЛИЖАЙШИЙ угол к границе рабочей области. Соответственно, если слой находится возле правого угла границы области, его перемещенная копия будет в той же стороне при ресайзе (и наоборот, если слой был слева).

Resize object (ресайз объекта): функционал масштабирования и, поэтому, самое применимое поведение к элементам изображения. Он прекрасно работает, если у вас есть сет векторных шейпов (таких как изображения для элементов в моих примерах). Также есть возможность установки для текстовых слоев, которые растягиваются автоматически на доступное место в процессе пропорционального увеличения на большую рабочую область.

Float in place (закрепление на месте): Если вы хотите сохранить слой на текущей позиции (например, если он расположен в центре рабочей области или находится на равном расстоянии от других элементов области в группе), Float in Place сделает это. Я назначил такое позиционирование для каждой иконки в горизонтальном меню, после определения одинакового расстояния между ними в оригинальной области для iPhone SE (350px). В момент ресайза горизонтального меню в более широкое разрешение (375px и 414px), иконки остаются правильного размера и сохраняют пропорциональные расстояния между собой.

Люблю, когда все сходится

Лучшее, что можно найти в Resizing in Sketch 3.9 — это продвинутое планирование и продумывание необходимой позиции для каждого элемента индивидуально. В нем нет автоматизированного функционала; Sketch по своей природе не будет «знать», что вы ожидаете от поведения элементов или группы, но четыре опции ресайза (stretch, pin to corner, resize object, and float in place) дают вам огромную свободу действий.

Ниже — примеры того, как я назначил позиции элементам панели навигации и перечислил элементы на рабочей области:

1-kj4359GrT3WqiMrRdCkNOw

1-45Rr9pUXJfGKIuO9kEqKzA

После того, как у вас назначен каждый слой, становится очень просто копировать, вставлять, ресайзить каждую группу символов. Это очень быстро и безболезненно, и это реально увеличит продуктивность для каждого, кто до этого делал эти действия вручную, для каждого слоя.

Group Resizing
Group Resizing в действии (масштабирование элементов с размера iPhone SE в iPhone 6).

Попробуйте сами

Готовы попробовать Group Resizing самостоятельно? Скачайте Sketch 3.9 beta и посмотрите на мой пример, доступный здесь (включает в себя Music News, показанный выше и бонус) для быстрого старта.

Обратите внимание: Файлы, созданные в Sketch 3.9 несовместимы с прошлыми версиями. Вы не сможете открыть их в Sketch 3.8x. Не стоит использовать Sketch beta с файлами, которыми необходимо делится с владельцами предыдущих версий приложения.