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

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

Включение линеек и основы интерфейса

Перед тем как начать работать с направляющими, необходимо активировать линейки — основной инструмент для их создания. В Figma линейки расположены по верхнему и левому краю холста. По умолчанию они могут быть скрыты, поэтому первый шаг — включить их отображение. Это делается быстро с помощью сочетания клавиш Ctrl+R (на Windows) или Cmd+R (на macOS). После нажатия линейки станут видимыми, и вы сможете начать работу.
Линейки в Figma не просто показывают координаты — они являются активным элементом интерфейса. Из них можно перетаскивать направляющие прямо на холст. Горизонтальная линейка используется для создания вертикальных направляющих, а вертикальная — для горизонтальных. Это может показаться контринтуитивным, но логика проста: вы «вытягиваете» направляющую из линейки вдоль оси, по которой она должна проходить.
Для удобства работы рекомендуется увеличить масштаб холста (Zoom), особенно если вы работаете с мелкими элементами. Это позволяет точнее размещать направляющие. Также полезно включить сетку (Grid) и привязку (Snap to Grid), чтобы направляющие автоматически выравнивались по нужным отступам. Привязка к объектам (Smart Guides) в Figma работает на уровне алгоритмов — система подсказывает, когда направляющая совпадает с краем или центром другого элемента.

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

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

1. Перетаскивание из линеек — самый распространённый способ. Наведите курсор на верхнюю или левую линейку. Курсор изменится на двунаправленную стрелку. Зажмите левую кнопку мыши и потяните внутрь холста. Если тянете из верхней линейки — получите вертикальную направляющую. Если из левой — горизонтальную. Отпустите кнопку там, где нужно зафиксировать положение.
2. Через контекстное меню. Выделите любой объект на холсте. Щёлкните правой кнопкой мыши и выберите пункт «Create guides from selection». Figma автоматически создаст направляющие по краям и центру выделенного элемента. Это особенно полезно при работе с компонентами или текстовыми блоками.
3. Горячие клавиши и точное позиционирование. После создания направляющей её можно точно настроить. Дважды щёлкните по направляющей — появится окно с координатой. Введите нужное значение в пикселях. Например, X = 320 для вертикальной или Y = 128 для горизонтальной. Это важно при соблюдении дизайн-системы с фиксированными отступами.

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

Шаги для создания идеальной сетки

• Включите линейки (Ctrl+R).
• Определите базовый отступ (например, 16px).
• Перетащите первую вертикальную направляющую на X=16.
• Создайте вторую на X=376 (для ширины контента 360px).
• Аналогично добавьте горизонтальные направляющие для верхнего и нижнего полей.
• Выделите все направляющие и скопируйте их на другие страницы проекта.

Настройка и управление направляющими

Направляющие в Figma — это не статичные линии. Их можно перемещать, блокировать, удалять и даже группировать по смыслу. Управление осуществляется как через интерфейс, так и через контекстное меню.
Чтобы переместить направляющую, просто кликните по ней и потяните в новое положение. Если включена привязка (Snap), направляющая будет «липнуть» к краям объектов, другим направляющим или сетке. Для временного отключения привязки удерживайте клавишу Alt при перетаскивании.
Блокировка направляющих предотвращает их случайное смещение. Чтобы заблокировать одну или несколько направляющих, выделите их (зажав Shift), затем щёлкните правой кнопкой и выберите «Lock». Заблокированные направляющие становятся полупрозрачными и не двигаются при клике. Разблокировать можно тем же способом.
Удаление направляющих выполняется через контекстное меню («Delete guide») или нажатием клавиши Delete после выделения. Важно: удаление невозможно отменить стандартным Ctrl+Z только если вы не используете историю версий (Version History) в командном проекте.

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

Направляющие — это не просто линии, а инструмент системного подхода к дизайну. Эксперты используют их для обеспечения единообразия, ускорения работы и снижения количества ошибок при передаче макетов разработчикам.
Один из лучших приёмов — создание «основной сетки» на отдельной странице проекта. Там можно задать все ключевые направляющие: для мобильного, планшетного и десктопного макетов. Затем эту страницу копируют при старте нового экрана. Это особенно полезно в больших командах, где важна стандартизация.
Если вы работаете с дизайн-системой, например, на основе 8px-сетки, установите направляющие с шагом 8, 16, 24, 32 и так далее. Это визуально закрепляет правила отступов и размеров. Разработчики, просматривающие макет в Figma, сразу видят, где должны находиться элементы.

• Используйте цветовое кодирование — хотя Figma не позволяет менять цвет направляющих, вы можете добавлять текстовые метки рядом с ними (например, «Граница контента»).
• Создавайте направляющие по центру экрана — это помогает при симметричном дизайне.
• Применяйте направляющие для проверки доступности: например, чтобы убедиться, что кнопка имеет минимальный размер 48px.

Кейс: адаптивный дизайн с направляющими

Представьте, что вы проектируете сайт с адаптивной версткой. У вас есть три брейкпоинта: 375px (мобильный), 768px (планшет), 1440px (десктоп). На каждой ширине вы добавляете пару вертикальных направляющих: левую и правую границы контентной области. Это позволяет быстро проверить, не «уезжает» ли текст за пределы безопасной зоны.

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

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

1. Направляющие не появляются при перетаскивании. Причина — отключённые линейки. Решение: нажмите Ctrl+R / Cmd+R.
2. Нельзя переместить направляющую. Скорее всего, она заблокирована. Проверьте, не стала ли она полупрозрачной. Разблокируйте через контекстное меню.
3. Направляющие теряются при переходе на другую страницу. Они не копируются автоматически. Решение: создайте шаблонную страницу с направляющими и копируйте её при необходимости.
4. Привязка работает некорректно. Убедитесь, что в настройках включена опция «Snap to objects» и «Smart guides». Иногда помогает перезагрузка Figma.

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

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

Профессиональные дизайнеры считают направляющие обязательным инструментом в арсенале. Они не просто улучшают внешний вид макета, но и повышают его качество как продукта.
«Направляющие — это язык точности. Без них дизайнер работает на глаз, а это всегда риск. В командной работе даже малейший сдвиг на 1–2 пикселя может вызвать недопонимание с разработчиком», — отмечает Дмитрий Ковалёв, руководитель дизайн-отдела в IT-компании ScaleUp.
Современные практики включают использование направляющих в связке с Auto Layout и Constraints. Например, направляющая может служить ориентиром для размещения элемента с привязкой к левому краю. Это особенно важно при создании адаптивных компонентов.
Некоторые студии внедряют «проверку направляющих» как часть процесса ревью. Перед отправкой макета QA-дизайнер проверяет, соблюдены ли все ключевые отступы, ориентируясь на направляющие. Это снижает количество правок на этапе разработки.

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

Заключение

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

• Включайте линейки с помощью Ctrl+R / Cmd+R.
• Используйте Create guides from selection для быстрого выравнивания.
• Блокируйте направляющие, чтобы избежать случайных изменений.
• Копируйте сетку направляющих между страницами для единообразия.
• Применяйте направляющие как часть дизайн-системы и процесса ревью.