Опубликовано 2026-08-20 · Автор Команда MarkupGen
Figma Auto Layout в React: от фреймов к компонентам
Краткий ответ: свойства Auto Layout в Figma (направление, зазор, отступы, выравнивание) сопоставляются с тем же CSS Flexbox в React, что и везде. Отличается всё, что React добавляет сверху: решение, какие фреймы Auto Layout становятся отдельными компонентами, сопоставление вариантов компонентов Figma с пропсами и обработка дочерних элементов, которые повторяются или меняются условно.
Сопоставление с CSS не меняется — меняются границы компонентов
Если вы уже знаете, как Auto Layout сопоставляется с Flexbox, стилевая половина этой темы вам знакома: направление становится flex-direction, зазор становится gap, отступы становятся padding, выравнивание становится justify-content/align-items. React ничего из этого не меняет.
Что React добавляет — это структура над слоем CSS: решения, которые не приходится принимать при плоском экспорте HTML/CSS:
| Концепция Figma | Эквивалент в React |
|---|---|
| Переиспользуемый фрейм Auto Layout, используемый в нескольких местах | Собственный компонент, а не повторяющаяся разметка |
| Варианты компонентов Figma (например, размер/состояние кнопки) | Пропсы компонента (size, variant, disabled) |
| Фрейм с повторяющимися дочерними инстансами (список, сетка) | .map() по массиву пропсов/контента |
| Ресайз «Hug contents» против «Fill container» | Макет обрабатывается флекс-правилами родителя, а не фиксированной шириной в пикселях внутри компонента |
| Вложенные фреймы Auto Layout | Вложенные компоненты только там, где переиспользование или логическое разделение это оправдывает — не по одному компоненту на фрейм |
Где ручной перевод обычно идёт не так
- Чрезмерная компонентизация. Превращение каждого вложенного фрейма Auto Layout в отдельный файл компонента создаёт глубокое дерево однострочных компонентов-обёрток, добавляющих косвенность без добавления переиспользования. Фрейм заслуживает собственного компонента, только если он переиспользуется в другом месте или если его выделение делает код заметно легче для чтения.
- Потеря сопоставления вариантов. Варианты компонентов Figma (например, состояния кнопки по умолчанию/при наведении/отключено) должны становиться пропсами, а не четырьмя отдельными захардкоженными компонентами. Пропуск этого шага превращает одну переиспользуемую кнопку в скопированную вручную разметку для каждого состояния.
- Хардкодинг того, что должно быть динамичным. Фрейм, повторяющийся трижды в дизайне из-за трёх примеров элементов, не должен становиться тремя копиями одного и того же JSX — он должен стать одним компонентом, отрисованным из массива.
- Фиксированная ширина в пикселях там, где дизайн подразумевал гибкий ресайз. Поведение «fill container» в Auto Layout должно переводиться в flex-grow или размеры на основе процентов в CSS компонента, а не в фиксированную
width, которая ломает адаптивное намерение исходного фрейма.
Как это решает MarkupGen
Вывод React в MarkupGen следует тому же четырёхшаговому процессу, что и другие форматы: экспорт фрейма с помощью плагина, который захватывает структуру, стили, изображения и связи компонентов вместе; AI строит код на основе этой реальной структуры; при необходимости вы дорабатываете контент, шрифты или макет во встроенном редакторе; экспортируете финальный пакет. Направление, зазор, отступы и выравнивание Auto Layout сопоставляются с правилами Flexbox внутри каждого компонента точно так же, как и при обычном экспорте в CSS, а ограничения ресайза переносятся как адаптивное поведение, а не фиксированные размеры. Каждый экспорт получает автоматическую AI-оценку качества, сравнивающую живой превью с исходным дизайном, так что вы можете сразу понять, нужен ли данному экспорту повторный взгляд перед публикацией.
Полный пошаговый разбор перехода от файла Figma к рабочим React-компонентам — включая выбор формата вывода — смотрите в статье Figma в React: практический рабочий процесс.
Попробуйте на своём дизайне
Увидеть, как структура Auto Layout реального дизайна превращается в компоненты React, — самый быстрый способ оценить, совпадает ли компонентизация с тем, как бы вы собрали её вручную. Попробуйте MarkupGen бесплатно на своём файле Figma или посмотрите страницу конвертера Figma в React, чтобы узнать, что входит в комплект.