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

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

Зачем измерять расстояния в Figma

Точность в дизайне интерфейсов — не вопрос эстетики, а вопрос функциональности и доступности. Неправильные отступы между элементами могут нарушить визуальный ритм, затруднить навигацию, ухудшить восприятие информации и даже сделать интерфейс недоступным для пользователей с нарушениями зрения. Согласно исследованиям NNGroup, неравномерные интервалы в интерфейсе снижают скорость восприятия на 18–25%. В Figma, где дизайн превращается в прототип и передаётся разработчикам, каждые 2–4 пикселя имеют значение. Даже если вы не работаете с жёсткой типографикой или системой сеток, точные замеры помогают поддерживать консистентность — ключевой принцип UI-дизайна.

Представьте: вы создали кнопку с отступом 16 пикселей от текста, но случайно сдвинули её на 15.7 пикселя. Разработчик, получивший макет, может округлить это значение до 16 — и всё будет выглядеть нормально. Но если таких «ошибок» сотни — в итоге интерфейс теряет чёткость. Поэтому измерение расстояний — это не вспомогательная функция, а обязательный этап проверки.

Базовый способ: измерение через панель Inspect

Самый простой и часто используемый способ — выделить два объекта и посмотреть данные в панели правых свойств (Inspect). Для этого:

1. Выберите два элемента на холсте — удерживайте Shift и кликните по каждому.
2. В панели справа, в разделе Inspect, найдите блок Distance.
3. Здесь отобразятся значения по осям X и Y — это и есть расстояние между центрами выбранных объектов.

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

Однако есть ограничение: этот способ работает только при выделении двух объектов. Если вы хотите измерить расстояние от края одного элемента до середины другого — этот метод не подойдёт. Для таких случаев используется инструмент Measure.

Инструмент Measure: точные замеры между любыми точками

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

Чтобы использовать Measure:

1. Нажмите Ctrl + Shift + M (на Mac — Cmd + Shift + M).
2. Курсор превратится в линейку с точками. Кликните в начальной точке (например, в правом крае кнопки).
3. Перетащите курсор к конечной точке (например, к левому краю следующей кнопки) и отпустите.
4. На экране появится линия с точным значением расстояния в пикселях, а также углом и проекцией по осям X и Y.

Вы можете создавать несколько таких замеров одновременно — все они сохраняются на холсте и могут быть скрыты или удалены. Чтобы скрыть все линии замеров, нажмите Esc. Чтобы удалить конкретную — кликните по ней правой кнопкой и выберите «Delete».

Также можно изменить стиль линий замеров: перейдите в File → Settings → Measure и настройте цвет, толщину и тип линий (сплошные, пунктирные). Это особенно удобно, если вы работаете в команде — можно сделать линии заметными, но не отвлекающими.

Роль сетки, гайдов и привязки

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

Включите сетку: Ctrl + ' (апостроф). Чтобы настроить её шаг — перейдите в View → Grid Settings. Часто дизайнеры используют сетку 4 или 8 пикселей — это соответствует стандартам Material Design и Apple HIG.

Гайды (guides) — это временные линии, которые можно перетаскивать с линеек. Чтобы создать гайд, просто перетащите его с верхней или левой линейки на холст. Гайды не влияют на размеры объектов, но помогают визуально выравнивать элементы. При включённой привязке (Snap to) объекты автоматически «прилипают» к гайдам, сетке и другим объектам.

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

Как измерять в Auto Layout

Auto Layout — это одна из ключевых фишек Figma, позволяющая создавать адаптивные компоненты. Но при работе с ним измерение расстояний становится сложнее — потому что расстояния между элементами внутри Auto Layout-контейнера управляются параметрами Padding и Spacing, а не физическим положением.

Чтобы посмотреть расстояние между элементами внутри Auto Layout:

1. Выберите контейнер с Auto Layout.
2. В панели Inspect найдите раздел Layout.
3. Значения Padding — это отступы от краёв контейнера.
4. Значение Spacing — это расстояние между дочерними элементами.

Также полезно использовать режим «Show Layout Grid» в Auto Layout: он визуально отображает внутренние отступы и интервалы, что помогает быстрее оценить структуру.

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

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

• Измерение между несвязанными объектами — если вы выделили объекты, которые не находятся на одной оси, Figma может показать расстояние по обеим осям, что вводит в заблуждение. Всегда проверяйте, по какой оси вы измеряете — X или Y.
• Игнорирование привязки — если Snap to не включён, вы можете случайно сдвинуть элемент на 0.5 пикселя, и это не будет заметно визуально, но нарушит целостность системы.
• Путаница между центрами и краями — Figma по умолчанию измеряет от центра к центру. Если вам нужно от края до края — используйте Measure или посчитайте вручную: расстояние = (X2 – X1) – (ширина1/2 + ширина2/2).
• Забытые замеры на холсте — линии Measure остаются видимыми и могут мешать при демонстрации макета. Всегда очищайте их перед экспортом или презентацией: нажмите Esc или удалите вручную.

Чтобы избежать ошибок, создайте чек-лист перед сдачей макета:
— Все расстояния между одинаковыми элементами одинаковы?
— Все отступы от краёв экрана соответствуют дизайн-системе?
— В Auto Layout — правильно ли заданы Padding и Spacing?
— Удалены ли лишние линии Measure?

Экспертное мнение: как дизайнеры используют замеры на практике

Дмитрий использует ещё один приём: создаёт отдельный слой «Проверка расстояний» — там он размещает временные линии Measure, которые потом скрывает перед экспортом. Он также использует плагин Measure It для автоматического экспорта всех расстояний в Excel — это особенно удобно при аудите больших интерфейсов.

Для команды, работающей в Figma, он рекомендует:
— Установить единый стиль линий Measure (например, тонкие синие пунктирные).
— Добавить в шаблон макета комментарий: «Все расстояния кратны 8px».
— Проводить еженедельный «пиксельный аудит» — проверку всех ключевых интерфейсов на соответствие стандартам.

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

Заключение

Точность в дизайне — это не вопрос вкуса, а вопрос профессионализма. Умение измерять расстояния в Figma — базовый навык, который разделяет хороших дизайнеров от отличных. Вы теперь знаете, как использовать как базовые инструменты (Inspect), так и продвинутые (Measure), как работать с Auto Layout и как избегать типичных ошибок. Главное — не полагайтесь на глаз. Даже 1 пиксель может нарушить целостность интерфейса, особенно на высокодетализированных экранах.

• Используйте Inspect для быстрого измерения между двумя объектами.
• Применяйте Measure для замеров между любыми точками, включая края и пустые области.
• В Auto Layout проверяйте параметры Padding и Spacing, а не координаты элементов.
• Всегда очищайте линии Measure перед сдачей макета.
• Создавайте чек-лист и используйте плагины для автоматизации проверки.