Сетки в Figma. Часть 1

Как работать с сеткой в Figma, ее настройки, и что такое Grid Style.

Сетка — один из важных инструментов при создании хорошего дизайна сайта. Она помогает нам дизайнерам, расставить все по местам и облегчает расчеты.

Figma дает нам очень удобный инструмент Layout Grid, которым очень легко пользоваться. Сочетанием горячих клавиш скрывать и отображать сетку (Ctrl+G), а также масштабировать её на разную ширину макета, что незаменимо при создании адаптивного дизайна.

Как создать сетку в Figma

Сетка может быть применима только к фреймам. Так что в первую очередь нам необходимо создать фрейм и выделить его, кликнув по названию. Фрейм подсветится синей рамкой, в правой боковой панели Design появится пункт Layout Grid.

Добавляем новую сетку “+” и жмем на нее. Появляется окно настроек.

По умолчанию Figma создает сетку типа Grid. Она удобна при создании мобильных приложений. Нас, как веб-дизайнеров, интересует вторая вкладка Columns. Выбираем ее и видим следующие настройки.

Настройки

• Count — количество колонок
• Width — ширина колонки
• Gutter — межколоночный отступ
• Margin — оступ сетки от правого и левого края макета

Ну это, я думаю вы и без меня прекрасно поняли.

🔥 Интересная и важная настройка это Type. В выпадающем списке можно выбрать:

• Stretch–резиновая сетка, ширина колонки задается автоматически программой. А это значит что не надо самому считать и учитывать полупиксели если вдруг блоки не делятся поровну 😎
• Center–сетка центруется. При выборе этого пункта становится активным окошко Width.
• Left–тут понятно. Одно время Артемий Лебедев пропагандировал сайты прижатые к левому краю, вряд ли это в его честь, но наверное кому-то будет полезно.

💣 Можно создать много сеток в одном фрейме, если нужно!!

Бомба!

А теперь уберите от экранов слабонервных.

Выбираем Stretch сетку с нужными параметрами и начинаем изменить размер фрейма. Это же просто отрыв башки, извините. Сетка тянется вслед за макетом.

Растянули макет, подровняли элементы дизайна по новым размерам, бум, профит, новое разрешение макета готово!

Grid Style

Наверное вы заметили, что при наведении на пункт Layout Grid, рядом с плюсом, появляется еще одна иконка (4 точки). Суть в том что нашу сетку мы можем сохранить как стиль.

Жмем появившуюся иконку (после того как создали сетку или несколько сеток в вашем фрейме), даем название стилю, готово. Теперь при нажатии на иконку из 4х точек, в выпадающем меню появится ваш стиль сетки. Можете применять ее к любому новому фрейму.

Поностальгируем

А давайте вспомни как мы все раньше работали с сетками в Фотошопе.

В лучшем случае это был отдельный слой, который всегда терялся и его приходилось искать в куче других слоев, в худшем — сетка из направляющих, которая мешала выбирать и трансформировать элементы. Сколько проблем, неправда ли?

Figma избавляет нас от этой боли в заднице. Спасибо ей за это! Теперь мы можем больше времени уделять непосредственно дизайну, а не поиску слоя с сеткой.