Figma Chrome Extension Lets Designers Copy Live Websites Into Editable Layers.

Figma has released a Chrome extension that allows designers to copy live websites directly into editable layers inside the design tool. The feature, announced on LinkedIn, eliminates the need for manual reconstruction when reverse-engineering existing interfaces or borrowing patterns from production sites.

The extension bridges the gap between browser and canvas. Where designers previously captured static screenshots and manually traced elements, they can now select any portion of a webpage and transfer it to Figma with layer hierarchy intact. Text remains editable, images are preserved as assets, and layout structure maps to Figma's auto layout and frame system.

This capability speeds workflows for teams auditing competitor interfaces, documenting legacy systems, or adapting patterns from live products. Rather than estimating spacing and reconstructing component trees, designers work with the actual DOM structure translated into native Figma objects.

The extension appears alongside recent moves to tighten the loop between code and design. Last month, Figma introduced drag-to-reorder grid controls and added local code editing support in Figma Make, its emerging code-to-design product. The company is positioning itself not just as a prototyping tool but as a bridge layer between production interfaces and design iteration.

Figma also teased an upcoming feature: generating designs using your existing design system. While details remain sparse, the implication is that the tool will analyze component libraries and design tokens to produce new screens or variations that adhere to established patterns. This would mark a shift from manual assembly to AI-assisted composition, where designers describe intent and Figma constructs layouts using approved components.

The timing aligns with broader industry momentum around generative UI tools. Products like v0 and Lovable already generate code from prompts, while tools like Cursor and Windsurf assist developers in refactoring existing codebases. Figma's angle appears to be integration with design systems, ensuring generated output matches brand guidelines and component inventories rather than producing arbitrary UI from scratch.

The Chrome extension and forthcoming design system generation suggest Figma is investing in two-way sync between production and prototype. Designers can now pull from live sites, and soon may generate new work constrained by system rules. Combined with codebase integration in Figma Make, the platform is edging toward a model where design files and code repositories remain loosely coupled but continuously aware of each other.

For teams using Webflow, Framer, or other visual development platforms, this could reduce friction when translating prototypes into production. The extension provides a way to audit what's live, while generative tools promise faster iteration within known constraints.

The Chrome extension is available now. Design system generation remains in preview, with no public release timeline yet disclosed.