Web2Design
Get the plugin

Any website, as an editable Figma design.

Real auto layout, named layers, components and styles. Not a screenshot, and not a flat pile of rectangles.

Get the Figma pluginAdd to Chrome
  • Free
  • No sign-up
  • No API key
  • No CC

Not a screenshot. Layers you can actually work with.

Screenshot tools give you one flat image. Web2Design rebuilds the page as frames, text and components, named the way a designer would name them.

Typical screenshot import

Screenshot 2026-10-15.png
HeaderNorthwindProductPricingDocsSign in
HeroPlan the week
in five minutes.Calendars, tasks and notes in one quiet place.
Button/PrimaryStart freeSee pricing
Image
CardsCalendarTasksNotes

One image. Any change means redrawing it.

Web2Design import

div.page-wrap
div.nav-inner
section.s-1
h1.title-xl
a.btn.btn-pr
div.media-2
div.grid-3
div.card-v2
div.card-v2
HeaderNorthwindProductPricingDocsSign in
HeroPlan the week
in five minutes.Calendars, tasks and notes in one quiet place.
Button/PrimaryStart freeSee pricing
Image
CardsCalendarTasksNotes

Frames with auto layout, editable text, components with instances.

Three ways to bring a page in.

Pick whatever you have: a live page, a file, or a snippet of code.

01 · Recommended

Chrome extension

Copies the page exactly as Chrome renders it. Works behind a login, on dashboards, React and Vue apps, with your web fonts and your data.

Web2Design
Copy page for Figma
Card/Source · Extension
02

HTML file

Drop an .html file into the plugin. Great for exports, prototypes and AI-generated pages.

Drop an .html file
Card/Source · File
03

Paste code

Paste HTML straight into the plugin and import it, no file needed.

hero.html
Card/Source · Code

What you get in Figma.

Everything a designer would set up by hand after redrawing a page, done on import.

Card/Plan · Vertical · W 420 Fixed
Team planBilled yearly · 12 seatsFill

Shared calendars, unlimited projects and priority support for the whole team.

UpgradeCompare plansHug · gap 8
padding 16 · gap 12

Real auto layout

Flex, grid and block layouts become auto layout with gap, padding, alignment and hug / fill / fixed sizing. Resize a frame and it behaves.

Button/PrimaryGet started
InstanceSign up
InstanceTry it free
InstanceContact sales

Components out of the box

Repeated cards and buttons become one component with instances. Header, footer and nav can too.

div.wrapper-2div.wrapper-2
div.sc-1x9kqdiv.sc-1x9kq
ul.acc-listul.acc-list
a.btn.btn--lga.btn.btn--lg
div.c-tilediv.c-tile

Layers named like a designer would

Hero, Pricing, FAQ, Button/Primary. Not div.wrapper-2.

Color styles

Brand/Primary
Text/Primary
Text/Secondary
Surface/Default
Border/Default
Status/Success
Status/Danger

Text styles

AgDisplay/XL64 / 1.0
AgHeading/H148 / 1.1
AgHeading/H232 / 1.2
AgBody/Large18 / 1.6
AgBody/Medium16 / 1.6
AgLabel/Small12 / 1.3
AgCaption11 / 1.4

Color and text styles

Create paint and text styles or variables, or match the ones already in your file. Clean names: Brand/Primary, Text/Secondary, Heading/H1.

Desktop1440
Tablet768
Mobile390

Every screen size at once

Import 4K, desktop, laptop, tablet and mobile viewports in one go, side by side on the canvas.

See every feature

From tab to canvas in three steps.

  1. any-website.com

    Chrome extension

    Chrome Web Store

    Added · Free

    Figma plugin

    Figma Community

    Added · Free

    Step 1

    Install the extension and the plugin

    Both are free. The extension lives in Chrome's toolbar, the plugin in Figma's Plugins menu.

  2. Web2Design
    Copied. Paste it in Figma
    Captured 1440 × 6,240100%

    Step 2

    Click “Copy page for Figma”

    The extension scrolls the page so lazy content loads, captures it as you see it, then restores your scroll position.

  3. Web2Design
    ExtensionFileCode
    NNorthwind — Plan the weeknorthwind.app · 1440 × 900 · 12 imagesChange

    Viewport

    The page is imported at the size of your Chrome window (1440 × 900).

    OptionsReset to defaults

    LayoutAuto layout · Semantic names›
    ComponentsRepeated · Header & footer›
    StylesColors · Text styles›
    Imported to Figma

    ♥ Support Web2Design ♥

    Step 3

    Paste in the plugin and import

    Open Web2Design in Figma, go to the Extension tab, press Ctrl+V (⌘V on Mac) and click Import to Figma.

Made for the work before the design.

Redesigns

Start from the live site, not a blank canvas.

Design audits

See every color, type size and spacing a product really uses.

Design systems

Pull components and styles out of an existing product.

AI-generated pages

Turn HTML from an AI tool into editable layers.

Competitor research

Take a page apart frame by frame.

Moodboards

Collect real sections, not screenshots.

Dev to design handoff

Bring a coded prototype back into Figma.

Client pitches

Mock changes on top of the client's own site.

Questions, answered.

Yes. No trial, no credits, no usage limits and no paid tier. If it saves you time, you can buy me a coffee to help keep it that way.

All questions

Stop redrawing. Start from the live site.

Get the Figma plugin Add to Chrome

Buy me a coffee

Web2Design is made by one person and stays free for everyone. A coffee helps keep it that way.

buymeacoffee.com/onuraydemir →