Как в фигме вызвать линейку

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

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

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

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

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

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

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

Вы также можете временно показать линейку, удерживая клавишу Alt (или Option на Mac) и начав перетаскивание из пустого пространства у края холста. Это удобно, если вы хотите добавить направляющую без постоянного отображения линеек.

Когда стоит использовать линейку

Линейка особенно полезна в следующих случаях:

• Создание макетов с жёсткой сеткой (например, 8px baseline grid).
• Точное выравнивание кнопок, текстовых блоков или карточек.
• Проверка расстояний между компонентами (padding, margin).
• Работа с несколькими фреймами, где важна согласованность позиционирования.

Без линейки легко допустить ошибку в 1–2 пикселя, что может нарушить визуальную гармонию интерфейса. Особенно это критично при передаче макетов разработчикам, которые ожидают чётких значений.

Как эффективно использовать линейку в дизайне

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

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

Например, если вы проектируете мобильный экран шириной 375px, вы можете перетащить направляющую с отметки 24px слева и справа, чтобы задать внутренние отступы. Затем — ещё одну на 351px (375 – 24), чтобы контролировать правый край контента.

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

Третье — сочетайте линейку с функцией Smart Selection. Когда вы выделяете несколько объектов, Figma показывает общую ширину, высоту и расстояния между ними. Сверяясь с линейкой, вы можете быстро скорректировать позиции.

Пример: создание карточки товара

Допустим, вы создаёте карточку размером 320×400px с отступами 16px. Шаги:

1. Включите линейку (Ctrl + R).
2. Перетащите направляющие на 16px и 304px (320 – 16) по горизонтали.
3. Аналогично — на 16px и 384px по вертикали.
4. Размещайте изображение, текст и кнопку строго внутри этих границ.
5. Проверьте расстояния между элементами с помощью линеек и всплывающих подсказок Figma.

Такой подход гарантирует, что все карточки будут идентичны по структуре.

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

Знание горячих клавиш значительно ускоряет работу в Figma. Вот основные комбинации, связанные с линейкой:

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

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

Распространённые ошибки при использовании линейки

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

Первая ошибка — полагаться только на глаз. Многие дизайнеры считают, что «выглядит ровно», но на деле отклонение может быть 3–5px. Это недопустимо при работе в команде. Всегда используйте линейку и направляющие как объективный инструмент.

Вторая ошибка — забывать отключать линейку. Хотя она не мешает, лишние визуальные элементы могут отвлекать, особенно на маленьких экранах. Используйте Ctrl + R для быстрого переключения.

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

• “Snap to pixel grid”
• “Snap to objects”
• “Snap to guides”

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

1. Нажмите на шестерёнку в правом верхнем углу панели инструментов.
2. В разделе “Canvas” найдите пункт “Snapping”.
3. Убедитесь, что активированы все нужные опции.
4. При необходимости настройте чувствительность привязки (по умолчанию — средняя).

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

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

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

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

Также полезно использовать плагины, такие как »Guides» или »Layout Grids», которые позволяют быстро создавать сложные системы направляющих и сеток. Некоторые плагины даже импортируют параметры из дизайн-систем.

Сравнение инструментов выравнивания

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

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

— Мария Смирнова, старший UX-дизайнер в компании «СберИнтерфейсы», 10 лет опыта в продуктовом дизайне

Мария также отмечает, что в её команде есть правило: каждый макет должен проходить «проверку линейкой» перед передачей разработчикам. Это помогает избежать споров о позиционировании и ускоряет процесс реализации.

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

Заключение

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

• Линейка включается сочетанием Ctrl + R (Cmd + R на Mac).
• Используйте направляющие для выравнивания и контроля отступов.
• Сочетайте линейку с Auto Layout и сетками для максимальной эффективности.
• Проверяйте настройки привязки, чтобы объекты корректно реагировали на направляющие.
• Регулярно используйте линейку как часть проверки качества макета.