Как в фигме включить линейку

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

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

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

Откройте любой проект в Figma. Убедитесь, что вы находитесь на странице с холстом, а не в меню настроек или плагинов. Нажмите Ctrl+R (на Windows) или Cmd+R (на macOS). Мгновенно появятся две линейки: горизонтальная — в верхней части окна, вертикальная — по левому краю. Они показывают координаты в пикселях относительно начала холста.

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

• Активен ли редактор Figma (не просмотрщик)
• Не отключена ли функция в настройках аккаунта
• Нет ли конфликта с системными сочетаниями клавиш

Иногда пользователи путают линейку с масштабом. Линейка — это инструмент измерения, масштаб — уровень приближения. Они работают независимо. При изменении масштаба (например, до 50%) значения на линейке остаются реальными — они не масштабируются. Это важно для точного дизайна.

Как эффективно использовать линейку: советы и приёмы

Теперь, когда линейка включена, давайте разберёмся, как её использовать по максимуму. Представьте, что вы создаёте дизайн мобильного приложения. Вам нужно, чтобы кнопка «Войти» находилась строго на 24 пикселя от нижнего края экрана. Без линейки это — метод тыка. С линейкой — пара движений мыши.

Подведите курсор к верхней линейке. Нажмите и потяните вниз — появится направляющая. Она зафиксируется на нужной координате. То же самое можно сделать с левой линейкой — потянуть вправо. Эти направляющие помогают выравнивать элементы по осям X и Y.

Направляющие можно настраивать:

• Перемещать — кликнуть и тянуть
• Удалять — перетащить обратно на линейку
• Фиксировать — двойной клик на направляющей

Каждая направляющая отображает своё значение в пикселях. Это особенно полезно при работе с гридами и системами отступов. Например, если вы используете 8px-систему, линейка поможет быстро ставить направляющие через каждые 8, 16 или 24 пикселя.

Другой важный момент — работа с несколькими фреймами. Линейка в Figma привязана к странице, но вы можете включить локальные линейки. Для этого выделите фрейм, нажмите правой кнопкой мыши и выберите «Show rulers». Теперь линейки будут считать координаты от начала фрейма, а не всей страницы.

Это удобно при создании компонентов, карточек товаров или модальных окон. Вы можете точно контролировать внутренние отступы (padding) и расстояния между элементами.

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

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

Ошибка 1: Линейка не включается после Ctrl+R
Возможно, вы находитесь в режиме просмотра (View-only mode). В этом режиме нельзя редактировать документ, соответственно, и линейка неактивна. Попросите владельца проекта выдать вам права редактора.

Ошибка 2: Направляющие исчезают при прокрутке
Направляющие в Figma привязаны к странице, но при переходе между фреймами могут теряться из виду. Решение — использовать именованные направляющие через плагины (например, «Guides Manager») или добавлять их в отдельный слой с пометкой «Grid & Guides».

Ошибка 3: Координаты не совпадают с макетом
Вы могли случайно переместить начало отсчёта. Проверьте, не сдвинут ли главный фрейм или страница. Сбросьте положение, выделив все объекты (Ctrl+A) и переместив их в точку (0,0).

Продвинутые функции: направляющие, привязка и сетки

Линейка — это только начало. Figma предлагает целую экосистему инструментов для точного дизайна. Давайте рассмотрим, как она работает в связке с другими функциями.

Привязка (Snap to Pixel)
Когда включена, эта функция автоматически выравнивает элементы по пиксельной сетке. Находится в правом верхнем углу интерфейса. Работает в паре с линейкой: даже если вы чуть-чуть сдвигаете объект, он «прилипает» к ближайшей координате.

Сетка (Layout Grids)
Добавляется через правую панель (Design > Layout Grid). Можно выбрать колонки, строки, модульную сетку. Значения отображаются прямо на холсте и синхронизируются с линейкой. Особенно полезно при адаптивном дизайне.

Smart Animate и Constraints
Хотя напрямую к линейке не относятся, эти функции помогают поддерживать согласованность. Например, если вы задали constraints для кнопки, она будет двигаться строго в рамках, заданных вашими направляющими.

Представьте, что вы проектируете адаптивный сайт. Вы задаёте ширину контентной области — 1200px. Ставите направляющие на 96px слева и справа (отступы). Между ними — 10 колонок по 96px с интервалами 24px. Теперь любой элемент, попадающий в эту зону, автоматически выравнивается.

1. Включите линейку (Ctrl+R)
2. Потяните направляющие с линеек на нужные координаты
3. Добавьте layout grid с теми же параметрами
4. Включите snap, чтобы элементы цеплялись к сетке
5. Сохраните как шаблон для будущих проектов

Такой подход повышает скорость работы на 30–40%, по данным исследования InVision (2024). Команды, использующие стандартизированные системы, тратят меньше времени на правки и согласования.

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

Марина отмечает, что в её команде каждый новый сотрудник проходит onboarding, где учат правильно использовать линейки, направляющие и сетки. Это часть стандартов компании. Они даже создали чек-лист:

• Всегда включать линейку перед началом работы
• Ставить направляющие для безопасных зон (iOS/Android)
• Использовать layout grid для каждого основного фрейма
• Проверять выравнивание через Outline View (Cmd+\)

Она также рекомендует использовать плагины: «Guideguide» для быстрой расстановки направляющих, «Sticky Grid» для повторяющихся паттернов, «Spacing» для контроля отступов.

«Главная цель — не просто включить линейку, а сделать её частью workflow. Когда это становится привычкой, качество макетов растёт само собой.»

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

Заключение

Линейка в Figma — это не просто вспомогательный элемент, а фундамент точного, профессионального дизайна. Её включение занимает одну секунду (Ctrl+R), но влияние на качество работы — колоссальное. Она помогает соблюдать единые отступы, выравнивать элементы, избегать ошибок и ускорять процесс создания макетов.

• Линейка включается сочетанием Ctrl+R (Cmd+R на Mac)
• С её помощью можно создавать направляющие для точного позиционирования
• Работает в связке с сетками, привязкой и constraints
• Не экспортируется — это инструмент разработки, а не презентации
• Является частью профессионального workflow современного дизайнера