CSS to Figma Auto Layout: Flexbox и Grid в Auto Layout Figma

Если вы пишете фронтенд, Auto Layout в Figma кажется знакомым: направление, gap, padding, выравнивание, дочерние элементы в режиме hug или fill. Соблазнительно считать, что CSS to Figma Auto Layout — перевод один к одному. Это не так. Flexbox и Grid богаче, браузер вычисляет margin, проценты и intrinsic-размеры, которых в Auto Layout нет, а один и тот же визуальный результат может получаться из совершенно разного CSS.

В этом гайде объясняется, как HTML to Frames переносит CSS-раскладки в Auto Layout, почему каждый результат проверяется по браузеру, где проходят границы и как писать CSS, который чисто импортируется.

Подход: сначала геометрия, потом вывод

Наивный конвертер читает display: flex и копирует свойства. Это быстро ломается: flex-контейнер с gap: 0 и margin у дочерних элементов, блочный элемент, который лишь выглядит как вертикальный стек, или grid, который рендерится двумя аккуратными рядами.

HTML to Frames работает от того, что браузер реально отрисовал:

1. Сборка с точностью до пикселя. Сначала страница собирается в Figma с абсолютными позициями из измеренной браузером геометрии.
2. Обход изнутри наружу. Начиная с самых глубоких фреймов, плагин по позициям и размерам выводит вертикальные стеки, горизонтальные стеки, переносящиеся ряды, gap, padding и выравнивание.
3. Адаптивный смысл. Центрированный контент получает Center, блоки с max-width остаются по центру, одинаковые карточки и flex-grow получают Fill, а в панели «логотип … меню … иконки» промежуточный элемент становится Fill.
4. Проверка. Auto Layout применяется, а затем позиция каждого дочернего элемента сверяется с оригиналом с допуском 2 px.
5. Безопасный откат. Если проверка не прошла, пробуется более простой план. Если не проходит и он, фрейм сохраняет абсолютные позиции с разумными constraints (Stretch, Scale, Center, Min, Max).

Поскольку вывод строится от отрисованной геометрии, стопка блочных элементов становится вертикальным Auto Layout так же, как flex-колонка. Механизм CSS важен меньше, чем результат. Общий обзор — в статье Auto Layout: как это устроено.

Таблица соответствий

Вот как обычно переносятся типовые CSS-паттерны. Считайте это ожидаемым результатом, а не обещанием: последнее слово за проверкой.

Flexbox подробно

Направление и порядок

flex-direction определяет, станет ли контейнер горизонтальным или вертикальным стеком. Поскольку вывод опирается на отрисованные позиции, обратные направления и order просто дают слои в визуальном порядке. Что вы видите в браузере, то и получаете в панели слоёв.

Gap и padding

gap — самый чистый вход: одно постоянное расстояние между дочерними элементами, которое напрямую становится item spacing в Auto Layout. Margin между соседями работают, если они одинаковые. Если нет — скажем, 16, 24, 16 — плагин не может выразить это одним gap, и проверка либо выберет другой план, либо оставит позиции абсолютными.

Padding измеряется по тому, где дочерние элементы реально находятся внутри контейнера, поэтому в результат вносят вклад и padding, и толщина border, и внутренние margin.

Justify и align

justify-content соответствует выравниванию по основной оси, align-items — по поперечной. Интересный случай — space-between. В шапке вида «логотип … меню … иконки» плагин делает промежуточный элемент Fill, и при ресайзе логотип остаётся слева, иконки — справа, а середина растягивается. Это именно тот адаптивный смысл, которого вы ждёте, а не фиксированный отступ, работающий лишь в одной ширине.

flex-grow и Fill

Дочерние элементы с flex-grow или flex: 1 становятся Fill container. Ряды одинаковых карточек становятся одинаковыми Fill-элементами, так что при ресайзе родительского фрейма карточки меняют размер вместе — как в браузере.

Перенос

flex-wrap: wrap соответствует режиму wrap в Auto Layout и даёт переносящиеся ряды. Это естественный вариант для списков тегов, стен логотипов и сеток карточек на flexbox.

CSS Grid подробно

Auto Layout в Figma — модель стеков, а не двумерная сетка. Поэтому grid-раскладки переносятся в ближайшую структуру, которая проходит проверку:

• Равномерные сетки (равные колонки, равные gap) обычно становятся переносящимися рядами.
• Асимметричные сетки (сайдбар и основная колонка, деление 2:1) обычно становятся вложенными стеками: горизонтальный стек из вертикальных или наоборот.
• Ячейки со span и перекрытиями, которые не раскладываются на стеки, сохраняют абсолютные позиции с constraints.

В любом случае визуальный результат совпадает с браузером в пределах допуска. Меняется лишь то, какую часть фрейма можно гибко ресайзить в Figma.

Абсолютное позиционирование, центрирование и auto-margin

position: absolute

