Система адаптивной сетки в Sketch 3.9

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

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

Кроме очевидного использования, я думаю, будет интересно поговорить о растягивании сетки (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 пикселей.

Подпишитесь на рассылку

Раз в неделю мы будем присылать на почту дайджест с лучшими материалами

Похожие записи

Каллиграфия и леттеринг для начинающих

Изучение каллиграфии – непростой процесс, но с правильными методическими материалами это может занять меньше времени, чем вы думаете

Полное руководство по дизайну iOS 9 в Sketch

iOS сильно выросла в течение последних лет. С ее iOS 9 апгрейдом, Apple представил новый системный шрифт под названием San Francisco, 3D Touch и многозадачность на iPad. В Xcode вы найдете Stack Views, фантастический инструмент для более адаптивных макетов, гораздо проще Auto Layout.

Zeplin.io – способ подружить дизайнера и верстальщика

Zeplin – это новый и очень перспективный сервис, цель которого подружить и ускорить взаимодействие дизайнеров и других разработчиков. На данный момент сервис вышел с бета тестирования и уже его испытать в действии. Поддержка Sketch уже есть из коробки, а Photoshop появится немного позже.