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

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

Как создать направляющие линии в Figma

Создание направляющих в Figma — простой и интуитивно понятный процесс, доступный даже новичкам. Основной способ — перетаскивание из линеек, расположенных сверху и слева от рабочего холста. Чтобы активировать линейки, нажмите Ctrl+R (или Cmd+R на Mac). После этого появятся две полосы, из которых можно «вытащить» вертикальную или горизонтальную направляющую.
Для добавления вертикальной направляющей щёлкните и потяните из верхней линейки вниз. Соответственно, горизонтальную — из левой линейки вправо. Линия зафиксируется в том месте, где вы отпустите мышь. При этом рядом с курсором отображается текущее значение координаты в пикселях, что позволяет точно задавать положение.
Если вам нужно создать направляющую с конкретными значениями, можно использовать плагины, такие как Guide Guide или Smart Guides, которые позволяют задавать отступы программно. Например, с помощью Guide Guide вы можете указать: «добавить 3 вертикальные направляющие с шагом 16px от левого края». Это особенно полезно при работе с системами отступов, например, 8px grid.

Пошаговое создание направляющих

1. Убедитесь, что линейки включены: нажмите Ctrl+R.
2. Щёлкните и удерживайте мышь на верхней линейке (для вертикальной) или левой (для горизонтальной).
3. Перетащите направляющую на холст и отпустите в нужной точке.
4. При необходимости переместите её, кликнув и перетащив.
5. Для удаления — просто перетащите направляющую за пределы холста.

Типы направляющих: глобальные, локальные и грид

В Figma существует три основных типа направляющих: глобальные, локальные и направляющие грида. Понимание их различий помогает эффективнее организовать рабочий процесс и поддерживать единообразие в проектах.
Глобальные направляющие действуют на уровне страницы (page). Они видны во всех фреймах и фигурах на этой странице и создаются путём перетаскивания из линеек. Эти линии идеальны для задания общей структуры: например, границ контента, боковых отступов или центральной оси. Глобальные направляющие удобно использовать в дизайн-системах, где требуется единая сетка для всех экранов.
Локальные направляющие привязаны к конкретному объекту — фрейму, группе или фигуре. Чтобы создать локальную направляющую, выберите фрейм, затем в правой панели инспектора найдите раздел «Constraints» и нажмите на значок шестерёнки рядом с направляющими. Здесь вы можете добавить внутренние направляющие, которые будут относиться только к этому контейнеру. Такой подход полезен при создании повторяющихся компонентов, например, карточек товаров.
Направляющие грида — это часть функции Layout Grids. Они представляют собой набор параллельных линий, равномерно распределённых по фрейму. Грид можно настроить с заданным количеством колонок, шагом, отступами и смещением. В отличие от обычных направляющих, грид может быть колонковым, строковым, слоистым или радиальным.

Выравнивание и привязка: как работают направляющие

Одно из главных преимуществ направляющих — автоматическая привязка (snapping). Когда вы двигаете объект по холсту, Figma показывает временные направляющие, которые появляются при приближении к другим элементам, краям фрейма или существующим направляющим. Это позволяет быстро выравнивать и выстраивать компоненты без ручного ввода координат.
Привязка работает по умолчанию, но её чувствительность можно настроить. В настройках Figma (File → Settings → Canvas) вы найдёте параметры:

• Snap to pixel grid — привязка к пиксельной сетке;
• Snap to objects — привязка к границам других объектов;
• Snap to guides — привязка к направляющим.

Рекомендуется оставить все три опции включёнными для максимальной точности.
Когда вы создали направляющую, любой объект будет «цепляться» за неё при перемещении. Это особенно полезно при выравнивании текста, кнопок или иконок по одной вертикали. Если вы хотите временно отключить привязку, удерживайте клавишу Alt (на Windows) или Option (на Mac).

Настройка цвета и стиля направляющих

Figma по умолчанию использует светло-фиолетовый цвет для направляющих. Однако этот цвет нельзя изменить напрямую в интерфейсе. Но есть обходные пути. Например, плагин Custom Guides позволяет задавать разные цвета для разных типов направляющих, что улучшает читаемость макета.
Также можно использовать комбинацию локальных направляющих и гридов с разными настройками, чтобы визуально их различать. Например, синие линии — для основной сетки, красные — для ограничений формы.

Продвинутые советы по работе с направляющими

Профессиональные дизайнеры используют направляющие не только для базового выравнивания, но и для сложных задач: создания адаптивных сеток, проверки симметрии, проектирования responsive-интерфейсов. Вот несколько продвинутых техник.
Используйте горячие клавиши для быстрого доступа. Хотя Figma не имеет встроенной команды для мгновенного создания направляющих, вы можете назначить действия через плагины. Например, в Guide Guide можно настроить сочетание клавиш для быстрого добавления стандартных отступов.
Создавайте системные направляющие для дизайн-систем. Например, задайте направляющие на 24px, 48px, 72px от левого края — это поможет команде соблюдать единые отступы. Также полезно добавить направляющую по центру (например, при ширине холста 375px — направляющая на 187.5px).
Для работы с несколькими устройствами используйте множественные страницы с одинаковыми направляющими. Сохраните шаблон с настроенными глобальными и грид-направляющими, чтобы применять его в новых проектах.

Плагины для автоматизации направляющих

• Guide Guide — позволяет добавлять направляющие по числам, процентам, дробям. Поддерживает колонки, поля, центрирование.
• Smart Guides — расширяет функционал привязки, показывая расстояния между объектами в реальном времени.
• Layout Grid Helper — помогает настраивать сложные гриды с разными отступами и колонками.

Эти инструменты экономят время и снижают риск ошибок при ручной настройке.

Распространённые ошибки и как их избежать

Даже опытные пользователи Figma иногда допускают ошибки при работе с направляющими. Знание этих ловушек поможет вам избежать разочарований и повысить качество работы.
Одна из самых частых ошибок — слишком много направляющих. Когда на холсте десятки линий, становится сложно ориентироваться. Решение: используйте локальные направляющие только там, где это необходимо, и регулярно очищайте страницу от ненужных линий.
Другая проблема — отсутствие блокировки направляющих. Случайное смещение глобальной направляющей может нарушить всю сетку. Чтобы заблокировать направляющую, кликните по ней правой кнопкой мыши и выберите «Lock Guides». Также можно заблокировать все направляющие сразу в настройках страницы.
Некоторые дизайнеры забывают, что направляющие не заменяют constraints. Даже при наличии идеальной сетки, объекты могут «поехать» при изменении размера фрейма, если не заданы правильные привязки. Всегда комбинируйте направляющие с constraint-настройками.

Экспертное мнение

Профессионалы отмечают, что направляющие — это не просто вспомогательный инструмент, а часть дизайнерского мышления. Они формируют ритм, помогают глазу пользователя ориентироваться и создают ощущение порядка. По данным исследований Nielsen Norman Group, интерфейсы с чёткой визуальной иерархией и выравниванием воспринимаются как более доверенные и качественные.

Вопросы и ответы

Заключение

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

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