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

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

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

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

Включение линеек в Figma

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

Чтобы включить линейки, выполните следующие действия:

1. Откройте нужный файл в Figma.
2. Перейдите в верхнее меню и выберите View → Show rulers.
3. Альтернативно используйте горячую клавишу: Ctrl+R (на Windows) или Cmd+R (на macOS).

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

Если линейки не появляются после нажатия сочетания клавиш, проверьте:

• Активен ли редактор? Иногда Figma находится в режиме просмотра (view-only), где некоторые функции недоступны.
• Не отключено ли отображение через настройки аккаунта или организации.
• Корректно ли работает браузер или десктоп-приложение — попробуйте перезагрузить.

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

Как работают линейки в разных контекстах

Линейки в Figma адаптивны. Их начало отсчёта зависит от того, где вы находитесь:

• На странице — начало в точке (0,0) страницы.
• Внутри фрейма — начало в верхнем левом углу фрейма.
• В компоненте — аналогично фрейму, но только если он редактируется.

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

Создание и использование направляющих

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

Чтобы создать направляющую:

1. Убедитесь, что линейки включены (Ctrl+R / Cmd+R).
2. Наведите курсор на горизонтальную линейку (вверху) — курсор изменится на двунаправленную стрелку.
3. Нажмите и потяните вниз — появится вертикальная направляющая.
4. Или наведите на вертикальную линейку (слева) и потяните вправо — получится горизонтальная направляющая.
5. Отпустите, когда направляющая окажется в нужном месте.

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

Направляющие можно перемещать, кликая по ним и перетаскивая. Чтобы удалить — просто перетащите её обратно в линейку. Также можно выделить направляющую и нажать Delete.

Точное позиционирование направляющих

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

Например:

• Горизонтальная направляющая: значение Y = 100.
• Вертикальная направляющая: значение X = 320.

Это особенно полезно при работе с дизайн-системами, где отступы и колонки строго регламентированы.

Настройка поведения: притягивание и привязка

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

Чтобы управлять притягиванием:

• Перейдите в View → Snapping.
• Включите Snap to objects — для притягивания к другим элементам.
• Включите Snap to guides — чтобы объекты цеплялись за направляющие.

Также можно временно отключить притягивание во время перемещения — удерживайте клавишу Alt (на Windows) или Option (на Mac).

Figma также поддерживает привязку к сетке. Вы можете включить отображение сетки (View → Show grid) и настроить её параметры: шаг, смещение, цвет. Сочетание сетки и направляющих даёт максимальный контроль над композицией.

Настройки притягивания в проектах и страницах

В Figma есть возможность задавать настройки притягивания на уровне страницы. Для этого:

1. Выделите страницу в левой панели Layers.
2. В правой панели найдите раздел Layout Grids.
3. Добавьте сетку или настройте существующую.
4. Определите, должен ли snapping быть включён по умолчанию.

Это особенно важно в командной работе — все участники будут работать в одинаковых условиях.

Работа с глобальными и локальными направляющими

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

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

Выбор типа зависит от задачи. Если вы проектируете мобильный интерфейс, возможно, стоит задать глобальные направляющие для безопасных зон (например, 16px слева и справа). А внутри карточки товара — локальные, чтобы выровнять изображение, название и цену.

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

Чтобы направляющая стала локальной:

1. Дважды щёлкните по фрейму, чтобы войти внутрь.
2. Убедитесь, что линейки включены.
3. Перетащите направляющую из линейки — она появится только внутри фрейма.

Если вы находитесь вне фрейма, любая направляющая будет глобальной.

Типичные ошибки и способы их решения

Даже простые функции могут вызывать трудности. Ниже — частые проблемы и как их решить.

• Линейки не появляются после Ctrl+R. Проверьте, не нажата ли клавиша Caps Lock или не конфликтует ли сочетание с другим приложением. Также убедитесь, что вы не в режиме комментариев или презентации.
• Направляющие не притягиваются к объектам. Убедитесь, что включено Snap to guides в меню View. Также проверьте, не удерживается ли Alt/Option — это временно отключает притягивание.
• Направляющая исчезла после выхода из фрейма. Скорее всего, вы создали локальную направляющую. Чтобы сделать её глобальной, выйдите из фрейма и создайте заново.
• Направляющие не сохраняются. Figma сохраняет их автоматически. Если они пропали — возможно, вы открыли копию файла или произошёл сбой. Проверьте историю версий.

Чек-лист: всё ли готово для работы?

• ✅ Линейки включены (Ctrl+R / Cmd+R)
• ✅ Притягивание к направляющим активировано
• ✅ Вы находитесь в правильном контексте (страница или фрейм)
• ✅ Направляющие созданы и находятся в нужных позициях
• ✅ Команда использует одни и те же настройки притягивания

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

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

Он также рекомендует создавать шаблоны с заранее установленными направляющими для типовых экранов: мобильных (375×812), планшетов, десктопов. «Шаблон с направляющими — как чертёжный станок. Он сразу задаёт правильные пропорции.»

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

Заключение

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

• Линейки включаются через View → Show rulers или Ctrl+R / Cmd+R.
• Направляющие создаются перетаскиванием из линеек и бывают глобальными и локальными.
• Притягивание к направляющим ускоряет выравнивание и должно быть включено по умолчанию.
• Направляющие не экспортируются и видны только в редакторе.
• Системное использование направляющих повышает качество и скорость работы.