You know the ticket. It arrives every sprint, sometimes from a PM, sometimes from a founder:
"Hey, I really like how Company X does their pricing page. Can we build something similar for our launch next week?"
Or the slightly worse version:
"We don't have a designer on this project. Just follow the style of this competitor's site."
Eight months ago, my response to this ticket was always the same. Open the reference site. Open DevTools. Start copying.
Elements panel → select nav → Computed
→ padding: 16px 24px
→ background: #1a1a2e
→ font-size: 14px
→ font-weight: 500
Copy. Repeat for every section. Check hover states:
→ box-shadow: 0 4px 12px rgba(0,0,0,0.1)
→ transform: translateY(-2px)
→ transition: all 0.3s ease
Then back to VSCode. Write CSS. Switch to browser. Check if 24px looks right. Switch back. "Wait, was the button radius 8px or 12px?" Switch to browser again. Check again.
An hour later, I'd have maybe two sections done. And I haven't even started the business logic yet.
This is the part nobody talks about when they describe frontend development: the amount of time spent looking at other people's sites and manually translating what you see into code. It's not hard work. It's tedious work. And it takes forever.
A designer walked by my desk
Last month, same ticket, different project. A landing page this time. No designer available. PM sent a link to a competitor's page.
I was already in DevTools when a designer from another team walked past my desk.
"What are you doing?"
"Copying styles from this site."
"Why don't you just pull it into Figma and see everything at once?"
"I don't really use Figma."
"You don't have to. Just install an extension."
He set me up with two things:
A Chrome extension called "Web to Design" by DrawFlare. Click the extension icon on any page, it exports the entire page (or a selected section) into a .w2d file. Takes about 2 seconds.
A Figma plugin also called "Web to Design". Open Figma, run the plugin, import the .w2d file. Everything appears as editable layers.
I stared at the screen for a few seconds. Not because it was impressive. It was because I'd just spent the last hour doing work that took about 7 seconds with this tool.
What this actually means for a frontend dev
I've been using it for about three weeks now. Here's what I found useful from a developer's perspective, not a designer's.
Spacing becomes visible instantly.
When I look at a reference page, the hardest thing to get right is spacing. Margins, paddings, gaps between cards. In DevTools, you inspect one element, note the margin, inspect another element, note its padding, and mentally calculate the total space.
In the Figma file, you just select two elements and see the distance. Card area has padding: 24px, border-radius: 12px, gap between cards: 20px. No mental math.
Color system extraction.
Normally I'd click through 15 different elements to find the full color palette. In Figma, the colors are right there in the layer properties panel. Copy them out and turn them into CSS variables:
css
:root {
--primary: #4F46E5;
--secondary: #818CF8;
--text-primary: #1F2937;
--text-secondary: #6B7280;
--bg-surface: #FFFFFF;
--bg-page: #F9FAFB;
}
Five minutes instead of forty-five.
Typography hierarchy.
Is the H1 32px or 36px? What's the body size? How much line-height does the description text use? In DevTools I'd check each one separately. In Figma, I click on a text layer and the font size, weight, line height, and letter spacing are all visible at once.
A concrete example
The landing page I was working on had a "how it works" section with three step cards in a row. Each card: rounded container with an icon, a heading, a description, and a subtle secondary button at the bottom.
Old approach:
Pick the first card in DevTools → note all padding, border-radius, shadow values
Pick the second card → realize the spacing between cards isn't visible from a single element → switch to the parent container → check gap or margin
Write the CSS
Switch to browser → adjust by eye
Repeat for mobile
With the Figma file:
Selected the card area → auto layout shows:
→ padding: 24px
→ border-radius: 12px
→ gap: 20px
→ equal width columns (1fr 1fr 1fr)
css
.steps-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.step-card {
padding: 24px;
border-radius: 12px;
background: #fff;
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
That section probably took me 15 minutes start to finish. Would've been 45 minutes with the DevTools shuffle.
Where it falls short (being honest)
Three weeks in, here are the things that don't work well:
Animations. CSS transitions, hover effects, keyframe animations. These don't carry over. The initial state gets exported, but you're on your own for the motion. That's fine, honestly. Motion is where I want to make my own decisions anyway.
Responsive layouts. It captures the page at whatever viewport width you're at. Mobile layouts need a separate capture or manual adaptation. I've been capturing the desktop version for structure reference and building mobile from scratch.
Image quality. Web pages use compressed WebP images. They'll look blurry in Figma. I note down the dimensions and find clean assets later.
Complex JS widgets. Dropdowns, modals, date pickers. These rely on JavaScript state. The plugin exports the initial HTML structure but none of the interaction behavior. Can't expect it to do everything.
None of these limitations bother me much, because the core problem it solves — "what does this page look like and how big are the gaps between things" — is still handled in seconds rather than hours.
My workflow now
When I get a "make it look like this" ticket, I do this:
Receive ticket → open reference URL
→ click extension, export .w2d (2 seconds)
→ import into Figma (5 seconds)
→ 5 minutes scanning the layout in Figma
→ extract colors, spacing, type scale → CSS variables
→ start coding
→ keep Figma open as a visual reference while I build
What changed isn't that I got faster at writing CSS. I'm the same speed. I just stopped spending time on the part that had zero creative value: manually transcribing visual information into code.
Why this matters beyond saving an hour
The "reference a website and build something similar" ticket isn't going away. It exists at every company that doesn't have a designer for every single project. Which is most companies.
The question isn't whether you can do this work without a tool like DrawFlare. Of course you can. DevTools exists. You can copy values manually. I did it for years.
The question is whether that's the best use of your time. I decided it wasn't. That hour I used to spend on manual style inspection now goes into actually thinking about the code structure, edge cases, and interactions.
Or, sometimes, into leaving on time.
It's not going to change your life. But for that one recurring ticket — "make it look like this site" — it saves me about an hour each time. If you get that ticket 2-3 times a month like I do, the math works out.
Where to find it
Chrome extension: search "Web to Design" by DrawFlare on Chrome Web Store
Figma plugin: search "Web to Design" on Figma Community
Free tier gives you 10 exports/month. That's enough for most people. If you need more, Pro is $10/month.
Top comments (0)