Фигма направляющие линии как включить

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

Что такое направляющие в Figma и зачем они нужны

Направляющие линии в Figma — это невидимые (или видимые) линии, которые помогают дизайнеру точно позиционировать объекты на холсте. Они не экспортируются вместе с макетом, а служат исключительно вспомогательным инструментом для выравнивания и соблюдения гайдлайнов.
Эти линии особенно важны при работе над дизайн-системами, мобильными приложениями и веб-интерфейсами, где требуется строгое соблюдение расстояний между элементами. Например, если вы разрабатываете экран приложения, вам нужно, чтобы кнопка находилась ровно на 16 пикселей от края. Направляющие позволяют это сделать без ошибок.
Существует два типа направляющих: глобальные и локальные. Глобальные действуют на весь фрейм или страницу, тогда как локальные могут быть привязаны к конкретному компоненту или группе. Это полезно при создании повторяющихся блоков, таких как карточки товаров или элементы навигации.

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

Создание направляющих в Figma простое и интуитивное. Для этого используется шкала, расположенная сверху и слева от холста.

1. Убедитесь, что шкалы включены. Если вы не видите числовых делений, нажмите Ctrl + R (или Cmd + R на Mac), чтобы показать их.
2. Щелкните левой кнопкой мыши на верхней шкале и потяните вниз — появится вертикальная направляющая.
3. Аналогично, кликните на левой шкале и потяните вправо — получится горизонтальная линия.
4. Отпустите мышь, чтобы зафиксировать положение. Линия останется на месте до тех пор, пока вы не переместите или не удалите её.

После создания направляющей вы можете точно видеть её координаты в правой панели свойств, если выберете линию. Также при перетаскивании других объектов они будут притягиваться к этой линии, если включена опция «Привязка» (Snap).

Шаги для точного позиционирования

Иногда бывает необходимо установить направляющую точно на определённую координату, например, X = 375 для центрирования на iPhone 13.

• Перетащите направляющую примерно в нужное место.
• Выберите её, щёлкнув по линии.
• В правой панели в разделе «Transform» введите точное значение X (для вертикальной) или Y (для горизонтальной).
• Нажмите Enter — линия переместится с точностью до пикселя.

Работа со шкалами и привязкой к направляющим

Шкалы — это основа для создания направляющих. Без них невозможно будет перетаскивать линии. По умолчанию шкалы начинаются от верхнего левого угла холста, но их можно переопределить, если вы работаете внутри фрейма.
Если вы находитесь внутри фрейма, шкала будет считаться от его границ. Это удобно, когда вы проектируете отдельные экраны или компоненты. Чтобы быстро переключиться между глобальной и локальной системой координат, просто кликните вне фрейма или выберите его.
Привязка (Snap) — ещё один важный параметр. Он включается в верхней панели инструментов, рядом с режимами выделения. Когда он активен, объекты будут автоматически прилипать к направляющим, сеткам и другим элементам.

Горячие клавиши для работы с направляющими

Figma поддерживает множество сочетаний клавиш, ускоряющих работу:

• Ctrl + R / Cmd + R — показать/скрыть шкалы.
• Shift + Drag — игнорировать привязку при перемещении объекта.
• Alt + Drag (Option + Drag) — дублировать объект с привязкой к направляющим.
• Ctrl + ; / Cmd + ; — показать/скрыть все направляющие на текущем фрейме.

Эти комбинации позволяют быстро настраивать рабочее пространство без перехода в меню.

Настройки направляющих: цвет, блокировка, удаление

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

• Кликните правой кнопкой мыши по направляющей.
• Выберите «Change guide color».
• Выберите из предложенных оттенков или задайте кастомный HEX-код.

Цветовое кодирование особенно полезно при работе с несколькими типами макетов — например, синий для мобильных, красный для десктопных, зелёный для печатных материалов.
Блокировка направляющих предотвращает их случайное перемещение. Чтобы заблокировать:

1. Выберите одну или несколько линий.
2. Нажмите Ctrl + L (или найдите в контекстном меню «Lock»).
3. Заблокированные линии станут полупрозрачными и не будут двигаться при клике.

Удаление выполняется просто: выберите направляющую и нажмите Delete. Можно также удалить все сразу через контекстное меню: правый клик → «Delete all guides on frame».

Сетки и направляющие: как использовать вместе

Хотя направляющие и сетки — разные инструменты, они отлично дополняют друг друга. Сетки (Grids) применяются для равномерного распределения элементов, например, колонок в макете. Направляющие же используются для точечного выравнивания.
Например, при создании лендинга вы можете:

• Добавить 12-колоночную сетку с отступами 24px.
• Поставить направляющие на границы безопасной зоны (safe area) — 40px слева и справа.
• Использовать направляющие для центрирования заголовка, даже если он не попадает в колонку сетки.

Такой подход даёт гибкость: сетка обеспечивает структуру, а направляющие — контроль над ключевыми элементами.

Кейс: Адаптивный дизайн для нескольких устройств

Представьте, что вы проектируете адаптивный веб-сайт. У вас есть три брейкпоинта: мобильный (375px), планшетный (768px) и десктопный (1440px).
Вы можете:

• Создать три фрейма.
• В каждом установить направляющие по краям viewport.
• Использовать цветовые метки: синий — мобильный, жёлтый — планшет, зелёный — десктоп.
• Включить привязку, чтобы кнопки и текст всегда находились внутри безопасной зоны.

Такой метод позволяет быстро проверять, как элементы ведут себя на разных экранах, и избегать переполнения контентом.

Типичные ошибки и как их избежать

Даже опытные дизайнеры иногда сталкиваются с проблемами при работе с направляющими. Ниже — самые частые ошибки и способы их решения.

• Направляющие не появляются при перетаскивании. Причина: шкалы скрыты. Решение: нажмите Ctrl + R, чтобы включить их.
• Объекты не притягиваются к линиям. Проверьте, включена ли привязка (Snap). Иногда она отключается случайно.
• Направляющая исчезла после выхода из фрейма. Это происходит, если линия была добавлена внутри фрейма, но не закреплена. Решение: используйте «Guides to Frame» или создавайте глобальные направляющие на странице.
• Слишком много линий — холст перегружен. Удалите ненужные или временно скройте их через Ctrl + ;.

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

Направляющие — это не просто вспомогательный инструмент, а фундамент точного дизайна. Они позволяют соблюдать принципы визуальной иерархии, ритма и баланса. Даже небольшое отклонение в 2–3 пикселя может нарушить восприятие интерфейса.
Лучше всего использовать направляющие системно: создавать их на этапе wireframing, ещё до детализации. Это формирует правильную структуру макета. Также рекомендуется комбинировать их с плагинами вроде «Constraints Helper» или «Guide Layout», которые автоматически расставляют направляющие по внутренним отступам компонентов.
Важно помнить: направляющие должны помогать, а не мешать. Если они загромождают холст, используйте функцию скрытия или организуйте их по слоям (через страницы или фреймы). Современные практики включают создание «глобальных гайдов» на отдельной странице проекта, которые затем копируются в нужные фреймы.

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

Заключение

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

• Направляющие создаются перетаскиванием со шкал — Ctrl + R включает их отображение.
• Привязка (Snap) активируется в верхней панели и помогает точно позиционировать объекты.
• Можно изменять цвет, блокировать и удалять направляющие в зависимости от задачи.
• Комбинируйте направляющие с сетками для максимальной гибкости в дизайне.
• Используйте шаблоны и плагины, чтобы автоматизировать рутинные операции.