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

Команда «направляющие» в Figma позволяет создавать временные линии для точного позиционирования элементов на макете. Доступ к направляющим осуществляется через контекстное меню, горячие клавиши или настройки слоя.

Что такое направляющие в Figma

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

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

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

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

Первое, что нужно сделать — убедиться, что линейки включены. Без них невозможно создать направляющие. Активировать линейки можно сочетанием клавиш Ctrl+R (на Windows) или Cmd+R (на Mac). После этого появятся горизонтальная и вертикальная линейки по краям рабочей области.

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

Если вы случайно скрыли линейки, просто повторите команду Ctrl+R / Cmd+R. Также можно включить их через меню: View → Show Rulers. Направляющие будут отображаться до тех пор, пока вы не удалите их вручную или не скроете через настройки просмотра.

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

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

Виды направляющих и их особенности

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

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

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

Также стоит отметить, что Figma не поддерживает угловые или радиальные направляющие. Все направляющие строго горизонтальные или вертикальные. Для диагональных выравниваний придётся использовать временные формы или вспомогательные линии.

Работа с направляющими на странице и во фрейме

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

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

Для удобства можно группировать направляющие по смыслу. Например:

• Направляющие для типографики (выравнивание заголовков, абзацев).
• Направляющие для сетки (границы колонок, отступы между карточками).
• Направляющие для CTA-элементов (расположение кнопок, иконок действий).

Чтобы удалить направляющую, просто перетащите её обратно на линейку. Альтернативно — кликните по ней и нажмите Delete.

Пример: создание 12-колоночной сетки

Представьте, что вы проектируете адаптивный сайт. Стандартная практика — использовать 12-колоночную сетку с отступами.

1. Включите линейки (Ctrl+R).
2. Ширина контента — 1140 px, отступы по 15 px. Общая ширина — 1200 px.
3. Создайте вертикальные направляющие каждые 85 px (колонка) + 15 px (отступ).
4. Общее количество направляющих: 13 (начало и конец каждой колонки).
5. Выровняйте фрейм макета по крайним направляющим.

Теперь все фреймы можно выравнивать по этим линиям, обеспечивая единообразие.

Советы по эффективному использованию

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

Во-первых, используйте систему отступов. Определите базовый отступ (например, 8 или 16 px) и создавайте направляющие только кратно ему. Это обеспечит согласованность и упростит работу с автолейаутами.

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

В-третьих, используйте направляющие для проверки выравнивания. Если вы сомневаетесь, правильно ли расположен элемент, создайте временную направляющую и проверьте привязку.

Также рекомендуется периодически очищать направляющие. Со временем их может стать слишком много, что приведёт к визуальному шуму. Удалите те, которые больше не используются.

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

• ✅ Включены линейки (Ctrl+R / Cmd+R).
• ✅ Направляющие соответствуют сетке и отступам проекта.
• ✅ Избыточные направляющие удалены.
• ✅ Критические направляющие заблокированы.
• ✅ Используются шаблоны с готовыми направляющими.

Ошибки, которых стоит избегать

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

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

Также распространённая проблема — работа без включённых линеек. Многие пользователи не знают, что направляющие нельзя создать без активных линеек. Это вызывает путаницу и воспринимается как «баг».

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

Как исправить распространённые проблемы

• Не появляются линейки: Проверьте сочетание клавиш (Ctrl+R). Убедитесь, что вы находитесь на странице, а не в плагине.
• Нельзя перетащить направляющую: Убедитесь, что вы тянете из линейки, а не из пустого места. Линейка должна быть видимой.
• Направляющая исчезла: Возможно, вы её удалили или скрыли линейки. Создайте заново.
• Направляющие мешают: Заблокируйте важные, удалите лишние. Можно временно скрыть все через View → Hide Guides.

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

По его словам, даже опытные дизайнеры иногда пропускают этот шаг, особенно при работе в сжатые сроки. Но именно отсутствие чёткой основы потом приводит к несогласованности макетов и сложностям при передаче в разработку.

«Я рекомендую делать направляющие частью стартового чек-листа. Перед тем как добавить первый текст, убедитесь, что есть направляющие для заголовков, абзацев и кнопок. Это занимает 2 минуты, но экономит часы правок позже», — добавляет эксперт.

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

Заключение

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

• Активируйте линейки через Ctrl+R / Cmd+R.
• Создавайте направляющие перетаскиванием из линеек.
• Используйте их для сеток, отступов и выравнивания.
• Блокируйте важные направляющие, удаляйте лишние.
• Внедрите направляющие в стартовый чек-лист проекта.