Документация HTML to Frames

1. Откройте Figma (десктопное приложение или браузер) и перейдите на страницу HTML to Frames в Community.
2. Нажмите Open in… или Try it out и выберите файл. Плагин сохранится в вашем аккаунте.
3. В следующий раз запускайте его из меню: Plugins → HTML to Frames — или нажмите ⌘/ (Ctrl / в Windows) и введите HTML to Frames.

Плагин работает в файлах Figma Design. Аккаунт не нужен: план Free включается автоматически, а Pro покупается прямо в Figma.

1. На вкладке Import оставьте источник Link и вставьте URL — например, главную страницу своего сайта.
2. В разделе Screens (экраны) выбран Desktop с пометкой Site width — во время импорта плагин измерит реальную дизайн-ширину страницы. На Pro нажмите Responsive set, чтобы добавить Tablet и Mobile.
3. Оставьте Auto Layout включённым. Нажмите Import.
4. Следите за прогрессом: страница отрисовывается, изображения подготавливаются, создаются слои, затем применяется и проверяется Auto Layout.
5. Экран результатов показывает число фреймов и слоёв, долю фреймов с Auto Layout, недостающие шрифты и предупреждения.

Страница появляется на холсте строкой фреймов с именами вида yoursite.com — Desktop (1920). Любой текст, изображение и вектор можно редактировать.

Link

Любая публичная страница. Страницы, требующие входа, работающие на localhost или в частной сети, недоступны для сервиса захвата — для них используйте расширение Chrome.

Multiple

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

Local file

Выберите HTML-файл, папку сайта или .zip (до 30 МБ). Для папок отметьте страницы для импорта. Можно также выбрать Paste code (вставить код) и вставить HTML со встроенным или inline CSS. Файлы открываются из памяти в изолированном браузере и удаляются сразу после импорта.

Browser

Вставьте снимок, сделанный расширением HTML to Frames для Chrome (⌘V), перетащите файл .h2f или один раз подключите расширение и пользуйтесь кнопкой Send to Figma. См. Расширение Chrome.

ИИ-инструменты

Подключите MCP-клиент на вкладке AI и позвольте ИИ-инструменту отправлять страницы. См. ИИ-инструменты (MCP).

Site width измеряется во время импорта: макеты с секциями от края до края помещаются во фрейм 1920 с центрированным контентом; сайты с фиксированным контейнером получают ширину контейнера (например, 1200 или 1280); «резиновые» макеты — 1440. На Free импортируется один экран на страницу, на Pro и Team — до четырёх. Все экраны одной страницы считаются одним импортом.

Перед сборкой плагин проверяет, какие шрифты страницы недоступны в Figma на вашем компьютере. Экран Missing fonts предлагает замену для каждого — сначала семейство, начинающееся с того же слова, затем первый установленный шрифт из CSS-стека шрифтов, затем Inter. При желании найдите и выберите другое семейство, затем решите, запомнить ли выбор для этого сайта или для всех сайтов. Skip (пропустить) применяет предложения один раз без сохранения. Сохранённые варианты сбрасываются ссылкой forget saved под параметром.

С включённым параметром Styles & variables (Pro):

• Цвета, использованные минимум дважды, — а также цвета, совпадающие с CSS custom properties сайта, — становятся переменными в коллекции Colors · yoursite.com. Имена по возможности берутся из токенов сайта (--brand-primary → brand/primary), иначе — из тона и оттенка (blue/500).
• Типографика, использованная минимум дважды или размером от 20 px, становится текстовыми стилями с именами вида yoursite.com/Heading/32/40 Bold.
• Повторяющиеся тени становятся стилями теней sm, md, lg, xl.
• Если в вашем файле уже есть переменная или стиль с тем же значением, они переиспользуются.

Snap to my file's styles идёт ещё дальше и сопоставляет почти совпадающие значения с вашей собственной дизайн-системой.

С включённым параметром Components & hover states повторяющиеся структуры становятся компонентами во фрейме Components · yoursite.com рядом со страницей, а каждое вхождение — экземпляром со своим текстом и изображениями. Элементы с hover-состоянием становятся наборами компонентов с вариантами State=Default и State=Hover.

Выберите Color scheme → Light + Dark (Pro). Страница считывается дважды — с prefers-color-scheme: light и dark — без перезагрузки. Каждый меняющийся цвет становится переменной со значениями Light и Dark, а рядом с каждым экраном появляется его тёмная копия с коллекцией в режиме Dark. Файлы Figma на плане Starter допускают один режим на коллекцию; в этом случае плагин сообщит, что тёмный режим пропущен. Сайты, которые переключают тему только JavaScript-переключателем (а не по системной настройке), импортируются в теме по умолчанию.

