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

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

Figma — один из ключевых инструментов современного UI/UX-дизайна, используемый командами по всему миру для создания интерфейсов, прототипов и дизайн-систем. Одной из важнейших функций платформы являются направляющие — невидимые в финальном продукте, но крайне полезные при работе линии, обеспечивающие точное выравнивание и согласованность элементов. Умение эффективно использовать направляющие напрямую влияет на качество макета: от соблюдения принципов визуального дизайна до соответствия гайдлайнам Material Design или Apple Human Interface Guidelines.

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

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

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

1. Убедитесь, что на панели слева включена линейка. Если её не видно — нажмите Ctrl+R (или Cmd+R на Mac), чтобы отобразить горизонтальные и вертикальные линейки.
2. Наведите курсор на линейку: он изменится на значок двунаправленной стрелки.
3. Зажмите левую кнопку мыши и начните перетаскивать: вниз — для создания горизонтальной направляющей, вправо — для вертикальной.
4. Отпустите кнопку мыши, когда направляющая окажется в нужном месте. Она автоматически привяжется к текущему арте-борду или фрейму.

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

Для удаления направляющей достаточно кликнуть по ней правой кнопкой мыши и выбрать пункт «Delete Guide». Альтернативно — выберите направляющую и нажмите клавишу Delete.

Когда использовать перетаскивание, а когда — ручной ввод?

Перетаскивание идеально подходит для быстрой работы и визуальной оценки. Однако при необходимости соблюсти точные значения (например, отступ 16px или центрирование по 375px) лучше использовать ручной ввод координат. Этот метод особенно важен при работе с адаптивными макетами и дизайн-системами.

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

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

• Локальные направляющие — привязываются к конкретному арте-борду или фрейму. Они видны только внутри этого контейнера и исчезают за его пределами.
• Глобальные направляющие — создаются вне границ арте-бордов и отображаются на всех страницах документа. Часто используются для обозначения общей ширины контента (например, 1200px) или безопасных зон.
• Сетки (Grids) — не путать с направляющими, хотя выполняют схожую функцию. Сетки — это повторяющиеся структуры (строки, колонки, модульные сетки), которые можно применять к фреймам.

Как отличить локальную направляющую от глобальной?

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

Точное позиционирование: как задать координаты направляющих

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

После создания направляющей выделите её, кликнув по линии. В правой панели инспектора появится раздел «Guide», где можно указать:

• X — горизонтальная координата (для вертикальных направляющих);
• Y — вертикальная координата (для горизонтальных направляющих).

Введите нужное значение в пикселях — и направляющая переместится точно в указанную точку. Это особенно полезно при:

• Центрировании элементов (например, X = 187.5 для арте-борда шириной 375px);
• Создании отступов по системе 8px;
• Выравнивании иконок, кнопок и текстовых блоков.

Пример: создание центральной направляющей

Допустим, у вас арте-борд iPhone с шириной 375px. Чтобы провести направляющую точно по центру:

1. Создайте вертикальную направляющую перетаскиванием.
2. Выделите её.
3. В правой панели в поле X введите значение 187.5.
4. Направляющая займёт центральное положение.

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

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

Ошибка 1: направляющая не привязывается к нужному арте-борду

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

Ошибка 2: направляющие «исчезают» при масштабировании

Направляющие не исчезают — просто при сильном отдалении они становятся менее заметными. Чтобы их найти, увеличьте масштаб (Ctrl + колесо мыши) или временно отключите привязку (удерживайте Ctrl при перемещении).

Ошибка 3: невозможно выбрать направляющую

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

• Открыть панель слоёв и найти направляющую в списке;
• Использовать сочетание Ctrl+Shift+G для выбора всех направляющих;
• Временно скрыть другие объекты (щелчок по глазу в панели слоёв).

Продвинутые техники: плагины, скрипты и автоматизация

Figma позволяет расширять функционал через плагины. Несколько из них специализируются на работе с направляющими и могут значительно ускорить процесс.

Популярные плагины для направляющих

• Auto Layout Guides — автоматически создаёт направляющие на основе свойств Auto Layout.
• Guideguide — позволяет задавать сложные системы направляющих: от гармоничных пропорций до сеток на основе золотого сечения.
• Smart Guides — добавляет дополнительные умные направляющие при перемещении объектов.

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

Создание направляющих через API и скрипты

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

Пример использования: при создании нового экрана мобильного приложения скрипт автоматически добавляет:

• Вертикальные направляющие на 16px и 359px (отступы 16px от краёв для ширины 375px);
• Горизонтальную направляющую на 88px (высота статус-бара + отступ);
• Центральную направляющую на X=187.5.

Использование направляющих в дизайн-системах и компонентах

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

Шаблоны с предустановленными направляющими

Многие команды создают шаблоны арте-бордов с уже выставленными направляющими. Например:

• Мобильный шаблон: отступы 16px, центральная ось, направляющие под заголовки и кнопки.
• Веб-шаблон: 12-колоночная сетка, шириной 1140px, с отступами 30px.

Такие шаблоны можно сохранить как «Template Page» и использовать при старте нового проекта.

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

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

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

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

Заключение

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

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