HTML to Frame: как DOM превращается в Auto Layout в Figma

Превратить веб-страницу в картинку легко. Сложно превратить её во фреймы Figma, которые ведут себя так, будто их собрал дизайнер. Фрейм, который выглядит правильно, но разваливается при первой правке заголовка, ненамного лучше скриншота.

В этой статье пошагово разобрано, как HTML to Frames превращает DOM во вложенные фреймы Figma, как его движок Auto Layout решает, что станет стеком, и почему он проверяет собственную работу, прежде чем её сохранить.

От DOM к дереву фреймов

Веб-страница — это дерево: body содержит секции, секции — контейнеры, контейнеры — карточки, карточки — заголовки и кнопки. Файл Figma — тоже дерево: фреймы содержат фреймы, текст и векторы.

Основная идея конвертации HTML to frame (HTML во фреймы) — отобразить одно дерево на другое:

• Каждая страница и каждый экран становятся фреймом верхнего уровня. Импорт Desktop, Tablet и Mobile одной страницы даёт три фрейма рядом.
• Элементы-«коробки» становятся вложенными фреймами. Их фоны, обводки, скругления, тени и обрезка становятся свойствами фрейма.
• Текст становится текстовыми слоями с сохранением смешанных стилей, так что предложение с жирной ссылкой остаётся одним текстовым слоем.
• SVG становится редактируемыми векторами, а изображения — заливками изображением.
• Псевдоэлементы (::before, ::after), содержимое shadow DOM и порядок z-index переносятся, поэтому наложение совпадает с тем, что нарисовал браузер.

Цель — панель слоёв, которую дизайнер может читать, а не свалка всех узлов DOM. Если для изучения нужна более подробная структура слоёв, для этого есть опция Detailed layers (Pro).

Имена фреймов

Фреймы верхнего уровня называются так, чтобы их легко было найти в большом файле:

example.com/pricing — Desktop (1920)

Имя содержит домен и путь (плюс query, если есть), без протокола и без www, затем экран и его ширину; длина ограничена 60 символами. Исходный URL также хранится во фрейме — благодаря этому возможен Re-import в один клик.

Шаг 1: сначала сборка с точностью до пикселя

Движок не начинает с угадывания Auto Layout. Он начинает с версии, которая гарантированно выглядит правильно:

1. Страница рендерится в настоящем браузере в выбранной ширине. Для Desktop это Site width — ширина, которую плагин измеряет по реальному дизайну страницы (1920 для full-bleed, ширина контейнера для сайтов с контейнером, 1440 для резиновых сайтов).
2. Измеряются геометрия и вычисленные стили каждого элемента.
3. Дерево фреймов строится с абсолютными позициями, так что каждый слой стоит ровно там, где его поставил браузер.

Эта абсолютная версия — страховочная сетка. Всё, что идёт дальше, — улучшения, которые должны доказать свою состоятельность.

Шаг 2: вывод Auto Layout изнутри наружу

Далее движок обходит фреймы от самых внутренних к внешним. Для каждого фрейма он смотрит на измеренную геометрию дочерних элементов и спрашивает: можно ли описать их как стек Auto Layout?

Он выводит:

• Направление — расположены ли дочерние элементы вертикальным или горизонтальным стеком?
• Перенос — образуют ли они переносящиеся ряды, как CSS-сетка карточек или flex-wrap?
• Gap — достаточно ли постоянны расстояния между элементами, чтобы стать одним значением gap?
• Padding — на каком расстоянии от краёв фрейма находятся элементы с каждой стороны?
• Выравнивание — выровнены ли они по началу, центру или концу на каждой оси?

Порядок изнутри наружу важен: когда содержимое карточки стало чистым вертикальным стеком, саму карточку можно считать одним элементом в окружающем ряду карточек.

Принципиально, что вывод опирается на то, что браузер реально отрисовал, а не на разбор CSS. Построен ли ряд на flexbox, grid, float или inline-block — измеренный результат одинаков, и движок работает именно с ним.

Шаг 3: добавление адаптивного смысла

Стек с правильными gap и padding — это начало, но он ещё не ведёт себя как адаптивный дизайн. Движок выводит и намерение:

• Центрированный контент → Center. Если контент стоит по центру родителя, он выравнивается по Center и остаётся по центру при ресайзе фрейма.
• Блоки с max-width остаются по центру. Контейнер с максимальной шириной внутри секции на всю ширину сохраняет ширину и остаётся посередине.
• Одинаковые карточки и flex-grow → Fill. Карточки, поровну делящие ряд, и элементы, растягивающиеся на свободное место, получают Fill container.
• Логотип … меню … иконки → промежуточный элемент становится Fill. В типичной шапке растягивается пространство между группами. Движок делает этот промежуточный элемент Fill, так что при расширении шапки логотип остаётся слева, а иконки — справа.

В этом разница между фреймом, который совпадает со страницей в одной ширине, и фреймом, который действительно можно ресайзить.

