Distribute Vertical Spacing

Distribute Vertical Spacing

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

Вариант 1. Панель Design, меню More options

image

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

image

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

image

Distribute Horizontal Spacing
Distribute Horizontal Spacing
Distribute Left

Принцип действия Distribute Vertical Spacing

Слои расставляются на равном вертикальном расстоянии друг от друга. Если невозможно вычислить целое значение отступа, команда отдаёт приоритет отступам, а не высоте выделенной группы.

Похожие команды

На первый взгляд команда действует практически идентично

в режиме вертикального выравнивания. Также действуют
Distribute Top
и
Distribute Bottom
. При чётном значении суммы отступов между объектами все эти команды могут приводить к тому же результату: все выделенные объекты встанут на равном расстоянии друг от друга.

В отличие от Tidy up, команда не блокируется, если сумма нечётная. Значение округляется так, что между первым и вторым объектом отступ получается на 1 px меньше, чем у остальных отступов.

📌
Также есть аналогичная команда
Distribute Horizontal Spacing
Distribute Horizontal Spacing
, которая расставляет слои по тому же принципу по горизонтали.

Пример: Вертикальное распределение

  1. Создаём 3 прямоугольника с одинаковой шириной.
  2. Ставим их в столбик на отступах 20 px и 40 px. Среднее значение — 30 px. Сумма отступов чётная.

    image
  3. Применяем команду, отступы выравниваются до среднего значения в 30 px.
  4. image

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

Quick Actions
New from Sketch File...

Distribute Horizontal Spacing
Distribute Horizontal Spacing
Distribute Left

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