Плагин Figma для HTML, который собирает по-настоящему редактируемые слои

HTML to Frames — один продукт с тремя точками входа, и все они приводят к одному и тому же редактируемому результату внутри плагина.

Только плагин Figma

Лучший вариант для всего, что доступно по публичному адресу. Вставьте одну ссылку или до 10 ссылок через Multiple — сервис захвата отрисует каждую страницу в изолированном браузере так, как её видит обычный посетитель, а cookie-баннеры и всплывающие окна по запросу скроет. Локальные HTML-файлы, папки сайтов и архивы .zip до 30 MB проходят тем же путём и удаляются сразу после импорта.

Плагин + расширение для Chrome

Подходит для страниц, до которых сервис не дотянется: дашбордов за логином, localhost, стейджинга в приватной сети или страницы в определённом состоянии — с открытым меню или заполненной формой. Бесплатное расширение для Chrome снимает то, что показывает ваш браузер, и отправляет это прямо в открытый плагин кнопкой Send to Figma.

Плагин + ИИ-инструменты

Подходит, когда HTML ещё не существует. Подключите Claude Code, Claude Desktop, Cursor или любой MCP-клиент на вкладке AI в плагине и попросите спроектировать страницу: результат попадёт в ваш плагин и будет импортирован по вашему плану. Настройка описана на странице ИИ в Figma.

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

1. Можно ли редактировать текст? Кликните по заголовку и начните печатать. Если он — часть изображения, импорт годится как референс, но не как макет.
2. Переживает ли Auto Layout изменение размера? Растяните фрейм шире. Ряды должны тянуться, контент по центру — оставаться по центру, и ничего не должно наезжать друг на друга.
3. Правильная ли ширина? Сайт, спроектированный под 1200 px, не должен приходить зажатым в 1440 px. HTML to Frames измеряет реальную ширину макета и называет её Site width.
4. Можно ли переиспользовать стили? Ищите цветовые переменные и текстовые стили вместо сотен «сырых» HEX-значений и проверьте, подхватывается ли существующая дизайн-система.
5. Куда уходят ваши данные? Прочитайте политику конфиденциальности. Наш сервис захвата передаёт каждый результат один раз, ничего не хранит на диске и удаляет загруженные файлы сразу после импорта; подробности — на странице о безопасности.

Если инструмент проходит все пять проверок, он сэкономит время на реальных проектах, а не только в демо.

Бесплатный план включает 10 импортов в месяц, один экран за импорт, пакетный импорт до 10 ссылок, Auto Layout и замену шрифтов. Pro стоит $7 в месяц на старте (обычная цена — $9) и добавляет безлимитные импорты в рамках добросовестного использования — до 1 000 в месяц, до четырёх экранов за импорт, произвольную ширину, стили и переменные, привязку к стилям файла (Snap), компоненты и hover-состояния, Light + Dark, детальные слои, эталонный скриншот и дополнительное ожидание. Team — это 5 мест за $22 в месяц на старте с общим лицензионным ключом.

Один импорт — это одна страница со всеми её экранами, поэтому Desktop, Tablet и Mobile одной страницы считаются один раз. Снимок через расширение для Chrome тоже считается одним импортом. Счётчики обнуляются каждый месяц по UTC. Все подробности — на странице с ценами.