Figma's code layers run real code on the canvas, and Figma's AI can write that code for you. The hard part is telling the AI what the page actually looks like and does. Describe it in a sentence and you get a guess. Give it the page's real layout, colours, type and interactions and you get the page.

This guide shows how to do that with WebCapture's Copy for LLM: capture a live page, optionally record a click-through flow, and paste the result into a code layer's AI chat.

What you need

• The WebCapture Chrome extension.
• A Figma file where code layers are available on your plan.
• The page open in Chrome. It can be public, behind a login, or on your own machine.

Step by step

1. Open the page in Chrome and close any cookie banner or popup, so it isn't part of the brief.
2. Record a flow, if you want the layer to be interactive. Press Record flow in WebCapture and click through what should work: open a menu, switch a tab, answer a question. Press Stop when you're done. See recording a website user flow.
3. Press Copy for LLM. WebCapture puts a brief on your clipboard: the page's layout tree, colours, fonts, every icon as SVG markup, each hover, transition and keyframe animation, and the recorded steps.
4. In Figma, create a code layer and open its AI chat. Paste the brief and send it.
5. Let it build, then press play. Hover the buttons, and click through the steps you recorded.

In our own test, we recorded a 9-step flow on an interactive maths lesson: a wrong answer, then the right one. The brief was 76 KB. The code layer Figma's AI built from it showed the lesson's real colours and tiles, and played the recorded steps, including the wrong-answer state.

Keep it a reproduction, not a redesign

An AI with design skills will sometimes "improve" a page: a new colour scheme, a different font, reworded copy, an extra feature. The brief asks for an exact rebuild, but if the result drifts, say so plainly:

• "Keep the colours, fonts and copy exactly as in the brief. This is a reproduction, not a redesign."
• "Don't add anything the brief doesn't describe."

Two more tips. Build one screen first and check it before asking for the flow, since small fixes are easier early. And if the page's images live behind a login, they may not load inside the code layer; swap them for uploaded copies.

What carries over

• Layout: every element's box, so the rebuild matches the page's spacing.
• Look: the exact colours, gradients, borders, shadows and corner radii.
• Type: font families, sizes, weights and line heights. Fonts that aren't on Google Fonts fall back to a similar one unless the AI is given the files.
• Icons: the page's own SVG markup, not look-alikes.
• Behaviour: hover states, transitions, keyframe animations, and each recorded step with what it showed, hid or changed.

AI rebuild or exported code layer?

There are two ways to put a captured page in a code layer, and they suit different jobs:

• Built by AI from the brief: new, readable code you can edit and extend in the code layer's chat. Best for prototypes you want to change.
• Exported from the WebCapture plugin: the captured page itself, running as it was captured, with no AI rewriting it. Best when it must match the page exactly. See turning a website into a code layer.

FAQ

Does it work with Claude or ChatGPT instead?

Yes. The same brief works in any AI chat that can write HTML and CSS. See rebuilding a website with Claude.

Do I need to record a flow?

No. Without one, the brief still carries hover states and animations. A recorded flow adds the click-through steps.

Can I use a page I'm logged in to?

Yes. The extension captures the page in your own browser, so a dashboard or a lesson behind a login works. Images that need your login may not load in the code layer.

Why does the AI version look slightly different from the page?

The AI writes new code from a description, so small differences are normal, and custom fonts may be substituted. For a pixel-faithful copy, use the plugin's code-layer export instead.

Turn a live page into a working code layer: add WebCapture to Chrome, then Copy for LLM. New to WebCapture? Start with website to Figma.

Yes. Figma has no "open this URL" command in its File menu, but a live web page can become editable Figma layers: frames, real text, images and vector icons, not a flat screenshot. There are four ways to do it, and the right one depends on where the page is and what you want to do with it.

The short answer

• A public page: paste its URL into a Figma plugin.
• A page behind a login, or on your own machine: capture it with a browser extension.
• A page you want to click through in Figma: turn it into a code layer.
• Only a screenshot: you can trace it or use AI, but you won't get the page's real structure.

Four ways to get a website into Figma

1. A plugin that fetches the URL

You paste an address into a plugin inside Figma, it renders the page in a remote browser, and the layers land in your file. The WebCapture plugin works this way, and lets you pick Desktop, Tablet or a real phone width before you fetch. It's the quickest route for public pages. See URL to Figma.

2. A browser extension that captures the page you're on

A remote browser can't log in to your account, see a staging site behind a password, or reach localhost. A browser extension can, because it captures the page in your own browser, exactly as you see it. The WebCapture Chrome extension also records hover states and animations, and can record a click-through flow. See logged-in pages to Figma.

