Как посмотреть в фигме расстояние между объектами

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

Основные способы измерения расстояния

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

Измерения появляются только если включены Smart Guides (умные направляющие). По умолчанию они активны, но могут быть отключены в настройках. Чтобы проверить их состояние, откройте меню View → Show Smart Guides. Если галочка стоит — направляющие работают. Также можно временно включить их через сочетание Ctrl + ; (на Windows) или Cmd + ; (на macOS).

Если вы хотите измерить расстояние между двумя уже расположенными объектами, просто выберите оба элемента с помощью Shift + клик. После этого в области справа в панели свойств (Inspector) отобразится информация о расстоянии между ними. Это особенно полезно при ревью макета или проверке соответствия дизайн-системе.

Другой способ — использование режима «Measurement Mode», который активируется при зажатой клавише Alt (на Windows) или Option (на macOS). При наведении курсора на свободное пространство между двумя объектами появляется пунктирная линия с указанием расстояния. Этот метод работает даже без выделения объектов и идеально подходит для быстрых проверок.

• Выбор двух объектов — точный способ получить расстояние в Inspector.
• Smart Guides — автоматические подсказки при перемещении.
• Alt/Option + hover — экспресс-проверка расстояния в любом месте.

Шаги для точного измерения

1. Откройте ваш файл в Figma и перейдите на нужный фрейм.
2. Убедитесь, что включены Smart Guides (View → Show Smart Guides).
3. Выделите первый объект с помощью клика.
4. Зажмите Shift и выделите второй объект.
5. Обратите внимание на правую панель — там появятся значения H (горизонтальное) и V (вертикальное) расстояния.
6. Для визуальной проверки используйте Alt + наведение между объектами.

Точные настройки и горячие клавиши

Работа с расстояниями в Figma становится значительно эффективнее при использовании сочетаний клавиш и настройки среды под себя. Владение этими инструментами экономит время и снижает риск ошибок при выравнивании элементов.

Например, чтобы быстро включить или отключить Smart Guides, используйте Cmd + ; (macOS) или Ctrl + ; (Windows). Это позволяет моментально проверить, видны ли направляющие, и включить их, если они были случайно отключены. Также полезно знать, что Smart Guides работают только при движении объектов — они не появляются в статичном состоянии.

Для измерения расстояния без выделения объектов зажмите Alt (Option на Mac) и наведите курсор на пространство между двумя элементами. Через 0.5 секунды появится пунктирная линия с цифрой. Этот метод особенно удобен при работе с плотными блоками, где сложно выделить нужные объекты.

Если вы часто сталкиваетесь с необходимостью проверять множественные отступы, рекомендуется настроить свои пресеты в разделе Preferences → Guides & Grids. Там можно задать цвет и стиль направляющих, чтобы они лучше читались на светлом или тёмном фоне.

• Cmd/Ctrl + ; — включение/отключение Smart Guides.
• Alt (Option) + hover — измерение расстояния между объектами.
• Shift + стрелки — движение на 10px (полезно для точного позиционирования).
• Cmd + D — дублирование с сохранением расстояния.

Пример использования в реальном проекте

Представьте, что вы проектируете карточку товара с изображением, названием и кнопкой. Вам нужно убедиться, что отступ между названием и кнопкой составляет ровно 16px. Вы зажимаете Alt, наводите курсор между двумя элементами — появляется надпись «14px». Значит, нужно скорректировать положение. Перемещаете кнопку на 2px вниз, снова проверяете — теперь 16px. Готово.

Работа с группами и стеками

Сложность измерения возрастает, когда объекты объединены в группы, фреймы или Auto Layout-стеки. В таких случаях важно понимать, от каких именно границ считается расстояние.

При измерении между группами Figma берёт внешние границы всей группы, а не внутренних элементов. То есть если внутри группы есть внутренние отступы (padding), они учитываются в общем размере. Например, группа шириной 200px с внутренним отступом 20px будет занимать те же 200px в расчётах.

Auto Layout упрощает контроль расстояний. При использовании vertical или horizontal stack вы можете задать фиксированный gap (промежуток) между элементами. Это значение отображается в панели свойств и автоматически применяется ко всем соседним элементам. Однако при измерении между объектами из разных стеков используется стандартный алгоритм — от крайних краёв.

• Расстояние между группами — от внешнего контура до внешнего.
• Gap в Auto Layout — управляемое расстояние внутри одного контейнера.
• При смешанной структуре (группа + отдельный объект) измеряется от границ группы.

Как измерить расстояние внутри Auto Layout

Хотя Figma не показывает внутренние gap’ы через Alt+hover, вы можете легко узнать их значение:

1. Выберите фрейм с Auto Layout.
2. В правой панели найдите параметр «Item spacing» (или «Gap»).
3. Это и есть расстояние между элементами внутри стека.
4. Для визуального подтверждения можно временно изменить цвет фона или добавить разделитель.

Частые ошибки и как их избежать

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

Одна из самых распространённых ошибок — отсутствие видимых измерений при Alt+hover. Причина чаще всего в том, что Smart Guides отключены или пользователь наводит курсор не на то пространство. Направляющие появляются только между ближайшими параллельными краями. Если объекты расположены по диагонали, система может не распознать расстояние.

Другая ошибка — путаница между padding и margin. Figma не различает эти понятия на уровне интерфейса: всё, что внутри группы, влияет на её габариты. Поэтому если вы добавили 20px отступов внутри кнопки, она будет «толще» на 40px, и это повлияет на расстояние до соседних элементов.

Как проверить точность макета

Для комплексной проверки всех отступов в интерфейсе рекомендуется использовать следующий чек-лист:

• Проверить включение Smart Guides.
• Убедиться, что все основные блоки используют Auto Layout.
• Выбрать ключевые пары объектов и сверить расстояния через Inspector.
• Просканировать макет с помощью Alt+hover, особенно в местах с плотной компоновкой.
• Сравнить значения с документацией дизайн-системы.

Экспорт данных для разработчиков

Одна из главных причин, по которой важно точно измерять расстояния — подготовка макета к передаче разработчикам. Figma позволяет экспортировать информацию о расстояниях напрямую через режим Developer Settings (Dev Mode).

Когда разработчик открывает ваш файл, он может сам использовать Alt+hover, чтобы увидеть отступы. Но вы можете облегчить ему задачу, заранее выровняв все элементы, добавив комментарии к критическим участкам и используя consistent spacing (например, кратные 4 или 8 px).

Если вы используете Auto Layout, gap-значения будут отображаться в Dev Mode автоматически. Это позволяет разработчику сразу понять, какой отступ применяется внутри компонента. Для внешних отступов важно, чтобы они также были кратны базовой сетке.

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

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

— Анна Петрова, руководитель дизайн-студии, 12 лет в digital

Анна также отмечает, что новички часто забывают про масштаб. При работе в Zoom 200% или 50% визуальные восприятие искажается, и измерения могут казаться другими. Её совет: проверяйте критические отступы на 100% масштабе.

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

Заключение

Умение точно измерять расстояния в Figma — базовый, но критически важный навык для любого дизайнера. Он влияет на качество макета, скорость согласования и удобство взаимодействия с разработчиками. Современная версия Figma предоставляет всё необходимое: от Smart Guides до точных данных в Inspector.

• Используйте Alt/Option + hover для быстрых проверок.
• Всегда держите включёнными Smart Guides.
• Выбирайте пару объектов, чтобы увидеть точное расстояние в Inspector.
• Применяйте Auto Layout для контроля внутренних отступов.
• Подготавливайте макет к Dev Mode — чистота структуры упрощает жизнь разработчикам.