HTML to canvas: страница на холсте Figma в виде редактируемых слоёв

Подходы на основе скриншотов и HTML to Frames начинают с одной и той же отрисованной страницы, но приходят к совершенно разным результатам.

Кроме того, html2canvas заново реализует CSS-рендеринг на JavaScript, поэтому может пропускать возможности, которые поддерживает браузер. HTML to Frames считывает значения из настоящего браузера на базе Chromium уже после отрисовки и сопоставляет их со свойствами Figma: градиенты, включая конические и повторяющиеся, тени, режимы наложения, blur и backdrop-blur, clip-path, mask-image и многое другое.

У скриншотов по-прежнему есть своя ниша. Если нужна быстрая визуальная фиксация, растра достаточно. Если вы собираетесь что-то менять, слои избавят вас от перерисовки страницы.

Полезное практическое правило: если следующий шаг — комментарий или тикет, хватит скриншота. Если следующий шаг — открыть Figma и что-то изменить, импортируйте слои.

Часть контента на странице — уже пиксели. Элемент <canvas> рисуется с помощью JavaScript, а WebGL-сцена рендерит 3D-графику на GPU. Внутри этих блоков нет DOM, который можно прочитать, поэтому ни один инструмент не превратит их в осмысленные векторные слои.

HTML to Frames обрабатывает их явно, а не молча проваливается:

• Блок захватывается как скриншот в точной позиции и размере.
• WebGL-сцены фиксируются через несколько кадров, поэтому вы получаете стабильное изображение, а не пустой кадр или кадр посреди перехода.
• Всё вокруг блока — заголовки, кнопки и оверлеи, расположенные поверх него, — остаётся редактируемыми слоями.

То же правило действует для другого встроенного контента, который не может быть слоями: iframe (например, карты), видео без постера и элементы object или embed. Каждый из них становится изображением собственного блока, а экран результатов показывает предупреждения.

На практике это значит, что лендинг с 3D-hero всё равно превращается в рабочий дизайн. Можно заменить изображение hero на новый визуал, переписать текст над ним и поправить отступы, а остальная страница сохранит свой Auto Layout. Как определяется эта раскладка, читайте в статье Auto Layout: как это работает.

Современные страницы двигаются: карусели прокручиваются, элементы проявляются при скролле, cookie-баннеры выезжают снизу, а hero-секции анимируются при загрузке. Наивный захват фиксирует то, что происходило в ту самую миллисекунду.

HTML to Frames захватывает страницу так, как её видит обычный посетитель, и даёт несколько настроек, чтобы результат был предсказуемым:

Замороженные анимации

Анимации замораживаются, поэтому захват показывает каждый элемент в устоявшемся состоянии, а не на середине перехода.

Скрытие cookie-баннеров и всплывающих окон

Включите эту опцию, и баннеры согласия и всплывающие окна скрываются перед захватом, чтобы не закрывать страницу на вашем холсте.

Extra wait

Медленным страницам, которые подгружают контент с задержкой, можно дать больше времени перед захватом. Extra wait (дополнительное ожидание) — опция Pro.

Full page

Захватывайте всю прокручиваемую страницу или только первый экран — в зависимости от задачи.

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

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