Бесплатное расширение для Chrome
Chrome extension to Figma: страницы за логином и localhost в Figma
Захватывайте то, что показывает ваш собственный браузер, — дашборды, локальные сборки, открытые меню — и превращайте это в редактируемые слои Figma.
- Работает с логинами, localhost и частными сетями
- Захват всей страницы или одного элемента
- Без аккаунта, без аналитики, без удалённого кода
Скоро в Chrome Web Store
Расширение для Chrome закрывает случаи, недоступные импорту по URL. Сервис захвата HTML to Frames посещает страницы как анонимный посетитель, поэтому не видит вашу админку, приложение за логином, сборку на localhost на вашем ноутбуке или staging-сервер в частной сети. Бесплатное расширение HTML to Frames для Chrome делает захват прямо в вашем браузере, используя сессию, в которой вы уже авторизованы.
Оно также захватывает текущее состояние страницы. Если открыт выпадающий список, форма заполнена наполовину, показано модальное окно или в корзине три товара — именно это и попадёт в Figma. Для продакт-менеджеров, документирующих сценарии, и дизайнеров, проводящих аудит реальных состояний, это часто единственный практичный способ перенести такие экраны в дизайн-файл, не перерисовывая их.
Можно захватить всю страницу или переключиться в режим выбора элемента и взять отдельный компонент. Наведите курсор для подсветки, стрелками переходите к родительскому или дочернему элементу, нажмите Enter для захвата и Esc для отмены. Захват копируется в буфер обмена или сохраняется в файл .h2f, и вы вставляете его во вкладку Browser плагина. Или один раз свяжите расширение с плагином по одноразовому коду и используйте Send to Figma — захваты будут попадать прямо в открытый плагин.
Получившиеся слои такие же, как при любом другом импорте: редактируемый текст, векторы, изображения и проверенный Auto Layout. Один захват считается одним импортом.
Фронтенд-разработчики найдут полное пошаговое руководство в статье localhost в Figma с помощью расширения для Chrome. Для публичных страниц URL to Figma вообще не требует расширения, а на странице безопасности точно описано, что отправляет расширение.
Захват вкладки с помощью расширения
- 01
Установите расширение для Chrome
Добавьте бесплатное расширение HTML to Frames в Chrome — аккаунт не нужен.
- 02
Откройте страницу в нужном состоянии
Войдите в аккаунт, запустите локальный сервер, откройте меню или заполните форму ровно так, как хотите захватить.
- 03
Захватите страницу или элемент
Возьмите всю страницу или с помощью инструмента выбора подсветите и выберите один элемент.
- 04
Вставьте или отправьте в Figma
Вставьте во вкладку Browser плагина или используйте Send to Figma после однократной привязки по одноразовому коду.
Куда может дотянуться расширение
Страницы за логином
Дашборды, админ-панели и страницы аккаунта захватываются в уже открытой у вас сессии.
localhost и частные сети
Локальные dev-серверы, staging и страницы интранета, недоступные внешнему сервису.
Точные состояния UI
Открытые меню, заполненные формы, модальные окна и корзины захватываются такими, какие они на экране.
Выбор элемента
Наведите для подсветки, стрелками вверх и вниз переходите между родителем и потомком, Enter — захват.
Send to Figma
Один раз привяжите расширение по одноразовому коду — и захваты пойдут прямо в открытый плагин.
Приватность по умолчанию
Без аккаунта, аналитики и удалённого кода; ничего не отправляется, пока вы не используете Send to Figma.
localhost в Figma для фронтенд-разработчиков
Разработчикам часто нужно показать дизайнерам, что на самом деле сверстано, или перенести закодированный прототип в Figma на ревью. Обычные варианты — скриншоты, которые никто не может отредактировать, или ручная пересборка экрана. Расширение даёт третий путь: захватить localhost напрямую.
Поскольку оно работает в вашем браузере, расширение видит ровно то, что рендерит ваш dev-сервер, включая:
- Фича-ветки, которые ещё нигде не задеплоены
- Страницы, зависящие от локальных данных или замоканных API
- Staging-окружения за VPN или в частной сети
- Песочницы компонентов и изолированные story-страницы
Используйте выбор элемента, чтобы захватить один компонент, а не всю страницу. Подсветите его, нажмите стрелку вверх, чтобы перейти к контейнеру, если нужны отступы, и нажмите Enter. В результате получится фрейм с Auto Layout, выведенным из отрендеренного CSS: flexbox-строка придёт как горизонтальный фрейм с Auto Layout, со своими gap и padding.
Так передача макетов становится двусторонней: дизайнеры получают редактируемые фреймы реальной реализации и могут комментировать или корректировать то, что вышло в релиз. Руководство по переносу CSS flexbox и grid в Auto Layout показывает, как сопоставляются раскладки.
Вставка или Send to Figma
Перенести захват из Chrome в Figma можно двумя способами, и оба дают одинаковые слои.
Вставка
После захвата результат помещается в буфер обмена. Переключитесь в Figma, откройте HTML to Frames, перейдите на вкладку Browser и вставьте. При желании сохраните захват в файл .h2f и загрузите его в плагин позже. В этом сценарии ничего не покидает ваш компьютер.
Send to Figma
Один раз свяжите расширение с плагином по одноразовому коду. После этого каждый захват попадает прямо в открытый плагин без шага с буфером обмена — это быстрее, когда вы снимаете несколько состояний подряд.
При Send to Figma захват хранится в памяти на нашей стороне, пока его не заберёт ваш плагин, — не дольше 30 минут. На диск он не записывается.
| Вставка | Send to Figma | |
|---|---|---|
| Настройка | Не нужна | Одноразовый код привязки |
| Данные покидают компьютер | Нет | Хранятся в памяти до 30 минут |
| Лучше всего для | Редких захватов | Быстрого захвата многих состояний |
В любом случае один захват считается одним импортом по вашему тарифу, а слои получаются идентичными.
Что расширение делает и чего не делает с вашими данными
Расширение, способное читать страницы за логином, заслуживает пристального внимания. Расширение HTML to Frames для Chrome спроектировано так, чтобы делать как можно меньше:
- Работает в вашем браузере. Захват выполняется локально со страницы, которую вы просматриваете.
- Без аккаунта. Регистрироваться и входить не нужно.
- Без аналитики. В расширении нет отслеживания использования.
- Без удалённого кода. Расширение не загружает и не выполняет код с сервера.
- По умолчанию ничего не отправляется. Данные попадают к нам, только если вы выберете Send to Figma, и тогда они ждут ваш плагин в памяти не дольше 30 минут.
Захват включает только то, что есть на выбранной вами странице. Прежде чем захватывать страницу с персональными данными или данными клиентов, подумайте, должны ли они оказаться в общем файле Figma, и используйте выбор элемента, чтобы взять только нужную часть.
На стороне Figma плагин не читает содержимое вашего файла. Он создаёт новые слои и читает только метаданные собственных фреймов. Полная схема описана на странице безопасности, а установка и привязка — в документации. Расширение готовится к публикации в Chrome Web Store.
Частые вопросы
Импорт по URL загружает страницы с нашего сервиса захвата как анонимный посетитель, поэтому не может попасть на страницы за логином, localhost или в частные сети и всегда видит состояние по умолчанию. Расширение делает захват в вашем браузере — с вашей сессией и в том состоянии, в котором находится страница.
Да. Переключитесь на выбор элемента, наведите курсор, чтобы подсветить элемент, стрелкой вверх перейдите к родителю или стрелкой вниз — к потомку, и нажмите Enter для захвата. Esc — отмена. Элемент придёт отдельным фреймом с редактируемыми слоями.
Один раз свяжите расширение с плагином по одноразовому коду. После этого каждый захват доставляется прямо в открытый плагин. Захват ждёт в памяти не дольше 30 минут, пока плагин его не заберёт, и никогда не записывается на диск.
Нет. У него нет аккаунта, аналитики и удалённого кода. Оно ничего не отправляет нам, пока вы не используете Send to Figma для захвата. Если вы вставляете вручную, захват проходит через буфер обмена или файл .h2f и никогда не покидает ваш компьютер.
Да. Каждый захват из расширения считается одним импортом по вашему тарифу. Тариф Free включает 10 импортов в месяц, а Pro и Team — без ограничений в рамках добросовестного использования. Счётчики сбрасываются ежемесячно по UTC, и каждый захват учитывается только один раз.
Да. Само расширение HTML to Frames для Chrome бесплатное и не требует аккаунта. Захваты импортируются через плагин Figma и учитываются в вашем тарифе, начиная с бесплатного Free. Расширение готовится к публикации в Chrome Web Store.
По теме
Хватит перерисовывать веб вручную.
Вставьте ссылку и за секунды получите настоящие редактируемые адаптивные слои Figma. Начать можно бесплатно — 10 импортов каждый месяц.
Без банковской карты. Pro покупается прямо в Figma.
Скоро в Figma Community