writing/news/2026/06
NewsJun 12, 2026·6 min read

Figma's New Chrome Extension Turns Any Website Into Editable Design Layers

Figma launched a Chrome extension that captures live webpages and pastes them into Figma as fully editable layers — frames, text, images, and shapes — closing the loop between AI-generated sites and design tools. The beta is limited to paid plans.

Figma released an official Chrome extension on June 11, 2026 that captures any live webpage — or a specific element on it — and pastes it into Figma as fully editable design layers. Instead of a flat screenshot, designers get real frames, text layers, images, and shapes they can move, restyle, and rebuild on the canvas. The capture tools are in beta and currently available only to users on paid plans.

Key Highlights

  • Capture a full webpage, including content scrolled out of view, or select a single element such as a hero section, card, or button
  • Captures are copied to the clipboard and pasted directly into Figma Design or FigJam with a standard paste shortcut
  • Content arrives as structured Figma layers — frames, text, images, and shapes — not a static image
  • Figma teased a follow-up capability: generating designs that use your own design system tokens and components
  • The beta is restricted to paid plans; other extension features remain available to everyone

Details

The workflow is deliberately simple. After installing the extension from the Chrome Web Store, users click "Select element" to highlight and grab a region of a page, or "Capture page" to take the entire document. Each capture lands in a tray in the toolbar and is automatically copied to the clipboard, ready to paste into a Figma file.

According to Figma's documentation, captures come in as plain layers and are not automatically mapped to a team's library components or variables — at least not yet. In a post on X, the company said that generating designs using your own design system is "coming soon," which would turn raw captures into system-aware components.

The beta has known limitations. Sites that rely on heavy JavaScript animation, canvas rendering, or virtualized lists may not translate cleanly, and privileged browser pages cannot be captured at all.

Impact

The launch directly threatens a cottage industry of third-party converters — tools like html.to.design and similar Chrome extensions built precisely around the website-to-Figma gap. What was once a paid plugin niche is now a first-party feature.

More strategically, the extension addresses a workflow problem created by AI coding tools. As one designer noted on X, teams increasingly bypass Figma by generating sites directly with AI agents — but those generated interfaces could not easily flow back into Figma for design teams to polish. With this extension, an AI-generated page becomes editable design material in one paste, completing a round trip from prompt to code to canvas and back.

The release also sparked debate. Some designers celebrated the speed gain for competitive analysis and redesign work, while others raised concerns about how easily production interfaces from any company can now be lifted, edited, and reused.

What's Next

Figma says design-system-aware generation is coming to the extension, which would map captured layers onto a team's existing components and variables. For now, the capture tools remain Chrome-only and in beta, with availability tied to paid plans. Designers can install the extension from the Chrome Web Store and start pasting the web into their files today.


Source: Figma