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

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

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

Создание направляющих в Figma — простой, но мощный процесс, который значительно повышает точность дизайна. Начните с активации линеек, если они скрыты. Для этого нажмите Ctrl+R (Cmd+R на Mac). Линейки появятся сверху и слева от рабочего холста. Именно из них вы будете «вытаскивать» направляющие.
Чтобы добавить направляющую, зажмите левую кнопку мыши на линейке и потяните внутрь холста. Если тащите от верхней линейки — получите горизонтальную направляющую, от левой — вертикальную. При этом Figma покажет текущую координату в пикселях, что позволяет точно позиционировать линию. Отпустите мышь, когда направляющая окажется на нужной позиции.
Для более точного размещения используйте привязку к объектам. Когда направляющая приближается к границе фигуры, тексту или фрейму, она автоматически «прилипнет» к ним. Это особенно полезно при выравнивании отступов, центрировании элементов или создании грид-систем. Чтобы временно отключить привязку, удерживайте клавишу Alt (Option на Mac) во время перетаскивания.

Добавление направляющих через контекстное меню

Кроме перетаскивания из линеек, Figma позволяет создавать направляющие через контекстное меню. Выделите любой объект на холсте, щёлкните правой кнопкой мыши и выберите пункт «Create Guides from Selection». Эта функция автоматически генерирует четыре направляющие: по левому, правому, верхнему и нижнему краям выделенного элемента.
Это удобно при работе с шаблонами, карточками или блоками, где нужно быстро задать отступы или выровнять соседние элементы. Например, если вы проектируете карточку товара, достаточно один раз выделить её контейнер и создать направляющие — остальные карточки можно будет легко выравнивать по этим линиям.

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

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

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

Figma поддерживает несколько типов направляющих, каждый из которых решает определённые задачи. Понимание различий между ними помогает эффективнее организовать рабочий процесс и избежать дублирования усилий.
Первый тип — глобальные направляющие. Они располагаются на уровне страницы и действуют по всему холсту. Такие направляющие удобны для задания общей сетки, например, 12-колоночной верстки или ограничения ширины контента. Их можно использовать как ориентир для всех фреймов и объектов на странице.
Второй тип — локальные направляющие, привязанные к конкретному фрейму. Чтобы создать такие направляющие, необходимо включить режим редактирования фрейма (двойной клик) и перетащить линию из линейки уже внутри фрейма. Эти направляющие будут двигаться вместе с фреймом и не выходят за его пределы.

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

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

Цветовое кодирование направляющих

Хотя Figma не позволяет напрямую задавать цвет направляющим, вы можете визуально их различать, используя расположение и назначение. Например, красные линии — для границ макета, синие — для колонок, серые — для отступов. Это не системная функция, но практика среди профессионалов: заранее договориться о цветовой семантике в команде.
Также существуют сторонние плагины, например, Guideguide или Layout Helper, которые позволяют массово создавать направляющие с заданными интервалами, шагами и даже цветами. Они особенно полезны при работе с дизайн-системами, где нужно быстро настроить грид для разных breakpoint’ов.

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

Направляющие — это не просто вспомогательные линии, а полноценный инструмент проектирования. Умелое применение позволяет стандартизировать процессы, уменьшить количество ошибок и повысить качество макетов.
Первое правило — всегда начинайте с создания базовой сетки. Даже если вы работаете над небольшим экраном, задайте основные отступы: 16px слева и справа, 24px сверху и снизу. Это создаёт визуальный ритм и помогает избежать хаотичного размещения элементов. Используйте для этого глобальные направляющие.
Второе — применяйте направляющие для проверки симметрии. Центрирование элементов «на глаз» часто приводит к смещениям в 1–2 пикселя, что бросается в глаза при внимательном просмотре. Проведите вертикальную направляющую по центру экрана и выравнивайте по ней заголовки, кнопки и иконки.

Шаблоны направляющих для разных устройств

Профессионалы часто создают шаблонные страницы с готовыми направляющими под стандартные размеры: мобильные (375×812), планшеты (768×1024), десктоп (1440×1024). Эти страницы используются как основа для новых проектов. Вы можете сохранить такой шаблон в библиотеке команды, чтобы все дизайнеры работали в едином формате.

• Мобильные макеты: отступы 16px, колонки 4px (для 8px-решетки)
• Десктоп: 12-колоночная сетка с шириной колонки 80px и gutter 24px
• Адаптивные брейкпоинты: 320, 768, 1024, 1440px — направляющие помогают визуализировать изменения

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

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

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

Даже опытные дизайнеры иногда допускают ошибки при работе с направляющими. Знание этих типичных проблем поможет вам сэкономить время и избежать разочарований.
Первая ошибка — создание слишком большого количества направляющих. Когда на холсте появляется более 20 линий, они начинают мешать, а не помогать. Решение: регулярно очищайте ненужные направляющие. Выделите лишние линии, нажмите Delete. Также используйте слои: хотя направляющие не отображаются в панели слоёв, их можно временно скрыть.
Вторая ошибка — отсутствие системы. Многие начинают добавлять направляющие спонтанно, без чёткого плана. В результате одни и те же значения дублируются, а некоторые участки остаются без контроля. Решение: перед началом работы продумайте структуру. Определите ключевые зоны: безопасные области, зоны контента, отступы, колонки.

Проблемы с привязкой и как их решить

Иногда направляющие не «прилипают» к объектам. Это может происходить по нескольким причинам: отключена привязка, используется группировка, или объект находится в замороженном состоянии. Проверьте следующее:

1. Убедитесь, что включена привязка: в верхней панели значок магнита должен быть активен.
2. Проверьте, не находится ли объект внутри группы. Разгруппируйте (Ctrl+Shift+G), если нужно.
3. Убедитесь, что объект не заблокирован (значок замка в правой панели).

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

Ошибка: направляющие не видны

Пользователи жалуются, что направляющие «исчезли». На самом деле, они могут быть скрыты. Нажмите Cmd+; (или Ctrl+;) — это переключатель видимости направляющих. Также проверьте, не вышли ли вы за пределы фрейма: локальные направляющие видны только внутри своего контейнера.

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

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

«В наших проектах каждая направляющая — это часть дизайн-системы. Мы не просто рисуем линии, а задаём правила: “все отступы кратны 8”, “колонки — 64px + 16px отступ”. Это позволяет команде из 12 дизайнеров работать согласованно. Мы используем плагин Guideguide, чтобы генерировать сетки за 2 клика. Без направляющих невозможно представить масштабируемый дизайн.»

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

Часто задаваемые вопросы

Заключение

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

• Направляющие создаются перетаскиванием из линеек или через контекстное меню.
• Существуют глобальные и локальные направляющие — используйте их в зависимости от задачи.
• Всегда включайте привязку и следите за видимостью направляющих (Cmd+;).
• Используйте плагины для автоматизации создания сеток и гайдов.
• Регулярно очищайте ненужные направляющие, чтобы не перегружать интерфейс.