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
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
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
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
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
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).