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

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

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

Как добавить направляющую в Figma: пошаговая инструкция

Чтобы добавить направляющую, начните с активации линеек. Если они не отображаются, нажмите Ctrl+R (или Cmd+R на Mac). Линейки появятся сверху и слева от холста. Затем выполните следующие шаги:

1. Наведите курсор на верхнюю (горизонтальную) или левую (вертикальную) линейку.
2. Зажмите левую кнопку мыши и потяните в сторону рабочего пространства.
3. Отпустите кнопку, когда направляющая окажется в нужном месте.

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

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

Где находятся линейки и как их настроить

Линейки в Figma — это вспомогательный элемент интерфейса, расположенный по краям холста. По умолчанию они скрыты, но легко включаются через меню View → Show Rulers или горячую клавишу Ctrl+R. Линейки отображают текущую систему координат в пикселях, начиная от верхнего левого угла страницы или фрейма.
Вы можете изменить начало отсчёта, перетащив перекрестие в углу, где сходятся две линейки. Это полезно, если вы хотите установить собственную точку отсчёта, например, для центрирования макета. Также возможна работа с несколькими фреймами: при выборе фрейма линейки автоматически переключаются на его внутреннюю систему координат.

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

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

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

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

Точное позиционирование: работа с координатами и привязкой

Хотя перетаскивание направляющей мышью — самый быстрый способ, он не всегда обеспечивает нужную точность. Для профессионального дизайна важно контролировать положение каждой линии до пикселя. В Figma это возможно через панель Properties справа.
После того как вы добавили направляющую, выберите её, щёлкнув по линии. В правой панели появятся поля X и Y, где можно ввести точные координаты. Например, чтобы установить направляющую на 16 пикселей от левого края, введите 16 в поле X. Это особенно полезно при работе с дизайн-системами, где отступы кратны 4 или 8.
Figma также поддерживает привязку (snapping). Когда вы двигаете направляющую, она автоматически «прилипает» к краям объектов, другим направляющим или сетке. Это ускоряет работу, но может мешать при необходимости задать уникальное положение. Чтобы временно отключить привязку, удерживайте Alt (на Windows) или Option (на Mac) во время перемещения.

Использование математических выражений

Figma позволяет вводить не только числа, но и простые математические выражения в поля координат. Например, вместо подсчёта в уме вы можете ввести 375/2 для центрирования направляющей на экране 375px. Система сама вычислит результат и установит линию точно по центру.
Это мощный инструмент при работе с адаптивными макетами. Допустим, вы создаёте мобильное приложение с шириной контента 320px. Чтобы выделить центральную область, вы можете добавить две направляющие: одну на (375 - 320)/2 = 27.5, вторую на 27.5 + 320 = 347.5. Так вы визуально отделите основную зону от полей.

Управление направляющими: блокировка, удаление, скрытие

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

• Блокировка — предотвращает случайное перемещение.
• Скрытие — временно убирает все направляющие с экрана.
• Удаление — полное удаление одной или нескольких направляющих.

Чтобы заблокировать направляющую, выберите её и нажмите Ctrl+L (или найдите опцию в контекстном меню). Заблокированная направляющая получает значок замка рядом с меткой. Это полезно при работе в команде, чтобы другие участники не сдвинули ключевые ориентиры.
Для удаления достаточно выбрать направляющую и нажать Delete. Если нужно убрать все направляющие на странице, используйте сочетание Ctrl+Shift+G (Windows) или Cmd+Shift+G (Mac). Обратите внимание: это действие нельзя отменить через обычный Undo, поэтому будьте осторожны.

Массовое управление через панель Layers

Все направляющие отображаются на панели слоёв (Layers panel), особенно если они находятся на уровне страницы. Вы можете группировать их, переименовывать или скрывать целыми блоками. Например, создайте группу «Grid 12-col» и поместите туда все вертикальные направляющие сетки.
Также через панель можно быстро переключать видимость. Рядом с каждым элементом есть глазик — кликните по нему, чтобы временно скрыть направляющую. Это удобно при презентации макетов клиентам, когда вспомогательные линии могут отвлекать.

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

Опытные дизайнеры используют направляющие не только для выравнивания, но и как часть своей методологии. Вот несколько проверенных практик:

• Создайте шаблон страницы с базовой сеткой: 8px-сетка, отступы по краям, центральная ось. Сохраните как Template — это сэкономит часы работы.
• Используйте цветовые зоны — хотя Figma не поддерживает цветные направляющие, вы можете имитировать их с помощью прямоугольников с низкой непрозрачностью.
• Комбинируйте с Auto Layout — направляющие отлично работают вместе с этим инструментом, помогая контролировать внутренние отступы компонентов.

При работе над адаптивными интерфейсами добавляйте направляющие для каждой breakpoint-зоны: 320px, 768px, 1024px, 1440px. Это поможет быстро оценить, как элементы ведут себя на разных экранах.

Ошибки новичков и как их избежать

• Слишком много направляющих — перегружает интерфейс. Оставляйте только те, что действительно нужны.
• Нет системности — направляющие расставлены хаотично, без привязки к сетке. Используйте кратные значения (4, 8, 12).
• Забывают про привязку — в результате элементы не выравниваются. Проверьте, включена ли опция Snap to Guides в меню View.

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

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

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

Заключение

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

• Направляющие добавляются перетаскиванием с линеек, активируемых через Ctrl+R.
• Существуют три типа: глобальные, страницы и фрейма — используйте их в зависимости от задачи.
• Точное позиционирование достигается через панель Properties и математические выражения.
• Управляйте направляющими: блокируйте, скрывайте, удаляйте, группируйте для удобства.
• Интегрируйте направляющие в свою методологию — это ключ к системному дизайну.