HTML to Figma: как конвертировать HTML в Figma — гайд 2026

Рано или поздно каждая дизайн-команда упирается в одну и ту же стену: то, с чем нужно работать, существует как HTML в браузере, а работать с этим хочется в Figma. Это может быть живой сайт клиента перед редизайном, staging-сборка, которую только что выкатил разработчик, или лендинг, который AI-инструмент сгенерировал за секунды. Пересобирать всё вручную — часы работы. Скриншот можно разглядывать, но не редактировать.

В этом руководстве разберём, как конвертировать HTML в Figma (HTML to Figma) в настоящие редактируемые слои — фреймы, текст, векторы и изображения — с помощью плагина HTML to Frames. Вы узнаете пять способов импортировать страницу, как выбирать экраны, какие опции включать, что конвертируется чисто, а что нет, и как решить самую частую проблему — отсутствующие шрифты.

Зачем вообще конвертировать HTML в Figma?

Браузер и дизайн-инструмент решают разные задачи. Браузер — источник истины о том, что ушло в продакшен; Figma — место, где вы исследуете, комментируете, сравниваете и передаёте макеты в разработку. Конвертация переносит текущую реальность туда, где принимаются решения.

Типичные причины:

• Редизайн. Начинайте с существующего сайта, а не с пустого холста, чтобы видеть, что там на самом деле есть, прежде чем что-то менять. Подробнее — в нашем гайде по редизайну: перенос сайта в Figma.
• Аудит. Изучайте отступы, типографическую шкалу и использование цветов слой за слоем, а не угадывайте по DevTools.
• Расхождение дизайна и кода. Верните выпущенную версию в Figma и сравните её с исходным макетом.
• Хэндофф наоборот. Фронтенд-разработчик собирает страницу на localhost, а дизайнер проверяет и дорабатывает её в Figma.
• UI, сгенерированный AI. Claude или Cursor быстро выдают HTML; довести его до продакшен-качества удобнее в Figma.
• Обучение. Студенты и начинающие дизайнеры могут изучать хорошо сделанные сайты слой за слоем.

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

5 способов перенести HTML в Figma

HTML to Frames принимает веб-страницы из пяти типов источников. Выберите тот, что соответствует месту, где живёт ваш HTML.

1. Link (одна публичная ссылка)

Вставьте URL любой публичной страницы во вкладку Link (ссылка). Страница рендерится в изолированном браузере, измеряется и пересобирается как слои Figma. Это самый быстрый путь, если страница доступна публично. Подробнее об этом сценарии — в разделе URL to Figma.

2. Multiple (до 10 ссылок)

Вкладка Multiple (несколько ссылок) принимает до 10 ссылок за раз. Они обрабатываются последовательно, и каждая страница становится отдельной строкой на холсте — главная, страница цен и статья блога выстраиваются рядом для сравнения. Multiple-импорт доступен на любом тарифе, включая Free.

3. Локальный файл, папка, .zip или вставка кода

Если HTML ещё не опубликован, используйте вкладку Local file (локальный файл):

• отдельный HTML-файл,
• целую папку сайта (перетащите её и выберите, какие страницы импортировать),
• архив .zip или
• Paste code — «сырой» HTML и CSS.

