Distribute Horizontal Centers

Описание
Выравнивает объекты по их горизонтальным центрам. Первый и последний слои останутся неподвижными. Работает, если выделено не менее 3 слоёв. Воздействует на свойство X.
Группа команд
Arrange
Клавиша Mac
Не настроена
Клавиша Windows
Не настроена
Есть в меню
Меню клиента macOSГлавное меню (Mac и Win)
2. File Browser

Вариант 1. Главное меню Figma

image

Вариант 2. Меню клиента macOS

image

Движение по меню клиента macOS

Distribute Left
Distribute Right

Пример использования Distribute Horizontal Centers и формула

  1. Делаем 5 прямоугольников разного размера на равном горизонтальном расстоянии друг от друга. Чтобы увидеть эффект от действия команды, ставим их в несимметричную последовательность, иначе результат будет идентичен
    Distribute Horizontal Spacing
    Distribute Horizontal Spacing
    .
  2. Для простоты понимания используем 3 квадрата размером 100 и 2 квадрата размером 200 px. Между ними одинаковый отступ в 100 px.

    Также для наглядности на горизонтальные центры квадратов green и red можно добавить гайды.

    image
  3. Применяем команду. Выясним формулу, по которой происходит выравнивание слоёв. Под капотом Figma определяет расстояние от горизонтального центра первого слоя (green) до горизонтального центра последнего (red). В данном примере оно равно 1000 px. Назовём его переменной A.
  4. image
  5. Далее Figma считает количество отступов между объектами. В нашем примере это 4: green-blue, blue-yellow, yellow-purple, purple-red. Назовём его переменной B.
  6. Когда команда срабатывает, green и red остаются в неизменном положении.

  7. Теперь нужно определить средний отступ, на основе которого по левому краю будут расставлены слои. Его назовём переменной C. Для этого Figma применяет простейшую формулу: C = A / B.
  8. 1000 / 4 = 250

    Шаг выравнивания для всех слоёв, которые находятся между крайними, будет равен 250 px. По нему от горизонтального центра слоя green выравниваются слои blue, yellow и purple. ⏹️

    image

Группа команд: Распределение

По сходной логике работают и другие похожие функции:

— аналогия

↔️
Движение по меню Figma

Quick Actions
New from Sketch File...

Distribute Left
Distribute Right

— образовательный телеграм-канал об интерфейсах, продуктовом дизайне, инструментах для него, о карьере дизайнера и эмиграции Опечатки и обратную связь автору → @okunev