html2design

Capture a whole web page or just a selected area as an editable Figma design.

html2design converts any web page into an EDITABLE Figma design — not a flat screenshot. Pages are rebuilt as real frames, text, images and vector nodes, so you can tweak colors, copy and layout right inside Figma. ■ How it works 1. Open the html2design plugin in Figma and click "Connect" to get a 6-digit code. 2. On the page you want to capture, click the extension icon and enter that code. 3. Hit Capture — the page's DOM, styles and layout are read accurately, sent straight to the Figma plugin, and rendered as an editable design. ■ What it reproduces • Layout (exact position & size), text (font, weight, color, alignment) • Images, background colors / gradients / background images • Borders (incl. asymmetric widths), rounded corners, shadows, opacity, overflow clip • Merged capture across iframes / shadow DOM • Inline SVG → editable vectors • Large pages are streamed in chunks automatically ■ Figma plugin options • Auto Layout generation ■ Pricing • Free: 5 conversions per month (no sign-up required) • Pro: $5/month — unlimited conversions, works on all your devices via Google sign-in, cancel anytime. Payments are securely handled by Paddle (Merchant of Record). ■ Privacy • No personal data is collected for free users; usage counts stay in your browser. • Only when you subscribe to Pro do we store minimal account info (Google user ID, email) and subscription status via Google sign-in. The sign-in uses identity-only scopes (openid email profile). • No analytics/tracking/ad IDs. • Capture data only PASSES THROUGH a relay (never stored; relayed and discarded immediately), exchanged only between parties sharing the 6-digit pairing code, over TLS (wss://). ■ Permissions To extract accurate styles/layout it uses the Chrome DevTools Protocol (chrome.debugger) to read a DOM snapshot of the current tab. Chrome shows a "being debugged" banner during capture and it is released as soon as capture ends. The data read is only sent to your Figma plugin and nowhere else. Requires: this extension + the html2design plugin for Figma. Figma plugin: https://www.figma.com/community/plugin/1657063496726706112