Figma | Capture webpages as editable design layers
Figma has added webpage capture tools to its official Chrome extension. Released in beta on June 11, 2026, the feature lets designers copy an entire webpage or selected interface elements and paste them into Figma as structured, editable layers instead of a flat screenshot.
Figma brings production webpages back to the design canvas
The Figma Chrome extension can now capture the current state of a live website and convert its visual structure into Figma layers. The resulting content can include frames, text, images, shapes, and other elements that designers can move, edit, annotate, or restyle inside Figma Design and FigJam.
This provides a faster starting point for redesigns, interface reviews, moodboards, and prototype experiments. Instead of recreating a shipped page manually or relying on a screenshot, designers can work with a layered representation of what is already in production.
Capture a full webpage or select individual elements
After installing the extension and signing in with a Figma account, users can open its capture toolbar on a regular webpage. The Capture page option copies the complete page, including areas currently outside the visible browser window.
The Select element option provides more control. Designers can hover over the page and capture a specific hero section, card, button, navigation area, modal, or other interface region without importing everything around it. Each captured item is added to the extension tray and copied automatically to the clipboard.
Captured content can be edited and restyled in Figma
The captured content can be pasted into a Figma Design file or FigJam board with the standard paste command. Because it arrives as design layers rather than one flattened image, individual elements can be repositioned, recolored, annotated, or used as the foundation of a new design exploration.
This can help teams compare a proposed redesign with the current production interface, collect examples from real websites, or examine patterns without rebuilding every reference from the beginning. The layers can also be sent from Figma Design to Figma Make as the starting context for a prototype.
What designers should expect from the beta
The capture feature does not currently map imported elements to components, styles, or variables from a Figma design system. Captures arrive as ordinary layers, so designers still need to replace elements with the appropriate library components and reconnect design tokens manually when preparing production-ready work.
Complex websites may also produce imperfect results. Heavy JavaScript animation, scroll-driven effects, virtualized lists, and content rendered through <canvas> may not translate cleanly. Figma recommends capturing a specific element when a full-page result does not preserve the expected structure.
IMPORTANT: Webpage capture is currently in beta and available only to users on paid Figma plans. It cannot capture internal chrome:// pages, the Chrome Web Store, or other privileged browser pages.{alertWarning}
Daisuki's Take: What This Means for Web Designers
For web designers, this feature shortens the distance between the published website and the design file. A live interface can be brought back to the canvas for an audit, redesign, presentation, or experiment without first reconstructing every section manually.
We think its strongest use is as a starting point rather than a finished conversion. Editable layers make references easier to study and modify, but the imported structure still needs review for responsive behavior, reusable components, accessibility, and alignment with the project's design system.
The practical takeaway is to capture only what the task needs. A specific component or page section will often produce a cleaner working reference than a complex full-page import, especially while the feature remains in beta.
Sources and Recommended Links
- Capture webpages as editable layers with the Chrome extension | Figma Official Release Notes
- Turn webpages into editable design layers | Figma Official Help Center
- Figma Chrome extension | Chrome Web Store
