Media
2 items
Description
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.