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

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

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

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

Они особенно полезны при:

• Создании единых отступов между блоками;
• Выравнивании текста, кнопок и изображений по оси;
• Построении колоночной сетки (например, 12-колоночной);
• Работе с адаптивными макетами под разные устройства.

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

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

Создание направляющих — простой процесс, но есть нюансы, о которых стоит знать. Вот как это сделать:

1. Включите линейки: Кликните правой кнопкой по холсту и выберите «Show Rulers» или нажмите Ctrl + R (Cmd + R на Mac).
2. Перетащите из линейки: Захватите мышью из верхней (горизонтальной) или левой (вертикальной) линейки и потяните на холст.
3. Зафиксируйте положение: Отпустите, когда линия окажется в нужном месте. Она станет синей (по умолчанию).
4. Настройте точность: Выделите направляющую и в правой панели свойств измените её X или Y координату вручную.
5. Удалите или переместите: Щёлкните по направляющей, чтобы выбрать. Перетащите для перемещения, нажмите Delete — для удаления.

Если нужно создать несколько одинаковых отступов (например, каждые 80px), проще всего использовать колоночную сетку — об этом чуть позже.

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

После того как направляющая добавлена, вы можете:

• Изменить её положение через панель свойств;
• Перетащить мышью (если отключена блокировка);
• Сделать её временной — просто перетащите обратно в линейку.

Цвет направляющих в Figma нельзя изменить напрямую, но вы можете использовать плагины (например, «Guide Guide») для более продвинутого управления.

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

Знание комбинаций ускоряет работу в разы:

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

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

Горизонтальные и вертикальные

Классические линии, тянущиеся по оси X или Y. Используются для:

• Выравнивания заголовков и подзаголовков;
• Фиксации верхнего и нижнего края контента;
• Отступов от краёв экрана (safe zones на iOS).

Колоночные направляющие (Grid Guides)

Это не просто одна линия, а система из нескольких с равным шагом. Создаются через:

1. Выделите фрейм или страницу;
2. В правой панели перейдите во вкладку «Layout Grids»;
3. Выберите тип «Columns»;
4. Задайте количество колонок, ширину, шаг и отступы.

Например, стандартная 12-колоночная сетка с шириной колонки 64px и шагом 16px идеально подходит для десктопных интерфейсов.

Угловые направляющие (невидимые в UI)

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

• Использовать прозрачные линии-объекты;
• Применять плагины вроде «Angle Guide»;
• Рисовать направляющие в отдельном слое и блокировать его.

Выравнивание и привязка: как работают с направляющими

Привязка (snap) — основа точной работы. Когда она включена, элементы автоматически «прилипают» к направляющим при перемещении.

Как включить привязку

• В верхнем меню найдите значок магнита — «Snap to pixel grid» и «Snap to guides»;
• Убедитесь, что оба включены для максимальной точности;
• Можно временно отключить привязку, удерживая Shift при перетаскивании.

Точность привязки: настройки и ограничения

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

• Не размещайте направляющие ближе 4–8px друг к другу;
• Группируйте их по смыслу (например, отступы, колонки, границы экрана);
• Используйте отдельные страницы для разных типов направляющих.

Советы по эффективному выравниванию

• Всегда начинайте с внешних направляющих — отступов от краёв;
• Используйте направляющие для центрирования: проведите линию по центру фрейма и выравнивайте относительно неё;
• Для мобильных макетов задайте safe zone (например, 20px сверху и снизу на iPhone).

Сетка или направляющие? В чём разница и когда что использовать

Путаница между «сеткой» (layout grid) и «направляющими» (guides) — частая ошибка новичков. На самом деле, это разные инструменты.

Layout Grid (расположение сетки)

• Привязана к конкретному фрейму;
• Автоматически повторяется с шагом;
• Поддерживает колонки, строки и модульную сетку;
• Идеальна для внутренней структуры блоков.

Guides (направляющие)

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

Когда что использовать?

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

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

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

Шаги внедрения в команде

1. Создайте шаблонную страницу с направляющими для каждого типа устройства (mobile, tablet, desktop);
2. Задокументируйте значения: например, «внешние отступы — 24px, колонка — 64px, шаг — 16px»;
3. Добавьте эти страницы в библиотеку (Team Library);
4. Обучите новых сотрудников через onboarding-гайд.

Как избежать конфликтов

• Блокируйте направляющие после настройки (Cmd+Option+;);
• Не разрешайте случайное удаление — назначьте ответственного;
• Используйте плагины вроде «Auto Layout Guides» для автогенерации.

Пример из практики

В компании, разрабатывающей SaaS-платформу, все макеты основаны на 8px-базовой сетке. Направляющие расставлены каждые 8px на этапе прототипирования, а финальные — по 16px и 24px. Это позволило сократить время согласования на 30%, потому что все понимали правила.

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

Анна Петрова, Senior UX/UI Designer, работает в Figma с 2018 года

«За годы работы я выработала чёткий алгоритм: сначала — направляющие, потом — контент. Это как закладывать фундамент. Я начинаю с внешних отступов (24px или 32px), затем добавляю центральную ось, потом — колоночную сетку. Если макет адаптивный, делаю отдельные направляющие для каждого breakpoint.

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

Павел Иванов, Продуктовый дизайнер, Figma Community Contributor

«Я активно использую плагин “Guide Guide”. Он позволяет задавать направляющие через JSON: например, [24, 72, 120] — и он ставит линии автоматически. Это спасает при работе с T-shirt размерами (S, M, L, XL). Также я делю направляющие на слои: “Layout”, “Content”, “Mobile”. Так проще управлять видимостью.»

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

Заключение

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

• Создавайте направляющие до начала работы с контентом.
• Используйте комбинацию глобальных направляющих и локальных сеток.
• Внедряйте стандарты в команде через шаблоны и библиотеки.
• Применяйте плагины для автоматизации рутинных задач.
• Регулярно очищайте и актуализируйте направляющие.