Export webpages to Figma

How the local workflow works

CloneWebsite does not send a webpage to a conversion server. The Chrome extension reads the rendered page in your active tab, creates a versioned .cdesign archive in memory, and downloads or stores it locally. The CloneWebsite Figma plugin opens that file and creates layers in the current Figma document.

Rendered webpage → Chrome extension → local .cdesign file → Figma plugin → editable layers

The .cdesign file is an open ZIP-based container. It contains a manifest, one JSON scene file per captured state, and content-addressed image assets.

Capture a page or component

1. Open the webpage and wait for its content and web fonts to finish rendering.
2. Open the CloneWebsite toolbar and change the output from Website to Figma.
3. Choose Clone Page or Clone Component.
4. Open the Figma capture options and choose viewport and theme combinations. The initial setting captures the current viewport and current theme. You can add 1440, 768, and 390 pixel viewports and light or dark themes, up to six combinations.
5. Keep Enhanced capture enabled when you need responsive viewports, component interaction states, iframe/filter raster fallbacks, or more accurate browser geometry.
6. Select Start. For component mode, click the component on the page and confirm the selection.
7. Download the resulting .cdesign file, or save it in the extension's local project list for later download.

Chrome debugger permission

Chrome does not support declaring the debugger permission as optional, so it is granted when the extension is installed. CloneWebsite only attaches the debugger when you start a Figma capture with Enhanced capture enabled. It is used temporarily to emulate viewport/theme combinations, force supported component pseudo states, and create local screenshots for unsupported visual subtrees. The extension detaches from the tab when capture finishes or fails.

When Enhanced capture is turned off, the extension does not attach the debugger. Basic mode captures the current viewport, current theme, and the Default component state. The capture report explains which enhanced scenes or fallbacks were skipped.

Chrome DevTools and another debugger client cannot control the same tab at the same time. Close DevTools for that tab if enhanced capture reports an attach error.

Import into Figma

During the internal release phase:

1. Build the plugin from figma_plugin/ with pnpm install && pnpm build.
2. In Figma Desktop, choose Plugins → Development → Import plugin from manifest….
3. Select figma_plugin/manifest.json.
4. Run CloneWebsite Design Importer.
5. Drop the .cdesign file, select the scenes to import, and start the import.

The plugin has no network permission. Archive parsing, image creation, font matching, and layer generation happen inside Figma on your device.

What remains editable

• Frames, fills, borders, corner radii, shadows, and basic blend modes
• Text content, font size, line height, alignment, decoration, and color
• Image and SVG layers
• High-confidence Flexbox layouts as Figma Auto Layout
• Selected components as Figma components
• Default, Hover, Focus, Active, and Disabled component states as variants when enhanced capture can map the selected component

Grid and freeform page regions use absolute positioning to preserve geometry. Complex filters, masks, iframes, video surfaces, and unsupported browser effects may become local raster fallback layers.

Fonts and import reports

Figma plugins cannot install a webpage's remote web font into the editor. The importer first looks for the requested family and style among fonts available to Figma. If it cannot load an exact match, it uses an editable local fallback and lists the substitution in the import report.

The report also lists missing assets, raster fallbacks, skipped unsafe SVG markup, node limits, and capture warnings. Review it before treating the imported file as a production design source.

Privacy and responsible use

Page content is not uploaded to CloneWebsite. Network requests during capture are limited to downloading resources already referenced by the page, plus an optional BYOK AI endpoint if you separately configured that feature. See the extension privacy policy.

Only capture pages you are authorized to access. The original site's copyright, trademarks, personal data, and design rights remain with their owners.