Figma
Как дизайнеру использовать auto layout в Figma, чтобы фронтендеру было удобно
На основе изучения auto layout и общения с фронтендером я поняла, как дизайнер может сделать макеты максимально понятными для верстки. Auto layout приближает структуру макетов к тому, как эта структура выглядит в CSS. Как это можно использовать?
Вариант 1
Например, у меня есть карточка:
Карточка
Я собираю ее по контейнерам-фреймам на auto layout:
Разбивка карточки на контейнеры
Каждый фрейм состоит из двух фреймов:
- Auto Layout (AL) фрейм с нулевыми отступами, horizontal resizing: fill (это важно для адаптива)
- AL фрейм с нужными для блока отступами, horizontal resizing: fill
Важно: у текста надо выставить параметры Fill, auto height (иначе не будет работать адаптив)
Объединяю фреймы в один контейнер-обертку. Это AL фрейм с нулевыми отступами объединяет все фреймы группы, horizontal resizing: fixed.
Контейнер целиком
Вариант 2
Что, если попробовать сделать структуру вложенных фреймов проще? Удалю второй фрейм.
Так не получается, потому что: 1. Пропал дивайдер. Если задать его как stroke per side: bottom, то он будет иметь отступы слева и справа. Мне нужно, чтобы он занимал всю ширину карточки. Если задать его отдельно во фрейме, будет там же проблема.
2. Нельзя настроить разные отступы внутри блока, поэтому футер карточки «прилип» к описанию.
НО: если все элементы блока имеют одинаковую ширину и одинаковые отступы друг от друга, такой вариант использовать можно
Как это работает для страницы
Собрала по принципу первого варианта целую страницу:
Страница, которая собрана на контейнерах — так же, как это будет собрано на фронте
На первый взгляд может показаться, что это сложная система, но если разобраться, то становиться гораздо проще и работать с AL, и понимать принципы верстки. По тому же принципу контейнеров работает webflow и readymag.
Плюс, если все правильно настроить, собранная страница будет адаптивной, что ускорит работу дизайнера.