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

В Figma — одном из самых популярных инструментов для дизайна интерфейсов — линейки (rulers) являются незаменимым элементом точного позиционирования, выравнивания и измерения элементов. Однако многие пользователи, особенно новички, сталкиваются с ситуацией: «Линейки исчезли, и я не знаю, как их вернуть». Это не ошибка, а просто скрытая функция, которая по умолчанию может быть отключена. Важно понимать, что линейки в Figma — это не просто визуальные подсказки, а мощный инструмент для соблюдения сеток, отступов и точного соответствия макетам. Без них работа с точностью до пикселя становится значительно сложнее, особенно при работе над продуктами, где требования к адаптивности и согласованности высоки.

Как вытащить линейки в Figma

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

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

Представьте, что вы работаете над мобильным интерфейсом: кнопка должна быть ровно на 16 пикселей от края экрана. Без линеек вы полагаетесь на глаз — и это риск ошибки. С линейками вы просто подводите курсор к краю холста, и всплывает точное значение. Это экономит минуты на каждом макете.

Настройка линеек: единицы измерения и сетки

Линейки сами по себе — лишь отображение. Их реальная мощь раскрывается при настройке единиц измерения и привязки к сетке. Чтобы изменить единицы, перейдите в меню View → Rulers & Grids, затем выберите нужную систему: пиксели (px), миллиметры (mm), дюймы (in), точки (pt) или em. Для веб-дизайна чаще всего используются пиксели, но для печатных макетов удобнее миллиметры.

Также в этом же меню можно настроить сетку (grid). Включив опцию «Show Grid», вы увидите вертикальные и горизонтальные линии, разделяющие холст на равные части. Это особенно полезно при работе с колонками, флекс-сетками или грид-системами. Сетка может быть привязана к линейкам — тогда каждая отметка на линейке будет соответствовать шагу сетки.

Вы можете настроить шаг сетки вручную: откройте View → Rulers & Grids → Grid Settings. Здесь можно задать:
— Шаг сетки (например, 8px для Material Design или 4px для Apple HIG).
— Цвет сетки (для контрастности с фоном).
— Прозрачность.
— Привязку к линейкам (Snap to Grid).

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

Многие путают линейки с направляющими (guides). Это разные инструменты, и понимание их отличий критично для эффективной работы.

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

Направляющие — это перемещаемые линии, которые вы создаёте вручную. Чтобы создать направляющую, просто перетащите её из линейки на холст. Они помогают выравнивать элементы по конкретным точкам: например, выровнять все заголовки по 120px от верха. Направляющие можно скрыть (Ctrl+;), удалить или зафиксировать.

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

Частые ошибки и как их исправить

Даже опытные дизайнеры допускают ошибки при работе с линейками. Вот самые распространённые:

• Линейки не отображаются после нажатия Ctrl+R — возможно, вы находитесь в режиме «Просмотр» (Preview). Нажмите Esc или переключитесь на вкладку с файлом в редакторе.
• Линейки есть, но координаты не совпадают с реальными значениями — проверьте масштаб. Если вы увеличили холст до 200%, линейки показывают координаты в масштабе, а не в пикселях. Сбросьте масштаб до 100% (Ctrl+0).
• Не могу перетащить направляющую из линейки — убедитесь, что вы не зажали Shift или Ctrl. Для создания направляющей просто перетаскивайте без дополнительных клавиш.
• Линейки слишком мелкие или нечитаемые — измените цвет темы Figma на «Тёмную» в настройках профиля. На тёмном фоне линейки становятся белыми и контрастнее.

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

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

Вот несколько проверенных практик, которые повысят вашу точность и скорость:

• Комбинируйте линейки с привязкой. Включите «Snap to Grid» и «Snap to Objects» — тогда при перемещении элемента он будет «прилипать» к сетке или к краю другого объекта. Это устраняет пиксельные сдвиги.
• Используйте линейки для проверки отступов. При верстке интерфейса сверяйте отступы между элементами по линейкам. Если все отступы 16px — значит, система соблюдена.
• Создавайте шаблоны с включёнными линейками. Сохраните пустой файл с настроенными линейками и сеткой как шаблон. Каждый новый проект начинайте с него — это сэкономит 3–5 минут на настройку.
• Узнайте, как скрыть линейки быстро. Нажмите Ctrl+R ещё раз — они исчезнут. Это полезно при демонстрациях или при работе с плотными макетами, где линейки мешают.
• Используйте линейки для проверки аутлайнов. Если вы работаете с SVG или иконками, линейки помогут убедиться, что они не выходят за границы контейнера.

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

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

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

— Алексей Волков, Lead UX Designer, 12 лет опыта, работал в Figma Team как консультант по дизайну систем

Алексей рекомендует всегда использовать линейки в паре с компонентами. Создайте компонент кнопки с фиксированными отступами, привязанными к сетке — и тогда каждый раз, когда вы его используете, он будет идеально вписываться. Это — основа масштабируемого дизайна.

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

Заключение

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

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

• Линейки включаются сочетанием Ctrl+R (Win) или Cmd+R (Mac).
• Линейки работают только в режиме редактирования, не в Preview.
• Комбинируйте линейки с сеткой и привязкой для максимальной точности.
• Направляющие — это инструмент выравнивания, линейки — инструмент измерения.
• Создайте шаблон с включёнными линейками — это сэкономит время на каждом новом проекте.