Представьте: вы создаёте макет посадочной страницы, элементы «почти» выровнены, но при передаче в разработку всё разваливается, потому что «на глаз» — не метод профессионала. Направляющие в Figma — это не просто линии на холсте, это фундамент точности, который отделяет дилетанта от эксперта. Если вы до сих пор игнорируете эту функцию или не знаете, как её правильно задействовать, вы теряете время и репутацию. Разберём все способы включения и настройки направляющих, чтобы ваши макеты стали безупречными с технической точки зрения.
Включение направляющих в Figma: основные способы
Направляющие в Figma активируются несколькими методами, каждый из которых подходит для конкретных задач. Первый и самый очевидный способ — использование верхнего меню View. Здесь находятся переключатели для линеек (Rulers), которые служат основой для создания направляющих линий. Активировать линейки можно через View → Rulers или горячей клавишей Shift + R. После включения вы увидите измерительные шкалы по горизонтали и вертикали вдоль краёв рабочей области.
Второй способ — автоматическое включение смарт-направляющих (Smart Guides), которые появляются при перемещении объектов. Эти динамические линии помогают выравнивать элементы относительно друг друга, показывая расстояния и центры. Смарт-направляющие включаются по умолчанию, но если они отключены, зайдите в View → Smart Guides или используйте сочетание Ctrl + / (Windows) или Cmd + / (Mac).
Третий метод — настройка сеток (Layout Grids), которые накладываются на фреймы и создают структурную основу для размещения контента. Сетки активируются через панель свойств справа при выборе фрейма, где можно нажать «+» в разделе Layout Grid и выбрать тип сетки: колоночную, строчную или модульную.
| Способ активации | Меню/Команда | Горячая клавиша | Назначение |
| Линейки | View → Rulers | Shift + R | Создание вертикальных и горизонтальных направляющих |
| Смарт-направляющие | View → Smart Guides | Ctrl + / (Cmd + /) | Автоматическое выравнивание объектов |
| Сетки Layout Grid | Панель свойств фрейма | Ctrl + G (Cmd + G) | Структурирование макета |
Каждый из методов решает свою задачу: линейки дают полный контроль над расположением направляющих, смарт-направляющие ускоряют работу за счёт автоматизма, а сетки обеспечивают системный подход к построению интерфейсов. Профессионалы используют все три одновременно, переключаясь в зависимости от этапа работы.
Марина Кольцова, ведущий UI-дизайнер
Недавно работала над редизайном мобильного приложения для финтех-стартапа. Клиент жаловался, что предыдущий дизайнер «как-то криво всё расставил». Открыв файл, увидела хаос: ни одной направляющей, элементы выровнены приблизительно. Пришлось всё переделывать с нуля, используя сетку 8px и вертикальные направляющие для отступов. Результат: разработка заняла на 30% меньше времени, потому что не было вопросов по размерам и позиционированию. Теперь клиент требует все макеты с видимыми направляющими в финальной версии файла.
Работа с линейками для создания направляющих
Линейки — это классический инструмент, унаследованный из настольных издательских систем, но в Figma они реализованы элегантно и функционально. После активации линеек (Shift + R) вы можете создавать направляющие, щёлкнув по шкале линейки и перетащив линию на холст. Горизонтальные направляющие создаются из верхней линейки, вертикальные — из левой.
Точность — ключевой параметр при работе с направляющими. Во время перетаскивания Figma показывает числовое значение позиции направляющей в пикселях. Чтобы установить направляющую на конкретную координату, просто введите нужное значение в появившемся поле или отредактируйте позицию позже, выбрав направляющую и изменив параметры в панели свойств.
Направляющие можно перемещать, выбрав их инструментом Move (клавиша V), и удалять, перетащив обратно на линейку или нажав Delete после выбора. Если вам нужно временно скрыть все направляющие без удаления, используйте комбинацию Ctrl + Shift + 4 (Windows) или Cmd + Shift + 4 (Mac) — это переключатель видимости направляющих.
Профессиональный приём: создавайте направляющие в ключевых точках макета — для центральной оси, границ контентной области, отступов от краёв. Например, для десктопного макета с контентной областью 1440px можно установить вертикальные направляющие на позициях 0, 120 (левый отступ), 1320 (правый край контента), 1440 (правая граница холста). Это создаёт жёсткую структуру, которая исключает произвольное размещение элементов.
| Действие | Инструкция | Результат |
| Создание направляющей | Перетащить из линейки на холст | Появляется горизонтальная или вертикальная линия |
| Точное позиционирование | Ввести значение в px во время перетаскивания | Направляющая устанавливается на конкретной координате |
| Перемещение направляющей | Выбрать инструментом Move и перетащить | Направляющая меняет позицию |
| Удаление направляющей | Перетащить обратно на линейку или Delete | Направляющая исчезает с холста |
| Скрытие всех направляющих | Ctrl + Shift + 4 (Cmd + Shift + 4) | Направляющие становятся невидимыми, но сохраняются |
Линейки особенно полезны при работе с фиксированными макетами, где критична пиксельная точность: лендинги, email-шаблоны, баннеры. В адаптивных интерфейсах их лучше дополнять сетками, о которых речь пойдёт дальше.
Настройка и использование сеток в Figma
Сетки (Layout Grids) — это системный подход к организации пространства макета. В отличие от направляющих, которые вы размещаете вручную, сетки создают регулярную структуру, основанную на математических пропорциях. Figma поддерживает три типа сеток: Rows (строки), Columns (колонки) и Grid (квадратная сетка). Каждый тип решает определённую задачу.
Чтобы добавить сетку, выберите фрейм (не отдельный объект, а именно Frame), в правой панели найдите раздел Layout Grid и нажмите «+». По умолчанию создаётся квадратная сетка с шагом 10px. Кликните по иконке сетки, чтобы открыть настройки и выбрать тип:
- Grid — квадратная сетка, идеальна для UI-китов, иконок, мелких элементов. Настраиваемый параметр: размер ячейки (обычно 8px или 4px для современных интерфейсов).
- Columns — колоночная сетка, стандарт для веб-дизайна. Настраиваются количество колонок (12 для десктопа, 4–6 для мобильных), отступы (Gutter) между колонками и поля (Margin) по краям.
- Rows — строчная сетка, используется реже, но полезна для вертикальной ритмики текста и соблюдения baseline grid.
Настройка колоночной сетки для десктопа (ширина фрейма 1440px) может выглядеть так: 12 колонок, Gutter 24px, Margin 120px. Это обеспечит контентную область примерно 1200px, разделённую на 12 равных частей. Элементы размещаются кратно колонкам: основной контент может занимать 8 колонок, боковая панель — 4 колонки.
Для квадратной сетки (Grid) профессионалы используют систему 8px или 4px. Это означает, что все размеры элементов — ширина, высота, отступы — кратны 8 (или 4) пикселям. Такой подход обеспечивает математическую гармонию и упрощает адаптацию под разные экраны. Настройка: выбрать тип Grid, установить размер 8px, можно также настроить цвет и прозрачность сетки для удобства восприятия.
Сетки можно накладывать несколько штук на один фрейм. Например, одновременно использовать квадратную сетку 8px для контроля размеров и колоночную сетку для размещения контента. Переключение видимости конкретной сетки осуществляется через иконку глаза рядом с каждой сеткой в панели свойств.
Игорь Северов, UX-архитектор
Консультировал команду крупного e-commerce проекта, где дизайнеры работали без единой системы. Каждый делал макеты «как удобно», результат — 15 разных вариантов отступов и размеров на одном сайте. Внедрили обязательное использование колоночной сетки 12 колонок с фиксированными параметрами и квадратной сетки 8px. За два месяца количество правок от разработчиков снизилось в 4 раза. Дизайнеры сопротивлялись, говорили, что сетки «ограничивают креатив». Но цифры не врут: скорость проектирования выросла на 40%.
Управление смарт-направляющими для точного выравнивания
Смарт-направляющие (Smart Guides) — это интеллектуальная система Figma, которая появляется автоматически при перемещении, изменении размера или создании объектов. Они показывают выравнивание относительно других элементов, расстояния между объектами, центры фреймов. Это динамический инструмент, который не требует предварительной настройки, но его поведение можно контролировать.
По умолчанию смарт-направляющие включены, но если вы их не видите, проверьте: View → Smart Guides (или Ctrl + / на Windows, Cmd + / на Mac). Когда функция активна, при перемещении объекта появляются фиолетовые линии, которые показывают:
- Выравнивание по краям — когда край перемещаемого объекта совпадает с краем другого элемента.
- Выравнивание по центру — когда центры объектов находятся на одной линии (горизонтально или вертикально).
- Одинаковые расстояния — когда промежутки между элементами равны. Figma показывает числовые значения в пикселях.
- Размеры — когда ширина или высота объекта совпадает с размерами другого элемента.
Смарт-направляющие работают не только при перемещении, но и при изменении размера объектов. Если вы растягиваете прямоугольник, Figma покажет, когда его ширина станет равной ширине соседнего элемента или кратной определённому значению (если используется сетка). Это позволяет создавать пропорциональные композиции без калькулятора.
Важный нюанс: смарт-направляющие учитывают только видимые объекты на текущем уровне иерархии. Если элемент находится внутри скрытой группы или заблокирован, направляющие его игнорируют. Чтобы временно отключить смарт-направляющие для точного позиционирования «в ручном режиме», зажмите клавишу Ctrl (Windows) или Cmd (Mac) во время перемещения объекта.
Профессиональное использование смарт-направляющих предполагает их комбинацию с классическими направляющими из линеек. Например, вы создаёте вертикальные направляющие для границ контентной области, а смарт-направляющие используете для быстрого выравнивания элементов внутри этой области. Такой подход обеспечивает баланс между структурной жёсткостью и гибкостью размещения.
Ещё одна функция — измерение расстояний. Выберите объект, зажмите клавишу Alt (Windows) или Option (Mac) и наведите курсор на другой элемент — Figma покажет точное расстояние между ними в пикселях. Это незаменимо при проверке соответствия макета спецификациям.
Горячие клавиши для быстрой работы с направляющими
Профессионалы отличаются от любителей не только знанием функций, но и скоростью их применения. Горячие клавиши для работы с направляющими в Figma — это must-know для любого, кто стремится к эффективности. Ниже приведены ключевые комбинации, которые должны войти в мышечную память.
| Действие | Windows | Mac | Описание |
| Включить/выключить линейки | Shift + R | Shift + R | Показать или скрыть измерительные шкалы |
| Скрыть/показать направляющие | Ctrl + Shift + 4 | Cmd + Shift + 4 | Переключение видимости всех направляющих |
| Включить/выключить смарт-направляющие | Ctrl + / | Cmd + / | Активация интеллектуальных линий выравнивания |
| Показать/скрыть сетки Layout Grid | Ctrl + ' | Cmd + ' | Переключение видимости всех сеток на фреймах |
| Показать расстояния до объектов | Alt + наведение | Option + наведение | Измерение дистанции между элементами |
| Отключить смарт-направляющие временно | Ctrl + перемещение | Cmd + перемещение | Перемещение объекта без привязки |
Комбинация Shift + R — первое, что нужно запомнить. Она мгновенно включает линейки, из которых вы создаёте направляющие. Если линейки уже активны, повторное нажатие их скрывает, освобождая пространство холста. Это удобно, когда нужно быстро переключаться между этапами работы: создание структуры (линейки включены) и финальная проверка визуала (линейки выключены).
Особое внимание заслуживает комбинация Ctrl + Shift + 4 (на Mac Cmd + Shift + 4). Она скрывает все направляющие, но не удаляет их. Это критично при презентации макета клиенту или передаче в разработку — направляющие остаются в файле для дальнейшей работы, но не отвлекают внимание на финальной демонстрации. Многие новички удаляют направляющие перед презентацией, а потом тратят время на их воссоздание.
Комбинация Alt + наведение (на Mac Option) превращает курсор в измерительный инструмент. Выберите любой объект, зажмите Alt и наведите на другой элемент — появятся красные линии с числовыми значениями расстояний. Это позволяет мгновенно проверять отступы без открытия панели свойств. Например, дизайн-система требует отступ 24px между блоками — наводите и сразу видите, соблюдено ли это правило.
Когда смарт-направляющие мешают (например, при создании намеренно асимметричной композиции), зажмите Ctrl (или Cmd на Mac) во время перемещения объекта. Это временно отключает привязку, позволяя разместить элемент в любом месте с точностью до пикселя. Отпустив клавишу, смарт-направляющие снова активируются.
Профессиональный workflow: создайте себе шпаргалку с этими комбинациями и держите её на втором мониторе первые две недели активного использования. После этого срока они войдут в автоматизм, и скорость работы вырастет минимум на 30%. Игнорирование горячих клавиш — признак дилетантизма.
Направляющие в Figma — это не украшение интерфейса, а профессиональный инструмент, отделяющий точность от приблизительности. Линейки дают контроль над каждым пикселем, сетки создают системность, смарт-направляющие ускоряют рутину, а горячие клавиши превращают всё это в бесшовный процесс. Если ваши макеты до сих пор выглядят «почти правильно», проблема не в таланте — проблема в игнорировании базовых механик инструмента. Включите направляющие, настройте сетки, запомните комбинации клавиш. И ваши макеты станут математически точными, а разработчики перестанут задавать вопросы о размерах и отступах. 🎯
