2025-12-09 10:39:27

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

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

Внутренние отступы внутри объекта

Это отступы внутри фрейма или авто-лейаута от его границ до содержимого. Внутренние отступы, или padding, создают воздух и комфорт внутри элементов интерфейса, например, внутри кнопки или карточки. Они отдаляют содержимое - текст или иконку - от краев самого объекта, что улучшает читаемость и визуальную гармонию.

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

Для обычного фрейма или компонента

Выделите фрейм.
В правой панели, в разделе «Auto layout», нажмите кнопку «+», чтобы добавить его.
Появятся поля для ввода отступов: по вертикале и горизонтале (или отдельно для каждой стороны, если нажать на иконку с четырьмя точками).
Введите нужные значения (например, 16 для всех сторон).

Для фрейма, уже имеющего Auto Layout

Просто найдите эти поля в разделе «Auto layout» и отредактируйте их.
Удерживайте Cmd (Mac) или Ctrl (Win) при перетаскивании границы фрейма с Auto Layout, чтобы изменить отступы визуально.

Ниже таблица, демонстрирующая способы задания внутренних отступов (Padding) во фрейме. Она показывает, как меняется управление отступами при использовании Auto Layout:

Способ / Состояние фрейма	Как задать отступы	Ключевая особенность
Обычный фрейм (без Auto Layout)	Вручную перемещать содержимое или изменять размеры. Нет централизованного контроля.	Отступы не систематизированы, их сложно единообразно изменить для группы элементов.
Фрейм с Auto Layout	В панели «Auto Layout» есть поля «Padding». Можно задать общее значение или для каждой стороны отдельно.	Отступы становятся свойством фрейма. При изменении значения всё содержимое автоматически адаптируется.
Визуальное редактирование	Зажать Cmd (Mac) / Ctrl (Win) и потянуть за границу фрейма с Auto Layout.	Позволяет интуитивно настроить отступ «на глаз», с мгновенным визуальным откликом.

Практический смысл: Таблица наглядно показывает, почему Auto Layout - это обязательный стандарт. Он трансформирует отступы из рутинной ручной работы в управляемое, гибкое и точное свойство компонента.

Внешние отступы между объектами

В Figma нет отдельного свойства «margin». Внешние отступы создаются автоматически с помощью Auto Layout. Когда вы группируете элементы внутри фрейма с Auto Layout, появляется параметр «Between», который и определяет фиксированное расстояние между всеми дочерними элементами.

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

Между элементами в Auto Layout

Выделите фрейм с Auto Layout.
В разделе «Auto layout» найдите поле «Between» (промежуток).
Установите значение. Это и будет отступ (маргин) между всеми дочерними объектами внутри.

Между вложенными фреймами

Это самый мощный способ. Создайте внутренний отступ (padding) у родительского фрейма и промежуток (between) между его детьми. Так вы точно контролируете расстояние от родителя до первого ребенка и между соседними элементами.

Быстрые клавиши и визуальное выравнивание

Скорость работы часто решает, и для точной расстановки отступов в Figma есть набор удобных инструментов быстрого доступа. Вы можете использовать клавиши-стрелки для ювелирного сдвига объектов с шагом в 10 пикселей, а с зажатым Shift - уже на 100 пикселей.

Когда требуется измерить или точно задать расстояние между двумя элементами, помогает зажатая клавиша Option (Alt) - просто наведите курсор на промежуток, и Figma покажет текущее значение, которое можно сразу отредактировать. Также на панели сверху есть кнопки для автоматического выравнивания и распределения объектов с заданным числовым интервалом.

Эти методы идеально дополняют Auto Layout, позволяя быстро вносить точечные корректировки без постоянного ввода чисел в панели.

Распределение объектов (для ручного позиционирования)

Выделите несколько объектов.
На верхней панели нажмите на иконки выравнивания и распределения (например, «Vertical spacing» или «Horizontal spacing»).
Можно ввести точное значение расстояния между выбранными объектами.

