HTML to Editable Design — Page Capture

About

HTML to Editable Design — Page Capture

Capture any webpage straight from your browser with higher accuracy, keeping layout, styles, and visual details intact. The captured page is saved as a self-contained file you can import into the HTML to Editable Design Figma plugin to convert into editable Figma layers — frames, text, images, and shapes.

This extension is the companion tool for the Figma plugin. While the plugin alone can fetch simple pages from a URL, this extension captures pages exactly as you see them in your browser, including content that only appears after the page has loaded.


HOW IT WORKS

1. Install this extension and pin it to your Chrome toolbar.
2. Open any webpage you want to capture.
3. Click the extension icon and press Capture Page.
4. The page is saved as a .hted file in your Downloads folder.
5. Open Figma, run the HTML to Editable Design plugin, go to the File tab, and import the file.
6. Click Export to Figma. Editable layers appear on your canvas.


WHAT GETS CAPTURED

• The full rendered DOM (the page as you see it on screen)
• All CSS styles inlined for self-contained output
• Fonts, colors, spacing, and layout
• Images (optionally embedded as data URIs for offline-safe files)
• SVGs and inline graphics


WHY USE THIS EXTENSION

Some webpages render entirely with JavaScript, meaning the raw HTML you'd download with a normal request is empty or incomplete. This extension waits until the page has fully rendered in your browser, then captures the live result. The output is faithful to what you saw on screen.


PRIVACY

Everything happens locally in your browser. The extension does not send your personal data, browsing history, or captured content to any server controlled by us or any third party. The captured file is saved directly to your computer. To produce a self-contained capture, the extension may fetch stylesheets, fonts, and images from the same servers the page already loads from — these requests do not include any personal information about you. See the privacy policy linked in the listing for full details.


PERMISSIONS EXPLAINED

• activeTab — Access the page you're currently viewing when you click the extension icon.
• scripting — Inject the capture script into the active page to read its rendered content.
• downloads — Save the captured file to your Downloads folder.
• host_permissions (all_urls) — You decide which page to capture by clicking the icon; the extension does not read pages in the background.


REQUIREMENTS

• The HTML to Editable Design Figma plugin
• A Figma account


SUPPORT & FEEDBACK

Found a bug or want to suggest a feature? Email [email protected]