FigCopy

Select any element on the page and copy its layout/style tree to paste into the companion Figma plugin.

FigCopy – Instantly copy any website into Figma as editable Auto Layout Tired of manually rebuilding web pages in Figma or paying absurd per-page conversion fees? FigCopy is the ultimate developer-to-design workflow tool. With a single click, capture any element on any live website and paste it directly into Figma as a fully editable, pixel-perfect Auto Layout component—completely free. Whether you are auditing a live production site, migrating a legacy dashboard, or just gathering design inspiration, FigCopy bridges the gap between the browser and your Figma canvas. ✨ How it works: - Install the FigCopy Chrome Extension and the companion FigCopy Figma Plugin. - Click the FigCopy icon in your browser to activate the layout inspector. - Hover over any section, div, or full page on the web and click to capture. - Open your Figma file, run the FigCopy plugin, and paste! 🚀 Key Features: - Native Auto Layout Support: FigCopy doesn't just draw dumb absolute boxes. It intelligently translates CSS Flexbox, block elements, margins, padding, and text alignment into native Figma Auto Layout frames. - Deep CSS Styling: Accurately captures complex CSS properties including gradients, border radii, opacity, nested box-shadows, and inline SVGs. - Custom Forms & Checkboxes: Automatically renders SVG background images and synthesizes native OS checkboxes/radio buttons so form elements look exactly like they do in the browser. - Privacy & Security First: FigCopy runs entirely locally. It never sends your data to an external server. It features strict SSRF protection and automatically ignores sensitive form data like passwords. ⚠️ Requirements: This extension is part of a two-piece workflow. To paste your captured designs, you must also install the free FigCopy Figma Plugin from the Figma Community.