HTML to canvas: скриншот-битмап или редактируемые слои Figma

«HTML to canvas» — одна из тех фраз, что означают разное в зависимости от того, кто ищет. Фронтенд-разработчик обычно имеет в виду отрисовку DOM-элемента в HTML-элемент <canvas> — работу библиотек вроде html2canvas. Дизайнер обычно имеет в виду перенос веб-страницы на холст Figma, чтобы с ней работать.

Оба варианта начинаются с HTML. Оба заканчиваются на чём-то, что называется canvas. Но результаты принципиально разные: в одном случае это плоская сетка пикселей, в другом — дерево редактируемых слоёв. Неверный выбор стоит времени, поэтому стоит говорить точно.

Значение 1: HTML в HTML-элемент <canvas> (битмапы)

Как это работает

HTML-элемент <canvas> — это поверхность для рисования: прямоугольник пикселей, на котором может рисовать JavaScript. Библиотеки вроде html2canvas обходят DOM, читают вычисленные стили и перерисовывают страницу на canvas через Canvas 2D API. На выходе — битмап, который можно экспортировать в PNG или JPEG.

Похожие подходы дают такой же результат:

• Скриншоты в браузере — встроенная функция скриншотов, «Capture node screenshot» в DevTools или скриншоты headless-браузера.
• Трюки с SVG foreignObject — HTML встраивается в SVG, SVG рисуется в canvas, экспортируются пиксели.
• Серверные сервисы скриншотов — headless-браузер отрисовывает страницу и возвращает изображение.

Когда битмап — правильный ответ

Битмапы действительно полезны, когда само изображение и есть результат:

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

Во всех этих случаях результат никому не нужно редактировать. На него нужно смотреть.

Ограничения битмапов

Как только вы хотите работать со снятой страницей, пиксели начинают мешать:

• Нельзя редактировать. Нельзя поменять заголовок, подправить отступ или заменить цвет. Можно только закрасить сверху.
• Нет текста. Текст — это пиксели. Его нельзя выделить, найти, узнать размер шрифта или скопировать в спецификацию.
• Размытость при масштабировании. У битмапа фиксированное разрешение. Увеличьте масштаб или поставьте снимок 1x на экран высокой плотности — и края поплывут.
• Нет структуры. Нет фреймов, нет иерархии, нет значений отступов для инспекции. Кнопка и фон под ней — один и тот же слой.
• Нет адаптивности. Скриншот в 1440 навсегда останется 1440. Для каждой ширины нужен отдельный снимок, и ни один из них нельзя осмысленно ресайзить.
• Нет дизайн-системы. Цвета и типографику нельзя превратить в переменные или стили, а повторяющиеся элементы — в компоненты.
• Пробелы в точности (у перерисовывающих библиотек). Библиотеки, которые перерисовывают DOM на canvas, заново реализуют CSS на JavaScript, поэтому новые или редкие CSS-свойства могут выглядеть иначе, чем в настоящем браузере.

Значение 2: HTML на холст Figma (редактируемые слои)

Как это работает

В Figma «холст» (canvas) — это бесконечное рабочее пространство, где живут ваши фреймы. Перенести HTML на холст Figma значит конвертировать отрисованную страницу в нативные объекты Figma: фреймы, текстовые слои, векторы и заливки изображениями.

Именно это делает HTML to Frames. Страница отрисовывается в настоящем браузере, её геометрия и вычисленные стили измеряются, и плагин пересобирает её в Figma в виде:

• вложенных фреймов, повторяющих структуру страницы, с Auto Layout там, где его можно проверить,
• настоящих текстовых слоёв со смешанными стилями, letter-spacing, line-height и ссылками,
• SVG в виде редактируемых векторов,
• изображений в виде заливок, с учётом object-fit и background-size,
• обводок, скруглений, теней, градиентов, размытия и режимов наложения в виде нативных свойств.

Результат можно редактировать, перекрашивать, ресайзить и превращать в компоненты — это не картинка страницы, а рабочий макет. Весь процесс импорта описан в руководстве HTML to Figma.

Когда редактируемые слои — правильный ответ

• Редизайн, который начинается с существующего сайта.
• Аудит отступов, типографики и цвета.
• Извлечение дизайн-системы — цветовые переменные, текстовые стили и стили теней (Pro).
• Передача в разработку и ревью страниц, собранных в коде, включая localhost через расширение для Chrome.
• Доработка сгенерированного ИИ интерфейса, импортированного через MCP, — см. AI to Figma.
• Адаптивная работа — Desktop, Tablet и Mobile за один импорт.

Сравнение бок о бок

Коротко: html2canvas даёт пиксели; HTML to Frames даёт слои на холсте Figma.

Почему важна отрисовка в настоящем браузере

Оба подхода зависят от того, насколько точно страница отрисована изначально. Перерисовывающие библиотеки вроде html2canvas работают внутри страницы и заново реализуют CSS-вёрстку и отрисовку на JavaScript. Для распространённых стилей это работает хорошо, но всё, что библиотека не реализовала или реализовала чуть иначе, проявляется на изображении как несовпадение.

