Figma Auto Layout в CSS: как это преобразуется в Flexbox (и когда нужен Grid)

Если вы хоть раз открывали файл Figma и видели включённый Auto Layout для фрейма, вы уже видели нечто очень близкое к CSS Flexbox — дизайнеры Figma намеренно позаимствовали эту ментальную модель. Направление, gap, отступы и выравнивание переносятся почти один в один. А вот где соответствие Figma и CSS становится неоднозначным, так это в поведении при изменении размера: «hug», «fill» и «fixed» описывают намерение, а не одно конкретное CSS-объявление, и правильный результат зависит от окружающего контекста компоновки. Понимание того, где соответствие прямое, а где нет, и позволяет перейти от файла дизайна к поддерживаемому, отзывчивому CSS, не угадывая каждое значение на глаз.

Что на самом деле контролирует Auto Layout

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

• Направление — располагаются ли дочерние элементы вертикально или горизонтально.
• Интервал / gap — фиксированное расстояние между каждым дочерним элементом.
• Отступы (padding) — пространство между краем фрейма и его дочерними элементами, настраиваемое по каждой стороне.
• Выравнивание — как дочерние элементы выстраиваются вдоль и поперёк оси компоновки.
• Поведение при изменении размера — облегает ли фрейм и его дочерние элементы своё содержимое, заполняют ли доступное пространство или остаются фиксированного размера.

Ничего из этого не случайно. Каждое свойство существует, потому что соответствует чему-то, что должен знать настоящий движок компоновки, — именно поэтому оно так чисто переносится в CSS Flexbox в большинстве случаев.

Figma Auto Layout в Flexbox: таблица соответствий

Эта таблица — практическое ядро переноса Figma в CSS. Большинство строк — это прямая замена; некоторые зависят от контекста, что явно отмечено в столбце «Примечания».

Важная оговорка: «Fill container» в Figma не всегда переносится в одно универсальное CSS-объявление. Должно ли это стать flex: 1, width: 100% или align-self: stretch, зависит от того, находится ли элемент внутри flex-контейнера, блочного контейнера или grid — одно и то же свойство Figma может требовать разного CSS в зависимости от родителя.

Ментальная модель: контейнер Auto Layout → flex-контейнер

Стоит убрать интерфейс Figma — и понятия выстраиваются напрямую:

Каждый фрейм с Auto Layout — это потенциальный flex-контейнер. Настоящая работа заключается в том, чтобы для каждого фрейма решить, что его поведение при изменении размера на самом деле означает в итоговом CSS, — об этом дальше.

Hug contents, fill container и фиксированный размер

Именно в поведении при изменении размера чаще всего ошибается ручной перенос Figma в CSS, потому что Figma выражает намерение, а CSS требует конкретного объявления.

Hug contents

Элемент «hug contents» подстраивает размер под своё содержимое — у него нет фиксированного измерения, он растёт или сжимается вместе с содержимым. В вебе ближайший эквивалент — часто просто не задавать явные width или height вообще, поскольку блочные элементы и flex-элементы уже по умолчанию подстраиваются под своё содержимое. Там, где явное указание всё же нужно, width: fit-content или height: fit-content подходит близко, но не является универсально эквивалентным: внутри flex-контейнера элемент без flex-grow уже ведёт себя как «hug» без дополнительного CSS, так что добавление fit-content поверх может быть избыточным или, в некоторых браузерах, слегка отличаться от поведения по умолчанию.

/* Figma: Hug contents, горизонтальный Auto Layout */
.button {
  display: flex;
  width: fit-content; /* часто не нужно — flex-элементы и так облегают содержимое по умолчанию */
}

Fill container

Элемент «fill container» расширяется, занимая доступное пространство. Правильный CSS полностью зависит от родителя:

• Внутри flex-контейнера, вдоль главной оси: flex: 1 (или flex-grow: 1).
• Внутри flex-контейнера, вдоль поперечной оси: align-self: stretch.
• Внутри блочного родителя: width: 100%.

/* Figma: Fill container, дочерний элемент горизонтального Auto Layout фрейма */
.sidebar-content {
  flex: 1;
}

Единого правила «fill container → CSS», работающего везде, не существует. Если контекст компоновки родителя определён неверно, flex: 1 на элементе, который не является flex-элементом, ничего не даст.

Fixed (фиксированный размер)

Фиксированные размеры в Figma обычно соответствуют явному width и/или height в CSS. Но пиксельное значение, скопированное напрямую из Figma, часто не является правильной целью: проверьте, подразумевает ли дизайн жёсткое ограничение (width: 240px) или границу для в остальном гибкого элемента (min-width / max-width, min-height / max-height). Трактовать каждое фиксированное значение как жёсткий width — частая причина раскладок, которые не адаптируются под реальный контент или разные viewport.

