Сравняет расстояния между слоями так, что они выстроятся в ровную горизонтальную или вертикальную последовательность. Алгоритм будет стремиться найти закономерность между отступами и привести к стандарту те, которые отличаются. Работает, если выделено не менее 3 слоёв.
Вариант 1. Контекстная кнопка в блоке выделения
← 
Align Bottom Tidy Up Pack Horizontal →
← Align Bottom Tidy Up Pack Horizontal →
Вариант 2. Панель Design
Вариант 3. Главное меню Figma
Вариант 3. Меню клиента macOS
Принцип работы
Figma меряет отступы между выделенными слоями и высчитывает среднее значение горизонтального или вертикального отступа. Слои выстраиваются с этим отступом.
Если между слоями не удаётся вычислить целое значение отступа, команда становится недоступной.
Режимы работы Tidy Up
У команды есть три режима выравнивания: по горизонтали, по вертикали и по сетке.
В горизонтальном и вертикальном режимах крайние слои никогда не двигаются. Сдвиг может происходить только у тех слоёв, которые находятся между крайними.
Кроме того, функция умеет работать с отрицательными значениями отступа.
Пример 1. Выравнивание по горизонтали
- Создаём и выделяем три прямоугольника: green, blue и purple, которые стоят в ряд. Между ними неравное расстояние: первый отступ — 20 px, второй — 40 px.
- Применяем команду Tidy up. В результате слой blue двигается направо на 10 px. Слои выстраиваются на равном среднем значении отступа — 30 px.
Пример 2. Выравнивание по вертикали
Работает аналогично горизонтальному.
- Прямоугольники green, blue и purple стоят в столбик.
- Слой blue понижается на 10 px, общий отступ выравнивается до 30 px по вертикали.
Пример 3. Выравнивание по сетке
Более сложный тип выравнивания, для применения которого нужны минимум 4 слоя. Средние значения рассчитывается отдельно для горизонтального и вертикального отступа.
- Создаём сетку из 4 квадратов: green, yellow, blue и purple.
- green и yellow — 20 px
- blue и purple — 40 px
- green и blue — 40 px
- yellow и purple — 80 px
- Выделяем слои и применяем Tidy up.
Между ними выставляем горизонтальные отступы:
Их среднее значение будет равно 30 px.
Выставляем вертикальные отступы:
Их среднее значение будет равно 60 px.
Горизонтальные отступы становятся 60 px, вертикальные — 30 px.
Пример 4. Почему блокируется Tidy up
Обязательное условие работы команды — чтобы возможно было вычислить целое значение среднего отступа. Если это невозможно, команда блокируется.
- Создаём 3 прямоугольника размером 80 х 160 px на расстоянии 40 px друг от друга.
- Первому слою добавляем +1 px ширины. Это не позволит команде выстроить слои с целым отступом.
Зная, почему Tidy up не работает, мы можем проверить, идентичны ли размеры слоёв, которые мы хотим выравнивать.
— образовательный телеграм-канал о продуктовом дизайне и инструментах для него, о карьере дизайнера и эмиграции. Опечатки и обратную связь → @okunev