Figma also has a Chrome extension of its own for this, part of its Code to canvas feature. Figma's help centre notes that its captures aren't mapped to library components, and that heavy JavaScript animation and canvas-drawn content may capture imperfectly.

3. A code layer that runs the page

Figma's code layers run real HTML, CSS and JavaScript on the canvas, so a captured page can keep working: hovers respond, animations play, and a recorded flow can be clicked through. You can build one from WebCapture's export, or by giving the capture to Figma's AI. See turning a website into a code layer and building a code layer with AI.

4. A screenshot, traced or given to AI

Pasting a screenshot is instant, but it's one flat image. Tracing it by hand takes hours, and AI that redraws a screenshot has to guess the fonts, spacing and colours. Use this only when the page itself is out of reach.

What comes across, and what doesn't

A good import brings:

• Layout, each element at the size and position the browser drew it.
• Real text, with the page's fonts matched to the fonts you have in Figma.
• Images, and SVG icons as vectors you can recolour.
• Colours, gradients, borders, shadows and corner radii.

What a frame can't hold:

• Behaviour. A frame doesn't hover or animate. WebCapture records those with the layers, and a code layer plays them.
• Fonts you don't have. Figma can only use installed fonts, so missing ones fall back to a default.
• Some videos and canvas drawings, when the browser doesn't let a capture read them.
• Content that only appears after you click, unless you open it before capturing.

Common questions

Can you import the mobile version of a website?

Yes, if the tool renders the page at phone width with a real mobile browser profile. Many sites serve a different layout to phones, and resizing a desktop capture won't show it. See importing a mobile website into Figma.

Can you import a page you have to log in to see?

Yes, with a browser extension, since it captures what's already open in your browser. A URL-fetching plugin can't sign in.

Does it work with Webflow, Framer and Shopify sites?

Yes. Each has a few quirks, such as appear effects, custom fonts and popups. See Webflow to Figma, Framer to Figma and Shopify to Figma.

Can you import HTML code rather than a live site?

Yes. Open your local dev server in Chrome and capture the page with the extension. For a file:// page, first turn on Allow access to file URLs for WebCapture on Chrome's extensions page. See HTML to Figma.

Is it legal to import someone else's website?

Capturing a public page for reference, research, or work you have permission for is common practice. Republishing someone else's design, copy or images as your own is not. When in doubt, ask the site's owner.

Do the layers become components?

Not automatically. You get frames, text, images and vectors, named after the page's elements. Turning repeated parts into components is a step you do in Figma.

Try it on a page you know: install the WebCapture plugin for public pages, or add the Chrome extension for everything else. The full walkthrough is in website to Figma.

Redesigning a Shopify theme usually starts with a store that's already live, and often with no Figma file that matches it. Importing the store gives you its real layout, type and images to design on, instead of screenshots to trace.

This guide shows how to bring a Shopify store into Figma as editable layers with WebCapture, using a real capture of the Allbirds store, which runs on Shopify, as the example.

How to import a Shopify store

A live store

1. Open the WebCapture plugin in Figma.
2. Paste the store's address: its own domain or its .myshopify.com address. A collection or product page works as well as the home page.
3. Choose Desktop, Tablet or Mobile, and press Fetch.

The page is rendered in a remote browser and imported straight into your file. Fetching runs on Apify, so add your own Apify API token once; a free Apify account is enough to start.

A password-protected store, or a theme preview

Development stores sit behind a storefront password, and an unpublished theme is only visible in a preview. A remote browser can't see either. Open the page in Chrome instead, and capture it with the WebCapture Chrome extension, which takes the page exactly as you see it. The same goes for a store that blocks automated browsers: if Fetch fails, capture it with the extension.

What came across from the Allbirds store

We captured the Allbirds home page at 1440px wide on 2 November 2026. The page is 3,662px tall, and the capture held:

• 623 layers: 111 text layers, 17 images and 24 vector icons.
• 13 hover states and 58 links, which the plugin can carry over as prototype connections.
• 7 pinned elements: 2 sticky, such as the header, and 5 fixed to the window.

What to know about Shopify stores

Close the popups first

The store greeted our capture with a "Where are we shipping to?" region selector, and it came into Figma as part of the page. Shopify stores are full of these: region and currency pickers, newsletter offers, cookie notices and chat widgets. With the extension, close them before you capture. With the plugin, delete their layers after the import.

Carousels keep the slides you can see