Auto Layout и Constraints

Auto Layout и Constraints решают связанные, но разные задачи, и их смешение — частая причина ошибок переноса.

• Auto Layout контролирует то, как дочерние элементы фрейма расположены относительно друг друга — направление, gap, отступы, выравнивание и поведение при изменении размера. Это ближайший аналог display: flex.
• Constraints контролируют то, как элемент ведёт себя при изменении размера его родителя — прикреплён к левому/правому/верхнему/нижнему краю/центру или масштабируется. Constraints наиболее актуальны для элементов, которые вообще не находятся внутри фрейма с Auto Layout, либо для того, как сам фрейм с Auto Layout ведёт себя внутри родителя фиксированного размера.

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

Как Auto Layout помогает с отзывчивым CSS

Auto Layout даёт реальные подсказки для отзывчивого поведения, но сам по себе автоматически не превращается в отзывчивый CSS. Стоит быть точным насчёт того, что он на самом деле даёт:

• Поведение Auto Layout при изменении размера (hug / fill / fixed) показывает, какие элементы должны расти, сжиматься или оставаться на месте — это основа отзывчивой раскладки, которая напрямую переносится в flex, width: 100% или фиксированный размер.
• Constraints в Figma добавляют информацию о том, как элементы должны себя вести при изменении размера их контейнера, что важно для всего, что не регулируется Auto Layout.
• Ни то, ни другое не генерирует брейкпоинты. Если раскладка дизайна действительно меняет форму при определённых ширинах — колонки складываются в стопку, навигация сворачивается — всё равно нужны CSS media queries, потому что фреймы Figma обычно представляют несколько фиксированных размеров viewport, а не весь диапазон между ними.
• Между размерами, которые дизайнер действительно указал, гибкое масштабирование (проценты, flex, minmax(), clamp()) часто точнее воспроизводит задуманное поведение, чем добавление лишних брейкпоинтов, чтобы заполнить промежутки.

Цель — воспроизвести задуманное поведение раскладки на разных viewport, а не скопировать пиксельные размеры того фрейма Figma, на который вы случайно смотрели.

Когда CSS Grid подходит лучше

Auto Layout — это одноосевая модель: она отлично справляется со строками и колонками, включая их вложенные комбинации. Но некоторые дизайны по-настоящему двумерны, и попытка втиснуть их во вложенный Flexbox даёт код, который сложнее поддерживать, чем когда-либо был сам дизайн. Правильный выбор зависит от раскладки: Flexbox подходит для одномерных композиций (навигация, группы кнопок, ряд карточек, контент, выровненный по вертикали или горизонтали), а Grid — для двумерных. Обращайтесь к CSS Grid, когда видите:

• Раскладку, где элементы должны выравниваться одновременно по строкам и колонкам — например, сетки карточек, дашборды или фотогалереи.
• Явное поведение «этот элемент занимает две колонки» или «занимает две строки», которое Grid обрабатывает нативно через grid-column / grid-row, а Flexbox напрямую выразить не может.
• Дизайны, где количество колонок должно реагировать на доступную ширину (repeat(auto-fit, minmax(...))), а не на фиксированный список брейкпоинтов.
• Перекрывающиеся или наслоённые области внутри общей сетки, что просто реализуется системой размещения Grid и неудобно с Flexbox.

Хорошее эмпирическое правило: если Auto Layout фрейма в Figma вкладывается только в одном направлении за раз, Flexbox — верный перенос. Если вы обнаруживаете, что строите сетку из фреймов с Auto Layout, чтобы имитировать выравнивание по строкам и колонкам, — это обычно означает, что интерфейс Figma компенсирует отсутствие нативного двумерного режима компоновки Grid, и в этом случае стоит сгенерировать настоящий CSS Grid.

Частые ошибки при переносе Auto Layout в CSS

Даже при чётком соответствии, разработчики, воссоздающие Auto Layout вручную, обычно спотыкаются об одни и те же детали:

