Сравняет расстояния между слоями, так что они выстроятся в ровную вертикальную последовательность. Выравнивание будет происходить ссверху вниз, поэтому самый нижний отступ останется плавающим. Верхний и нижний слои останутся неподвижными. Отступы между всеми слоями будут рассчитаны из среднего значения отступов до применения команды. Работает, если выделено не менее 3 слоёв.
Вариант 1. Главное меню Figma
← Distribute Vertical Centers Distribute Bottom Plugins → [plugin name] →
← Distribute Vertical Centers Distribute Bottom Plugins → [plugin name] →
Вариант 2. Меню клиента macOS
Пример использования Distribute Bottom и формула
- Делаем 5 прямоугольников на равном вертикальном расстоянии друг от друга.
- Применяем команду. Вспомним немного школьной геометрии и выясним формулу, по которой происходит выравнивание слоёв.
- Далее Figma считает количество слоёв без первого. В нашем примере это 4: red, yellow, purple и green. Назовём его переменной B.
- Теперь нужно определить средний отступ, на основе которого по верхнему краю будут расставлены слои. Его назовём переменной C. Для этого Figma применяет простейшую формулу: C = A / B.
Для простоты понимания используем 3 квадрата размером 100 и 2 квадрата размером 200 px. Между ними одинаковый отступ в 100 px.
Также для наглядности на нижние края квадратов green и red можно добавить гайды.
Под капотом Figma определяет расстояние от нижнего края первого слоя (green) до нижнего края последнего (red). В данном примере оно равно 1000 px. Назовём его переменной A.
Первый слой green в формуле не учитывается, поскольку не участвует в формировании среднего отступа. Его размер не имеет значения. Когда команда срабатывает, green и red остаются в неизменном положении.
1000 / 4 = 250
Шаг выравнивания для всех слоёв, которые находятся между крайними, равен 250 px. По нему от нижнего края слоя red выравниваются слои yellow, purple и blue. ⏹️
Группа команд: Распределение
По сходной логике работают и другие похожие функции:
Distribute Top — антоним
— образовательный телеграм-канал о продуктовом дизайне и инструментах для него, о карьере дизайнера и эмиграции. Опечатки и обратную связь → @okunev