Как сделать линейки в фигме

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

Включение линеек в Figma: первый шаг к точности

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

Активировать линейки можно несколькими способами. Самый быстрый — использовать сочетание клавиш: Ctrl+R (или Cmd+R на macOS). Также можно кликнуть правой кнопкой мыши по пустому месту на холсте и выбрать пункт «Show Rulers». После этого появятся две линейки: горизонтальная (вдоль верхнего края) и вертикальная (вдоль левого края).

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

Работа с горизонтальными и вертикальными линейками

Горизонтальная линейка располагается вдоль верхнего края холста и отображает значения по оси X. Вертикальная — вдоль левого края и показывает значения по оси Y. Эти значения измеряются в пикселях и начинаются от верхнего левого угла страницы (по умолчанию). При прокрутке холста линейки остаются на месте, обеспечивая постоянную привязку к началу координат.

Когда вы создаёте фигуру или текстовый блок, его положение автоматически соотносится с линейками. Например, если вы начали рисовать прямоугольник в точке (100, 150), то его верхний левый угол будет находиться на пересечении отметок 100 по горизонтали и 150 по вертикали. Это позволяет точно планировать расположение элементов без необходимости вручную задавать координаты в правой панели свойств.

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

Как переместить начало координат

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

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

Создание и использование меток на линейках

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

Чтобы создать метку:

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

После создания метка остаётся на месте даже при прокрутке. Она привязана к линейке, а не к конкретному объекту. Вы можете создать несколько меток — например, для обозначения 16px, 24px, 32px отступов, что удобно при работе с системой design tokens.

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

Настройка начала координат и области действия линеек

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

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

Ограничения и особенности

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

Для командной работы важно согласовать подход к использованию линеек. Некоторые дизайнеры предпочитают работать с глобальными координатами, другие — с локальными. Чтобы избежать путаницы, стоит зафиксировать правила в дизайн-системе или README-файле проекта.

Линейки в командной работе: стандарты и практики

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

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

• Безопасную зону (16px слева и справа);
• Центр экрана (187.5px для ширины 375px);
• Стандартные отступы (8, 16, 24, 32px).

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

Типичные ошибки и как их избежать

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

Ошибка 1: Линейки не отображаются

• Причина: Функция отключена или используется старая версия Figma.
• Решение: Нажмите Ctrl+R (Cmd+R) или проверьте контекстное меню холста.

Ошибка 2: Метки не привязываются к объектам

• Причина: Метки — статические элементы. Они не следят за движением объектов.
• Решение: Используйте Smart Animate или Auto Layout для динамического позиционирования. Метки — только для ориентира.

Ошибка 3: Начало координат сбивается при переключении страниц

• Причина: Положение линеек не сохраняется между страницами.
• Решение: Создайте отдельный фрейм-шаблон с нужными координатами и копируйте его при необходимости.

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

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

Заключение

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

• Активируйте линейки через Ctrl+R (Cmd+R) или контекстное меню.
• Используйте метки для обозначения ключевых отступов и зон.
• Перемещайте начало координат для локальной привязки внутри фреймов.
• Создавайте шаблоны с предустановленными линейками для командной работы.
• Помните: линейки не экспортируются и не влияют на финальный продукт — это инструмент разработки.