Distribute Left

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

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

image

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

image

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

Distribute Vertical Spacing
Distribute Vertical Spacing
Distribute Horizontal Centers

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

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

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

    image
  3. Применяем команду. Вспомним немного школьной геометрии и выясним формулу, по которой происходит выравнивание слоёв.
  4. Под капотом Figma определяет расстояние от левого края первого слоя (green) до левого края последнего (red). В данном примере расстояние равно 1000 px. Назовём его переменной A.

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

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

    Шаг выравнивания для всех слоёв, которые находятся между крайними, будет равен 250 px. По нему от левого края слоя 1 выравниваются слои 2, 3 и 4. ⏹️

    image

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

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

— антоним

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

Quick Actions
New from Sketch File...

Distribute Vertical Spacing
Distribute Vertical Spacing
Distribute Horizontal Centers

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