Localhost to Figma: снять любую страницу расширением Chrome

Импорт по URL работает, когда страница публичная. Но многие экраны, которые на самом деле нужны в Figma, публичными не являются: фича-ветка на localhost:3000, админ-панель за логином, staging-сервер в офисной сети или оформление заказа с уже добавленными в корзину товарами.

Для таких случаев у HTML to Frames есть бесплатное расширение для Chrome. Оно снимает страницу из вашего собственного браузера — ровно так, как вы её видите, — и передаёт плагину Figma, который превращает её в редактируемые фреймы, текст, векторы и изображения с Auto Layout. В этом руководстве — как перенести localhost в Figma, как снимать страницы за логином и конкретные состояния и что делать, если что-то пошло не так.

Когда использовать расширение для Chrome вместо URL

Источник Link в плагине отрисовывает страницы в изолированном браузере на сервисе захвата HTML to Frames. Этот браузер видит то же, что анонимный посетитель в публичном интернете. Он не может добраться до вашего компьютера, вашей частной сети или вашей авторизованной сессии.

Используйте расширение, когда страница:

• Запущена локально — localhost, 127.0.0.1 или dev-сервер в вашей сети.
• Находится за логином — SaaS-дашборды, админ-панели, настройки аккаунта, клиентские порталы.
• Находится в частной сети — staging-окружения за VPN или внутренние инструменты.
• Находится в определённом состоянии — открытый выпадающий список, заполненная форма, модальное окно, корзина с товарами или сообщение об ошибке после отправки.

Для публичных страниц импорт URL to Figma по-прежнему самый простой путь, и он поддерживает адаптивные наборы в один клик.

Что такое расширение (и чем оно не является)

Расширение работает в вашем браузере. Ему не нужен аккаунт, в нём нет аналитики, и оно не загружает удалённый код. Оно ничего не отправляет в HTML to Frames, если вы не выберете Send to Figma. Даже в этом случае снимок хранится в памяти только до тех пор, пока его не заберёт ваш плагин, максимум 30 минут.

Один снимок считается одним импортом в рамках вашего тарифа. Само расширение бесплатное. Подробнее — на странице расширения для Chrome.

Пошагово: localhost в Figma

1. Установите расширение HTML to Frames для Chrome и закрепите его на панели инструментов.
2. Запустите dev-сервер и откройте страницу в Chrome, например http://localhost:3000/settings.
3. Задайте ширину окна под нужный экран (подробнее ниже).
4. Приведите страницу в нужное состояние: войдите в аккаунт, дождитесь загрузки данных, откройте меню.
5. Нажмите на иконку расширения и выберите захват всей страницы или выбор элемента.
6. Передайте снимок в Figma — через буфер обмена или файл .h2f, либо через Send to Figma.
7. В Figma плагин построит слои и покажет экран результатов с фреймами, слоями, долей Auto Layout и предупреждениями, если они есть.

Страница целиком или отдельный элемент

В расширении два режима захвата.

Захват всей страницы

Это вариант по умолчанию для экранов, которые вы хотите полностью отревьюить или переделать: дашборд, страница настроек, лендинг в разработке. Вы получаете один фрейм страницы с вложенными фреймами, повторяющими DOM.

Выбор отдельного элемента

Часто нужен только компонент: карточка тарифа, навигационная панель, таблица данных, модальное окно. Выберите режим выбора элемента и:

• Наведите курсор на страницу — элемент под курсором подсветится.
• Нажмите ↑, чтобы перейти к родительскому элементу, ↓ — к дочернему.
• Нажмите Enter, чтобы снять подсвеченный элемент.
• Нажмите Esc, чтобы отменить.

Захват элемента — самый быстрый способ собрать референс компонентов из живого продукта или отправить дизайнеру на ревью один виджет без остальной страницы.

Два способа передачи: буфер обмена/.h2f или Send to Figma

Буфер обмена и .h2f

Снимок копируется в буфер обмена или сохраняется файлом .h2f. В Figma откройте плагин, перейдите на вкладку Browser и вставьте. Файл .h2f удобен, когда страницу снимает один человек (скажем, PM с доступом к клиентскому дашборду), а дизайнер импортирует её позже.

Send to Figma

Если вы снимаете часто, один раз свяжите расширение с плагином с помощью одноразового кода. После этого снимки попадают прямо в открытый плагин без шага вставки. Держите плагин открытым в Figma, пока работаете.

Один снимок = один экран в текущей ширине окна

Расширение снимает то, что отрисовывает ваш браузер, поэтому один снимок — это один экран в текущей ширине окна. Если окно шириной 1440 px, вы получите десктопный фрейм 1440.

Чтобы снять другие брейкпоинты, измените размер окна и снимите снова:

• Tablet: сделайте ширину около 768 px и снимите.
• Mobile: сделайте ширину около 390 px и снимите.

Панель устройств в Chrome DevTools удобна для точной установки ширины. Каждый снимок считается одним импортом. Если страница публичная, источник Link в плагине может выдать полный адаптивный набор (Desktop + Tablet + Mobile) за один импорт.

Состояния, которые нельзя воспроизвести по URL

Расширение снимает текущее состояние страницы, а это открывает доступ к экранам, которые иначе утомительно воссоздавать:

