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

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

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

Включение линеек и основных направляющих

Первый шаг к использованию направляющих — включение линеек. Без них вы не сможете увидеть стартовые точки для создания направляющих. Линейки в Figma появляются вдоль верхнего и левого края холста, когда опция активирована. Чтобы включить их, откройте меню View в верхней панели и выберите пункт Show Rulers (или используйте сочетание клавиш Ctrl+R / Cmd+R).

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

Направляющие, созданные таким образом, являются глобальными — они действуют на всём холсте и видны во всех фреймах. Их можно перемещать, щёлкая и перетаскивая, а также удалять, перетащив обратно в линейку. Чтобы временно скрыть все направляющие, используйте View → Show Guides (горячие клавиши Ctrl+; / Cmd+;).

Как быстро добавить направляющую

• Убедитесь, что включены линейки (Ctrl+R / Cmd+R).
• Наведите курсор на верхнюю (горизонтальную) линейку — курсор изменится на двунаправленную стрелку.
• Нажмите и перетащите вниз — появится вертикальная направляющая.
• Отпустите в нужном месте, чтобы зафиксировать.

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

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

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

Чтобы добавить направляющие внутрь фрейма, выберите его и перейдите в правую панель инспектора (Properties Panel). Прокрутите вниз до раздела Layout Grids. Здесь вы найдёте кнопку + Add Layout Grid. После добавления вы можете выбрать тип сетки: Grid, Columns или Rows. Каждый из них создаёт свои направляющие.

Для точного контроля кликните по созданной сетке и задайте параметры: отступы (gutter), количество колонок, ширина, смещение (offset). Например, 12-колоночная сетка с отступами 16px — стандарт для многих веб-интерфейсов. Такие направляющие автоматически обновляются при изменении размера фрейма, если включена опция Resize with frame.

Настройка направляющих в фрейме: пошагово

1. Выберите фрейм, к которому нужно добавить направляющие.
2. В правой панели нажмите «+ Add Layout Grid».
3. Выберите тип: Grid, Columns или Rows.
4. Задайте значения: ширина, количество, отступы, смещение.
5. Опционально: включите «Resize with frame» и «Locked» для защиты от случайных изменений.

Типы направляющих: Grid, Raster и Custom

Figma поддерживает три основных типа направляющих: кастомные (ручные), сеточные (layout grids) и растровые (pixel grid). Каждый из них решает свои задачи и используется на разных этапах проектирования.

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

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

Растровые направляющие (Pixel Grid) — невидимая сетка, соответствующая пикселям экрана. Включается через View → Show Pixel Grid (Cmd+’). Полезна при работе с иконками и другими пиксель-перфект элементами. Отличается от обычных направляющих тем, что не может быть настроена вручную.

Примеры использования разных типов

• Мобильный экран: создайте две вертикальные направляющие на расстоянии 16px от краёв — это стандартные отступы. Добавьте горизонтальную направляющую на уровне 88px — зона статус-бара.
• Веб-страница: примените 12-колоночную сетку с шириной колонки 80px и отступом 24px. Это обеспечит чёткую структуру контента.
• Иконка 24x24px: включите Show Pixel Grid, чтобы убедиться, что контуры лежат на целых пикселях и не размываются при рендеринге.

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

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

Один из лучших способов — создать шаблонный файл с предустановленными направляющими для часто используемых устройств: iPhone 15, iPad, desktop 1920px. В этом файле можно заранее прописать безопасные поля, сетки и даже цветовые метки. Затем просто дублируйте страницу при старте нового проекта.

Если вы работаете в команде, стандартизируйте использование направляющих. Например, договоритесь, что все карточки продуктов используют 4-колоночную сетку с отступами 12px. Это снижает когнитивную нагрузку и ускоряет ревью.

Горячие клавиши для работы с направляющими

• Ctrl+R / Cmd+R: Показать/скрыть линейки.
• Ctrl+; / Cmd+;: Показать/скрыть направляющие.
• Shift + перетаскивание: Ограничение движения направляющей по одной оси.
• Alt + перетаскивание (Win) / Option (Mac): Создание копии направляющей.
• Cmd+’ (апостроф): Показать/скрыть пиксельную сетку.

Частые ошибки и как их избежать

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

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

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

Типичные проблемы и решения

• Направляющие не появляются при перетаскивании: Убедитесь, что включены линейки и вы находитесь в режиме редактирования (не в Prototype).
• Направляющие не привязываются к объектам: Проверьте, включено ли привязывание (View → Snap to Objects).
• Направляющие исчезли после изменения масштаба: Они никуда не деваются — просто проверьте, не скрыты ли они через Cmd+;.
• Невозможно удалить направляющую: Перетащите её обратно в линейку. Если не получается — попробуйте увеличить масштаб, чтобы точнее попасть.

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

• Марина Ковалёва, Senior UI Designer, 10 лет опыта: «Направляющие — это не просто вспомогательный инструмент, а часть дизайнерской дисциплины. Я вижу разницу между макетами, где они используются системно, и теми, где всё “на глаз”. Первые всегда выглядят профессиональнее.»
• Алексей Фролов, Figma Trainer, автор курсов: «Многие ученики недооценивают мощь вложенных сеток. Они позволяют создавать “умные” компоненты, которые сами выравнивают содержимое. Это экономит часы ручной настройки.»

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

Заключение

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

• Включайте линейки через View → Show Rulers (Cmd+R), чтобы получить доступ к направляющим.
• Добавляйте вложенные направляющие через Layout Grids в свойствах фрейма для гибкости и адаптивности.
• Используйте комбинацию типов направляющих: кастомные для глобальных зон, сетки — для компонентов.
• Не забывайте про привязывание (Snap to Objects) и горячие клавиши — они ускоряют работу в разы.
• Стандартизируйте использование направляющих в команде для единообразия и эффективности.