Как сделать линейки в фигме

В Figma линейки (guides) - это вспомогательные линии для точного выравнивания и измерения. Они позволяют организовать пространство макета с математической точностью и профессиональной аккуратностью. Вот как их создавать и использовать.

Включение линеек

Чтобы начать работать с измерительными инструментами, первым делом необходимо активировать линейки. Это делается через главное меню «View» (Вид), где нужно найти и выбрать пункт «Show Rulers». Альтернативно можно использовать удобную горячую клавишу Shift + R для быстрого переключения.

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

1. Перейдите в меню View - Show Rulers (или нажмите Shift + R).
2. По верхнему и левому краю рабочей области появятся линейки с делениями.

Создание направляющих

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

Figma также автоматически генерирует временные «умные направляющие» (Smart Guides), которые подсвечиваются розовым и появляются при перемещении объектов, помогая выровнять их по центру или краям соседних элементов. Эти динамические помощники включены по умолчанию и существенно ускоряют процесс компоновки. Основные действия:

Из линеек

1. Наведите курсор на горизонтальную или вертикальную линейку.
2. Зажмите левую кнопку мыши и потяните направляющую на холст.
3. Отпустите кнопку, чтобы зафиксировать линию.

Быстрые направляющие (Smart Guides)

• Они появляются автоматически при перемещении объектов, помогая выравнивать их относительно других элементов или краёв артборда.
• Включены по умолчанию (меню View - Show Smart Guides).

Точная установка направляющих

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

Более контролируемый способ: сначала вытянуть линию приблизительно, затем кликнуть на неё, чтобы выделить, и ввести точное числовое значение в поле X (для вертикальной) или Y (для горизонтальной) на правой панели свойств. Это позволяет вручную задавать координаты с пиксельной точностью.

• Двойной щелчок по линейке создаст направляющую в месте клика.
• Чтобы разместить направляющую точно по координате, можно:

1. Вытянуть её приблизительно.
2. Выделить направляющую (кликнуть на неё на холсте или в списке слоёв).
3. Ввести точное значение X (для вертикальной) или Y (для горизонтальной) в панели свойств справа.

Управление направляющими

Созданными направляющими легко управлять: их можно перемещать, просто перетаскивая по холсту, или удалять, возвращая обратно на линейку. Для очистки всего рабочего пространства от вспомогательных линий достаточно кликнуть правой кнопкой мыши по любой линейке и в контекстном меню выбрать опцию «Clear Guides» (Очистить направляющие).

Также их можно временно скрыть, не удаляя, через меню «View» и пункт «Show Guides» (или используя комбинацию Ctrl/Cmd + ;). Эта возможность помогает избежать визуального загромождения, когда нужно оценить чистый вид макета, а затем быстро вернуть направляющие для продолжения работы.

• Перемещение: Перетащите существующую направляющую.
• Скрыть/показать: Меню View - Show Guides (или Ctrl + ; / Cmd + ;).
• Удаление одной: Перетащите её обратно на линейку.
• Удаление всех:

1. Правый клик на линейке - Clear Guides (очистить направляющие).
2. Меню View - Clear Guides.

Направляющие макета Layout Grids

Для построения сложных и структурированных интерфейсов, таких как колоночные сетки, лучше использовать инструмент «Layout Grid». Он позволяет добавить к выбранному фрейму упорядоченную систему строк, колонок или единообразную сетку.

 

Чтобы её создать, нужно выделить артборд, перейти в панель «Design» справа и в секции «Layout Grid» нажать на иконку плюса.

 

Здесь можно гибко настроить количество колонок, их ширину, промежутки (гаттеры) и отступы (маржины), создавая основу для адаптивного или строго модульного дизайна, что гораздо эффективнее, чем расставлять множество одиночных линий вручную. Основные действия:

1. Выделите фрейм (артборд).
2. На панели Design (справа) найдите секцию Layout Grid и нажмите «+».
3. Выберите тип сетки: Grid (прямоугольная), Rows (строки), Columns (колонки) или Square (пиксельная сетка).

Выбор типа сетки зависит от задачи - для верстки подойдут Columns, для горизонтальных блоков - Rows, а для точечного выравнивания мелких деталей - Grid или Square. Ниже представлена наглядная таблица, которая поможет быстро разобраться в типах сеток:

Тип сетки	Основное назначение	Ключевые настройки
Columns (Колонки)	Создание вертикальной модульной сетки для макетов сайтов, журналов, таблиц.	Количество колонок, ширина колонки, промежуток (гаттер), отступы (маржины).
Rows (Строки)	Структурирование контента по горизонтали, например, для списков, расписаний, лент.	Количество строк, высота строки, промежуток (гаттер).
Grid (Сетка)	Пиксельная или прямоугольная сетка для точного выравнивания иконок, иллюстраций, UI-элементов.	Размер ячейки (Size), тип (Square/Line), цвет и непрозрачность.
Square (Пиксельная)	Самый точный контроль, часто используется для пиксель-арта или пиксель-перфект дизайна.	Размер ячейки (обычно 1px или 8px), цвет.

 

Привязка к направляющим

Чтобы объекты автоматически «прилипали» к направляющим и сеткам при перемещении, необходимо убедиться, что соответствующая функция привязки активна. Она находится в меню «View» и называется «Snap to Guides».

Когда эта опция включена, элементы, которые вы перетаскиваете, будут ощутимо цепляться за ближайшие направляющие, включая умные (Smart Guides), и границы других объектов, обеспечивая идеальное выравнивание. Это избавляет от необходимости вручную «ловить» пиксели и гарантирует, что все элементы интерфейса расположены аккуратно.

 

Чтобы объекты «прилипали» к линиям, убедитесь, что включена опция: Меню View - Snap to Guides («Привязываться к направляющим»).

 

Полезные советы по созданию линеек в Figma

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

Направляющие копируются вместе с фреймом: скопировав артборд с расставленными линиями, вы вставите его полную копию вместе со всей вспомогательной разметкой. Это позволяет быстро тиражировать готовую систему направляющих на новые макеты, экономя время на повторной настройке.

• Направляющие привязаны к фрейму. Если создать направляющую внутри фрейма, она будет видна только в его пределах.
• Глобальные направляющие можно создать, потянув линию за пределы любого фрейма на холст. Они будут видны на всех фреймах в этом файле.
• Быстро скопировать направляющие между фреймами можно, скопировав фрейм с направляющими - они скопируются вместе с ним.

Вывод

Овладение инструментами направляющих и сеток в Figma - это ключ к созданию точных, аккуратных и визуально сбалансированных интерфейсов. Использование статических линеек, «умных» направляющих и модульных сеток превращает процесс дизайна из интуитивного рисования в осознанное проектирование. Эти инструменты не только повышают скорость работы, но и закладывают основу для профессионального результата.