Экспорт веб-страниц в Figma

Как работает локальный рабочий процесс

CloneWebsite не отправляет веб-страницу на сервер конвертации. Расширение Chrome считывает отрисованную страницу в активной вкладке, создает версионный архив .cdesign в памяти и скачивает или сохраняет его локально. Плагин Figma для CloneWebsite открывает этот файл и создает слои в текущем документе Figma.

Отрисованная веб-страница → расширение Chrome → локальный файл .cdesign → плагин Figma → редактируемые слои

Файл .cdesign — это открытый ZIP-контейнер. Он содержит манифест, по одному JSON-файлу сцены на каждое захваченное состояние и изображения, адресованные по содержимому.

Захват страницы или компонента

1. Откройте веб-страницу и дождитесь завершения отрисовки контента и веб-шрифтов.
2. Откройте панель инструментов CloneWebsite и переключите вывод с Веб-сайт на Figma.
3. Выберите Клонировать страницу или Клонировать компонент.
4. Откройте параметры захвата Figma и выберите комбинации вьюпорта и темы. Начальная настройка захватывает текущий вьюпорт и текущую тему. Вы можете добавить вьюпорты 1440, 768 и 390 пикселей и светлую или тёмную тему, до шести комбинаций.
5. Оставьте Расширенный захват включенным, когда вам нужны адаптивные вьюпорты, состояния взаимодействия компонентов, растровые резервные слои для iframe/фильтров или более точная геометрия браузера.
6. Выберите Начать. В режиме компонента щелкните компонент на странице и подтвердите выбор.
7. Скачайте полученный файл .cdesign или сохраните его в локальном списке проектов расширения для последующего скачивания.

Разрешение отладчика Chrome

Chrome не поддерживает объявление разрешения debugger как опционального, поэтому оно предоставляется при установке расширения. CloneWebsite подключает отладчик только при запуске захвата Figma с включенным Расширенным захватом. Он временно используется для эмуляции комбинаций вьюпорта/темы, принудительного задания поддерживаемых псевдосостояний компонентов и создания локальных скриншотов для неподдерживаемых визуальных поддеревьев. Расширение отключается от вкладки при завершении или сбое захвата.

Когда Расширенный захват отключен, расширение не подключает отладчик. Базовый режим захватывает текущий вьюпорт, текущую тему и состояние компонента Default. Отчет о захвате поясняет, какие расширенные сцены или резервные слои были пропущены.

Chrome DevTools и другой клиент отладчика не могут одновременно управлять одной и той же вкладкой. Закройте DevTools для этой вкладки, если расширенный захват сообщает об ошибке подключения.

Импорт в Figma

На этапе внутреннего релиза:

1. Соберите плагин из figma_plugin/ с помощью pnpm install && pnpm build.
2. В Figma Desktop выберите Plugins → Development → Import plugin from manifest….
3. Выберите figma_plugin/manifest.json.
4. Запустите CloneWebsite Design Importer.
5. Перетащите файл .cdesign, выберите сцены для импорта и начните импорт.

У плагина нет разрешения на сеть. Разбор архива, создание изображений, сопоставление шрифтов и генерация слоев происходят внутри Figma на вашем устройстве.

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

• Кадры, заливки, границы, радиусы углов, тени и базовые режимы наложения
• Текстовое содержимое, размер шрифта, высота строки, выравнивание, оформление и цвет
• Слои изображений и SVG
• Высоконадежные Flexbox-макеты как Figma Auto Layout
• Выбранные компоненты как компоненты Figma
• Состояния компонента Default, Hover, Focus, Active и Disabled как варианты, когда расширенный захват может сопоставить выбранный компонент

Области страницы Grid и произвольной формы используют абсолютное позиционирование для сохранения геометрии. Сложные фильтры, маски, iframe, видео-поверхности и неподдерживаемые эффекты браузера могут стать локальными растровыми резервными слоями.

Шрифты и отчеты об импорте

Плагины Figma не могут установить удаленный веб-шрифт страницы в редактор. Импортер сначала ищет запрошенное семейство и стиль среди шрифтов, доступных в Figma. Если не удается загрузить точное совпадение, он использует редактируемый локальный резерв и перечисляет замену в отчете об импорте.

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

Конфиденциальность и ответственное использование

Содержимое страницы не загружается в CloneWebsite. Сетевые запросы во время захвата ограничены скачиванием ресурсов, уже упомянутых на странице, плюс опциональный BYOK AI-эндпоинт, если вы отдельно настроили эту функцию. См. политику конфиденциальности расширения.

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