• Ссылки работают в режиме Present: внешние ссылки открывают свой URL; ссылки на страницы, которые вы тоже импортировали, становятся взаимодействиями Navigate.
• Фиксированные и sticky-шапки остаются на месте при прокрутке; горизонтальные карусели и области прокрутки прокручиваются.
• После импорта Import linked pages (импорт связанных страниц) показывает другие страницы того же сайта, найденные на странице. Отметьте нужные — они импортируются как импорт Multiple с теми же настройками.
• Выделите импортированный фрейм и нажмите Re-import, чтобы получить свежую версию по сохранённому исходному URL.

Используйте бесплатное расширение HTML to Frames для Chrome для страниц, недоступных сервису захвата: страниц за логином, localhost, интранета и точного состояния страницы (открытый выпадающий список, заполненная форма).

1. Установите расширение и закрепите его на панели инструментов.
2. Откройте страницу и нажмите на расширение → Capture this page (снять страницу) или Select an element (выбрать элемент), чтобы снять только часть (двигайте мышь, ↑ — к родителю, ↓ — обратно, Enter — выбрать, Esc — отмена).
3. Снимок копируется в буфер обмена (или скачивается как файл .h2f).
4. В Figma откройте плагин → вкладка Browser → нажмите ⌘V или перетащите файл.

Send to Figma: на вкладке Browser в плагине нажмите Connect, чтобы получить одноразовый код, и введите его в расширении в разделе Connect to Figma. После этого главной кнопкой станет Send to Figma, и снимки будут попадать прямо в ваш открытый плагин.

Расширение снимает один экран в текущей ширине окна — для планшетной или мобильной раскладки измените размер окна. Каждый снимок считается одним импортом.

1. Откройте плагин → вкладка AI → Connect an AI tool (подключить ИИ-инструмент). Будет создан личный токен; он показывается один раз.
2. Скопируйте настройку для своего клиента: Claude Code (команда claude mcp add), Claude Desktop (конфиг с mcp-remote) или Cursor & others (JSON с URL и заголовком).
3. Держите плагин открытым в Figma и попросите ИИ-инструмент импортировать страницу, например: «Сделай страницу с тарифами из трёх планов и отправь её в Figma через HTML to Frames».

Доступные инструменты: import_html (HTML до 2 МБ, опционально имя и экраны), import_url (любой публичный URL) и import_status. Импорт выполняется в вашем плагине по вашему плану, а инструмент получает сводку — фреймы, слои, долю Auto Layout и недостающие шрифты. Create a new token (создать новый токен) делает старый недействительным; Disconnect удаляет его. Веб-коннекторы в claude.ai пока не поддерживаются.

Один импорт = одна страница со всеми её экранами. Счётчики обнуляются ежемесячно (UTC). Если очень длинная страница обрезана лимитом плана, на фрейме появляется фиолетовая полоса Capture limit — вы всегда об этом узнаете. Pro покупается на вкладке Plan через оплату Figma; участники Team вводят лицензионный ключ на той же вкладке и могут удалить его из аккаунта, чтобы освободить место.

Страница выглядит не так, как в моём браузере. Включите Hide cookie banners & popups, попробуйте Extra wait для медленных анимаций или снимите ровно то, что видите, с помощью расширения Chrome.

«This address can't be reached» (адрес недоступен). Сервис захвата открывает только публичные адреса. Для localhost, staging за VPN или страниц за логином используйте расширение Chrome.

Текст переносится иначе. Обычно дело в шрифте — сопоставьте недостающий шрифт с нужным семейством на экране Missing fonts.

У некоторых фреймов нет Auto Layout. Это сделано намеренно, когда Auto Layout сдвинул бы элементы. Откройте список диагностики на экране результатов, чтобы увидеть причину (неравные отступы, перекрытие, размер текста).

Что-то осталось пустым. Карты, iframe и WebGL-сцены снимаются как изображения; если блок всё равно пустой, скорее всего, контенту требовалось действие пользователя или вход в аккаунт.

«Limit reached» (лимит исчерпан). Вы израсходовали бесплатные импорты за этот месяц. Они обновляются 1-го числа (UTC) — или перейдите на Pro для безлимитных импортов.

Не получается? Напишите на [email protected], приложив URL и скриншот.