Figma Auto Layout против CSS Flexbox и Grid: устранение разрыва между дизайном и кодом
Как автоматическая компоновка Figma сопоставляется с флексбоксом и сеткой CSS (направление, зазор, отступы, объятия, заполнение, перенос) и где они отличаются, чтобы проекты выдерживали передачу.
Главное
Автоматическая компоновка Figma во многом похожа на флексбокс CSS: карты направлений для гибкого направления, пробелы для пробелов, отступы к отступам, «Обнять содержимое» для изменения размера по содержимому, «Заполнить контейнер» для гибкого увеличения или полной ширины и переноса на гибкий перенос. Поток сетки автоматической компоновки соответствует сетке CSS. Различия проявляются в минимальном и максимальном размерах, переносе текста, выравнивании базовой линии и адаптивных точках останова, поэтому проверяйте их явно при передаче.
Отображение
В руководстве Figma описываются рамки с автоматическим макетом, которые упорядочивают дочерние элементы по направлению, интервалу, отступу и выравниванию с горизонтальными, вертикальными и сеточными потоками и дополнительным переносом. Каждый из них имеет близкий эквивалент CSS:
Обнять, наполнить и исправить
В Figma размер фрейма, охватывающего содержимое, изменяется в зависимости от его дочерних элементов, а дочерний набор, предназначенный для заполнения контейнера, растягивается, заполняя доступное пространство; Figma отмечает, что если дочерний элемент настроен на заполнение, родитель больше не может обниматься в этом направлении. В CSS эквивалентами являются изменение размера на основе содержимого (автоматически или по размеру содержимого) и flex: 1 или width: 100%. Руководство MDN по flexbox объясняет, как flex-grow, flex-shrink и flex-basis распределяют пространство, что является стороной той же идеи CSS.
Где появляется разрыв
Большинство ошибок передачи обслуживания возникают в нескольких областях:
- Минимальный и максимальный размеры: установите их в обоих местах, иначе текст и контейнеры будут вести себя по-разному в крайних случаях.
- Текст: высота строки, перенос и усечение различаются в зависимости от рендеринга текста Figma и браузера.
- Выравнивание базовой линии: CSS может выравниваться по базовой линии текста; проверьте, как это было задумано.
- Абсолютные дочерние элементы: параметр Figma «Игнорировать автоматический макет» (ранее — абсолютная позиция) отображается на позицию: Absolute в позиционированном родительском элементе.
- Адаптивность: кадры автоматической компоновки не имеют точек останова; определить, как макеты изменяются при каждой ширине.
Сетки
Используйте сетку автоматической компоновки для настоящих двумерных макетов и сопоставьте ее с сеткой CSS, которую MDN описывает как систему для размещения контента в строках и столбцах. Перевернутые гибкие строки — это не то же самое, что сетка: элементы в перевернутой строке не выстраиваются в столбцы.
Движение - это больший разрыв
Макет достаточно хорошо сопоставляется с Figma на CSS. Движение этого не делает: переходы прототипа приходится перестраивать в коде, а состояния часто теряются. То есть пробельные инструменты со средами выполнения, такие как ExodeUI (мы это делаем) и Rive, обращаются к интерактивным компонентам.
Ключевые принципы
- Автоматическое направление макета, разрыв, заполнение и перенос карты во flexbox
- Объятие — изменение размера контента; Заливка ≈ гибкость: ширина 1 или 100%.
- Поток сетки отображается в сетке CSS
- Проверьте минимальные/максимальные размеры, текст, базовые линии и точки останова при передаче
- Движение и состояния — это больший разрыв между проектированием и кодом.
Частые вопросы
Источники
- Guide to auto layout — Figma Справочный центр
- Basic concepts of flexbox — MDN Веб-документы
- Basic concepts of grid layout — MDN Веб-документы