Как показать линейки в фигме

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

Как показать линейки в Figma

Линейки в Figma — это не просто визуальные маркеры, а точные измерительные инструменты, которые отображают координаты по осям X и Y. Они появляются в верхней и левой частях холста и автоматически синхронизируются с позицией курсора. Чтобы активировать линейки, достаточно использовать сочетание клавиш: Ctrl+R на Windows или Cmd+R на macOS. Альтернативно, откройте верхнее меню, выберите пункт View, затем Rulers.

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

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

Настройка линеек: единицы, масштаб, цвет

Figma позволяет настраивать линейки не только по видимости, но и по формату отображения. По умолчанию линейки используют пиксели (px), но вы можете переключиться на миллиметры, дюймы или точки (pt). Чтобы изменить единицы измерения, кликните правой кнопкой мыши по линейке — появится контекстное меню с выбором единиц. Выбор зависит от ваших задач: для веб-дизайна чаще используют пиксели, для печатных материалов — миллиметры.

Также линейки адаптируются под масштаб холста. Если вы увеличиваете или уменьшаете видимую область (Ctrl+Scroll или Cmd+Scroll), деления на линейках меняются в реальном времени, чтобы сохранить читаемость. Например, при масштабе 50% деления будут крупнее, при 200% — мельче, но точность измерений остаётся неизменной.

Цвет линеек зависит от темы интерфейса Figma. В тёмной теме линейки светло-серые, в светлой — почти белые. Пользователи не могут напрямую менять цвет линеек, но можно улучшить их видимость, включив «Выделение при наведении»: в настройках (File → Settings → General) отметьте Highlight rulers on hover. При наведении курсора на линейку она подсвечивается ярче — это особенно полезно при сложных макетах с множеством слоёв.

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

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

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

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

Вы можете комбинировать линейки с сетками: в панели слоёв выберите фрейм, перейдите в раздел Layout Grid и настройте сетку (например, 12-колоночную с отступами 24px). Линейки покажут вам, где находятся колонки, а гайдлайны — где можно точно привязать элементы. Это особенно полезно при работе с адаптивными макетами, где важно соблюдать пропорции на разных разрешениях.

Представьте, что вы проектируете интерфейс для мобильного приложения. Вы настраиваете 8-колоночную сетку, включаете линейки и создаёте два гайдлайна: один на 16px слева, второй на 16px справа. Теперь все элементы, которые вы помещаете между ними, автоматически попадают в безопасную зону — без риска выхода за границы экрана. Это экономит десятки минут на проверке позиционирования.

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

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

• Не включают линейки вообще — полагаются только на панель свойств. Это медленно и подвержено человеческим ошибкам. Измерение расстояния между двумя элементами вручную занимает в 3–5 раз дольше, чем просто посмотреть на линейки.
• Путают линейки с гайдлайнами — думают, что линейки можно перетаскивать на холст. Нет: линейки — это только шкалы. Для создания направляющих нужно перетаскивать именно из линейки, а не из панели инструментов.
• Используют линейки в режиме просмотра — пытаются что-то выровнять в Preview, не понимая, что линейки там не отображаются. Режим просмотра — это для демонстрации, а не для редактирования.
• Не очищают старые гайдлайны — оставляют десятки ненужных линий, которые мешают видеть макет. Удалить все гайдлайны можно через View → Clear Guides.
• Работают на неправильном масштабе — например, 150% или 75%. Это искажает восприятие расстояний. Лучше всегда возвращаться к 100% при точной настройке.

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

Продвинутые советы: автоматизация и шаблоны

Для команд, которые работают над дизайн-системами, линейки — это основа для создания повторяющихся шаблонов. Создайте один фрейм с настроенными линейками и гайдлайнами, сделайте его компонентом (Component) и используйте как базовый шаблон для всех экранов. Это гарантирует единообразие: все кнопки, заголовки и иконки будут выровнены по одной и той же системе.

Также полезно использовать линейки при работе с анимациями. Если вы создаете переходы между состояниями, убедитесь, что начальная и конечная позиция элемента совпадает с координатами на линейках. Это предотвращает «дребезг» при анимации — эффект, когда объект «прыгает» на 1–2 пикселя.

Если вы часто работаете с внешними макетами (например, из Adobe XD или Sketch), импортируйте их в Figma и сразу включайте линейки. Сравните координаты ключевых элементов — это помогает выявить несоответствия в масштабах или отступах, которые могут быть критичны для разработки.

Для тех, кто использует Figma в сочетании с плагинами, обратите внимание на Layout Grids или Measure — они дополняют линейки, позволяя измерять расстояния между любыми двумя точками и экспортировать данные в CSV. Но даже без плагинов стандартные линейки с гайдлайнами покрывают 95% потребностей дизайнера.

Экспертное мнение: как линейки ускоряют работу дизайн-систем

«В нашей команде из 12 дизайнеров мы внедрили единый стандарт: все линейки настроены на 8px-базовую сетку, отступы — 16px, высота элементов — кратна 8. Линейки здесь не просто инструмент — это правило. Когда вы видите, что элемент не выровнен по линейке, вы сразу понимаете: что-то не так. Это снижает количество ревью, ускоряет передачу макетов разработчикам и уменьшает количество багов в финальном продукте. Мы не требуем от дизайнеров заучивать цифры — мы даём им визуальный ориентир. И это работает.»

— Екатерина Морозова, руководитель дизайн-системы в Яндекс.Маркет, более 10 лет в UX-дизайне, автор методики «Grid-First Design».

Её команда использует не только линейки, но и автоматические гайдлайны через плагин Auto Layout Grid, который создаёт сетку на основе выбранного фрейма. Но даже без плагинов, знание, как включить и использовать линейки, делает дизайн-процесс предсказуемым и масштабируемым.

Часто задаваемые вопросы

Заключение

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

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

• Включите линейки через Ctrl+R или View → Rulers.
• Настройте единицы измерения под задачу: пиксели для веба, миллиметры для печати.
• Используйте гайдлайны для фиксации важных точек — они сохраняются между сессиями.
• Избегайте распространённых ошибок: не работайте в Preview, очищайте лишние гайдлайны, используйте масштаб 100% для точной настройки.
• Превратите линейки в часть дизайн-системы — создавайте шаблоны с преднастроенными сетками и гайдлайнами.