Плагин для Figma
HTML to Figma: конвертация HTML в редактируемые слои, а не в скриншот
HTML to Frames превращает любую веб-страницу в настоящие фреймы, текст, векторы и изображения Figma с Auto Layout, который проверяется, прежде чем будет сохранён.
- Пять источников: ссылка, несколько ссылок, локальные файлы, вкладка Chrome, AI-инструменты
- Auto Layout проверяется для каждого дочернего слоя, поэтому дизайн никогда не ломается
- Бесплатный тариф: 10 импортов в месяц
Скоро в Figma Community
Перенести HTML в Figma кажется простой задачей — пока не откроешь результат: плоская картинка, которую нельзя редактировать, или груда абсолютно спозиционированных блоков, которые разваливаются, стоит только изменить размер фрейма. HTML to Frames, плагин для Figma от EUREKA!, идёт другим путём. Он отрисовывает страницу в настоящем браузере, измеряет каждый элемент и пересобирает её на вашем холсте как нативные слои Figma: фреймы, редактируемый текст со смешанными стилями, SVG, преобразованные в векторы, и изображения с исходным масштабированием и тайлингом.
Сначала плагин строит страницу с точностью до пикселя на абсолютных позициях. Затем он обходит фреймы изнутри наружу и по геометрии браузера определяет стеки, переносящиеся ряды, отступы между элементами (gap), внутренние отступы (padding) и выравнивание. Каждый план Auto Layout применяется, и положение каждого дочернего слоя проверяется с допуском 2 px. Если план не выдерживает проверку, пробуется более простой; если не подходит ничего, фрейм сохраняет абсолютные позиции с разумными constraints (ограничениями). В итоге вы получаете файл, который ведёт себя так, будто его собрал дизайнер, а не обвёл трассировщик.
HTML можно взять откуда угодно: публичный URL, до 10 ссылок за один раз, локальный HTML-файл, папка сайта или .zip, вставленный код, вкладка в вашем Chrome или AI-инструмент, подключённый по MCP. В обзоре возможностей перечислено всё, что конвертируется, — от градиентов и теней до псевдоэлементов ::before и shadow DOM.
Если вы делаете это впервые, пошаговое руководство Как конвертировать HTML в Figma проведёт вас через первый импорт. Если вы в основном работаете с живыми сайтами, смотрите URL to Figma; для страниц за логином или на localhost подойдёт расширение для Chrome. Тарифы начинаются с $0 и 10 импортов в месяц, а на странице цен описано, что добавляет Pro.
Как конвертировать HTML в Figma за четыре шага
- 01
Откройте плагин и выберите источник
Выберите Link, Multiple, Local file, Browser или AI — в зависимости от того, где находится ваш HTML.
- 02
Выберите экраны и параметры
Отметьте Desktop, Laptop, Tablet или Mobile и включите нужные параметры, например Auto Layout, Images или скрытие cookie-баннеров и всплывающих окон.
- 03
Подберите недостающие шрифты
Перед сборкой экран Missing fonts (недостающие шрифты) предлагает замены и запоминает ваш выбор для каждого сайта.
- 04
Проверьте результат
Экран результатов показывает фреймы, слои, долю Auto Layout и предупреждения, включая причины, по которым фрейм остался с абсолютными позициями.
Почему результат можно редактировать
Нативные слои, а не пиксели
Фреймы, текст, векторы и изображения можно выделять, переименовывать и перестилизовывать, как всё, что нарисовано вручную.
Проверенный Auto Layout
Стеки, gap, padding и выравнивание определяются по измеренной геометрии и проверяются с допуском 2 px, прежде чем сохраниться.
Настоящая типографика
Смешанные стили, ссылки, межбуквенный интервал, межстрочный интервал и text-transform переносятся как редактируемый текст.
Градиенты, тени, размытие
Сохраняются линейные, радиальные и конические градиенты, внутренние и внешние тени, режимы наложения, blur и backdrop-blur.
Адаптивные экраны
Захватывайте Desktop, Laptop 1280, Tablet 768 и Mobile 390 или полный адаптивный набор в один клик на Pro.
Пять способов импорта
Импорт по ссылке, до 10 ссылок сразу, из локальных файлов, вкладки Chrome или AI-инструмента по MCP.
Редактируемые слои или скриншот
Многие инструменты, обещающие конвертацию HTML в Figma, вставляют картинку страницы. Для мудборда этого хватает, но не более: нельзя поменять заголовок, заменить цвет или передвинуть карточку. HTML to Frames вместо этого воссоздаёт структуру.
| Импорт скриншота | HTML to Frames | |
|---|---|---|
| Текст | Пиксели | Редактируемый текст со смешанными стилями |
| Иконки и логотипы | Пиксели | SVG, преобразованные в редактируемые векторы |
| Макет | Плоское изображение | Вложенные фреймы с проверенным Auto Layout |
| Цвета | Подбираются на глаз | Точные значения, опционально — переменные цвета (Pro) |
| Изменение размера | Растягивает картинку | Реагируют Auto Layout и constraints |
Есть одно честное исключение. Контент, который не может существовать в виде слоёв, — например, встроенная карта в iframe, видео без постера или WebGL-сцена, — приходит как скриншот именно этого блока. Остальная страница вокруг остаётся редактируемой, так что hero-блок с фоновым видео всё равно даёт вам редактируемые заголовки, кнопки и навигацию.
Если пиксельный эталон всё же нужен, в Pro есть опция Reference screenshot: скрытый заблокированный слой под импортом, чтобы в любой момент сравнить пересборку с оригиналом. Подробнее о разнице читайте в статье HTML to canvas или редактируемые слои.
Пять источников, один результат
Любой источник даёт одинаковый результат, поэтому выбирайте тот, что подходит под вашу ситуацию.
Link и Multiple
Вставьте публичный URL или до 10 ссылок, которые обрабатываются по очереди. Каждая страница ложится на холст отдельной строкой. Multiple-импорт доступен на всех тарифах, включая Free.
Local file
Перетащите один HTML-файл, целую папку сайта (и выберите нужные страницы), .zip или вставьте HTML и CSS напрямую. Размер загрузки — до 30 МБ, файлы удаляются сразу после завершения импорта.
Browser
Бесплатное расширение для Chrome захватывает то, что видит ваш браузер: дашборды за логином, localhost, частные сети и текущее состояние страницы — например, открытое меню или заполненную форму. Смотрите расширение Chrome для Figma.
AI-инструменты
Подключите Claude Code, Claude Desktop, Cursor или другой MCP-клиент на вкладке AI в плагине — и сгенерированные страницы будут попадать в открытый плагин. Подробности — на странице AI to Figma.
Какой бы источник вы ни выбрали, импорт считается как одна страница со всеми её экранами, то есть захват Desktop, Tablet и Mobile одной страницы — это один импорт. Каждый фрейм хранит URL источника, поэтому, когда живая страница меняется, её можно переимпортировать одним кликом.
Что умеет конвертер
Современный CSS — именно то место, где большинство инструментов HTML to Figma теряют точность. HTML to Frames считывает вычисленный браузером результат, поэтому поддерживает широкий набор свойств:
- Раскладку из flexbox и grid, переведённую в Auto Layout там, где она выдерживает проверку (см. CSS flexbox и grid в Auto Layout)
- Обводки, включая одну сторону другого цвета, и радиус скругления углов
- Изображения с
object-fit,background-size, тайлингом иsrcsetвысокого разрешения clip-path,mask-image,::beforeи::after, CSS-счётчики и маркеры списков, отрисованные как в Chrome- CSS-поворот и масштаб, прозрачность,
filter: grayscale/opacity - Поля форм, верхние и нижние индексы, shadow DOM и порядок z-index
Кое-что пока не поддерживается: skew и 3D-трансформации, clip-path через path(), многослойные маски и цвета Display-P3. Мы открыто перечисляем эти ограничения, чтобы вы знали, чего ожидать до импорта. Полный список — на странице возможностей, а ответы на вопросы о настройке — в документации.
Если что-то нельзя передать в точности, экран результатов об этом сообщит. Он показывает недостающие шрифты, предупреждения, долю фреймов, получивших Auto Layout, и для каждого фрейма с абсолютными позициями — причину. Вам никогда не придётся гадать, какие части конвертации стоит перепроверить.
Частые вопросы
Нет. HTML to Frames воссоздаёт страницу как нативные слои Figma: фреймы, редактируемый текст, векторы из SVG и изображения. Только блоки, которые не могут быть слоями, — например, iframe с картами, видео без постера или WebGL-canvas, — приходят скриншотом этого блока, а всё вокруг остаётся редактируемым.
Из пяти: публичная ссылка, до 10 ссылок в одном Multiple-импорте, локальные файлы (один HTML-файл, папка сайта, .zip или вставленный код), вкладка Chrome через бесплатное расширение и AI-инструменты — Claude Code, Claude Desktop или Cursor, подключённые по MCP.
Да. Построив страницу с точностью до пикселя, плагин определяет стеки, gap, padding и выравнивание, применяет их и проверяет каждый дочерний слой с допуском 2 px. Если план не подходит, пробуется более простой; иначе фрейм сохраняет абсолютные позиции с constraints, так что дизайн не ломается.
Да. Тариф Free включает 10 импортов в месяц с одним экраном на импорт, а Multiple-импорт до 10 ссылок тоже входит. Pro добавляет до четырёх экранов на импорт, стили и переменные, компоненты, Light + Dark и многое другое по стартовой цене $7 в месяц.
Страницы отрисовываются в изолированном браузере-песочнице. Результат передаётся один раз и затем удаляется из памяти; он никогда не записывается на диск, а запись о задании забывается через 15 минут. Загруженные файлы удаляются сразу после завершения импорта.
Перед сборкой плагин показывает экран Missing fonts с предложенными заменами. Ваш выбор запоминается для каждого сайта — или для всех сайтов, если хотите, — поэтому при повторных импортах того же сайта вопрос не возникнет. Подбор шрифтов доступен на всех тарифах, включая Free.
Хватит перерисовывать веб вручную.
Вставьте ссылку и за секунды получите настоящие редактируемые адаптивные слои Figma. Начать можно бесплатно — 10 импортов каждый месяц.
Без банковской карты. Pro покупается прямо в Figma.
Скоро в Figma Community