Абсолютно позиционированный бейдж, декоративное пятно или оверлей не место в стеке, потому что перекрывают соседей. Такие элементы сохраняют абсолютные позиции, а плагин назначает им constraints, чтобы они вели себя разумно при ресайзе родителя: бейдж, прибитый к правому верхнему углу, там и остаётся, полноэкранный оверлей растягивается.

max-width и margin: auto

Классический контейнер max-width: 1200px; margin: 0 auto становится центрированным блоком внутри фрейма на всю ширину. Здесь же вступает в игру Site width: плагин измеряет реальную дизайн-ширину страницы при импорте. Full-bleed-дизайны приходят в ширине 1920 с контентом по центру, сайты с контейнером — в ширине контейнера, резиновые — в 1440. Измеренное значение сохраняет логику вашего контейнера.

Auto-margin во flex

margin-left: auto у flex-элемента отталкивает его в конец — частый паттерн в навигации. Как и space-between, это выводится из геометрии, обычно как промежуточный Fill-элемент, удерживающий отодвинутый элемент у дальнего края.

Почему важна проверка

Без проверки у конвертеров два плохих варианта: применять Auto Layout везде и мириться с тем, что часть фреймов съезжает, перекрывается или схлопывается, — или избегать Auto Layout и отдавать замороженные абсолютные слои.

HTML to Frames применяет Auto Layout, а затем проверяет позицию каждого дочернего элемента с точностью 2 px. Если фрейм не проходит, пробуется более простой план; если не проходит и он, фрейм остаётся абсолютным. Дизайн никогда не ломается. Вы можете доверять тому, что видите в Figma: это совпадает с браузером, а полученный Auto Layout действительно держится.

Экран результатов показывает общую долю Auto Layout, а для фреймов, оставшихся абсолютными, объясняет почему (диагностика). Вопрос «почему здесь нет Auto Layout?» превращается в конкретную правку в вашем CSS.

В наших тестах на реальных сайтах Auto Layout выводился примерно для 86–97 процентов фреймов — например, 93 процента на одном продуктовом сайте и 88 процентов на Linear и Stripe. Ваши цифры зависят от того, как написан CSS.

Ограничения

• Семантики двумерной сетки в Auto Layout нет; сетки становятся переносящимися рядами или вложенными стеками, а сложные span могут остаться абсолютными.
• Неравномерные отступы между соседями нельзя выразить одним gap.
• Перекрытия (отрицательные margin, абсолютные дочерние элементы) оставляют такие элементы абсолютными.
• Skew и 3D-трансформации, clip-path через path(), многослойные маски и цвета Display-P3 пока не конвертируются.
• Встроенный контент — iframe, WebGL-canvas и видео без постера — приходит как скриншот своего блока.
• Одна ширина за раз. Каждый экран раскладывается в своей ширине. Используйте responsive set (Desktop, Tablet, Mobile), чтобы захватить каждый брейкпоинт отдельным фреймом.

Советы: как писать CSS, который чисто импортируется

Эти привычки чаще дают Auto Layout — и в любом случае это хорошая практика CSS.

1. Используйте gap вместо margin между соседями. Одно постоянное значение напрямую становится item spacing.
2. Держите отступы одинаковыми внутри контейнера. Разнобой вынуждает откат.
3. Для одномерных раскладок предпочитайте flexbox. Навигация, тулбары, группы кнопок и ряды карточек переносятся напрямую.
4. Для сеток карточек используйте grid с равными треками. Равные колонки становятся чистыми переносящимися рядами.
5. Оборачивайте асимметричные раскладки в явные контейнеры. Сайдбар и область контента в собственном flex-ряду дают понятные вложенные стеки.
6. Используйте flex: 1 для элементов, которые должны растягиваться. Это сигнал для Fill.
7. Центрируйте контент через max-width и margin: 0 auto. Он станет центрированным блоком, который остаётся по центру.
8. Оставьте position: absolute для настоящих оверлеев. Не используйте его для обычной раскладки.
9. Избегайте отрицательных margin в раскладке. Они создают перекрытия, которые нельзя уложить в стек.
10. Называйте цвета через custom properties. Со Styles & variables (Pro) --brand-primary становится переменной brand/primary.
11. Используйте настоящий текст. Текст на картинках не может стать редактируемым текстовым слоем.

Как увидеть соответствие на своём коде

Быстрее всего понять, как переносится ваш CSS, — импортировать его. Вставьте код или загрузите папку через сценарий HTML to Figma, захватите локальную сборку расширением для Chrome или попросите AI-инструмент отправить её через MCP. Затем откройте экран результатов, проверьте долю Auto Layout и прочитайте диагностику для фреймов, оставшихся абсолютными.

Включите Reference screenshot (Pro), чтобы добавить скрытый заблокированный слой с оригинальной страницей и переключаться между импортом и рендером браузера. Включите Detailed layers (Pro), если нужна более подробная структура слоёв.

Подробнее о том, как страницы становятся фреймами, — в разделе о конвертации HTML to frame, а всё, что поддерживает импорт, — на странице возможностей. В документации подробно описана каждая опция импорта.