Плагин Figma · расширение Chrome · MCP
Любая веб-страница — настоящими слоями Figma.
HTML to Frames превращает живые URL, локальный HTML, вкладки Chrome и сгенерированный ИИ код в редактируемые адаптивные фреймы Figma — с проверенным Auto Layout, поэтому дизайн никогда не ломается.
Бесплатный план: 10 импортов в месяц. Без аккаунта и без банковской карты.
Скоро в Figma Community
- Auto Layout с проверкой
- Desktop · Tablet · Mobile
- Переменные и стили
- Компоненты и hover-состояния
Пять способов импорта. Один чистый результат.
- LinkВставьте любой публичный URL.
- MultipleДо 10 ссылок за раз — на любом плане.
- Local fileHTML-файл, папка сайта, .zip или вставленный код.
- BrowserСтраницы за логином, localhost, открытые меню.
- ИИ-инструментыClaude, Cursor и любой MCP-клиент.
Как это работает
От URL до фреймов с Auto Layout за четыре шага
Это настоящий сценарий работы плагина — та же панель, что вы увидите в Figma.
yoursite.com — Desktop (1440)
Tablet (768)
Mobile (390)
Импортировано 3 фрейма
Auto Layout на 60 из 77 фреймов · 23 цветовые переменные · 19 текстовых стилей · 10 компонентов
- 01
Вставьте ссылку
Или перетащите папку, вставьте код, отправьте вкладку Chrome или позвольте ИИ-инструменту передать страницу.
- 02
Выберите экраны
Desktop открывается в собственной дизайн-ширине сайта — измеренной, а не угаданной. Tablet и Mobile добавляются в один клик.
- 03
Импортируйте
Изолированный браузер отрисовывает страницу так, как её видит обычный посетитель, скрывает cookie-баннеры и подгружает ленивый контент.
- 04
Сразу редактируйте
Фреймы, текст, векторы и изображения приходят с Auto Layout, переменными, текстовыми стилями и компонентами.
2 px
Auto Layout сверяется с раскладкой самого браузера с допуском 2 px.
86–97%
Доля фреймов, получивших Auto Layout, на реальных сайтах из наших тестов.
10
Ссылок в одном импорте Multiple — в том числе на плане Free.
4
Экрана за импорт на Pro: Desktop, Laptop, Tablet и Mobile.
Цифры из наших собственных тестов на реальных сайтах — не маркетинговая арифметика.
Движок Auto Layout
Auto Layout, который никогда не ломает дизайн
Большинство конвертеров угадывают раскладку и надеются на лучшее. HTML to Frames сначала строит страницу с точностью до пикселя, а затем идёт изнутри наружу: по измеренной браузером геометрии определяет стеки, переносящиеся строки, отступы между элементами, padding и выравнивание, применяет Auto Layout и проверяет положение каждого дочернего элемента. Если что-то сдвинулось больше чем на 2 px, пробуется более простой вариант, а если не сработает и он, фрейм сохраняет точные позиции с разумными constraints. Экран результатов даже объясняет, почему фрейм остался с абсолютным позиционированием.
- Центрированный контент получает Center, одинаковые карточки — Fill
- Контейнеры с max-width остаются по центру при изменении размера
- Абсолютные фреймы получают constraints Stretch, Scale, Center или Min/Max
- Список диагностики объясняет каждый фрейм, оставшийся с абсолютными позициями
Возможности
Всё, что иначе пришлось бы пересобирать вручную
HTML to Frames читает страницу так, как её раскладывает браузер, и создаёт слои Figma так, как их собрал бы дизайнер.
Проверенный Auto Layout
Строки, стеки и сетки становятся Auto Layout. Каждый фрейм проверяется после применения — если результат не совпадает, изменения откатываются.
Responsive set
Desktop, Tablet и Mobile за один импорт: снимаются параллельно и выкладываются рядом.
Измеренная ширина сайта
Desktop открывается в реальной дизайн-ширине страницы — 1920 для макетов на всю ширину, ширина контейнера для «боксовых» сайтов.
Переменные и стили
Цвета становятся переменными с именами по CSS-токенам сайта, типографика и тени — стилями. Уже существующие переиспользуются.
Компоненты и hover
Повторяющиеся карточки, кнопки и пункты меню становятся компонентами с экземплярами, а hover-состояния — вариантами.
Режимы Light + Dark
Один импорт, два режима: коллекция переменных со значениями Light и Dark и тёмная копия каждого экрана.
Готово к прототипу
Ссылки остаются кликабельными, импортированные страницы связаны между собой, фиксированные шапки и области прокрутки работают в режиме Present.
Подмена шрифтов
Не хватает шрифтов? Выберите замену один раз — она запоминается для каждого сайта.
Приватность по умолчанию
Результат передаётся один раз и никогда не записывается на диск. Загруженные файлы удаляются сразу после импорта.
С учётом дизайн-системы
Импорт, который встраивается в вашу дизайн-систему
Цвета, использованные больше одного раза, становятся переменными — с именами по собственным CSS custom properties сайта, если они есть, например brand/primary. Типографика превращается в текстовые стили, повторяющиеся тени — в стили теней. С опцией Snap to my file's styles (привязка к стилям вашего файла) почти совпадающие цвета и шрифты сопоставляются с вашими переменными и стилями — и импорт выглядит так, будто его собрали прямо в вашем файле.
- До 96 цветовых переменных и 48 текстовых стилей на сайт
- Переиспользует переменные и стили, уже существующие в вашем файле
- Light + Dark в одной коллекции с двумя режимами
- Компоненты с вариантами Default / Hover и взаимодействиями on-hover
Для тех, кто работает на стыке веба и Figma
Продуктовые и UI-дизайнеры
Начинайте редизайн с реального сайта, а не со скриншота. Проверяйте отступы, типографику и цвета за секунды.
Дизайн-агентства
Перенесите текущий сайт клиента в Figma и подготовьте предложение в тот же день. План Team — на пять мест.
Команды дизайн-систем
Найдите все цвета и текстовые стили, которые реально использует продукт, — с привязкой к вашим переменным.
Фронтенд-разработчики
Передавайте дизайнерам работу с localhost или staging в виде редактируемых фреймов Figma.
Те, кто строит с ИИ
Отправляйте интерфейсы из Claude Code, Claude Desktop или Cursor прямо в свой файл Figma.
Студенты
Разбирайте лучшие сайты слой за слоем и изучайте, как они устроены.
Редактируемые слои лучше скриншотов и ручной пересборки
| Скриншот | Ручная пересборка | HTML to Frames | |
|---|---|---|---|
| Редактируемый текст | Нет | Да | Да |
| Auto Layout | Нет | Да, вручную | Да, с проверкой |
| Переменные и стили | Нет | Вручную | Создаются или переиспользуются |
| Планшет и мобильная версия | Отдельные снимки | Ещё часы работы | Один импорт |
| Время на одну страницу | Секунды | Часы | От секунд до минуты |
Честные цены и скидка на старте
Начните бесплатно. Pro без ограничений — $7 в месяц на старте, и ранние клиенты сохраняют эту цену.
- 10 импортов в месяц
- 1 экран на импорт
- Multiple-импорт — до 10 ссылок
- Ссылка, локальные файлы, расширение для Chrome, AI-инструменты
- Проверенный Auto Layout
- Измеренная ширина сайта
- Подбор шрифтов
- Ссылки в прототипе
Pro
Стартовая ценаБезлимитные импорты и полный набор инструментов — покупка прямо в Figma.
- Безлимитные импорты (fair use — 1 000 в месяц)
- До 4 экранов на импорт
- Стили и переменные
- Snap to my file's styles (привязка к стилям вашего файла)
- Компоненты и hover-варианты
- Режимы переменных Light + Dark
- Произвольная ширина
- Детальные слои, референсный скриншот, дополнительное ожидание
Team
5 местВсё, что есть в Pro, для всей команды — по одному лицензионному ключу.
- Всё, что есть в Pro
- 5 мест на одном лицензионном ключе
- Безлимитные импорты (fair use — 5 000 в месяц)
- Места можно передавать между сотрудниками
Ваши страницы — не наши данные
Страницы отрисовываются в изолированном браузере-песочнице. Результат один раз передаётся в ваш плагин и затем удаляется — он никогда не записывается на диск. Загруженные файлы стираются сразу после завершения импорта. Без cookies, без аналитики, без рекламы.
Блог
Все статьиCSS to Figma Auto Layout: Flexbox и Grid в Auto Layout Figma
Flexbox и Auto Layout в Figma похожи, но это не одна и та же модель. В этом техническом гайде — соответствие CSS-свойств настройкам Auto Layout, зачем нужна проверка результата и как писать CSS, который чисто импортируется.
10 мин чтенияlocalhost to FigmaLocalhost to Figma: снять любую страницу расширением Chrome
Некоторые страницы недоступны для импорта по URL: ваша сборка на localhost, дашборд за логином, меню, которое открыто прямо сейчас. Бесплатное расширение HTML to Frames для Chrome снимает их из вашего собственного браузера и превращает в редактируемые слои Figma.
9 мин чтенияAI to FigmaAI to Figma: интерфейс из Claude и Cursor в Figma через MCP
ИИ-инструменты для кода собирают рабочий интерфейс за минуты, но дизайнерам он всё равно нужен в Figma. Рассказываем, как подключить Claude Code, Claude Desktop или Cursor к HTML to Frames через MCP и получать редактируемые слои вместо скриншотов.
9 мин чтенияЧастые вопросы
Это плагин для Figma, который конвертирует веб-страницы в настоящие редактируемые слои Figma. Можно импортировать живой URL, до 10 ссылок за раз, локальный HTML-файл или папку сайта, вставленный код, вкладку, снятую расширением Chrome, или HTML, отправленный ИИ-инструментом через MCP. Страницы приходят в виде фреймов с текстом, векторами и изображениями — с Auto Layout, переменными, стилями и компонентами.
Нет. Каждый заголовок — редактируемый текстовый слой, каждая иконка — вектор, каждая секция — фрейм. Только то, что не является HTML, — карта в iframe, WebGL-сцена или видео без постера — вставляется как изображение этого блока, а остальная страница остаётся полностью редактируемой.
Плагин применяет Auto Layout, а затем сверяет положение каждого дочернего элемента с раскладкой браузера с допуском 2 px. Если фрейм не проходит проверку, пробуется более простая раскладка или сохраняются абсолютные позиции с constraints. В наших тестах на реальных сайтах Auto Layout получили 86–97% фреймов; остальные перечислены с указанием причины.
Да, с помощью бесплатного расширения HTML to Frames для Chrome. Оно снимает вкладку в вашем собственном браузере — включая дашборды за логином, localhost, частные сети, открытые меню и заполненные формы — и передаёт её в плагин через буфер обмена или кнопкой Send to Figma.
Desktop в измеренной дизайн-ширине сайта, Laptop 1280, Tablet 768 и Mobile 390, а на Pro — ещё и произвольная ширина. Responsive set импортирует Desktop, Tablet и Mobile в один клик. На Free — один экран за импорт, на Pro и Team — до четырёх.
Free даёт 10 импортов в месяц. Pro — без ограничений (в рамках честного использования) за $7 в месяц на старте, обычная цена $9; покупается прямо в Figma. Team стоит $22 в месяц на старте, обычная цена $29, — пять мест с общим лицензионным ключом. Один импорт — это одна страница со всеми её экранами.
Они отрисовываются в изолированном браузере, один раз передаются в ваш плагин и затем удаляются из памяти — никогда не записываются на диск. Загруженные файлы удаляются после завершения импорта. Плагин не читает ваш файл Figma, а мы не получаем от Figma ваше имя или email.
Да. Подключите Claude Code, Claude Desktop, Cursor или другой MCP-клиент на вкладке AI в плагине. После этого ИИ-инструмент может вызвать import_html или import_url, и страница попадёт в ваш открытый файл Figma — импорт идёт по вашему собственному плану.
Хватит перерисовывать веб вручную.
Вставьте ссылку и за секунды получите настоящие редактируемые адаптивные слои Figma. Начать можно бесплатно — 10 импортов каждый месяц.
Без банковской карты. Pro покупается прямо в Figma.
Скоро в Figma Community