Команда Sketch недавно очень хорошо проработала систему символов. И версия Sketch 3.9 (на данный момент бета-версия) получила очень нужный функционал Group Resizing.

Sketch 39 представляет ресайз символов и бета версию облачного сервиса

Она позволяет вам задать нужный размер набору элементов в рамках группы.

Кроме очевидного использования, я думаю, будет интересно поговорить о растягивании сетки (Fluid Grid).

Начало

Начнем с отрисовки прямоугольника шириной 120 пикселей х 100% высоты вашей рабочей области. 1440/12=120. На самом деле это не имеет столь большого значения, потому что сетка будет адаптивной и ее будет проще ресайзить.

отрисовки прямоугольника

Теперь создайте колонки (gutter). Я добавляю колонку в 8 пикс х 100% на каждую сторону, что даст мне расстояние в 16 пикс. между ними.

1-l2lBTSjKngdV2EFodqM8Ow

Теперь сгруппируйте ваши элементы и приготовьтесь к волшебству .

1-FZREkIGVwV7fwPVqooY5Mw

Выберите оба прямоугольника и выберите в функционале Resizing опцию «Pin to Corner». Это прикрепит каждую колонку к ближайшему углу. Соответственно левая колонка окажется на левом краю области, а правая — на правом. Ширина колонок останется неизменной, так как вы изменяете размер группы объектов.

1-frqwjMHXyzvvvhjaqxiWgg

Вы также можете попробовать ресайз группы колонок

1-7NDPFel_HBvv7_sWnMS2xg

Теперь выберите группу и создайте символ.

1-Gzb_N640JMsXBSqGcooiNA

Далее продублируйте ваш символ 11 раз, чтобы получилось 12 колонок.

Совет: потяните для создания первой копии, затем используйте сочетание ⌘ + D для создания копий.

1-Y9iTWFXsy1ZU1T4wwScYFQ

Теперь вы можете сгруппировать все символы колонок и создать одну сетку из 12 символов колонок.

1-gJhzC3U2uT74if22KDbVrA

?И мы получили сетку из колонок, которую можно ресайзить в Sketch!

1-kOlGAR-O7SqgeFHkzmJaOQ

Теперь можете создавать больше сеток (8/16/24) с тем же символом колонки.

Заметки

Высота

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

1-Ubvhhcvy805Nc1kMFZt_tA

Пиксели

В наши символы прекрасно станут пиксели. В момент ресайза в любой размер, Sketch поместит колонки даже на подпиксели.

1-YYkvMB1-c1-QdKFcB739kA

Ресайз сетки по возрастанию равен числу колонок. Итак, для нашей сетки из 12ти колонок мы можем сделать ресайз, кратный 12 пикселям.

Несколько советов сделать это проще, чем тянуть

Немного математики

1-BwWlnyAy8QU8GFD3qH2h6A

Nudg.it

Еще один плагин.

Nudg.it — небольшое приложение, которое я создал для настройки мелких перемещений в Sketch.

1-WNboZLHYHt36KSz06sUlRA

Вы можете установить большой сдвиг (Big Nudge) при помощи сочетания клавиш Shift+стрелка на 12 пикселей и сдвиг шейпа (Shift + CMD + стрелка) вашей сетки с приростом в 12 пикселей.

Вывод

Пока этот функционал доступен только в бета версии Sketch.

Ссылка на файл — http://www.nudg.it/assets/fluid-grids.sketch