Выравнивание и распределение

Ровный макет начинается с выравнивания: объекты, выстроенные по сетке, выглядят профессионально.

Глаз мгновенно ловит кривизну. Полпикселя смещения — и интерфейс кажется неряшливым. Выравнивание чинит это в один клик.

Figma даёт мощные инструменты, чтобы расставлять объекты идеально ровно: панель выравнивания, автоматическое распределение и умные подсказки при перетаскивании.

Панель выравнивания

Выделите два и более объекта — в правой панели сверху появятся иконки выравнивания:

• По горизонтали: по левому краю, по центру, по правому краю.
• По вертикали: по верху, по центру, по низу.
• Распределение: равные промежутки по горизонтали или вертикали.

Выравнивание трёх кнопок

  до:    [A]   [B]      [C]
  align center (по вертикали) -> на одной линии
  distribute horizontal       -> равные зазоры

  после: [A]   [B]   [C]

Умные подсказки (smart guides)

Когда вы тащите объект, Figma показывает красные направляющие и числа — расстояния до соседей. Это smart guides. Удерживайте Alt при наведении на выделенный объект, и Figma покажет отступы до краёв родителя. Так можно выставлять одинаковые поля на глаз и с числами.

Точное позиционирование

В разделе Design есть поля X и Y — координаты объекта относительно родителя. Впишите числа вручную для пиксель-в-пиксель точности. А поля W и H задают размер.

Tidy up — умная раскладка одной кнопкой

У панели выравнивания есть скрытая суперсила — кнопка Tidy up. Выделите несколько объектов, расставленных неаккуратно, и нажмите иконку Tidy up (появляется справа от иконок распределения). Figma автоматически выровняет их в ровную сетку или ряд с равными промежутками, угадав вашу раскладку. Это мгновенно превращает кашу в порядок.

Tidy up особенно хорош для сеток карточек: накидали восемь карточек как попало — один клик, и они выстроились в аккуратную решётку. После Tidy up появляются маркеры зазоров, потянув которые, можно одновременно менять расстояние между всеми элементами.

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

Чтобы объекты не вставали на дробные координаты (что портит чёткость), держите включённой пиксельную привязку: Cmd/Ctrl+Shift+' переключает её. Тогда при перетаскивании объекты прилипают к целым пикселям. А для системной точности используйте Layout grid — сетку из колонок: добавьте её в свойствах фрейма, и элементы можно будет ровнять по колонкам, как в настоящей вёрстке (например, 12-колоночная сетка для веба).

Горячие клавиши

Полезная мелочь: выравнивание работает и относительно родителя. Если выделен один объект внутри фрейма и вы нажимаете «центрировать по горизонтали», он встанет по центру родительского фрейма. А при выделении нескольких объектов выравнивание идёт относительно их общего ограничивающего прямоугольника. Понимание этой разницы избавляет от удивления «почему объект уехал не туда» и делает работу с панелью align предсказуемой.

Частые ошибки

• Выравнивают на глаз. При двух и более объектах всегда есть кнопка align — пользуйтесь ей, а не пытайтесь подвинуть мышью.
• Путают выравнивание и распределение. Align ставит объекты на одну линию, distribute — делает равными зазоры между ними.
• Игнорируют smart guides. Красные подсказки — бесплатный помощник, который показывает, когда объект встал ровно по центру родителя.

Совет профи: ровно — значит профессионально

Глаз человека безжалостен к кривизне: смещение даже на один-два пикселя считывается как неряшливость, хотя зритель не всегда понимает, что именно не так. Поэтому возьмите за правило: расставили объекты — выровняйте их кнопками align, а не «на глаз». Связка из трёх инструментов закрывает почти всё: align для общей линии, distribute для равных промежутков, Tidy up для быстрой сетки. Для системной аккуратности подключайте Layout grid и пиксельную привязку. Аккуратная расстановка — это не перфекционизм ради перфекционизма, а базовое качество, которое отличает работающий интерфейс от любительского эскиза. В следующих разделах авто-лейаут возьмёт большую часть выравнивания на себя, но понимать ручные инструменты всё равно необходимо.

Чек-лист

• Выравниваю объекты кнопками панели align.
• Делаю равные промежутки через distribute.
• Читаю smart guides и отступы по Alt.
• Задаю точные координаты в полях X и Y.

Итоги. Выравнивание превращает набор фигур в аккуратный макет. Вы освоили панель align, распределение, умные подсказки и точные координаты. Это последний урок про ручную расстановку — дальше авто-лейаут сделает многое автоматически. Но сначала разберём текст и цвет.