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

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

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

Создание направляющих в Figma — простой и интуитивно понятный процесс. Первое, что нужно знать: направляющие можно добавлять как на общий холст (глобальные), так и внутрь отдельных фреймов или фигур (локальные). Глобальные направляющие видны во всём файле, а локальные — только внутри контейнера, где они созданы.
Для добавления направляющей щёлкните по вертикальной или горизонтальной линейке и потяните в сторону холста. Линейки расположены сверху и слева от рабочего пространства. При перетаскивании вы увидите пунктирную линию, которая будет следовать за курсором. Отпустите, чтобы зафиксировать положение. Это самый быстрый способ начать работу с направляющими.
Если вам нужно точно задать координаты, щёлкните дважды по линейке — появится окно с полем ввода. Введите значение в пикселях, и направляющая установится на указанную позицию. Это особенно полезно при работе с макетами, соответствующими дизайн-системам, где важна точность до пикселя.

Шаги для создания направляющих

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

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

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

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

Работа с сетками и отступами: практика использования

Сетки в Figma — мощный инструмент для создания структурированных и масштабируемых интерфейсов. Они позволяют быстро выравнивать элементы по колонкам, соблюдать единые отступы и обеспечивать согласованность между экранами. Настройка сетки начинается с выбора типа: «Grid», «Layout Grid» или «Square».
Layout Grid — наиболее популярный вариант. Он позволяет задать количество колонок, ширину каждой, отступы (gutter) и внешние поля (margin). Например, 12-колоночная сетка с шириной колонки 68 px, отступом 24 px и полями по 32 px — стандарт для многих веб-интерфейсов. Такая конфигурация легко адаптируется под разные разрешения.
Чтобы добавить сетку, выделите фрейм, перейдите в правую панель свойств и найдите раздел «Layout Grids». Нажмите «+» и выберите тип. После настройки сетка отображается поверх фрейма в виде полупрозрачных линий. Её можно временно скрыть, нажав G, или отключить в настройках просмотра.

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

• Выберите фрейм с шириной 1440 px (типичная ширина десктопного макета).
• Добавьте Layout Grid → Columns.
• Установите: 12 колонок, ширина колонки — 68 px, gutter — 24 px, margin — 32 px.
• Активируйте опцию «Visible» для отображения сетки на холсте.
• Проверьте, что суммарная ширина (12×68 + 11×24 + 2×32) = 1440 px — всё совпадает.

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

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

Даже опытные дизайнеры иногда сталкиваются с проблемами при работе с направляющими. Понимание типичных ошибок помогает сэкономить время и повысить качество работы.
Одна из самых частых — использование слишком большого количества направляющих. Когда холст перегружен линиями, сложно понять, какие из них актуальны. Решение: регулярно очищайте лишние направляющие. Выделите их и нажмите Delete. Также можно временно скрыть все направляющие через View → Hide Guides (Ctrl+;).
Другая ошибка — смешение глобальных и локальных направляющих без системы. Например, глобальная направляющая указывает центр, а локальная — смещена. Это приводит к несогласованности. Рекомендуется заранее продумать систему: где какие направляющие используются, и придерживаться её.
Третья проблема — забытые направляющие после рефакторинга макета. Если вы изменили ширину фрейма, но не обновили сетку, элементы могут выглядеть смещенными. Проверяйте актуальность направляющих после любых изменений размеров.

Как исправить смещённые направляющие

• Выделите направляющую и перетащите её в нужное положение.
• Дважды щёлкните по линейке, чтобы открыть точный ввод координат.
• Используйте плагины вроде «Guides Manager» для массового редактирования.
• Проверьте привязку: включите Snap to Geometry, чтобы направляющие «цеплялись» за края объектов.

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

Направляющие — это не просто вспомогательный инструмент, а часть дисциплины проектирования. Хороший дизайн строится на системности, а направляющие помогают эту системность визуализировать. Они снижают когнитивную нагрузку, позволяя сосредоточиться на содержании, а не на выравнивании.
Работа с направляющими должна быть осмысленной. Не стоит добавлять их «на всякий случай». Каждая направляющая должна выполнять функцию: выравнивание, контроль симметрии, разметка сетки. Избыток приводит к хаосу, недостаток — к неточностям.
Автоматизация — ключ к эффективности. Использование шаблонов с предустановленными направляющими и сетками экономит часы работы. Особенно это важно при создании дизайн-систем, где согласованность критична.
При проектировании мобильных интерфейсов рекомендуется использовать направляющие для контроля безопасных зон: верхних и нижних индикаторов на iPhone, а также для проверки доступности таповых зон (минимум 48×48 px).

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

Заключение

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

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