Возможности
Полный набор HTML to Figma: как конвертировать HTML в Figma
От одного URL до многостраничного адаптивного файла Figma, учитывающего дизайн-систему. Здесь всё, что умеет HTML to Frames, — и как именно.
Импорт откуда угодно
Пять источников покрывают публичные сайты, файлы на вашем компьютере, страницы, которые видит только ваш браузер, и код, написанный ИИ.
Link
Вставьте любой публичный URL. Страница отрисовывается в изолированном браузере, ленивый контент прокручивается в зону видимости, а cookie-баннеры и всплывающие окна при желании скрываются.
Импорт Multiple
До 10 ссылок за один импорт, обрабатываются по очереди. Каждая страница становится отдельной строкой экранов. Доступно на любом плане — Pro не нужен.
Локальные файлы и вставленный код
Перетащите HTML-файл, папку сайта целиком или .zip и выберите нужные страницы — или вставьте HTML/CSS напрямую. Файлы отдаются из памяти и удаляются после завершения импорта.
Расширение Chrome
Снимайте дашборды за логином, localhost, частные сети и текущее состояние страницы. Выберите отдельный элемент или всю страницу, затем вставьте её или нажмите Send to Figma.
ИИ-инструменты через MCP
Подключите Claude Code, Claude Desktop, Cursor или любой MCP-клиент. Они вызывают import_html или import_url, и страница попадает в ваш открытый плагин.
Импорт связанных страниц и Re-import
После импорта выберите из списка другие страницы того же сайта. Любой фрейм можно позже обновить в один клик через Re-import (повторный импорт).
Экраны, совпадающие с реальным сайтом
Адаптивный дизайн — это больше, чем три скриншота. HTML to Frames отрисовывает каждую ширину отдельно, поэтому вы получаете настоящие планшетные и мобильные раскладки.
Site width — измеренная
Desktop открывается в той дизайн-ширине, под которую сделан сайт: 1920 с центрированным контейнером для макетов на всю ширину, ширина контейнера для «боксовых» сайтов, 1440 для «резиновых».
Responsive set
Desktop + Tablet 768 + Mobile 390 в один клик; Laptop 1280 и произвольная ширина — на Pro. Экраны снимаются параллельно.
Аккуратная раскладка на холсте
Одна строка на страницу, экраны рядом, фреймы с именами вида yoursite.com/pricing — Desktop (1920).
Auto Layout, которому можно доверять
Сердце HTML to Frames. Auto Layout выводится из реальной геометрии браузера, применяется и проверяется — никаких допущений.
Стеки, строки и сетки
Вертикальные и горизонтальные стеки, переносящиеся строки, отступы между элементами, padding и выравнивание определяются по измеренному положению каждого дочернего элемента.
Адаптивная логика
Центрированный контент остаётся по центру, одинаковые карточки растягиваются (Fill), контейнеры с max-width остаются посередине, а элементы-распорки тянутся — фреймы меняют размер так же, как сайт.
Проверка с точностью до 2 px
После применения Auto Layout положение каждого дочернего элемента сравнивается с браузером. Если оно сдвинулось, пробуется более простой вариант; иначе фрейм сохраняет точные позиции.
Умные constraints
Фреймы с абсолютными позициями получают constraints Stretch, Scale, Center или Min/Max, поэтому изменение размера по-прежнему работает предсказуемо.
Диагностика
Экран результатов объясняет, почему каждый фрейм остался абсолютным, — неравные отступы, перекрытия, разный размер текста, — так что никаких загадок.
Дизайн-система — извлечённая автоматически
Превратите цвета, типографику и повторяющиеся элементы интерфейса сайта в строительные блоки дизайн-системы Figma — или сопоставьте их с вашей.
Цветовые переменные
До 96 цветовых переменных в коллекции «Colors · domain» с именами по CSS custom properties сайта (например, --brand-primary → brand/primary).
Стили текста и теней
До 48 текстовых стилей с именами по роли и размеру, а также стили теней от sm до xl. Заливки, обводки и цвета текста привязываются к переменным.
Переиспользование вместо дублей
Если в вашем файле уже есть переменная или стиль с тем же значением, используется он. Повторный импорт того же сайта не создаёт ничего нового.
Snap to my file's styles
Почти совпадающие значения привязываются к ближайшему цвету и текстовому стилю вашей собственной дизайн-системы — по перцептивному цветовому расстоянию.
Компоненты и hover-варианты
Повторяющиеся карточки, кнопки и пункты меню становятся компонентами и экземплярами. Hover-состояния превращаются в варианты Default/Hover с взаимодействием on-hover.
Light + Dark
Страница считывается в светлой и тёмной цветовых схемах и записывается в одну коллекцию с двумя режимами, плюс тёмная копия каждого экрана.
Точность до мелочей
Реальный CSS бывает запутанным. HTML to Frames учитывает детали, благодаря которым страница выглядит собой.
Текст
Смешанные стили в одном абзаце, ссылки, letter-spacing, line-height, text-transform, верхний и нижний индексы, CSS-счётчики и маркеры списков точно как в Chrome.
Заливки
Линейные, радиальные и конические градиенты, включая остановки в px и повторяющиеся паттерны, режимы наложения, прозрачность, blur и backdrop blur, фильтры grayscale.
Фигуры и эффекты
SVG как редактируемые векторы, скругление углов, внутренние и внешние тени, тени текста, рамка с одной стороны, ::before/::after, clip-path, mask-image, поворот и масштаб.
Встроенный контент
Карты, iframe, WebGL и видео без постера снимаются как изображение соответствующего блока, поэтому ничего не остаётся пустым.
Изображения
Источники высокого разрешения из srcset, object-fit, background-size и повторяющиеся фоны.
Шрифты
Экран Missing fonts (недостающие шрифты) предлагает замены ещё до сборки слоёв и запоминает ваш выбор для этого сайта.
Прототип и рабочий процесс
Импортированные страницы готовы к прокликиванию, и их легко поддерживать в актуальном состоянии.
Кликабельные ссылки
В режиме Present ссылки открывают свой URL; ссылки между импортированными страницами становятся взаимодействиями Navigate.
Fixed, sticky и прокрутка
Фиксированные и sticky-шапки остаются на месте, а области горизонтальной прокрутки, например карусели, прокручиваются в прототипах.
Текст аккордеонов как заметки
Опционально: скрытый текст в закрытых аккордеонах добавляется как аннотации Figma, чтобы контент не потерялся.
Референсный скриншот
Скрытый заблокированный слой со скриншотом под каждым экраном для попиксельного сравнения (Pro).
Частые вопросы
Free включает все источники импорта, импорт Multiple до 10 ссылок, измеренную ширину сайта, Auto Layout с проверкой, подмену шрифтов, ссылки для прототипа и скриншоты встроенного контента — с лимитом 10 импортов в месяц и одним экраном за импорт. Стили и переменные, компоненты, Light + Dark, произвольная ширина и референсный скриншот — функции Pro.
Да. Плагин не строит раскладку по CSS-правилам напрямую — он использует измеренную браузером геометрию. Раскладки на flexbox и grid превращаются в стеки Auto Layout и переносящиеся строки везде, где результат совпадает с браузером с точностью до 2 px.
Да, на Pro. Для экранов десктопной ширины сервис захвата принудительно включает hover-состояние у ссылок и кнопок, сравнивает его с обычным и создаёт варианты Default/Hover с взаимодействием on-hover в прототипе. Меню, которые открываются JavaScript при наведении мыши, не снимаются.
Трансформации skew и 3D, clip-path с path(), многослойные маски и цвета Display-P3 пока не конвертируются. Встроенные canvas, карты и iframe становятся изображениями своего блока, а не слоями.
Хватит перерисовывать веб вручную.
Вставьте ссылку и за секунды получите настоящие редактируемые адаптивные слои Figma. Начать можно бесплатно — 10 импортов каждый месяц.
Без банковской карты. Pro покупается прямо в Figma.
Скоро в Figma Community