Линейки, направляющие и сетки в Figma: как пользоваться

О Figma

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

В программе можно формировать разные фигуры, линии, добавлять цвет, текст и изображения. В в Figma есть специальные линейки, направляющие линии и разные сетки, чтобы упорядочивать объекты. 

Линейки в Figma

Линейками в Figma называют небольшие панели с измерением в пикселях. Они отображаются на рабочей области, сверху и слева. С помощью линеек дизайнерам легко визуально создавать объекты под определенный размер, например печатные постеры или экраны устройств.

Линейки в программе можно включить и выключить с помощью горячих клавиш Shift + R. Вручную отображение линеек включают через логотип Figma в левом верхнем углу — View — Rulers. Если напротив Rulers стоит галочка, то линейки отображены и готовы к использованию.

С помощью линеек в Figma дизайнерам проще создавать и выравнивать объекты на холсте. Например, нужен прямоугольник шириной 620 пикселей — теперь мы можем сразу создать такую ширину, не меняя размер в правой панели. При создании объекта на линейках значения пикселей выделены синим и голубым цветом.

Направляющие в Figma

Из самих линеек можно «вытаскивать» отдельные линии. Такие линии красного цвета дизайнеры называют направляющими или силовыми.

Чтобы создать направляющие, наведите курсор на линейку. Когда появится двусторонняя стрелка, зажмите кнопку мыши и проведите курсор в противоположную от линейки сторону. Направляющая готова.

Линии можно перемещать по всему пространству с помощью курсора или стрелок на клавиатуре. Если нужно передвинуть линию сразу на 10 пикселей, зажмите клавишу Shift. Чтобы удалить силовую линию, кликните на нее и нажмите клавишу Delete. А при нажатии клавиш Shift + R вместе с линейками будут скрыты и все направляющие.

Читайте также:

6 ошибок в дизайне упаковки, которых нужно избегать

В работе специалисты используют направляющие как базовые линии текста и ориентиры для выравнивания элементов. Базовая линия помогает расположить текстовые элементы на холсте и создать из них логическую систему. Направляющие в качестве ориентиров применяют при небольшом количестве объектов в работе с низкой детализацией.

Сетки в Figma

Создавать модульные сетки в Figma нужно в правой панели в пункте Layout Grid. У сеток есть три шаблона: Grid, Columns, Rows — то есть готовая сетка, колонки и ряды. По умолчанию программа ставит сетку Grid с размером в 10 пикселей и красным цветом с прозрачностью 10%.

Все эти настройки можно поменять, нажав на значок рядом с названием типа сетки. Изменить можно тип сетки, размеры, количество рядов и колонок, а еще цвет и процент его прозрачности. На фрейм можно накладывать несколько сеток сразу. Такой прием можно использовать, например, если на сайте много объектов и высокая степень детализации.

Сетки можно скрыть, а можно и совсем удалить. Чтобы скрыть сетку временно, нужно нажать на глазик рядом с ней. Если сетка больше не нужна, то удалить ее можно с помощью нажатия на минус. 
На всю рабочую область в Figma можно поставить пиксельную сетку — Pixel Grid. Она отображается на всю рабочую область в программе, как и линейки. Такая сетка очень мелкая, она подойдет для выравнивания очень маленьких элементов – например, наклеек или небольших кнопок. Пользуются такой сеткой редко, так как в ней нельзя поменять настройки.

В дизайне модульные сетки помогают авторам ставить однотипные элементы по конкретной системе. Дизайнеры задействуют сетки в создании сайтов, промоматериалов, постеров и даже упаковок. Одна из самых популярных сеток — колончатая из 10 или 12 колонок, а еще совмещенная сетка из колонок и рядов.

Модульные сетки в работе используют дизайнеры журналов и публикаций. В проекте ниже видно, что большинство элементов стоят по единым линиям и определенной ширине, и таким образом автор выстраивает полноценную дизайн-систему. Здесь дизайнер, скорее всего, использовал колончатую модульную сетку или систему из колонок и рядов.

Главное о линейках, сетках и направляющих в Figma

1. Figma — графическая программа, в которой дизайнеры разных направлений создают постеры, креативы, веб-сайты и интерфейсы. В программе есть много необходимых инструментов, в том числе линейки, направляющие и модульные сетки.
2. Линейки в Figma встроены в рабочую область и отображаются сверху и слева. Включить и отключить их отображение можно сочетанием горячих клавиш Shift + R. Линейки дизайнеры используют в качестве ориентиров по размеру при создании объекта, а также для выравнивания элементов в проекте.
3. Направляющие линии нужно «вытянуть» из линеек. Такие отдельные линии можно перемещать на любое место рабочего пространства. С помощью направляющих или, как их еще называют, силовых линий можно строить базовые линии текста и выравнивать однотипные объекты в небольшом количестве.
4. Модульные сетки дизайнеры считают одним из основных инструментов при создании сложного дизайна и интересной композиции. В Figma для таких сеток есть отдельный инструмент, который называется Layout Grid. В программе сетки применяют к фреймам. Сетки можно накладывать друг на друга, а также менять их настройки. В дизайне модульные сетки используют чаще всего для создания веб-страниц, интерфейсов, лендингов и баннеров.