Описание
Выравнивает объекты по их горизонтальным центрам.
Первый и последний слои останутся неподвижными. Работает, если выделено не менее 3 слоёв. Воздействует на свойство X.
Клавиша Mac
Не налашатована
Клавиша Windows
Не налаштована
Путь
⚪️ Меню клієнта macOS🟡 Головне меню (Mac и Win)
Группа команд
Design / Arrange
2. File Browser
Вариант 1. Главное меню Figma
Вариант 2. Меню клиента macOS
Движение по меню клиента macOS
← Distribute Left Distribute Right →
Distribute Left
Distribute Right
Пример использования Distribute Horizontal Centers и формула
- Делаем 5 прямоугольников разного размера на равном горизонтальном расстоянии друг от друга. Чтобы увидеть эффект от действия команды, ставим их в несимметричную последовательность, иначе результат будет идентичен .Distribute Horizontal Spacing
- Применяем команду. Выясним формулу, по которой происходит выравнивание слоёв. Под капотом Figma определяет расстояние от горизонтального центра первого слоя (green) до горизонтального центра последнего (red). В данном примере оно равно 1000 px. Назовём его переменной A.
- Далее Figma считает количество отступов между объектами. В нашем примере это 4: green-blue, blue-yellow, yellow-purple, purple-red. Назовём его переменной B.
- Теперь нужно определить средний отступ, на основе которого по левому краю будут расставлены слои. Его назовём переменной C. Для этого Figma применяет простейшую формулу: C = A / B.
Для простоты понимания используем 3 квадрата размером 100 и 2 квадрата размером 200 px. Между ними одинаковый отступ в 100 px.
Также для наглядности на горизонтальные центры квадратов green и red можно добавить гайды.
Когда команда срабатывает, green и red остаются в неизменном положении.
1000 / 4 = 250
Шаг выравнивания для всех слоёв, которые находятся между крайними, будет равен 250 px. По нему от горизонтального центра слоя green выравниваются слои blue, yellow и purple. ⏹️
— аналогияDistribute Vertical Centers
← Distribute Left Distribute Right →
Distribute Left
Distribute Right