Как в фигме сделать сетку и включить направляющие линии горячими клавишами

Виды сеток в фигме

В фигме существует несколько видов сеток, которые могут быть удобны в различных ситуациях. Рассмотрим эти виды подробнее.

Сетка в клеточку. Такая сетка часто используется в дизайне мобильных приложений и графическом дизайне. Её можно добавить, выделив фрейм и нажав на плюсик на панели Layout Grid. Если нажать на иконку сетки в этом блоке, можно изменить её параметры — размер одной клетки, цвет и прозрачность. Здесь же в выпадающем списке можно поменять типа сетки на колонки или строки, речь о которых пойдет ниже.

Сетка из колонок (Columns). Часто используется в веб-дизайне и типографике. Имеет следующие параметры:

• Count — Количество колонок
• Color — Цвет и непрозрачность
• Type — Выравнивание сетки (по левому или правому краю, по центру, по ширине фрейма)
• Width — ширина одной колонки. Этот параметр недоступен если задать Type Stretch, так как в этом случае ширина будет растягиваться в зависимости от размера фрейма.
• Margin/Offset — отступы по бокам
• Gutter — отступы между колонками

Сетка из строк (Rows). Используется для работы с вертикальным ритмом в графическом и веб-дизайне. Работает аналогично колоночной сетке. Часто в качестве размера задается межстрочное расстояние текста с нулевыми Gutter. Выравнивание рекомендую задавать по верхнему краю, чтобы при изменении высоты фрейма сетка оставалась на месте. Таким образом можно получить линеечку.

Комбинированная или модульная сетка. Её можно получить, если добавить фрейму сразу несколько вышеописанных сеток. При этом в зависимости от конкретных настроек можно создать оптимальную для каждого конкретного случая сетку. Благодаря гибкости настроек может использоваться в самых разнообразных ситуациях. Сделать ту или иную сетку видимой или невидимой можно нажав на иконку глаза рядом с названием сетки.

Пиксельная сетка. Очень полезный инструмент, рекомендую всегда держать его включенным. Становится видимым на больших масштабах. Также рекомендую поставить галочку Snap to pixel grid, чтобы при рисовании различных фигур они привязывались ровно к целым пикселям. Это поможет избежать дробных значений и связанных с ними проблем.

Направляющие линии и линейки в фигме

Если вам нужно сделать нестандартную композицию и выше описанные варианты не подходят, можно создать свою собственную, уникальную сетку с помощью нескольких направляющих линий. Для создания такой сетки необходимо включить линейки и прямо с них перетянуть направляющие линии в выделенный фрейм. Получившиеся в итоге линии можно перетаскивать в другие места или удалять.

Горячие клавиши фигмы чтобы включить или отключить модульную сетку, направляющие линии и линейки

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

• Включить или убрать сетку — Ctrl + Shift + 4 на Windows ли Ctrl + G на Mac OS. Обращаю внимание, что этими горячими клавишами сразу показываются или скрываются все сетки в документе. Если вам нужно сделать видимой или невидимой отдельную сетку, воспользуйтесь значком глаза на панели Layout Grid.
• Показать или отключить пиксельную сетку — Ctrl + ‘ на Windows и Cmd + ‘ на Mac
• Включить или спрятать линейки и направляющие линии — Shift + R

Размеры сеток для сайтов и мобильных приложений в фигме

Жестких и обязательных к использованию стандартных размеров сеток в UX/UI и веб-дизайне нет, и в принципе вы можете использовать любую сетку, какую только захотите. И всё же есть определенные устоявшиеся практики, которым желательно следовать, особенно если вы — новичок.

• Количество колонок лучше всего делать равным 12, т к это число делится сразу на 2, 3, 4 и 6, что дает довольно большую свободу при компоновке.
• Отступы по бокам (Margin) стоит делать больше отступов между колонками сеток (Gutter) — тогда в дизайне не будет нарушаться правило внутреннего и внешнего.
• Выравнивание сетки лучше делать симметричным (Center или Stretch)
• Шаг в сетках вертикального ритма (Rows) оптимально делать кратными межстрочному расстоянию основного текста.
• Все размеры в сетках для мобильных приложений лучше делать кратными 4 или 8 пикселям, так как многие стандартные библиотеки созданы именно под такие размеры.