HTML to Figma Capture

Turn any live web page into an editable Figma design. HTML to Figma Capture snapshots the page you're viewing — layout, styles, text, images, and SVG icons — and saves it as a single .h2f.json file. Import that file with the companion "Web Importer (HTML to Figma)" Figma plugin and the page is rebuilt as real Figma layers: frames with Auto Layout, editable text with correct fonts and styling, image fills, gradients, shadows, and per-corner radius. Figma Plugin: https://www.figma.com/community/plugin/1667658322938830535/html-to-figma-web-importer WHAT MAKES IT DIFFERENT • Responsive breakpoints. Capture the same page at Mobile, Tablet, Laptop, Desktop, or any custom width in one pass. Each breakpoint imports as its own labeled frame, side by side, so you can see exactly how the design responds. Media queries, srcset images, and mobile layouts are captured the way they actually render. • Real Auto Layout. Containers convert to Figma Auto Layout with spacing, padding, and alignment measured from the rendered pixels — not guessed from CSS. Cards grow when their content grows, buttons hug their labels, and uneven gaps are preserved exactly. • One text layer per sentence. Styled inline runs (bold spans, links, colored fragments) merge into single text layers with per-range styling, so text wraps naturally and stays editable. • Clean captures. Hidden hover states, off-screen carousel slides, and other invisible animation scaffolding are automatically excluded. PRIVACY Everything runs locally in your browser. The capture is saved as a file on your computer and nothing is ever uploaded to a server. The extension has no analytics, no tracking, and no backend. HOW TO USE Open the page you want to capture and click the extension icon. Pick your breakpoints (widths are editable and remembered). Click "Capture this page" — a .h2f.json file downloads. In Figma, run the Web Importer plugin and drop the file in. Requires the free companion Figma plugin "Web Importer (HTML to Figma)".