UXPUB 🇺🇦 Дизайн-спільнота

Cover image for Система адаптивной сетки в Sketch 3.9
Редакція
Редакція

Опубліковано • Оновлено

Система адаптивной сетки в 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-Gzb_N640JMsXBSqGcooiNA

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

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

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

1-gJhzC3U2uT74if22KDbVrA

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

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

Заметки

Высота

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

Пиксели

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

1-YYkvMB1-c1-QdKFcB739kA

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

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

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

1-BwWlnyAy8QU8GFD3qH2h6A

Nudg.it

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

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

1-WNboZLHYHt36KSz06sUlRA

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

Топ коментарі (0)