The page had 41 images in its markup, and 17 came into the capture. Product sliders hide the slides that are out of view, and those aren't imported. If you need every product, capture a collection page, where the products sit in a grid, or scroll the slider to the slides you want before capturing with the extension.

Pinned bars and widgets

The sticky header and the floating widgets are recorded as sticky or fixed, and placed where they sit at the top of the page. In Figma they're ordinary layers. A theme's slide-out cart can come along too, sitting just outside the frame; delete it, and any chat or shopping-assistant widgets you don't want in the design.

Theme fonts

This store's type is set in Geograph, Akkurat Mono and Self Modern, all commercial fonts, plus Barlow from Google Fonts. Figma can only use fonts it has, so the plugin falls back to Inter, at the closest weight, for anything missing. If your theme uses a licensed font, install it on your computer before importing and use the Figma desktop app.

Animations

The store's 3 CSS animations all belonged to its shopping-assistant widget. Hover states and animations are recorded with each layer. A frame can't play them, but a code layer can.

Mobile first, if your traffic is

For most stores, most visits come from phones, and themes change a lot at mobile width. Choose Mobile and the store is rendered at phone width with a real mobile browser profile, so you get the mobile theme, not a squeezed desktop. See importing a mobile website.

FAQ

Can I import a competitor's store?

You can capture any public page. Use it for research and reference, and don't republish someone else's design or product photos as your own.

Does it work on a password-protected development store?

Yes, with the Chrome extension: enter the storefront password in Chrome, then capture the page.

Will Shopify sections become Figma components?

No. You get frames, text, images and vectors, named after the page's elements. Making components out of repeated product cards is a step you do in Figma.

Can I capture the cart or checkout?

The extension captures any page you can open in Chrome, including a cart with items in it.

Bring your Shopify store into Figma: install the WebCapture plugin, or add the Chrome extension for development stores. New to it? Start with website to Figma.

Framer sites are often designed straight in Framer, so there may be no Figma file to go back to. When you need one, for a redesign, a design review or a pitch, you can import the live site instead of rebuilding it by hand.

This guide shows how to bring a Framer site into Figma as editable layers with WebCapture, using a real capture of framer.com, which is built in Framer, as the example.

How to import a Framer site

A published site

1. Open the WebCapture plugin in Figma.
2. Paste the site's address: its custom domain, or its .framer.website address.
3. Choose Desktop, Tablet or Mobile, and press Fetch.

The page is rendered in a remote browser and imported straight into your file. Fetching runs on Apify, so add your own Apify API token once; a free Apify account is enough to start.

A site that isn't public yet

For a password-protected or unpublished page, use the WebCapture Chrome extension. It captures the page you're viewing in your own browser, then you paste the result into the plugin.

What came across from framer.com

We captured framer.com's home page at 1440px wide on 2 November 2026. It's a long page, 13,403px tall, and the capture held:

• 3,529 layers: 518 text layers, 163 images and 184 vector icons.
• 5 videos, 12 hover states and 12 scroll reveals, recorded with the layers they belong to.
• 4 pinned elements and 145 links, which the plugin can carry over as prototype connections.

What to know about Framer sites

Appear effects come in visible

Framer's appear and scroll effects keep sections invisible until you scroll to them. Imported naively, those sections would arrive in Figma as nothing at all. WebCapture recognised all 12 of framer.com's as Framer Motion reveals and imported them visible.

One trade-off: if a reveal also slides content in, the capture can't always know its final position, so a revealed block may sit a little lower than it settles on the live page. Nudge it into place if it matters.

Some videos arrive without a picture

Of the 5 videos on framer.com, 4 came in as empty frames at the video's size. The browser didn't let the capture draw their current picture. The capture records a warning for each one, and keeps the video's address so it can still be embedded. Drop a poster image into those frames, or note them for the developer.

Fonts

framer.com uses Inter for most of its text, which Figma has, so those layers match directly. Its other faces, GT Walsheim and Input Mono, are commercial fonts. Figma can only use fonts it has, so the plugin falls back to Inter, at the closest weight, for anything missing. If your site uses a licensed font, install it on your computer before importing and use the Figma desktop app.

The cookie banner comes too

The capture takes the page as it is on screen, so framer.com's cookie notice arrived as a layer. Dismiss banners before capturing with the extension, or delete the layer after.

Interactions

Hover states, transitions and CSS animations are recorded with each layer. A Figma frame can't play them, but a code layer can. More in capturing hover states and animations.

Large pages

