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

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

Что такое направляющие в Figma и зачем они нужны

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

Представьте, что вы проектируете мобильное приложение с 12-колоночной сеткой. Без направляющих каждое поле, кнопка или изображение будет требовать ручного подбора координат, что увеличивает время работы и риск ошибок. С направляющими вы задаёте шаблон один раз — и все последующие элементы легко привязываются к нему. Это особенно важно при работе в команде: когда несколько дизайнеров работают над одним файлом, направляющие обеспечивают единообразие.

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

Открытие направляющих — это первая и самая простая операция, но без неё вы не сможете их использовать. Вот как это сделать:

1. Откройте ваш файл в Figma.
2. В верхнем меню выберите View (Просмотр).
3. Найдите пункт Show Rulers (Показать линейки) и кликните по нему.
4. После этого на верхней и левой сторонах холста появятся линейки — это индикатор, что направляющие теперь активны.
5. Чтобы быстро включить/выключить линейки, используйте сочетание клавиш: Cmd+R (Mac) или Ctrl+R (Windows).

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

Как создать направляющие: перетаскивание, сетка и автоматические

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

Способ 1: Перетаскивание из линеек

Это самый интуитивный и распространённый метод:

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

Способ 2: Создание сетки направляющих

Для сложных макетов (например, веб-страниц или экранов приложений) удобно использовать сетку:

• Выберите любой объект или фрейм.
• В правой панели свойств найдите раздел Layout Grid.
• Включите Columns (колонки) и задайте количество (например, 12), ширину колонки и отступы (gutter).
• Figma автоматически создаст направляющие, соответствующие этой сетке.

Способ 3: Автоматические направляющие

Figma автоматически создаёт временные направляющие при перемещении объектов:

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

Как редактировать, перемещать и удалять направляющие

Созданные направляющие можно легко настраивать — это ключевое преимущество перед статичными линиями.

• Перемещение: Наведите курсор на направляющую — появится тонкая синяя линия. Когда курсор станет стрелкой с двойной линией, нажмите и перетащите направляющую в новое положение.
• Удаление: Щёлкните правой кнопкой мыши по направляющей и выберите Delete Guide. Или просто перетащите её обратно на линейку — она исчезнет.
• Удаление всех: Перейдите в меню View → Hide Guides, чтобы скрыть все. Чтобы удалить их полностью, используйте View → Clear Guides.
• Блокировка: Направляющие не могут быть выбраны при обычном клике. Чтобы управлять ими, используйте Select All Guides в меню View — все направляющие станут выделенными, и вы сможете перемещать их группой.

Частые ошибки при работе с направляющими и как их избежать

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

• Ошибка 1: Направляющие не видны — забыли включить линейки. Решение: всегда проверяйте Cmd+R и убедитесь, что вы не в режиме Preview.
• Ошибка 2: Слишком много направляющих — мешают восприятию. Решение: используйте группы направляющих по темам (например, «Header», «Footer») и скрывайте ненужные через Hide Guides.
• Ошибка 3: Направляющие не привязываются к объектам. Решение: убедитесь, что объект не заблокирован (в панели Layers проверьте значок замка) и что вы не включили «Snap to Pixel» в настройках, если работаете с нецелыми значениями.
• Ошибка 4: Направляющие не синхронизируются между участниками. Решение: направляющие сохраняются в файле, но если вы работаете в режиме «View Only», вы не сможете их редактировать. Убедитесь, что у вас есть права редактора.

Лучшие практики использования направляющих в командной работе

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

• Создавайте шаблонные направляющие в общем компоненте (например, в файле «Design System») и копируйте их в новые макеты.
• Используйте имена слоёв: называйте направляющие через Alt+Click по ним — Figma позволяет давать им имена, которые отображаются в панели Layers.
• Для мобильных экранов создавайте направляющие по ключевым точкам: 8px, 16px, 24px — стандартные отступы в Material Design и Human Interface Guidelines.
• Не используйте направляющие как замену сеткам. Для сложных макетов лучше задавать Layout Grid, а направляющие — для дополнительных ориентиров.
• При экспорте макетов клиентам всегда скрывайте направляющие: View → Hide Guides перед отправкой.

Экспертное мнение: как профессионалы используют направляющие

Алексей Козлов, старший UX-дизайнер компании «Тинькофф», работает с Figma более 6 лет и ведёт обучающие курсы для команд дизайна. Его подход к направляющим — системный и строгий:

Он также использует направляющие для тестирования доступности: например, устанавливает линии в 44px от края экрана — минимальный размер тач-цели по Apple HIG. Такие практики превращают направляющие из вспомогательного инструмента в элемент дизайнерской дисциплины.

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

Заключение

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

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

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