HTML to Frames идёт другим путём. Публичные страницы, локальные файлы и вставленный код отрисовываются в изолированном браузере в песочнице, а страницы, снятые расширением для Chrome, берутся из вашего собственного браузера. В обоих случаях плагин считывает геометрию и вычисленные стили, которые реально получил браузер, и пересобирает их в объекты Figma. Поэтому детали, в которых легко ошибиться, переносятся правильно:

• Маркеры списков, нарисованные как в Chrome, CSS-счётчики, верхние и нижние индексы.
• Градиенты — линейные, радиальные и конические, включая точки в px и повторяющиеся или плиточные градиенты.
• Изображения высокого разрешения из srcset с учётом object-fit, background-size и тайлинга.
• Одна сторона обводки другого цвета, внутренние и внешние тени, text-shadow.

Страница также снимается так, как её видит обычный посетитель: cookie-баннеры и всплывающие окна можно скрыть по запросу, а анимации замораживаются, чтобы кадр был чистым, а не пойманным посреди перехода.

А как быть с тем, что действительно является canvas?

Здесь два значения встречаются. Некоторые части веб-страницы по своей природе — пиксели, и никакой конвертер не превратит их в осмысленные векторные слои:

• WebGL- и 3D-сцены, нарисованные в <canvas>,
• 2D-рисунки на canvas — например, некоторые графики или игры,
• iframe, включая встроенные карты,
• видео без постера,
• элементы object и embed.

HTML to Frames решает это прагматично: каждый такой элемент приходит как скриншот только этого блока. Изображение стоит в нужном месте и нужного размера внутри полностью редактируемой страницы. Заголовок первого экрана, навигация и карточки остаются настоящими слоями; битмапом становится только 3D-просмотрщик товара или встроенная карта.

Для анимированного контента захват стремится к чистому стабильному кадру: анимации замораживаются, а WebGL замораживается через несколько кадров, чтобы сцена успела отрисовать что-то осмысленное до захвата.

Обычно именно такой гибрид и нужен дизайнеру. Вы не перерисовываете содержимое встроенной карты — вы проектируете карточку вокруг неё. Скриншот-заглушка для встраиваемого контента плюс редактируемое всё остальное — практичный результат.

Что пока не конвертируется

Для полноты об ограничениях: skew и 3D-трансформации CSS, clip-path через path(), многослойные маски и цвета Display-P3 пока не поддерживаются. CSS-поворот и масштаб, одиночные фигуры clip-path, mask-image, blur и backdrop-blur — поддерживаются. Полный список — на странице возможностей.

Как выбрать подход

Задайте один вопрос: будет ли кто-то редактировать результат?

1. Нет — это для просмотра, шеринга или тестов. Используйте битмап. html2canvas или скриншот браузера проще и быстрее.
2. Да — это для дизайн-работы. Используйте редактируемые слои на холсте Figma.
3. В основном да, но часть — карты, видео или 3D. Используйте редактируемые слои; эти блоки автоматически придут изображениями.

Несколько практических сценариев:

• «Мне нужен PNG этого графика для слайда». Битмап.
• «Мне нужно переделать нашу страницу с ценами». Редактируемые слои — импортируйте и итерируйте.
• «Хочу сравнить продакшен с нашим макетом». Редактируемые слои с опциональным Reference screenshot (Pro) — скрытым заблокированным слоем-изображением, который можно включить для попиксельного сравнения. Хороший пример того, как оба значения работают вместе: битмап для проверки, слои для работы.
• «Мне нужен дашборд за логином в Figma». Редактируемые слои через расширение для Chrome, которое снимает страницы, видимые вашему браузеру, включая их текущее состояние.

Почему «просто сделать скриншот» потом обходится дороже

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

Конвертация в редактируемые слои перекладывает эту работу на инструмент. Вы получаете измеренные размеры, настоящий текст, а с Pro — переменные, текстовые стили и компоненты, сгенерированные из самой страницы. Как это выглядит в рамках полного редизайна, показано в процессе HTML to design.

О конфиденциальности

Какой бы подход вы ни выбрали, подумайте о том, где отрисовывается страница. html2canvas работает внутри страницы в браузере пользователя. HTML to Frames отрисовывает публичные страницы в изолированном браузере в песочнице, передаёт результат один раз и удаляет его из памяти, не записывая на диск; расширение для Chrome работает в вашем собственном браузере и ничего не отправляет, если вы не используете Send to Figma. Подробности — на странице безопасности.

Итоги

• HTML to canvas (битмап) превращает страницу в пиксели. Отлично для шеринга, тестов и превью; не редактируется.
• HTML на холст Figma превращает страницу во фреймы, текст и векторы, с которыми можно работать.
• Контент, который действительно является canvas, — WebGL, карты, iframe, видео без постера — снимается изображением этого блока, а всё остальное остаётся редактируемым.

Чтобы увидеть подход на основе слоёв на своей странице, установите плагин и начните с документации или прочитайте, как движок Auto Layout превращает структуру страницы во фреймы.