Линейка в Figma¶

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

¶Включение и выключение линейки

Линейка включается и выключается несколькими способами:

• Горячая клавиша Shift + R (Windows и macOS) — основной способ переключения видимости линеек.
• Главное меню Figma: пункт меню «Main menu» («Главное меню») → «View settings» («Настройки вида») → «Rulers» («Линейки»).
• Контекстное меню холста: щелчок правой кнопкой мыши по пустой области холста с последующим выбором пункта «Rulers» («Линейки»).

После включения линейки отображаются вдоль верхней и левой границ рабочего пространства. Повторное нажатие Shift + R скрывает их.

¶Отображаемые единицы измерения

По умолчанию Figma отображает расстояния в пикселях (px). В настройках файла доступна смена единиц измерения на дюймы (in), сантиметры (cm) или миллиметры (mm). Смена выполняется через меню «Main menu» → «Preferences» («Настройки») → «Units» («Единицы») либо через панель свойств выбранного фрейма, где соответствующее поле отображает текущие единицы измерения.

¶Направляющие (guides)

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

• Вертикальная направляющая создаётся перетаскиванием с верхней линейки вниз.
• Горизонтальная направляющая создаётся перетаскиванием с левой линейки вправо.

Направляющие привязываются к границам фреймов и других объектов, что упрощает выравнивание. Для удаления направляющей достаточно перетащить её обратно на линейку. Удалить все направляющие разом можно через меню «Main menu» → «Clear guides» («Очистить направляющие»).

¶Измерение расстояний

Линейка работает в связке с инструментом измерения: при удерживании клавиши Alt (Option на macOS) и наведении курсора на объект Figma отображает расстояние до соседних элементов и границ родительского фрейма. Шкала линейки при этом подсвечивает соответствующие координаты, что позволяет быстро определить положение объекта относительно начала координат фрейма.

¶Магнитное притяжение (snap to pixel grid)

Figma поддерживает привязку объектов к пиксельной сетке. Настройка «Snap to pixel grid» («Привязка к пиксельной сетке») доступна в меню «Main menu» → «View settings». При включённой привязке объекты, размещаемые по линейке, автоматически округляются до целых пикселей, что исключает появление размытых границ при экспорте растровых изображений.

¶Линейка в разных режимах работы

¶Режим «Dev Mode»

В режиме разработчика (Dev Mode) линейка и направляющие доступны наравне с обычным режимом редактирования. Панель инспектора в Dev Mode дополнительно отображает точные координаты и размеры выбранных элементов, что дополняет данные линейки.

¶Совместное редактирование

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

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

• Линейка привязана к началу координат активного фрейма; при переходе между фреймами отображаемые значения пересчитываются.
• Направляющие создаются на уровне страницы и не привязываются к отдельным фреймам.
• Скрытие линеек не удаляет ранее созданные направляющие — они остаются на холсте до явного удаления.
• В режиме просмотра (Presentation mode) линейки и направляющие не отображаются.

¶Историческая справка

Линейки появились в Figma на ранних этапах развития продукта и изначально задумывались как инструмент, унаследованный из традиционных настольных графических редакторов (Adobe Photoshop, Adobe Illustrator). В дальнейшем функциональность была дополнена направляющими, привязкой к сетке и интеграцией с режимом разработчика.

¶Источники

• Документация Figma Help Center: раздел «Rulers, guides, and grids»
• Figma Blog: обзоры обновлений интерфейса редактора
• Figma Community: руководства по работе с линейками и направляющими