Как компонентами и автолейаутами Figma переделать сетку всех макетов в 2 клика?

Представьте, что UI-kit на примере — рабочий макет с сеткой. Горизонтальные направляющие воздухом разделяют макет между вертикальными блоками. Вертикальные направляющие — между горизонтальными блоками. Сетка задаёт вертикальный и горизонтальный ритм макету.

Теперь разделим макет визуально на отдельные блоки и пронумеруем их, а также укажем, какие отступы будут одинаковыми.

Первый уровень иерархии проработали и получаем 3 блока, отступы между ними должны быть равны. Помещаем эти 3 блока в автофрейм (Shift + A).

Затем нам надо создать первый квадрат, равный размеру этого отступа в 42 пикселя (опираясь на пример). Превращаем квадрат в компонент, а его «дочку» помещаем как раз в наш созданный автофрейм, дублируем его и оба экземпляра размещаем на тех местах, где должен быть отступ. В настройках автолейаута после этого отступ можно убрать — достаточно будет наличия квадрата.

Затем спускаемся на уровень иерархии ниже и между нашими колонками создаём отступ 30 пикселей. Также превращаем колонки в автолейаут а между ними размещаем экземпляр компонента со вторым квадратом, но его размер делаем 30 пикселей.

Проделываем всё это со вторым рядом колонок — там, где поля с лейблами и Textarea. Там тоже будет квадрат с размером 30 пикселей. Остается покрасить наши квадраты в цвет фона и всё готово.

Ну а вот сам результат. При изменении мастер-компонентов, будут меняться все отступы между элементами, где присутствует экземпляр соответствующего квадрата.

«Можно просто поменять вручную настройки автолейаута» — скажете вы. Я отвечу — «да». А если ваш макет превратиться в такой и надо будет поменять его сетку?

P.S. увы, когда в макетах идёт «борщ» с автолейаутами и всё строится на них, возможны баги. Но, может, вам повезёт =)

P.P.S. плюсаните, если не жалко и узнали что-то новенькое =)