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

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

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

Как включить линейку в Figma

Активация линеек в Figma — базовая, но необходимая операция для любого дизайнера. Процесс прост, но зависит от используемого устройства и версии приложения (веб, десктоп).
Чтобы включить линейку, откройте любой файл в Figma и перейдите в верхнее меню. Найдите раздел «View» (Просмотр). В выпадающем списке найдите опцию «Show Rulers» (Показать линейки). Если рядом с пунктом стоит галочка, значит, линейки уже включены. При первом использовании они, как правило, отключены по умолчанию.
Альтернативный способ — использование горячих клавиш. На Windows и Linux нажмите Ctrl + R, на macOS — Cmd + R. Это быстрое и удобное решение, особенно если вы часто переключаетесь между режимами просмотра. Сочетание клавиш работает во всех версиях Figma: в браузере, десктопном приложении и даже в офлайн-режиме.
После активации вы увидите две линейки: горизонтальную — в верхней части холста и вертикальную — по левой стороне. Они отображаются в текущих единицах измерения (по умолчанию — пиксели) и привязаны к началу страницы. Если вы перемещаете фреймы или объекты, линейки остаются на месте, но показывают положение курсора относительно начала координат.

Если линейки не появляются, проверьте следующее:

• Убедитесь, что вы находитесь в режиме редактирования, а не в презентационном режиме (Present Mode).
• Проверьте, не скрыта ли панель холста за другими окнами или панелями свойств.
• Обновите страницу или перезапустите приложение, если используется десктопная версия.

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

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

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

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

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

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

• Перетаскивайте их для изменения положения.
• Щёлкните правой кнопкой мыши (или Ctrl + клик на Mac), чтобы удалить или заблокировать.
• Дважды щёлкните, чтобы точно задать координату (например, X = 24 или Y = 60).

Кроме того, Figma позволяет привязывать объекты к направляющим. При перемещении элемента он автоматически «магнитится» к ближайшей направляющей, если включена опция «Smart Guides» (Умные направляющие) в меню View.

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

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

Другая ошибка — игнорирование привязки. Многие начинающие дизайнеры отключают Smart Guides, потому что считают их «раздражающими». Но именно они помогают точно попадать в сетку и избегать дробных значений (например, X = 24.3 вместо 24).
Также распространена проблема с масштабом. При сильном увеличении линейки могут казаться неточными, хотя на самом деле отображают корректные значения. Это связано с тем, что Figma округляет деления для читаемости, но внутренние расчёты остаются точными.
Наконец, некоторые пользователи путают линейки с сеткой (Grid). Линейки — это инструмент для создания направляющих, а сетка — структура, накладываемая на фрейм. Оба инструмента полезны, но решают разные задачи.

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

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

• Основной сеткой (8px, 12-column layout);
• Маргинами и паддингами;
• Линиями безопасности для мобильных устройств.

Такой шаблон можно использовать для всех новых проектов, экономя до 15 минут на каждом макете. Просто скопируйте фрейм с направляющими или сохраните файл как Template в вашем Team Library.
Ещё один продвинутый приём — использование плагинов. Например, плагин «Guides» позволяет массово добавлять, импортировать и экспортировать направляющие. Это особенно полезно при работе с дизайн-системами, где требования к отступам строго стандартизированы.

Также полезно настраивать цвет направляющих. По умолчанию они серые, но в некоторых плагинах или через CSS-хаки (в браузерной версии) можно изменить цвет, чтобы различать типы направляющих: например, красные — для границ, синие — для колонок, зелёные — для baseline.

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

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

Современные тренды, такие как адаптивный дизайн и responsive grids, требуют ещё большей точности. Линейки помогают тестировать макеты на разных разрешениях, контролируя поведение элементов при изменении ширины экрана.
Кроме того, при совместной работе линейки и направляющие становятся общим языком команды. Разработчики видят те же отступы, что и дизайнеры, что снижает количество правок и вопросов вроде «а здесь сколько пикселей?».

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

Заключение

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

• Включайте линейки через View → Show Rulers или Ctrl + R (Cmd + R).
• Используйте направляющие для создания сетки и выравнивания элементов.
• Настройте шаблоны с готовыми направляющими для повторяющихся проектов.
• Не отключайте Smart Guides — они помогают избежать неточностей.
• Помните, что линейки — это часть профессиональной дисциплины дизайнера.