Размер загрузки — до 30 МБ. Файлы открываются из памяти внутри изолированного браузера (никогда через file://) и удаляются сразу после завершения импорта. Брошенные загрузки удаляются через 2 минуты. Подробности — на странице о безопасности.

4. Browser (бесплатное расширение для Chrome)

До некоторых страниц сервер просто не дотянется: дашборды за логином, localhost, приватные сети или страница в определённом состоянии — открытое меню, заполненная форма, корзина с товарами. Для них установите бесплатное расширение HTML to Frames для Chrome.

Можно захватить всю страницу или выбрать отдельный элемент (наведите курсор для подсветки, стрелками переходите к родителю или потомку, Enter — захват, Esc — отмена). Результат попадает в буфер обмена или в файл .h2f, и вы вставляете его во вкладку Browser плагина. Ещё проще: один раз свяжите расширение с плагином одноразовым кодом и используйте Send to Figma — захваты будут сразу попадать в открытый плагин.

5. AI-инструменты через MCP

Если вы собираете UI с AI-ассистентом, подключите Claude Code, Claude Desktop, Cursor или любой MCP-клиент на вкладке AI в плагине. Там вы получите токен и готовую настройку для копирования. После этого ассистент может вызывать import_html (HTML до 2 МБ), import_url или import_status, а страница попадает в ваш открытый плагин и импортируется по вашему тарифу. Веб-коннекторы claude.ai пока не поддерживаются. Подробнее — в разделе AI to Figma.

Какой способ выбрать?

Пошагово: конвертация страницы с HTML to Frames

Вот полный процесс для типичной публичной страницы.

1. Откройте плагин в дизайн-файле Figma и выберите вкладку Link.
2. Вставьте URL страницы, которую хотите конвертировать.
3. Выберите экраны — Desktop (Site width), Laptop, Tablet, Mobile или Responsive set в один клик.
4. Проверьте опции: Auto Layout, Full page, Images и скрытие cookie-баннеров и попапов.
5. Запустите импорт. Если на странице используются шрифты, которых у вас нет, до начала сборки появится экран Missing fonts (отсутствующие шрифты).
6. Выберите замены для отсутствующих шрифтов (или примите предложенные).
7. Посмотрите экран результатов. На нём — фреймы, слои, доля Auto Layout, отсутствующие шрифты и предупреждения.
8. Начинайте редактировать. Страница теперь — набор вложенных фреймов Figma с настоящим текстом, векторами и изображениями.

Каждый экран становится отдельным фреймом с именем вида example.com/pricing — Desktop (1920) — без протокола, без www и не длиннее 60 символов, — поэтому даже большие импорты легко просматривать в панели слоёв.

Выбор экранов: что такое Site width

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

Desktop = Site width

HTML to Frames не берёт 1440 наугад. Плагин измеряет реальную дизайн-ширину страницы в момент импорта:

• Full-bleed-дизайны (фоны от края до края) импортируются в ширине 1920, с контентом по центру.
• Сайты с фиксированным контейнером импортируются в ширине этого контейнера — например, 1200, 1280 или 1440.
• Резиновые сайты без фиксированного контейнера импортируются в ширине 1440.

Измерено, а не угадано. При многостраничном импорте у одного сайта одна ширина на всех страницах, поэтому фреймы выстраиваются ровно.

Другие экраны

• Laptop — 1280
• Tablet — 768
• Mobile — 390
• Custom width — любая нужная ширина (Pro)

Responsive set даёт Desktop, Tablet и Mobile в один клик. Экраны одной страницы захватываются параллельно.

На Free каждый импорт включает один экран. Pro и Team позволяют до четырёх экранов на импорт. Важно: один импорт = одна страница со всеми её экранами, так что responsive set одной страницы считается одним импортом. Подробности тарифов — на странице цен.

Опции, которые стоит знать

Настройки по умолчанию подходят для большинства страниц, но в этих опциях стоит разобраться:

• Auto Layout — выводит стеки, gap, padding и выравнивание из геометрии браузера и проверяет результат, прежде чем его сохранить. Как это работает, рассказано в статье про Auto Layout.
• Styles & variables (Pro) — создаёт цветовые переменные, текстовые стили и стили теней и переиспользует те, что уже есть в вашем файле.
• Snap to my file's styles (Pro) — если точного совпадения нет, привязывает цвета и текст к ближайшим стилям вашей собственной дизайн-системы.
• Full page — захватывает всю прокручиваемую страницу, а не только первый экран.
• Images — включать или пропускать заливки изображениями.
• Скрытие cookie-баннеров и попапов — страница захватывается так, как её видит обычный посетитель, без оверлеев.
• Color scheme — Light, Dark или Light + Dark (Pro): одна коллекция переменных с обоими режимами.
• Detailed layers (Pro), Reference screenshot (Pro, скрытый заблокированный слой для сравнения) и Extra wait (Pro, для медленно загружающихся страниц).
• Текст аккордеонов как заметки — по умолчанию выключено; превращает текст свёрнутых <details> в аннотации Figma.
• Page language — 15 языков, полезно для мультиязычных сайтов.

Что конвертируется — а что нет

Цель — дизайн-файл, в котором действительно можно работать, поэтому полезно точно знать, что переносится.

Что становится редактируемыми слоями

• Раскладка — вложенные фреймы с Auto Layout там, где его можно проверить
• Текст со смешанными стилями, ссылками, letter-spacing, line-height и text-transform
• Цвета и градиенты — линейные, радиальные и конические, включая px-стопы и повторяющиеся градиенты
• Изображения с object-fit, background-size, тайлингом и высоким разрешением из srcset
• SVG — как редактируемые векторы
• Обводки (включая одну сторону другого цвета), скругление углов и тени (внутренние, внешние и text-shadow)
• Прозрачность, режимы наложения, blur и backdrop-blur
• CSS-поворот и масштаб, filter: grayscale/opacity
• ::before и ::after, clip-path, mask-image
• Поля форм, маркеры списков, отрисованные как в Chrome, CSS-счётчики, верхний и нижний индексы
• Shadow DOM и правильный порядок z-index

Что приходит изображением

Некоторый контент нельзя представить слоями. Iframe (например, встроенные карты), видео без постера, WebGL- или 3D-canvas и элементы object/embed захватываются как скриншот только этого блока. Остальная страница остаётся редактируемой. Почему так — объясняет сравнение HTML to canvas.

Пока не поддерживается

• Skew и 3D-трансформации
• clip-path через path()
• Многослойные маски
• Цвета Display-P3

Советы для чистого результата

Несколько привычек дают заметную разницу:

1. Включайте скрытие cookie-баннеров и попапов для маркетинговых сайтов. Иначе окно согласия может оказаться поверх вашего hero-блока.
2. Для страниц за логином используйте расширение для Chrome. Сервер не может войти под вашей учётной записью, а ваш браузер уже вошёл.
3. Захватывайте состояния осознанно. Сначала откройте меню или заполните форму в браузере, затем сделайте захват расширением.
4. Выбирайте отдельный элемент, когда нужен только компонент — например, карточка тарифа или навигация. Небольшие захваты быстрее чистить.
5. Используйте Extra wait (Pro) на страницах, которые подгружают контент с задержкой.
6. Добавьте Reference screenshot (Pro), когда нужно доказать, что импорт совпадает с живой страницей: это скрытый заблокированный слой, который можно включить для сравнения.
7. Импортируйте responsive set вместо трёх отдельных импортов. Это один импорт, и фреймы лежат рядом.
8. Используйте импорт связанных страниц после первого импорта, чтобы выбрать другие страницы того же сайта — они придут как Multiple-импорт.
9. Делайте Re-import в один клик, когда живая страница меняется. Исходный URL хранится во фрейме.

Как исправить отсутствующие шрифты

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

HTML to Frames решает это до сборки слоёв:

1. После захвата экран Missing fonts показывает все семейства, которые использует страница и которые Figma не может найти.
2. Для каждого плагин предлагает замену. Можно принять её или выбрать другой шрифт.
3. Ваш выбор запоминается для сайта — или для всех сайтов, если хотите, — так что следующий импорт с того же домена ничего не спросит.

Сопоставление шрифтов доступно на всех тарифах. Шрифты перечисляются только локально; плагин не читает содержимое вашего файла Figma. Если вы планируете долго работать над дизайном, точнее всего по-прежнему установить ту гарнитуру, которую использует сайт.

Что дальше

Конвертация HTML в Figma — лишь первый шаг. Ценность появляется в том, что вы делаете со слоями:

• Планируете редизайн? Прочитайте про рабочий процесс HTML to design.
• Работаете со страницами, сгенерированными AI? Смотрите AI to Figma и наш гайд UI от AI в Figma через MCP.
• Нужны localhost или страницы за логином? Начните с расширения для Chrome.
• Сравниваете инструменты? На странице альтернатив варианты разобраны честно.

Когда будете готовы, установите плагин и попробуйте его на странице, с которой работаете прямо сейчас. В документации подробно описана каждая опция.