I work as a front-end developer who also does design work — or maybe I'm a designer who codes. I've stopped trying to label it at this point.
The thing is, I sit at this weird intersection where I understand both sides of the wall. I know what it's like to write clean semantic HTML and CSS, and I also know what it's like to sit in Figma trying to recreate a page from scratch for a redesign project.
And honestly? The most frustrating part of my workflow has never been the actual work. It's been the bridge between what's live on the web and what's in my design tool.
The Problem Nobody Talks About
If you're a front-end dev who's ever been asked to "help with the mockup" or a designer who's ever had to rebuild a client's website in Figma, you know exactly what I'm talking about.
The process usually looks like this:
- Client/PM says "we're redesigning page X"
- You open Figma, realize you need the existing page as a base
- You start screenshotting, tracing, color-picking, font-guessing
- 3-4 hours later you have a rough approximation
- You finally start the actual design work
- The client says "actually we want you to also redesign Y and Z"
- You die a little inside and repeat from step 2
The part that always bugged me is that as a developer, I know the page already exists as structured data. There's HTML, CSS, computed styles, a proper text layer. All of it is right there in the browser. And yet, the standard workflow still forces us to recreate all of that manually inside a design tool.
It makes no sense.
What Changed My Mind
I came across a tool called Web to Design (it's at drawflare.com) about two months ago. It's a combination of a Chrome extension and a Figma plugin that does one specific thing: it takes a live web page and turns it into an editable Figma file.
The way it works matters more than you'd think.
Most "screenshot-to-design" tools work by taking a picture of the page and trying to reverse-engineer the layout from pixels. That approach falls apart on anything mildly complex — custom fonts, responsive layouts, overlapping elements, shadow effects, you name it.
Web to Design takes a different approach. The Chrome extension actually reads the DOM, collects computed styles, extracts text content, and packages all of that structured data into an intermediate file. The Figma plugin then reconstructs it as proper editable layers.
Text stays as text. Not flattened images of text. Actual, click-to-edit, change-the-font string layers.
Layout hierarchy is preserved. Sections come in as frames. Headings are headings, paragraphs are paragraphs. The structure maps to what you'd expect.
The result isn't always 100% production-ready — more on that below — but it's well past the threshold where manual effort would have been a better use of time.
First Time I Used It
I threw a fairly complex landing page at it — think 12+ sections, gradient backgrounds, overlapping hero imagery, custom font stack, hover states, the works.
Export from Chrome: about 8 seconds.
Import into Figma: another 5 seconds.
Time spent fixing things before I could start designing: maybe 3 minutes. Some auto-layout adjustments, a couple of font weight corrections, one image that needed repositioning.
Compare that to the 4+ hours I would have spent manually recreating that same page, and it's not even close.
And I have to be honest here — the first time I saw the result, I sat there for a solid 15 seconds just... clicking through the layers. Opening and closing groups. Double-clicking text. It felt wrong that it was that easy.
Why This Matters for Front-End Devs Specifically
Here's the angle that most design tool reviews miss.
As a front-end developer, when you're handed a Figma file that was generated from a real web page rather than built from scratch, the layers actually make sense. The hierarchy reflects reality. Text elements contain the actual copy. Spacing corresponds to what's in the CSS.
This matters because when you eventually hand off to a developer (or do the implementation yourself), the Figma file is more accurate. Less guesswork. Fewer back-and-forth questions about "what font size is this supposed to be?"
I've started incorporating it into my workflow for:
- Rapid redesign mockups: Pull the live site into Figma, iterate on the design, show the client. When approved, I already have the real structure to work from for implementation.
- Competitive analysis: Import competitor pages into Figma for side-by-side comparison. Way faster than screenshot-based approaches.
- Design-to-code sanity checks: When I'm implementing a design and something feels off, I can re-import the current state to check if my CSS matches.
- Team discussions: Being able to annotate directly on top of the real page layout in Figma is surprisingly useful for design reviews.
The Honest Parts (Because Every Tool Has Them)
I don't want to oversell this thing. Here's where it falls short:
CSS animations don't translate. Obviously. If you have complex keyframe animations or transitions, those won't come through. They're visual effects, not layout. You wouldn't expect them to.
Super custom rendering can be tricky. Canvas-based sites, WebGL, heavy SVG manipulations — these are outside the scope of what a DOM-based tool can capture. Fair trade-off.
Some sites need cleanup. I'd say maybe 7 out of 10 pages come in "ready to work with." The other 3 need 5-10 minutes of tidying up. Still infinitely better than building from scratch.
It's not for production code generation. This tool is for the design phase. It puts the real page into your design tool so you can work on it. It won't generate implementation code for you.
These limitations matter, but they matter less than the core trade: going from 3-4 hours of setup to 2 minutes. Even with cleanup time, I'm still saving 90%+ of the reconstruction effort.
Who This Is Actually For
After using it for a couple of months, I think the ideal user profile is:
- You work on redesign projects (agency, freelance, in-house)
- You use Figma as your primary design tool
- You regularly need to reference existing web pages in your design work
- You're comfortable with a 90/10 rule — the tool handles 90% and you clean up the last 10%
If that sounds like you, it's worth a try. It's free on the Chrome Web Store and the Figma plugin is in the Figma Community.
The Bigger Takeaway
The reason I wanted to write this up on Dev.to specifically is that I think this sits at an interesting intersection. Most design tooling is made by people who think like designers. Most developer tooling is made by people who think like developers. But the redesign workflow lives in the gap between both.
Web to Design isn't a revolutionary product. It's a practical fix for a specific, painful step in the workflow. And sometimes that's exactly what you need — not magic, not AI that does your job for you, just a cleaner way to do the boring part so you can focus on the interesting part.
If you've been manually rebuilding pages in Figma, stop. Find something that works for you, whether it's this tool or another approach. The time you save adds up a lot faster than you think.
Comments and questions welcome. I read every reply, even if I'm slow to respond. If you've got a different workflow that works for you, I'd genuinely love to hear about it — always looking for improvements.
