Как измерять расстояния в фигме

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

Основные методы измерения расстояний в Figma

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

Измерения отображаются динамически и обновляются в реальном времени. Система учитывает границы фреймов, фигур, текстовых блоков и других элементов. При этом Figma «понимает» иерархию: если объект находится внутри компонента или фрейма, измерения будут рассчитаны относительно его внешнего контура.

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

• Выберите первый объект с помощью инструмента Selection (V).
• Не снимая выделения, наведите курсор на второй объект.
• Дождитесь появления направляющей с цифрой — она покажет расстояние.
• Перемещайте курсор по сторонам объекта, чтобы увидеть разные измерения (горизонтальное, вертикальное).

Как измерять расстояние между центрами объектов

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

Вы можете вручную добавить временный объект (например, точку или круг) в центр каждого элемента, выравнивая его с помощью инструментов Align. Затем измерьте расстояние между этими центральными маркерами. Альтернатива — использовать плагины, которые рассчитывают централизованное расстояние.

Измерение диагональных расстояний

Figma не отображает диагональные измерения автоматически, но вы можете воспользоваться теоремой Пифагора. Если известны горизонтальное и вертикальное расстояния, диагональ рассчитывается как √(Δx² + Δy²). Для регулярных задач такого типа рекомендуется использовать специализированные плагины, которые выводят все три значения сразу.

Точное позиционирование и отступы: как работать с координатами

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

Зная координаты двух объектов, можно вручную рассчитать расстояние между ними. Например, если первый объект имеет X = 100, а второй — X = 250, горизонтальный отступ между ними составляет 150 пикселей (при условии, что они не перекрываются).

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

Как быстро задать точный отступ через клавиатуру

Figma позволяет изменять положение объекта с шагом в 1 пиксель с помощью стрелок. Удерживая Shift, шаг увеличивается до 10 пикселей. Это удобно для точной подстройки позиции после автоматических измерений.

Также можно вручную ввести значение X или Y в панели Inspector. Это особенно полезно, когда нужно выровнять несколько элементов по одной оси или соблюсти конкретный отступ, например, 24 px.

Работа с направляющими и сеткой для контроля расстояний

Направляющие (guides) — это ручные линии, которые вы можете добавить на страницу, чтобы контролировать отступы и выравнивание. Они не экспортируются и видны только в редакторе. Направляющие особенно полезны при создании сеток, полей и систем отступов.

Чтобы добавить направляющую, потяните из горизонтальной или вертикальной линейки (включается через View → Show Rulers). Вы можете зафиксировать её положение, и Figma будет привязываться к ней при перемещении объектов.

• Включите линейки: View → Show Rulers (Ctrl+R / Cmd+R).
• Щёлкните и потяните из линейки на холст.
• Отпустите, чтобы установить направляющую.
• Дважды щёлкните по направляющей, чтобы задать точное положение.

Создание сетки отступов

Для единообразия интерфейса рекомендуется использовать грид-систему отступов. Например, 8px-базированную шкалу: 8, 16, 24, 32, 48, 64 px. Такая система упрощает принятие решений и обеспечивает визуальную гармонию.

Вы можете создать набор направляющих, соответствующих этой шкале, или использовать функцию Layout Grids. Layout Grid позволяет задать колонки, строки и отступы, которые будут служить основой для размещения элементов.

1. Выделите фрейм или страницу.
2. В правой панели найдите раздел Layout Grids.
3. Добавьте grid (например, Uniform с шагом 8 px).
4. Включите привязку к сетке (View → Snap to Grid).

Плагины для измерений: когда встроенных инструментов недостаточно

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

Один из самых популярных — Measurer. Он позволяет добавлять аннотации к расстояниям, сохранять измерения в виде слоёв и экспортировать их. Особенно полезен при подготовке макетов для разработчиков.

Другой пример — Spacing Stickers, который автоматически расставляет метки отступов между элементами. Это ускоряет процесс документирования и делает макет более понятным для команды.

Как установить и использовать Measurer

1. Откройте Figma, перейдите во вкладку Plugins.
2. Найдите «Measurer» в каталоге.
3. Установите плагин.
4. Запустите его, выделив два объекта.
5. Выберите тип измерения: edge-to-edge, center-to-center и др.

Плагин создаст линию с подписью, которую можно перемещать и редактировать. Все измерения остаются в слоях, их можно группировать и скрывать.

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

Одна из самых частых ошибок — измерение расстояния между объектами, не учитывая их вложенность. Например, если кнопка находится внутри карточки с внутренними отступами (padding), реальный отступ до внешнего контейнера будет больше, чем показывает Figma между краями.

Ещё одна ошибка — игнорирование масштаба. При работе в увеличенном масштабе (например, 200%) легко промахнуться на 1–2 пикселя. Рекомендуется периодически переключаться на 100%, чтобы проверить точность.

Как избежать путаницы с отступами в компонентах

Когда вы используете компоненты, важно различать внутренние (padding) и внешние (margin) отступы. Figma не показывает margin, так как это концепция разработки. Чтобы избежать недопонимания:

• Документируйте отступы в заметках к компонентам.
• Используйте плагины для аннотаций.
• Создавайте демо-страницы с примерами использования компонентов.

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

По её словам, команда, которая использует единые правила измерения, работает на 30% быстрее. Она рекомендует внедрять чек-лист перед передачей макетов:

1. Проверить все отступы через направляющие или плагины.
2. Убедиться, что используются значения из дизайн-системы (например, 8, 16, 24).
3. Добавить аннотации к сложным участкам.
4. Скрыть или удалить временные объекты (маркеры, тестовые направляющие).

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

Заключение

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

• Figma автоматически показывает расстояния между объектами при наведении курсора.
• Используйте координаты X/Y и layout grids для точного позиционирования.
• Направляющие и линейки помогают стандартизировать отступы.
• Плагины вроде Measurer и Spacing Stickers упрощают документирование.
• Избегайте ошибок, связанных с вложенностью и масштабом, и всегда проверяйте макет на 100%.