Как посмотреть отступы в фигма

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

Основные способы просмотра отступов

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

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

Если вы хотите увидеть отступы относительно родительского контейнера, достаточно кликнуть по дочернему элементу. В правой панели «Design» сразу отобразятся значения X и Y — это и есть внутренние отступы от края фрейма. Также здесь можно увидеть ширину и высоту самого элемента.

Кроме того, можно использовать привязку (Snap to Objects), чтобы видеть, когда элемент достигает нужного отступа. Например, если вы двигаете кнопку и она «цепляется» за отметку 16px — значит, заданный отступ соблюдён. Это работает только при включённых настройках привязки в меню View → Snap to Objects.

• Наведение + Shift — быстрое измерение до любого объекта
• Панель Design — точные цифры отступов от родителя
• Привязка — визуальная помощь при ручном позиционировании
• Правая панель Properties — общее положение и размеры

Как проверить отступы между несколькими элементами

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

Также можно создать временный guide (линию-подсказку) и привязать к ней объекты. Например, провести линию на 24px от левого края и выравнивать по ней все элементы. Это особенно эффективно при работе с дизайн-системами, где важна единообразная сетка.

Работа с Auto Layout и отступами

Auto Layout — одна из самых мощных функций Figma для управления отступами. Он позволяет задавать внутренние (padding) и внешние (gap) интервалы программно, а не вручную. Это критически важно для масштабируемых компонентов, таких как кнопки, списки, шапки и карусели.

Когда вы применяете Auto Layout к фрейму, в правой панели появляются поля Padding Left, Right, Top, Bottom и Gap. Заполняя их, вы задаёте строгие правила расположения. Например, кнопка с текстом может иметь padding: 12px сверху и снизу, 20px слева и справа. При изменении текста ширина кнопки будет адаптироваться, сохраняя отступы.

Gap — это расстояние между дочерними элементами. Если у вас есть строка с иконками, вы можете задать gap = 8px, и Figma автоматически распределит их с равными интервалами. Это исключает человеческий фактор и гарантирует консистентность.

Как настроить Auto Layout для контроля отступов

1. Выделите фрейм с элементами, которые нужно объединить (например, иконку и текст).
2. Нажмите на значок «Auto Layout» в верхней панели или используйте сочетание Shift+A.
3. В правой панели установите нужные значения Padding и Gap.
4. Выберите направление: Horizontal или Vertical.
5. Проверьте поведение при изменении размеров или добавлении новых элементов.

После настройки вы можете вложить такой фрейм в другой Auto Layout — и так строить сложные, но предсказуемые структуры. Например, список карточек с отступами 16px между ними и 24px от краёв экрана.

Визуализация сетки и Rulers

Rulers (линейки) и Grids (сетки) — это не просто вспомогательные линии, а мощные инструменты для контроля отступов. Включите линейки через View → Show Rulers (Ctrl+R). Появятся шкалы сверху и слева. Из них можно вытягивать Guide — временные или постоянные направляющие.

Например, если ваш дизайн использует 8px-сетку, вы можете создать guides каждые 8px. Затем привязывать к ним элементы. Это особенно полезно при работе с макетами высокой сложности: лендинги, админ-панели, формы.

Grids бывают нескольких типов:

• Layout Grid — для выравнивания колонок и полей
• Baseline Grid — для контроля высоты строки и вертикального ритма
• Image Grid — редко используется для отступов

Layout Grid можно настроить с шагом 8px, 16px или любого другого значения, соответствующего вашей дизайн-системе. При включённой привязке (Snap to Grid) элементы будут автоматически выравниваться по линиям.

Как использовать Guides для контроля отступов

Guides — это ваши персональные ориентиры. Вы можете создать guide на 16px от левого края страницы и использовать его как стандартный отступ для всех блоков. Чтобы добавить guide:

1. Наведите курсор на линейку (сверху или слева).
2. Нажмите и потяните внутрь холста.
3. Отпустите в нужном месте — появится пунктирная линия.
4. Дважды щёлкните по ней, чтобы задать точное положение (например, X=16).

Guides можно группировать, скрывать и сохранять в рамках. Это удобно при работе с разными breakpoint’ами: мобильный, планшет, десктоп.

Плагины для точного контроля отступов

Хотя Figma предлагает богатый набор встроенных инструментов, сторонние плагины позволяют выйти на новый уровень точности. Они особенно полезны при аудите макетов, проверке соответствия дизайн-системе или подготовке к передаче разработчикам.

Один из самых популярных — Spacing Guide. Он позволяет одним кликом отобразить все отступы внутри выбранного фрейма. Показывает gap, padding, расстояния между элементами. Можно настроить цвета и формат отображения.

Другой полезный плагин — Layout Helper. Он анализирует выбранный фрейм и сообщает, соблюдены ли отступы по правилам 8px-сетки. Также подсвечивает несоответствия и предлагает исправления.

Установка плагинов проста: откройте панель Plugins → Find more plugins, найдите нужный и нажмите «Install». После этого он появится в меню Plugins.

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

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

• Смешивание ручной расстановки и Auto Layout. Если часть элементов управляется Auto Layout, а часть — вручную, легко нарушить согласованность. Решение: либо всё в Auto Layout, либо всё вручную.
• Игнорирование 8px-сетки. Отступы в 10px, 14px, 18px нарушают ритм и усложняют работу фронтендеров. Рекомендация: придерживайтесь кратных 4 или 8 значениям.
• Забытые привязки. Иногда привязка отключена, и элемент стоит на 15.9px вместо 16. Это почти незаметно, но критично. Совет: включайте Snap to Objects и регулярно проверяйте координаты.
• Неправильное чтение padding и margin. В Figma нет понятия «margin», только расстояния между объектами. Разработчики интерпретируют это как margin, поэтому важно чётко указывать, где какой отступ.

Как проверить отступы перед сдачей макета

1. Выделите каждый основной блок и проверьте его с помощью Spacing Guide.
2. Убедитесь, что все кнопки, карточки, формы используют Auto Layout.
3. Проверьте, соблюдаются ли отступы 16px, 24px, 32px в соответствии с дизайн-системой.
4. Запустите плагин Layout Helper для аудита.
5. Откройте макет в режиме Preview и оцените визуальную гармонию.

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

«Сегодня, в 2026 году, умение работать с отступами — это не просто навык, а базовая компетенция. Мы больше не рисуем интерфейсы — мы проектируем систему взаимодействий. А система без чётких правил отступов не работает. Figma даёт нам все инструменты: Auto Layout, плагины, гайды. Но главное — дисциплина. Нужно с самого начала задать правила и не отклоняться от них.»

— Екатерина Белова, архитектор интерфейсов, 12 лет опыта, автор курса «Системный дизайн в Figma»

Она отмечает, что компании всё чаще требуют от дизайнеров не просто красивые картинки, а готовые к кодированию компоненты. «Если ваша кнопка имеет padding 12px, но в одном случае 11.8px — это уже баг. И Figma помогает этого избежать, если использовать её правильно.»

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

Заключение

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

• Используйте Shift + наведение для быстрого просмотра расстояний
• Настройте Auto Layout с padding и gap вместо ручного позиционирования
• Внедрите 8px-сетку и следуйте ей во всём проекте
• Применяйте плагины вроде Spacing Guide для аудита отступов
• Создавайте переменные для отступов, чтобы управлять ими централизованно