/designer
/designer
Align Vertical Centers

Align Vertical Centers

Описание
Выравнивает выделенные слои по вертикальным геометрическим центрам, приводя их к одной оси. Воздействует на координаты Y.
Клавиша Mac
OptV
Клавиша Windows
AltV
Путь
⚪️ Меню клиента macOS🟡 Главное меню (Mac и Win)Редактор: верх🟣 Правая панель
Группа команд
Design / Arrange
1. File Browser
148
5. Правая панель
22

Вариант 1. Панель Design

image

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

←
Align Top
Align Top
 Align Vertical Centers
Align Bottom
Align Bottom
 →

🟡
Движение по меню Figma

←
Align Top
Align Top
 Align Vertical Centers
Align Bottom
Align Bottom
 →

🟣
Движение по правой панели редактора

←
Align Top
Align Top
 Align Vertical Centers
Align Bottom
Align Bottom
 →

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

image

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

image

Режимы работы Align Vertical Centers

У команды есть два режима работы, в зависимости от того, что выделено.

  • Режим 1. Если выделен один слой

    • Произойдёт вертикальное выравнивание этого слоя по Y. В качестве оси используется вертикальный центр родительского фрейма.

  • Режим 2. Если выделено несколько слоёв

    • Сработает логика относительного выравнивания. На основе выделенных слоёв будет определена ось Y для их общего центра. Далее по ней произойдёт вертикальное выравнивание.

Пример 1. Один слой в фрейме

  1. Делаем фрейм, внутри Rectangle. Ставим его в верхней части фрейма.
    2. image
  2. Применяем команду. Слой сдвигается вниз, на вертикальный центр внутри фрейма.
    3. image

Пример 2. Несколько слоёв

  1. Из всех слоёв Figma вычисляет среднее значение координаты по Y. В данном примере у слоя blue оно совпало с геометрическим центром выделения по вертикали. По нему произошло выравнивание, поскольку сдвиг по Y между слоями был равный.
    2. image
  2. К среднему вертикальному центру приводятся значения Y остальных слоёв. Таким образом, они встают друг под другом по единой вертикальной оси. Слой blue в результате применения команды не двигался, green опустился вниз, а purple стал выше.
    3. image
📖
Официальная документация: Adjust alignment, rotation and position

📌
Также бывает
Align Horizontal Centers
Align Horizontal Centers

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