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

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

Что такое направляющие в Figma

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

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

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

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

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

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

Для точного позиционирования используйте клавиши-модификаторы:

• Shift — ограничивает движение по оси (например, только по X или Y), что помогает избежать случайного наклона.
• Ctrl (Cmd на Mac) — временно отключает привязку к другим элементам и сетке.
• Alt (Option) — при перетаскивании создаёт копию существующей направляющей.

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

Как добавить направляющие через плагины

Хотя базовые функции Figma позволяют легко создавать направляющие вручную, существуют плагины, которые ускоряют этот процесс. Например, Auto-layout Guides или Guideguide позволяют генерировать серии направляющих по заданным параметрам: количество, шаг, отступы.

1. Откройте панель плагинов (в правом верхнем углу, значок квадратика).
2. Найдите и установите плагин Guideguide.
3. Выберите фрейм или область, для которой нужны направляющие.
4. Запустите плагин и задайте параметры: тип (горизонтальный/вертикальный), начало, конец, шаг.
5. Нажмите «Create» — направляющие появятся автоматически.

Такой подход особенно эффективен при создании сеток, колонок или систем отступов, где требуется высокая точность и повторяемость.

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

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

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

Блокировка направляющих предотвращает их случайное смещение. Чтобы заблокировать все направляющие:

• Перейдите в меню View → Lock Guides.
• Или используйте сочетание Ctrl + Alt + G (Cmd + Option + G на Mac).

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

Работа с цветом и стилем направляющих

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

Однако есть обходной путь: использование фигур-заменителей. Например, вы можете создать тонкую линию с прозрачностью 50% и закрепить её как шаблон. Такие «визуальные направляющие» можно окрашивать в любой цвет и использовать как ориентир. Главное — не забывать выключать их перед экспортом.

Ошибки и как их избежать

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

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

Ещё одна частая проблема — случайное удаление или смещение направляющих. Чтобы этого избежать:

• Всегда блокируйте направляющие после настройки.
• Используйте комбинацию Ctrl + Z для быстрого отката.
• Создавайте резервные копии файла перед масштабными изменениями.

Также важно помнить, что направляющие не привязываются автоматически к авто-лейаутам. Если вы используете auto-layout, убедитесь, что внутренние отступы (padding) соответствуют вашим направляющим, иначе элементы будут «уезжать».

Когда направляющие не работают: диагностика

Если вы не можете поставить направляющие, проверьте следующее:

• Активны ли линейки? (Ctrl + R / Cmd + R)
• Не заблокированы ли направляющие? (View → Lock Guides)
• Находитесь ли вы в режиме редактирования компонента? Иногда направляющие не появляются внутри instance.
• Достаточно ли прав у вас в файле? В командных проектах доступ может быть ограничен.

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

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

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

Рекомендуется создать «стандарт разметки» в виде документа или комментария в Figma. В нём укажите:

• Где проходят основные направляющие (например, 16px от края).
• Какие направляющие используются для колонок (например, 12-колоночная сетка с шагом 80px).
• Цветовые зоны или области, если применяются визуальные направляющие.

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

Синхронизация с другими инструментами

Figma интегрируется с такими инструментами, как Zeplin, Avocode и Framer. Однако направляющие не всегда переносятся автоматически. Уточните в документации инструмента, поддерживает ли он экспорт направляющих.

Для разработчиков полезно добавлять комментарии вида «Отступ от левого края — 24px», даже если они видят направляющие в Figma. Это повышает точность реализации.

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

По словам эксперта, главная ошибка новичков — недоверие к инструментам. «Они думают, что «чувствуют» пропорции, но человеческий глаз ошибается. Особенно при длительной работе. Направляющие — это не ограничение, а опора. Чем сложнее проект, тем больше они нужны».

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

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

Заключение

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

• Направляющие добавляются перетаскиванием из линеек (горизонтальной или вертикальной).
• Используйте Ctrl + ; для показа/скрытия и Ctrl + Alt + G для блокировки.
• Локальные направляющие привязаны к фреймам, глобальные — к странице.
• Направляющие не экспортируются и не видны вне Figma.
• Для сложных сеток применяйте плагины, такие как Guideguide.