• Смешанное выравнивание сглаживается. Figma позволяет отдельным дочерним элементам переопределять выравнивание группы; легко прикинуть это на глаз и применить одно значение align-items ко всем, потеряв индивидуальные переопределения, для которых нужен align-self.
• Неоднозначность «облегать» и «заполнять». Фрейм, настроенный облегать своё содержимое, выглядит идентично фрейму с фиксированной шириной при одном конкретном размере окна просмотра, но ведёт себя совершенно по-разному, как только меняется содержимое или размер экрана.
• Поддержка gap пропускается в пользу margin. Некоторые разработчики всё ещё прибегают к трюкам с margin вместо gap — по привычке из старых советов по Flexbox, хотя это уже не нужно, ведь gap уверенно поддерживается браузерами, а старый подход снова порождает именно те баги с отступами, которые gap призван был исправить.
• Вложенные фреймы Auto Layout превращаются во вложенные flex-контейнеры без плана. Каждый вложенный фрейм — это собственный flex-контекст, и буквальный перенос один в один может породить больше обёрточных элементов, чем реально требуется раскладке.
• Отступы применяются не к тому элементу. Легко применить отступ фрейма к дочернему элементу вместо контейнера, что сбивает интервалы между соседними элементами, основанные на gap.
• Предположение, что один только Auto Layout делает раскладку отзывчивой. Как уже говорилось, Auto Layout и constraints лишь информируют об отзывчивом поведении — они не заменяют media queries, когда форма раскладки действительно должна меняться.
• Вложение Flexbox для имитации двумерной сетки. Если вы складываете фреймы с Auto Layout, чтобы одновременно выровнять строки и колонки, — это обычно признак того, что CSS Grid подходит лучше.

Использование Auto Layout в связке с Figma-to-code

Это соответствие хорошо изучено, но правильно применять его к каждому фрейму, каждому значению gap и каждому вложенному контейнеру в реальном файле дизайна — параллельно интерпретируя направление, поведение при изменении размера и иерархию между фреймами — утомительно. И это именно та повторяющаяся работа по переносу, для устранения которой создан MarkupGen. Рабочий процесс состоит из четырёх шагов: экспортируйте фрейм из Figma с помощью сопутствующего плагина, который переносит структуру, стили и изображения прямо в ваше рабочее пространство; AI MarkupGen строит HTML и CSS на основе этой реальной структуры, преобразуя направление, gap, отступы и выравнивание Auto Layout в эквивалентную структуру Flexbox; вы уточняете контент, шрифты и раскладку визуально во встроенном редакторе; затем экспортируете итоговый пакет. Адаптивные брейкпоинты генерируются на основе ограничений изменения размера дизайна, а формат вывода можно выбрать — обычный HTML/CSS, Tailwind CSS или React-компоненты — в зависимости от вашего стека. Как и с любым автоматическим преобразованием, стоит проверить поведение при изменении размера у элементов hug/fill/fixed и выведенные брейкпоинты — это хорошая отправная точка, а не замена сверке результата с дизайном. Если вы предпочитаете начать с рабочего примера, а не с пустого файла, попробуйте конвертер Figma в HTML от MarkupGen на своём дизайне или прочитайте полное руководство по конвертации Figma в HTML с описанием всего процесса от начала до конца.

Часто задаваемые вопросы

Как Auto Layout в Figma преобразуется в CSS? Направление, gap, отступы и выравнивание напрямую переносятся в flex-direction, gap, padding и justify-content/align-items. Поведение при изменении размера — hug, fill и fixed — тоже переносится в CSS, но точное объявление зависит от окружающего контекста компоновки, а не является жёстким соответствием один к одному.

Auto Layout в Figma — это то же самое, что CSS Flexbox? Они тесно связаны, но не идентичны. Auto Layout был намеренно смоделирован по концепциям Flexbox, поэтому большинство свойств переносятся напрямую. Основное отличие в том, что Figma выражает размер как замысел дизайна (hug, fill, fixed), а CSS требует выбрать конкретное объявление, которое реализует этот замысел в данном контексте.

Что означает «hug contents» в CSS? Это значит, что элемент подстраивает размер под своё содержимое, а не имеет фиксированный или растянутый размер. В вебе это часто поведение по умолчанию для блочных элементов и flex-элементов без явной ширины, либо его можно сделать явным с помощью width: fit-content / height: fit-content, где это нужно.

Что означает «fill container» в CSS? Это значит, что элемент расширяется, чтобы занять пространство, доступное в его родителе. В зависимости от контекста это flex: 1 по главной оси flex-контейнера, align-self: stretch по поперечной оси, или width: 100% внутри блочного родителя — единого объявления, применимого всегда, не существует.

Создаёт ли Auto Layout в Figma отзывчивый CSS автоматически? Нет. Поведение Auto Layout при изменении размера и constraints в Figma дают полезные подсказки о том, как элементы должны адаптироваться, но брейкпоинты для раскладок, меняющих форму при разной ширине, всё равно нужно писать как CSS media queries.

Что использовать для дизайна из Figma — CSS Grid или Flexbox? Это зависит от раскладки, а не от того, что «лучше». Flexbox подходит для одномерных композиций — строк, колонок, навигации, групп кнопок. Grid подходит для по-настоящему двумерных раскладок, таких как дашборды или сетки карточек, где элементы должны выравниваться одновременно по строкам и колонкам.