Distribute Horizontal Spacing

Distribute Horizontal Spacing

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

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

image

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

image

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

image

Pack Vertical
Distribute Vertical Spacing
Distribute Vertical Spacing

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

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

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

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

в режиме горизонтального выравнивания, а также
Distribute Left
и
Distribute Right
. При чётном значении суммы отступов может приводить к тому же результату: все выделенные объекты встанут на равном расстоянии друг от друга.

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

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

Пример 1. Горизонтальное распределение

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

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

Пример 2. Figma округляет отступ и сдвигает слои

  1. Создаём 3 прямоугольника с одинаковой шириной. Ставим их в ряд на отступе 40 px.
  2. Добавляем первому прямоугольнику +1 px ширины. Делаем это специально, чтобы среднее значение отступа между слоями не попадало на целое число.

    image
  3. Применяем команду.
  4. image
  5. Слои выстраиваются на равных отступах по 40 px. Делаем вывод, что Figma округляет дробное число до целого и даёт приоритет отступам, а не общей форме выделенных слоёв. На малых значениях отступа может происходить сдвиг и средних объектов.
  6. image

    Чтобы компенсировать дробное значение, Figma сдвигает последний слой на +1 px.

    В этом отличие в поведении

    , которая никогда не сдвигает правый слой, пренебрегая равенством отступов.

    image

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

Quick Actions
New from Sketch File...

Pack Vertical
Distribute Vertical Spacing
Distribute Vertical Spacing

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