Figma

Как дизайнеру использовать auto layout в Figma, чтобы фронтендеру было удобно

На основе изучения auto layout и общения с фронтендером я поняла, как дизайнер может сделать макеты максимально понятными для верстки. Auto layout приближает структуру макетов к тому, как эта структура выглядит в CSS. Как это можно использовать?

Вариант 1

Например, у меня есть карточка:

Карточка

Я собираю ее по контейнерам-фреймам на auto layout:

Разбивка карточки на контейнеры

Каждый фрейм состоит из двух фреймов:
1. Auto Layout (AL) фрейм с нулевыми отступами, horizontal resizing: fill (это важно для адаптива)
2. AL фрейм с нужными для блока отступами, horizontal resizing: fill

Важно: у текста надо выставить параметры Fill, auto height (иначе не будет работать адаптив)

Объединяю фреймы в один контейнер-обертку. Это AL фрейм с нулевыми отступами объединяет все фреймы группы, horizontal resizing: fixed.

Контейнер целиком

Вариант 2

Что, если попробовать сделать структуру вложенных фреймов проще? Удалю второй фрейм.

Так не получается, потому что:
1. Пропал дивайдер. Если задать его как stroke per side: bottom, то он будет иметь отступы слева и справа. Мне нужно, чтобы он занимал всю ширину карточки. Если задать его отдельно во фрейме, будет там же проблема.
2. Нельзя настроить разные отступы внутри блока, поэтому футер карточки «прилип» к описанию.

НО: если все элементы блока имеют одинаковую ширину и одинаковые отступы друг от друга, такой вариант использовать можно

Как это работает для страницы

Собрала по принципу первого варианта целую страницу:

Страница, которая собрана на контейнерах — так же, как это будет собрано на фронте

На первый взгляд может показаться, что это сложная система, но если разобраться, то становиться гораздо проще и работать с AL, и понимать принципы верстки. По тому же принципу контейнеров работает webflow и readymag.

Плюс, если все правильно настроить, собранная страница будет адаптивной, что ускорит работу дизайнера.