• Открытые меню и выпадающие списки. Откройте меню, затем снимите страницу или выберите элемент меню.
• Заполненные формы и ошибки валидации. Заполните поля, отправьте форму, чтобы вызвать ошибки, затем снимите.
• Корзины и оформление заказа. Добавьте товары и снимите корзину с реальными позициями.
• Пустые, загрузочные и заполненные состояния. Снимите один и тот же дашборд с данными и без них для инвентаризации состояний.
• Модальные окна и тосты. Вызовите их и снимите, пока они на экране.

Для продуктовых команд это самый быстрый способ задокументировать в Figma каждое состояние сценария перед редизайном или юзабилити-ревью.

Что переносится

Расширение использует тот же движок конвертации, что и все остальные источники, поэтому вы получаете полный набор возможностей со страницы возможностей: вёрстку, текст со смешанными стилями, градиенты, изображения, SVG в виде редактируемых векторов, обводки, тени, размытие, ::before/::after, поля форм, shadow DOM и порядок z-index.

Auto Layout определяется по измеренной в браузере геометрии и проверяется: позиция каждого дочернего элемента сверяется с точностью до 2 px, и если она не сходится, пробуется более простой план или фрейм сохраняет абсолютные позиции с разумными constraints. В наших тестах Auto Layout определялся примерно на 86–97 процентах фреймов в зависимости от сайта. Если вы сами пишете фронтенд, это руководство по сопоставлению показывает, как писать CSS, который чисто импортируется.

Встроенный контент, который не может стать слоями, — iframe с картами, видео без постера или WebGL-canvas — приходит как скриншот этого блока.

Короткий чек-лист перед захватом

Пройдитесь по этому списку перед каждой сессией захвата, чтобы не переделывать работу:

• Ширина: окно в нужном брейкпоинте, а масштаб браузера — 100%?
• Данные: страница полностью загружена, включая графики, изображения и ленивые секции?
• Состояние: меню, модальные окна или ошибки форм видны ровно так, как нужно в Figma?
• Контент: вы переключились на тестовый аккаунт или тестовые данные там, где иначе были бы реальные данные клиентов?
• Объём: нужна вся страница или для ревью понятнее будет отдельный элемент?
• Передача: открыт ли плагин в Figma, если вы используете Send to Figma?

Две минуты здесь экономят несколько повторных снимков одного и того же экрана.

Конфиденциальность страниц за логином и внутренних страниц

Снять дашборд — значит снять всё, что на нём есть. Несколько практических правил:

• Захват происходит в вашем браузере. Ничего не покидает его, пока вы не вставите снимок в Figma или не используете Send to Figma.
• Send to Figma — временное хранение. Снимок ждёт в памяти, пока его не заберёт ваш плагин, максимум 30 минут, и не записывается на диск.
• Сначала скройте чувствительные данные. По возможности используйте тестовые аккаунты или тестовые данные: всё, что на экране, окажется текстовыми слоями в вашем файле Figma.
• Ваш файл Figma не читается. Плагин только записывает слои и читает метаданные своих фреймов.

Полная политика — на странице безопасности.

Решение проблем

В снимке нет контента, который подгружается позже

Перед захватом дождитесь полной загрузки страницы, включая ленивые секции и графики. Если контент подгружается при прокрутке, один раз прокрутите страницу.

Вёрстка выглядит не так, как я вижу

Проверьте ширину окна: снимок в точности отражает текущую ширину. Также убедитесь, что не применён масштаб браузера.

Send to Figma ничего не делает

Убедитесь, что плагин открыт в Figma. Если вы связывали устройства давно или сменили компьютер, свяжите заново с новым одноразовым кодом. Снимки ждут до 30 минут, поэтому, если открыть плагин в этот промежуток, они всё равно будут доставлены.

Вставка во вкладку Browser не работает

Возможно, буфер обмена перезаписан другим копированием. Снимите заново или сохраните файлом .h2f и загрузите его.

Шрифты выглядят неправильно

Локальные или лицензионные веб-шрифты могут быть не установлены на вашем компьютере. Экран Missing fonts (отсутствующие шрифты) в плагине предлагает замены до построения и запоминает ваш выбор для каждого сайта.

Некоторые фреймы не в Auto Layout

Экран результатов показывает, почему фрейм остался абсолютным. Часто причина — перекрывающийся контент или отрицательные отступы. Фрейм всё равно совпадает со страницей; просто он сохраняет абсолютные позиции с constraints.

Localhost в Figma в процессе разработчика

Для фронтенд-разработчиков расширение превращает передачу дизайна в двустороннюю дорогу:

1. Соберите фичу локально.
2. Снимите новые экраны в десктопной и мобильной ширине.
3. Отправьте их в Figma рядом с исходным дизайном.
4. Дизайнеры ревьюят реальную реализацию, комментируют и вносят правки.
5. Вы исправляете, снимаете заново и сравниваете.

Если вы работаете с ИИ-инструментами, есть и прямой путь: Claude Code, Claude Desktop или Cursor могут отправлять HTML в плагин через MCP. См. AI to Figma через MCP.

С чего начать

Установите расширение для Chrome, откройте локальную сборку и сначала снимите один элемент — карточку или кнопку, — чтобы увидеть, как он переносится. Затем снимите всю страницу в десктопной и мобильной ширине. В документации подробно описаны связывание и вкладка Browser, а на странице цен объясняется, как снимки учитываются в импортах.