How to copy any website into Figma as editable layers

Updated October 17, 2026
On this page

    Rebuilding a live page in Figma by hand eats an afternoon. DivPic's Figma mode reads the page you're looking at and hands Figma real frames, text and images, so you start from the actual UI instead of a flat screenshot.

    Figma mode is available on Chrome, Firefox and Safari. It needs a free DivPic account (Google sign-in). Plain PNG and SVG screenshots don't.
    What you need
    • DivPic installed in Chrome, Firefox or Safari
    • A Google account to sign in to DivPic
    • Edit access to the Figma file you're pasting into

    Turn on Figma mode

    1. Open the page you want to capture and click the DivPic icon, or press ⌘ ⇧ E (Ctrl ⇧ E on Windows and Linux).
    2. In the floating toolbar, flip the Figma switch on.
    3. The first time, DivPic asks you to Sign in with Google. After that it remembers you.
    The toolbar with Figma mode switched on.

    Capture one element

    Use this when you only need a piece of the page: a pricing card, a navbar, a form.

    1. Click Element in the toolbar.
    2. Move your pointer over the page. DivPic outlines whatever is under it.
    3. Not quite the right box? Press ↑ to jump to the parent element or ↓ to go into a child.
    4. Click to capture. DivPic puts the result on your clipboard.

    Changed your mind? Press Esc to cancel without capturing anything.

    Capture a full page

    Click Full page instead of Element. DivPic scrolls through the page first so lazy-loaded images and sections are there when it reads the layout, then returns you to the top.

    Full page capture scrolls the page so nothing below the fold is missed.

    Paste into Figma

    1. Open any Figma design file.
    2. Click on the canvas and press ⌘ V (Ctrl V on Windows).
    3. The capture lands as a frame with the page's layers nested inside it.

    Tip: once it's in Figma, you can:

    • Edit any text layer directly, since it's live text, not pixels
    • Swap images by replacing the image fill
    • Resize a frame and watch the auto layout reflow
    A pasted capture keeps the page's structure as nested, named layers.

    What comes through, and how

    DivPic reads the page's computed styles and layout. Here's how the common building blocks of a web page show up in Figma.

    On the web pageIn FigmaGood to know
    Flex and grid containersFrames with auto layoutFigma rebuilds the layout from the page's flex and grid settings.
    TextText layersFont, size, weight, line height and colour are kept. Install the font in Figma to avoid substitutes.
    ImagesImage fillsImages from other domains are fetched for you so they don't come out blank.
    Canvas elementsImagesCharts drawn on a canvas arrive as a picture of the chart.
    Borders, radii, shadowsStrokes, corner radius, effectsBox shadows become drop shadows.
    Sticky headers and sidebarsRegular layers in the flowFigma has no sticky positioning, so they sit where they'd normally be.

    Tips for cleaner captures

    • Capture the smallest thing you need. A single card gives you a tidier layer tree than a whole page.
    • Close cookie banners and pop-ups first. DivPic captures what's on the page, overlays included.
    • Resize the window first if you want the mobile or tablet layout. DivPic captures the layout at the current width.
    Only capture sites you have the right to use. Copying someone else's design into Figma for reference is common practice, but shipping it as your own isn't.

    Frequently asked questions

    Do I need a Figma plugin?

    No. DivPic writes the capture to your clipboard in a format Figma understands. Open any Figma file and paste.

    Why does Figma mode ask me to sign in?

    Figma mode is tied to a DivPic account, which uses Google sign-in. PNG and SVG screenshots work without signing in. You can delete your account at any time from DivPic's settings.

    Can I capture pages that need a login?

    Yes. DivPic reads the page as it appears in your own browser tab, so anything you can see while signed in can be captured. Nothing is uploaded to a server along the way.

    Something looks off after pasting. What can I do?

    Some effects, like complex blend modes or unusual CSS tricks, have no exact match in Figma. Open an issue on GitHub with the page URL and a screenshot and it'll get looked at.

    Was this article helpful?

    Keep reading