Distribute Left

Distribute Left

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

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

image

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

image

Пример использования 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

Distribute Vertical Spacing
Distribute Vertical Spacing
Distribute Horizontal Centers

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