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

В Figma линейка — это инструмент, помогающий точно выравнивать элементы на макете. Активировать её можно через меню View или с помощью горячих клавиш, которые зависят от операционной системы. На Windows используется комбинация Ctrl + R, а на macOS — Cmd + R. Эта функция включает отображение измерительных линеек по верхнему и левому краю рабочей области, что особенно полезно при работе с сетками, отступами и пропорциями.

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

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

Горячие клавиши для включения линейки: Windows и macOS

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

• На Windows: Ctrl + R
• На macOS: Cmd + R

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

Шаги для включения линейки

1. Откройте проект в Figma.
2. Убедитесь, что вы находитесь в режиме редактирования (не в Presentation Mode).
3. Нажмите Ctrl + R (Windows) или Cmd + R (macOS).
4. Проверьте появление линеек сверху и слева.

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

Как использовать линейки в Figma: практическое руководство

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

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

Когда линейки включены, вы можете перетаскивать из них направляющие прямо на холст:

• Наведите курсор на горизонтальную линейку (сверху).
• Зажмите левую кнопку мыши и потяните вниз — появится горизонтальная направляющая.
• Аналогично: из вертикальной линейки (слева) можно потянуть вертикальную направляющую вправо.

Направляющие остаются на месте, пока вы их не удалите, и помогают выравнивать элементы по заданным координатам. Это особенно полезно при создании сеток 8px, 12-column layout или при соблюдении отступов в соответствии с дизайн-системой.

Настройка начала отсчёта

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

• Выделите нужный фрейм.
• Перетащите начало координат (перекрестие в углу линеек) внутрь фрейма.
• Теперь линейки будут ориентироваться на границы фрейма.

Это удобно при работе с компонентами, модальными окнами или карточками, где нужно соблюдать внутренние отступы.

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

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

Линейки не включаются

Если после нажатия Ctrl + R или Cmd + R ничего не происходит, проверьте следующее:

• Вы находитесь в режиме редактирования (не в Prototype или Presentation Mode).
• Проект открыт в браузере или десктопном приложении (мобильные приложения Figma не поддерживают линейки).
• У вас нет конфликта с другими программами (например, менеджерами окон на Mac или программами для скриншотов).

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

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

• Линейки отключены.
• Фрейм заблокирован или находится в состоянии «Locked».
• Вы пытаетесь перетащить направляющую в режиме «View only» (без прав редактирования).

Линейки показывают неправильные значения

Если координаты на линейке не соответствуют ожидаемым, возможно:

• Вы работаете на масштабе, отличном от 100%. Линейки всегда показывают реальные пиксели, но визуальное восприятие может искажаться.
• Начало отсчёта было перемещено. Верните перекрестие в верхний левый угол страницы.
• Вы находитесь внутри вложенного фрейма, и система отсчёта сместилась.

Линейки vs направляющие vs сетки: в чём разница?

Понимание различий между этими инструментами помогает эффективнее использовать каждый из них.

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

Продвинутые советы по работе с линейками

Опытные дизайнеры используют линейки не только для измерений, но и как часть рабочего процесса.

Быстрая проверка отступов

Выделите два элемента и посмотрите на линейки — разница в координатах покажет расстояние между ними. Например, если первый элемент заканчивается на X=100, а второй начинается на X=120, отступ составляет 20px.

Работа с несколькими фреймами

Если вы используете Auto Layout, линейки помогают контролировать внешние отступы (margin), а внутренние (padding) лучше проверять через правую панель свойств. Однако, перетащив направляющую из линейки, вы можете точно выставить margin между фреймами.

Сочетание с плагинами

Некоторые плагины, например «Spacing Tool» или «Auto Layout Spacing», используют данные с линеек для автоматизации. Например, они могут подсказывать, когда отступы не кратны 8px.

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

«Многие новички считают линейки второстепенным инструментом, но на практике они — основа точного дизайна. Я рекомендую включать их по умолчанию и использовать в связке с направляющими. Например, при создании дизайн-системы я сразу выставляю направляющие на 16px, 24px, 32px — так проще соблюдать единую шкалу отступов.»

— Мария Смирнова, ведущий UX-дизайнер в продуктовой команде FinTech-стартапа, 9 лет в профессии.

Она также отмечает, что в командах, где работают несколько дизайнеров, наличие общих направляющих и единых правил использования линеек снижает количество правок и согласований. «Когда все видят одинаковые ориентиры, меньше споров о “где здесь середина”».

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

Заключение

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

• Горячие клавиши: Ctrl + R (Windows), Cmd + R (macOS).
• Линейки можно использовать для создания направляющих.
• Начало отсчёта можно перемещать внутрь фреймов.
• Линейки работают только в редакторе, не в мобильных приложениях.
• Сочетайте линейки с направляющими и сетками для максимальной точности.