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

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

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

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

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

Первый шаг к использованию направляющих — включение линеек. Без видимых линеек невозможно создать направляющую вручную. Линейки располагаются по верхнему и левому краю холста.
Чтобы включить линейки:

1. Откройте Figma и загрузите свой файл.
2. Перейдите в меню View в верхней панели.
3. Выберите пункт Show Rulers или используйте сочетание клавиш Ctrl+R (на Windows) или Cmd+R (на Mac).

После этого на экране появятся две линейки — горизонтальная (сверху) и вертикальная (слева). Теперь вы можете создавать направляющие.
Чтобы добавить направляющую:

• Наведите курсор на линейку.
• Зажмите левую кнопку мыши и перетащите в область холста.
• Отпустите кнопку — направляющая зафиксируется.

Если вы перетаскиваете с горизонтальной линейки — получите вертикальную направляющую. С левой — горизонтальную.

Горячие клавиши для быстрого доступа

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

• Ctrl+R / Cmd+R — показать/скрыть линейки.
• Shift + перетаскивание направляющей — привязка к ближайшим значениям сетки (например, 8px).
• Alt + клик по направляющей — быстро удалить одну направляющую.
• Ctrl+; / Cmd+; — показать/скрыть все направляющие (включая замороженные).

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

В Figma существует три основных типа направляющих, отличающихся по области действия и способу применения.

Глобальные направляющие — лучший выбор для единых отступов по всей странице, например, 16px от края. Артбордные — идеальны, когда вы создаёте несколько экранов с разной шириной (мобильный, планшет, десктоп). Фреймовые используются реже, но незаменимы при детальной проработке карточек, модальных окон и других компонентов.

Расширенная настройка: привязка, блокировка и удаление

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

1. Щёлкните правой кнопкой мыши по направляющей.
2. Выберите пункт Lock Guide.
3. Иконка замка появится рядом с линией — теперь её нельзя сдвинуть.

Разблокировать можно тем же способом. Также вы можете выделить несколько направляющих и заблокировать их одновременно.
Удаление направляющих происходит двумя способами:

• Перетащите направляющую обратно на линейку. Это самый визуальный и интуитивный метод.
• Выделите направляющую и нажмите Delete. Работает, если линия активна.

Для массового удаления:

• Перейдите в меню View → Guides.
• Выберите Delete All Guides on Page или Delete Locked Guides.

Привязка к сетке и объектам

Figma автоматически привязывает направляющие к другим объектам, когда вы их перемещаете. Это называется «привязка к направляющим» (snap to guides). Однако иногда она мешает точной настройке.
Чтобы временно отключить привязку, удерживайте клавишу Alt (на Windows) или Option (на Mac) при перетаскивании направляющей. Это даёт полный контроль над положением.
Также можно настроить чувствительность привязки в разделе Preferences → Canvas. Здесь вы найдёте параметры:

• Привязка к объектам (Snap to Objects)
• Привязка к направляющим (Snap to Guides)
• Привязка к сетке (Snap to Grid)

Лучшие практики использования направляющих в повседневной работе

Профессиональные дизайнеры используют направляющие не просто для выравнивания, а как часть системного подхода к проектированию. Вот ключевые рекомендации:
Создавайте шаблонные направляющие для типовых размеров экранов. Например, для мобильного дизайна часто используются отступы 16px слева и справа. Задайте эти направляющие один раз — и копируйте их в новые проекты.
Используйте цветные направляющие через плагины. Сама Figma не поддерживает цветные направляющие, но сторонние плагины вроде «Guideguide» позволяют задавать группы направляющих с цветовой маркировкой.
Настройте 12-колоночную сетку для веб-проектов. Это стандарт де-факто. Вы можете вручную расставить 12 вертикальных направляющих с учётом гуттеров (обычно 24px), либо использовать авто-сетку Figma (Layout Grid).
Автоматизируйте рутину. Если вы часто создаёте однотипные макеты, сохраните файл с готовыми направляющими как шаблон. В Figma это делается через File → Make Template.

Чек-лист: эффективное использование направляющих

• ✅ Включены линейки (Ctrl+R)
• ✅ Направляющие привязаны к сетке 8px
• ✅ Используются артбордные направляющие для адаптивности
• ✅ Заблокированы ключевые направляющие
• ✅ Удалены лишние линии перед презентацией
• ✅ Сохранён шаблон с базовыми отступами

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

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

Важно понимать, что направляющие — это не ограничение, а свобода. Когда вы знаете, что отступы соблюдены, можно смело экспериментировать с формой, цветом и типографикой, не боясь нарушить целостность интерфейса.
Многие студии внедряют внутренние гайдлайны, где чётко указано, где должны проходить направляющие. Например: «Основные колонки — 360px, гуттер — 24px, внешние отступы — 32px». Такие правила ускоряют работу команды и снижают количество правок.

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

Заключение

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

• Всегда включайте линейки в начале проекта (Ctrl+R).
• Используйте артбордные направляющие для адаптивных макетов.
• Блокируйте ключевые направляющие, чтобы не сдвинуть их случайно.
• Настройте привязку к сетке 8px для единообразия интерфейса.
• Сохраняйте шаблоны с готовыми направляющими для повторного использования.