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

Отступы в Figma - это одна из основ работы с интерфейсами. Вот подробное руководство, как их делать разными способами.

Автоматические отступы с помощью Auto Layout

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

Как добавить Auto Layout:

1. Выделите слои или фрейм, к которым хотите применить отступы.
2. Нажмите Shift + A или кнопку Auto Layout на панели справа.

После этого в панели справа появятся настройки. Основные настройки для отступов:

• Direction (Направление): Выберите, как располагаются элементы - вертикально или горизонтально.
• Padding (Внутренний отступ): Это и есть ваши отступы внутри фрейма от его границ до содержимого. Вы можете задать разные значения для top, right, bottom, left, либо использовать одно значение для всех.
• Item spacing (Расстояние между элементами): Это отступы между дочерними элементами внутри этого фрейма.

Пример: Вы создаете кнопку. Внутри фрейма кнопки есть текст и иконка.

1. Создаете текст и иконку.
2. Выделяете их и применяете Shift + A.
3. Задаете Direction: Horizontal (элементы в строку).
4. Задаете Padding: 16px (отступ от границы кнопки до текста и иконки).
5. Задаете Item spacing: 8px (расстояние между текстом и иконкой).

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

Настройки Padding и Item Spacing - это основа управления пространством в Auto Layout. Вот как они работают вместе:

Элемент	Padding (внутренний отступ)	Item Spacing (расстояние между элементами)
Кнопка с текстом	16px со всех сторон	неприменимо, т.к. элемент один
Список из 3 иконок с подписями	24px слева и справа	16px между каждой парой "иконка-текст"
Карточка товара с изображением, заголовком и кнопкой	20px по краям	12px между изображением, заголовком и кнопкой

 

Эта таблица наглядно показывает, что Padding задает "воздух" между границей фрейма и его содержимым, а Item Spacing контролирует расстояние между элементами внутри этого фрейма. Правильная комбинация этих параметров создает четкую иерархию и визуальный комфорт.

Ручные отступы с помощью направляющих и клавиатуры

Этот способ подходит для быстрой, разовой правки или когда Auto Layout не подходит. Основные действия этого способа:

• Стрелки на клавиатуре: Выделите объект и нажимайте стрелки, чтобы сдвигать его на 1 пиксель. Зажмите Shift, чтобы сдвигать сразу на 10 пикселей.
• Поле "X" и "Y": В панели справа вы можете точно указать координаты объекта.
• Визуальное выравнивание: Включите направляющие (View - Show Layout Grids / Show Rulers). Перетаскивайте объекты, и Figma будет показывать розовые линии, указывающие на равные расстояния между соседними объектами.

Отступы в сетке

Этот способ используется для создания общего структурированного отступа для всего макета. Например, для контентной области сайта.

1. Выделите фрейм (например, артборд).
2. В панели справа найдите раздел Layout Grid и нажмите +.
3. Выберите тип Grid.
4. Настройте:

• Type: Stretch (растягивающаяся сетка) или Left/Right/Center (фиксированная по бокам).
• Width: Задайте ширину колонки.
• Gutter: Задайте расстояние между колонками (горизонтальный отступ между элементами сетки).
• Margin: Задайте отступы по краям фрейма.

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

Плагины для автоматизации

Если вам нужно быстро применить сложную систему отступов (например, из дизайн-системы), можно использовать плагины:

• Auto Layout Shortcuts: Дает больше горячих клавиш для работы с Auto Layout.
• Spacer: Позволяет создавать "резиновые" отступы-прокладки.

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

Ключевые выводы и лучшие практики

1. Используйте Auto Layout везде, где можно. Это основа современного подхода к дизайну в Figma. Это делает ваш макет гибким, адаптивным и легко редактируемым.
2. Соблюдайте консистентность. Не используйте случайные значения для отступов (13px, 7px). Придерживайтесь системы (например, 4px, 8px, 16px, 24px...).
3. Сочетайте методы. Используйте Auto Layout для компонентов (кнопки, карточки, списки) и Layout Grid для общего макета страницы.

Краткий алгоритм для новичка:

1. Создал группу элементов.
2. Выделил их и нажал Shift + A.
3. Выставил Padding и Item spacing.
4. Наслаждайся аккуратным и адаптивным компонентом.

Вывод

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