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

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

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

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

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

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

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

Существует несколько способов добавить направляющие в Figma. Все они просты и доступны даже новичкам.

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

Если вы хотите создать направляющую по координатам, просто щёлкните дважды по линейке — Figma предложит ввести точное значение в пикселях. Это полезно, когда нужно установить отступ в 16 px от левого края.

Другой способ — использовать выделенный объект. Выберите любой слой (например, прямоугольник), затем перетащите его край — Figma автоматически создаст направляющую по этому краю. Такой метод называется «привязка к объекту» и активируется через настройки привязки.

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

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

• G — временно активирует режим создания направляющих (даже если выбран другой инструмент).
• Ctrl+; (Cmd+; на Mac) — показывает/скрывает все направляющие на текущей странице.
• Shift+G — создаёт направляющую по центру выделенного объекта.

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

В Figma существует три уровня направляющих, каждый из которых служит своей цели.

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

Локальные направляющие действуют только внутри одного фрейма. Они особенно полезны при работе с компонентами и автолейаутами. Чтобы создать локальную направляющую, войдите внутрь фрейма, включите линейки и перетащите линию. Она будет привязана только к этому контейнеру.

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

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

Привязка к направляющим — один из ключевых механизмов точного позиционирования. Когда вы перемещаете объект, он автоматически «прилипает» к ближайшей направляющей, если включена опция «Snap to guides».

Чтобы проверить или изменить настройки привязки, откройте меню View → Snapping. Здесь вы найдёте несколько параметров:

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

Если привязка работает слишком агрессивно, вы можете временно отключить её, удерживая клавишу Space при перемещении объекта. Это позволяет свободно двигать слой, не опасаясь случайного выравнивания.

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

Как направляющие взаимодействуют с гридами и фреймами

Направляющие могут дополнять другие системы выравнивания. Например, вы можете использовать направляющие для основных структурных линий (центр, поля), а внутри фреймов — встроенные гриды Figma.

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

Полезные советы и лайфхаки по работе с направляющими

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

Один из них — создание шаблона с готовыми направляющими. Например, вы можете подготовить страницу с типовыми отступами (16, 24, 32 px), центровыми линиями и колонками, а затем копировать её при старте нового проекта.

Другой лайфхак — использование плагинов. Существуют плагины вроде «Guides Manager», которые позволяют сохранять наборы направляющих, быстро включать/выключать группы и импортировать гриды из других файлов.

• Двойной щелчок по направляющей — переименование (если установлен плагин с поддержкой меток).
• Удерживайте Alt (Option на Mac) при создании направляющей — она будет центрирована относительно холста.
• Щёлкните правой кнопкой по направляющей — появится меню с удалением и блокировкой.

Блокировка направляющих предотвращает их случайное перемещение. Чтобы заблокировать все направляющие, используйте View → Guides → Lock. Разблокировать — той же путь, но Unlock.

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

Если на холсте слишком много направляющих, их можно быстро удалить:

1. Выберите инструмент «Clean Up» — его нет в Figma по умолчанию, но можно использовать плагин.
2. Или вручную: зажмите Shift и кликните по каждой ненужной линии, затем нажмите Delete.
3. Чтобы убрать все направляющие на странице, выберите View → Guides → Clear All.

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

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

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

Другая ошибка — чрезмерное количество направляющих. Когда на холсте десятки линий, они начинают мешать, а не помогать. Рекомендуется использовать только ключевые ориентиры: поля, центр, колонки, базовые отступы.

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

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

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

«Figma позволяет делать всё — от простых линий до сложных сеток. Главное — системность. Создайте шаблон, сохраните его, и используйте во всех проектах. Это экономит часы работы», — добавляет эксперт.

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

Заключение

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

От простого перетаскивания из линейки до сложных систем с локальными и условно глобальными ориентирами — Figma предлагает гибкие возможности. Главное — применять их системно и не пренебрегать настройкой в начале проекта.

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