Figma выкатила новый подход в Auto Layout! Большое количество изменений в построении адаптивных компонентов и макетов.
Мануал: тут
Поле с Auto Layout теперь выглядит так:
Основной упор был на том, чтобы настраивать разное поведение вложенных компонентов, а так же разные отступы в компонентах, сделать их можно с помощью новых настроек:
На скрине ниже видно, что отступы настроены по-разному, и это позволяет нам избежать костыльных методов настройки Auto Layout с пустыми фреймами для доп отступов. Теперь это гибко настраивается за пару кликов.
По мере использования в реальных проектах, буду обновлять и дополнять статью.
23
показа
4.1K
открытий
Да, я этого ждал с момента появления самого инструмента. Очень круто, что у них дошли руки до реализации.
Согласен, это позволит очень легко настраивать решения при адаптации, да и вообще в целом работу с макетами.
Такс, а margin collapsing так и не подвезли, я правильно понимаю?
А поподробнее что имеете в виду? Если отступы друг от друга, то это решается оборачиванием всех элементов в один Auto Layout. Приведите кейс который хочется решить.
Хочется иметь библиотеку компонентов с заданными стандартными внешними отступами отступами, которые схлапываются как маржины в CSS. Т.е. есть заголовок, у него нижний отступ, к примеру, 20. А у параграфа верхний отступ 10. В CSS отступы будут схапываться, т.е. будет работать самый большой. А на уровне фигмы такое не разрулить. Либо ручками каждый раз ставить gap, либо ещё как-то мудрить. Причём в итоге это всё равно будет верстать я для браузера через маржины и если указывать отступы через gap, то не всегда понятно к какому из элементов отступ относится.
Преимущество маржинов как раз в том, что если компоненты проработаны достаточно хорошо, то можно просто накидывать их в сетку, а они сами встанут как надо. Лучше всего это работает для вертикальных блоков, особенно для вёрстки текстовых страниц с заголовками, параграфами и картинками.
А вы же можете вставлять прозрачный фрейм высотой в десять пикселей в один автолейаут с заголовком и скрывать его при необходимости, тогда отступ будет схлапываться. При этом разработчик будет понимать к чему этот паддинг относится. Но в этом обновлении вам достаточно будет нижний паддинг менять.
Да тоже как вариант. Отличный совет. Можно попробовать
Ну вот как-то так сейчас и делаем. Только это жутко неудобно. Хочется иметь возможность просто накидывать блочки и чтобы они вставали как надо без дополнительных манипуляций. А то что мы зря дизайн-систему продумывали.
Ну, здесь могу только еще посоветовать сделать несколько компонентов с одним заголовком, но разными отступами и вставлять нужный вариант уже по ситуации
Ещё можно в компоненте вставить Auto Layout и выставлять у этого пустого слоя паддинги.
Это же извращение) Так сделали ребята из ВК. На мой взгляд слишком много лишнего из за этого в макетах.
Ну понятно, что это костыль. Просто раньше по-другому нельзя было сделать, так как автолэйауты не давали возможности настроить разные отступы сторон и сделать заполнение на весь контейнер.
Да пример хороший, и действительно помог бы в работе. А что если создать большой авто лэйаут и туда закидывать блоки например, внутри блоков свои настройки авто лэйаута. Возможно распределение будет как раз ровное.
А что, выглядит неплохо)
Это что-то типа auto layout в xcode interface builder?
да, что-то похожее.
Круто!
Всю бошку сломал , как сделать так чтобы , хедер таблицы и линия таблицы сохраняли свои места когда делаешь scale, в хедери только текст , а в лайне различные компоненты. когда клацаешь fill container на текст то его width изменяется на какойто неизвестный, рандомный и его нельзя поменять(сразу становится fixed width. Если пробывать вариант с margin , то fill container их игнорит. Кароч , как сохранить столбцы при scale ?
Сползает сволочь , не так как надо , пробовал костылить с пустыми фреймами , чё ток не тыкал , как только не вертел ,
скинь ссылку в личку. Настроить попробую. И задача в чем? расширить таблицу по горизонтали чтобы текст оставался на месте а линии тянулись?