A few months ago, I was pulling another late-night design session. Client wanted their entire website recreated in Figma for a redesign. There I was, measuring pixels, sampling colors, and rebuilding components one by one. You know the drill.

Around 2 AM, after my fifth coffee and hundredth “⌘+Shift+4” to measure yet another button, I thought: “This is insane. There has to be a better way.”

Press enter or click to view image in full size

how to convert website to editable figma design

Html To Figma By Yashitech solutions

The Birth of HTML to Figma

I’m Aleen, a designer turned developer (well, still mostly designer), and I’ve spent the last four months building HTML to Figma. It’s exactly what it sounds like — a plugin that turns any website into editable Figma designs.

Not screenshots. Not static images. Actual, honest-to-god Figma layers that you can edit, resize, and play with.

Here’s the thing — I built this primarily because I needed it. Every time I had to:

Recreate a client’s website for a redesign
Save inspiration from other sites
Build a design system from an existing website
Make responsive prototypes

It was the same tedious process. Over and over again.

The Real Story: Early Testing

Before launching this publicly, I tested it with my own client work. The first time it successfully converted a complex e-commerce site, maintaining all the layouts, I nearly fell off my chair.

What used to take me 4–5 hours now took… minutes.

I showed it to a few designer friends. Their reaction? “When can I get this?”

Press enter or click to view image in full size

converting html to figma designs with the help of Html To Figma by yashitechsolutions

Showcase Image that generated by Html To figma by yashitech solutions

How It Actually Works

The process is dead simple (because who needs more complexity in their life?):

Get Xettri Aleen’s stories in your inbox

Join Medium for free to get updates from this writer.

Subscribe

Install the Chrome extension
Click Download & extract the ZIP file
Open Chrome > Extensions (⋮ menu)
Enable “Developer mode” (top right)
Click “Load unpacked” & select extracted folder

Visit any webpage you want to convert

After downloading and installing chrome extension please visit any webpages that you wanna convert as editable designs eg,medium.com

Press enter or click to view image in full size

web to figma that actually converts website to editable figma designs

After downloading and installing chrome extension

Click to Convert to Figma

after your desired website for converting it to editable figma design you need to save that json file it detects the data which will be used in Html to figma (By Yashitech Solutions) figma plugin later.

Press enter or click to view image in full size

Html To Figma Plugin By Yashitech Solutions and Chrome extension in action

Step to save json file

Open Figma and search for Html to figma by yashitechsolutions

Press enter or click to view image in full size

Open Drag & Drop that json file into Html To Figma (By Yashitech solutions) Plugin and click convert to figma

Press enter or click to view image in full size

drag and drop that json file

Final Result

finally you can see that result hass been accuratly adapt from your desired website and yeah it’s editable

Press enter or click to view image in full size

Convert any website into fully editable Figma designs by Html TO Figma by yashitech solutions a figma plugin

Final result of editable design

I’ve set it up to give everyone 40 free imports per week. Why 40? Because it seemed like a good number to actually test it properly without having to commit to anything.

You can grab the plugin here: https://bit.ly/html-to-figma

Real Talk: What This Is (And Isn’t)

This isn’t magic (though sometimes it feels like it). It won’t:

Design your website for you
Make your coffee
Solve all your design problems

But it will save you hours of mundane work. The kind of work that makes you question your career choices at 2 AM.

What’s Next?

I’m actively working on this based on real feedback. Not just “wouldn’t it be cool if…” stuff, but actual problems designers are running into.

Currently building:

Better component detection
More export options
Some other cool stuff I probably shouldn’t talk about yet

Want to Try It?

You can grab the plugin here: https://bit.ly/html-to-figma
Watch a quick tutorial here: https://www.youtube.com/watch?v=fPBeOAkOTEo

I’d love to hear what you think. What works, what doesn’t, what you’d like to see next. Because at the end of the day, I built this for us — designers who are tired of doing things the hard way.

And hey, if you run into any issues or have questions, just reach out. I actually read and respond to messages (when I’m not coding or designing).

Our Magical Blog

2 inspiring examples of beautiful blog layouts

I Built a Figma Plugin That Converts Websites to Editable Figma Designs (And It Actually Works)

this is auto generate

Ready to Create Your Own Magical Story?