Шаг 4: проверка каждого дочернего элемента (допуск 2 px)

Вот часть, которая сохраняет дизайн целым. Применив к фрейму план Auto Layout, движок проверяет позицию каждого дочернего элемента относительно исходной раскладки с точностью до пикселя. Каждый должен оказаться в пределах 2 px от места, где его поставил браузер.

• Если все элементы на месте, план сохраняется.
• Если нет, пробуется более простой план — например, одиночный стек без более смелых настроек выравнивания или Fill.
• Если не проходит ни один план, фрейм сохраняет абсолютные позиции.

Правило простое: дизайн никогда не ломается. На сложной секции фреймов с Auto Layout может оказаться меньше, но раскладка, которая молча съезжает, не появится.

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

Шаг 5: constraints для фреймов, оставшихся абсолютными

Фреймы с абсолютными позициями не остаются без внимания. Движок назначает им разумные constraints:

• Stretch — для элементов, занимающих всего родителя, например фонового слоя на всю ширину.
• Scale — для элементов, которые должны масштабироваться пропорционально.
• Center — для элементов по центру родителя.
• Min — прижаты к левому или верхнему краю.
• Max — прижаты к правому или нижнему краю.

Так что даже абсолютный фрейм ведёт себя разумно при ресайзе родителя.

Шаг 6: диагностика — почему фрейм остался абсолютным

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

Эта диагностика полезна двояко:

• Дизайнерам — понятно, какие секции переделать вручную, если они нужны полностью адаптивными.
• Разработчикам — это часто подсказка, что код раскладки сложнее, чем нужно.

CSS flexbox и grid в Auto Layout: таблица соответствий

Поскольку движок работает от измеренной геометрии, таблица ниже описывает типичный результат, а не буквальный перевод CSS-свойств. Подробнее — в статье CSS flexbox и grid в Auto Layout Figma.

Разбор примера: секция цен с тремя карточками

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

Вот как движок обычно подойдёт к ней:

1. Сборка с точностью до пикселя. Каждый элемент ставится в измеренную позицию. Секция уже выглядит правильно.
2. Сначала самые внутренние фреймы. Каждый список функций становится вертикальным стеком с постоянным gap. Каждая карточка — вертикальным стеком (название, цена, список, кнопка) с padding, взятым из расстояния до краёв карточки.
3. Ряд карточек. Три карточки стоят рядом с равной шириной и равными промежутками, так что ряд становится горизонтальным стеком с одним gap, а каждая карточка получает Fill, чтобы поровну делить ширину.
4. Блок заголовка. Заголовок и подзаголовок отцентрированы, поэтому становятся вертикальным стеком с выравниванием Center.
5. Проверка. Каждый дочерний элемент каждого фрейма сверяется с исходной позицией. Если, скажем, бейдж «Most popular» перекрывает верхний край средней карточки, план этой карточки может не пройти проверку 2 px. Движок пробует более простой план, и если не проходит и он, карточка сохраняет абсолютные позиции с constraints — а экран результатов сообщит, какой это был фрейм.

В итоге получается секция, которую можно ресайзить: расширьте фрейм — и карточки растут вместе; отредактируйте список функций — и карточка растёт вместе с ним. С Components & hover states (Pro) три карточки могут прийти ещё и как инстансы одного компонента, поскольку у них общая структура.

Что это значит на практике

Открыв импортированную страницу, вы можете:

• Отредактировать заголовок — секция вырастет и сдвинет контент ниже.
• Изменить одно значение gap, чтобы уплотнить сетку карточек.
• Ресайзить фрейм и смотреть, как Fill-элементы растягиваются, а центрированный контент остаётся на месте.
• Заменить карточку инстансом компонента — а с Components & hover states (Pro) повторяющиеся карточки могут уже быть компонентами.

Именно это отличает дерево фреймов от плоского изображения. Подробнее об этом контрасте — в сравнении HTML to canvas.

Советы для лучшего результата Auto Layout

1. Импортируйте в правильной ширине. Пусть Desktop использует Site width, а Tablet и Mobile добавьте через Responsive set, чтобы проверить каждый брейкпоинт.
2. Скрывайте оверлеи. Включите скрытие cookie-баннеров и попапов, чтобы фиксированные окна не перекрывали секции и не вынуждали абсолютное позиционирование.
3. Захватывайте стабильные состояния. Анимации замораживаются при захвате, а для контента, который подгружается поздно, поможет Extra wait (Pro).
4. Смотрите диагностику, прежде чем переделывать что-то вручную. Она точно укажет, на какие фреймы взглянуть.
5. Используйте Reference screenshot (Pro), когда нужно убедиться, что слои совпадают с живой страницей.

Подробнее

• Полный процесс импорта: Как конвертировать HTML в Figma
• Все возможности конвертации: возможности
• Каждая опция с объяснением: документация
• Тарифы и лимиты: цены

Установите плагин и импортируйте страницу, которую хорошо знаете. Быстрее всего понять движок — ресайзить результат и смотреть, что держится.