/designer
/designer

Distribute Right

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

image

image

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

←
Distribute Horizontal Centers
Distribute Top
 →

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

  1. Делаем 5 прямоугольников на равном расстоянии друг от друга.

    2. Для простоты понимания используем 3 квадрата размером 100 и 2 квадрата размером 200 px. Между ними одинаковый отступ в 100 px.

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

    image
  2. Применяем команду. Вспомним немного школьной геометрии и выясним формулу, по которой происходит выравнивание слоёв.

    3. Под капотом Figma определяет расстояние от правого края первого слоя (green) до правого края последнего (red). В данном примере оно равно 1000 px. Назовём его переменной A.

    image
  3. Далее Figma считает количество слоёв без первого. В нашем примере это 4: blue, purple, yellow и red. Назовём его переменной B.

    4. Первый слой green в формуле не учитывается, поскольку не участвует в формировании среднего отступа. Его размер не имеет значения. Когда команда срабатывает, green и red остаются в неизменном положении.

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

    5. 1000 / 4 = 250

    image

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

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

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

— антоним

←
Distribute Horizontal Centers
Distribute Top
 →

— освітній телеграм-канал про продуктовий дизайн, інструменти для нього, про кар’єру дизайнера та еміграцію. Помилки та зворотній зв’язок (українська версія)→ @ChristinaElixir @okunev