Клавиши-модификаторы для точности

Перемещайте объекты стрелками на клавиатуре. По умолчанию шаг - 10px.
Удерживайте Shift, чтобы шаг стал 100px.
Удерживайте Alt (Win) / Option (Mac) и наведите курсор на расстояние между объектами - Figma покажет точное значение. Можно его изменить, введя число.

Использование направляющих и сеток

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

Более системным подходом являются сетки (Layout Grid), которые можно применить к любому фрейму, создав модульную основу из колонок и рядов. Работа на такой сетке дисциплинирует дизайнера, заставляя выравнивать элементы и выдерживать отступы по заданному модулю, например, кратному 8 пикселям.

Направляющие: Вытащите их из линеек (если линейки не видны, нажмите Shift+R). Отпускайте объекты так, чтобы они прилипали к направляющим - это поможет выдержать единые отступы.
Layout Grid: Добавьте сетку к фрейму (в разделе «Design» правой панели). Колонки и ряды помогают визуально соблюдать модульные отступы (например, 8px, 16px).

Стили для отступов

Хотя в Figma нельзя создать стиль исключительно для отступа, опытные дизайнеры находят элегантные обходные пути для систематизации пробелов. Один из популярных методов - создание невидимых компонентов-спейсеров заданной высоты или ширины (4px, 8px, 16px), которые можно быстро вставлять между элементами для контроля расстояния.

Другой подход заключается в том, чтобы закладывать стандартные вертикальные отступы непосредственно в текстовые стили, настраивая параметры межстрочного интервала (line-height) и отступов между абзацами (paragraph spacing). Такие способы позволяют поддерживать единую ритмику и значительно ускоряют работу над крупными и сложными интерфейсами.

Компонент-спейсер: Создайте компонент-прямоугольник с нужной высотой или шириной (например, 4px, 8px, 16px) и нулевой заливкой. Вставляйте его между элементами для контроля отступов.
Текст-стили с отступами: В текстовых стилях можно задать line-height (межстрочный интервал) и paragraph spacing - это тоже внутренние вертикальные отступы.

Краткий алгоритм для идеальных отступов

Чтобы ваши отступы всегда были безупречны, начните с безусловного использования Auto Layout для любых повторяющихся или составных элементов, таких как списки, карточки или меню. Внутри этих контейнеров сразу задавайте осмысленные внутренние отступы (padding), которые отделят контент от границ.

Затем настройте промежутки (between) между дочерними элементами, что и станет вашим основным инструментом для управления внешними отступами. Для сложных структур не бойтесь вкладывать фреймы с Auto Layout друг в друга, создавая многоуровневую и гибкую систему.

Всегда используйте Auto Layout для любых списков, кнопок, карточек. Это главный инструмент.
Настраивайте внутренние отступы (Padding) у контейнеров (фреймов, компонентов).
Настраивайте промежутки (Between) между элементами внутри Auto Layout для внешних отступов.
Вкладывайте Auto Layout друг в друга для сложных интерфейсов (например, карточка в списке).
Придерживайтесь системы (например, кратно 4px или 8px). Используйте плагины вроде «Auto Layout Spacer» или «Spacer» для автоматизации.

Самое главное - придерживайтесь заранее определенной модульной сетки, например, кратной 4 или 8 пикселям, для всех своих числовых значений.

Главный принцип: Для отступов первым делом используйте Auto Layout, а не ручное перетаскивание. Этот подход не просто экономит время, но и создаёт «умную» структуру, которая автоматически поддерживает порядок и согласованность при любых изменениях. Это делает дизайн гибким, адаптивным и легко изменяемым.

Вывод

Освоение работы с отступами - от внутренних отступов через Auto Layout до системных внешних промежутков - это фундамент создания аккуратного, последовательного и адаптивного интерфейса. Главный ключ к успеху - дисциплинированное использование Auto Layout и adherence к модульной системе (например, 8px), что превращает разрозненные элементы в целостный, профессиональный дизайн.