A long Framer page with thousands of layers imports fine, it just takes longer. If you only need one part of it, import once and delete what you don't need, or capture at Desktop first and add Mobile only when you need it.

FAQ

Can I import a Framer template I bought?

If it's published as a site, yes, the same way as any Framer site. Check the template's licence for how you may reuse the design.

Do Framer components become Figma components?

No. You get frames, text, images and vectors, named after the page's elements. Making components out of repeated parts is a step you do in Figma.

Does it capture the mobile breakpoint?

Yes. Choose Mobile and the page is rendered at phone width with a real mobile browser profile, so Framer serves its mobile layout. See importing a mobile website.

Can an AI rebuild the Framer page as code?

Yes. The extension's Copy for LLM button gives Claude, ChatGPT or Figma's own AI the layout, colours, fonts and every interaction. See rebuilding a website with Claude.

Bring your Framer site into Figma: install the WebCapture plugin, or add the Chrome extension for pages that aren't public. New to it? Start with website to Figma.

Webflow's official Figma plugin moves designs from Figma into Webflow. Going the other way is just as common: a redesign of a site that has drifted from its Figma file, a client site you inherited with no design file at all, or an audit of what's actually live.

This guide shows how to bring a Webflow site into Figma as editable layers with WebCapture, using a real capture of webflow.com, which is built in Webflow, as the example.

Two ways in

A published site: paste the URL into the plugin

1. Open the WebCapture plugin in Figma.
2. Paste the site's address, either its custom domain or its .webflow.io address.
3. Choose Desktop, Tablet or Mobile, and press Fetch.

The page is rendered in a remote browser and imported straight into your file. Fetching runs on Apify, so add your own Apify API token once; a free Apify account is enough to start. See URL to Figma for the details.

A staging site behind a password: use the Chrome extension

A remote browser can't get past a site password. The WebCapture Chrome extension captures the page you're looking at instead, so open the staging site, enter the password, capture, and paste the result into the plugin. The same works for any page behind a login.

What came across from webflow.com

We captured webflow.com's home page at 1440px wide on 2 November 2026. The page is 7,648px tall, and the capture held:

• 1,178 layers: 240 text layers, 49 images, 17 vector icons and 4 videos, each video with its current frame.
• 154 hover states, 3 CSS animations and 6 scroll reveals, recorded with the layers they belong to.
• 2 pinned elements (the sticky navigation bar and the fixed "Made in Webflow" badge) and 104 links, which the plugin can carry over as prototype connections.

Layers are named after the page's elements and classes, so the class names you gave things in the Designer show up in Figma's layers panel.

Three things to fix first

1. Fonts

Every text layer on webflow.com is set in WF Visual Sans, Webflow's own typeface. Figma can only use fonts it has, so the plugin matches each one against the fonts available to you and falls back to Inter, at the closest weight, for anything missing.

If your site uses a licensed custom font, install it on your computer before you import, and use the Figma desktop app. Google Fonts come across directly.

2. Webflow Interactions

Webflow Interactions run in JavaScript. WebCapture records the parts that live in CSS: hover states, transitions and keyframe animations. Sections that an interaction hides until you scroll are brought in visible, so they don't go missing.

What it can't replay is a timeline driven by script. That element lands in Figma as it was at the moment of capture. To see how the page behaves, put it in a code layer, where the recorded hovers and animations play.

3. Badges and banners

The capture takes the page as it is on screen. On webflow.com that included the "Made in Webflow" badge, pinned to the corner, which arrived as its own layer. Cookie banners and popups can come in the same way. Dismiss them before you capture with the extension, or delete those layers after the import.

Tablet and mobile

Webflow sites change layout at their breakpoints. Choosing Tablet (820px) or Mobile in the plugin renders the page at that width with a real mobile browser profile, so you get the layout the site actually serves, not a squeezed desktop. More on that in importing a mobile website.

FAQ

Can I import a Webflow site I don't own?

You can capture any public page. Use it for reference, research or work you have permission for, and don't republish someone else's design as your own.

Does it work with a password-protected staging site?

Yes, with the Chrome extension. It captures the page in your own browser, after you've entered the password.

Will my Webflow components become Figma components?

No. You get frames, text, images and vectors, named after the page's elements. Turning repeated parts into components is a step you do in Figma.

Can I import every page of the site at once?

One page per import. Fetch each page you need; recent URLs are remembered in the plugin, so re-capturing at a second width is quick.

Bring your Webflow site into Figma: install the WebCapture plugin, or add the Chrome extension for staging sites. New to it? Start with website to Figma.