This product was not featured by Product Hunt yet. It will not be visible on their landing page and won't be ranked (cannot win product of the day regardless of upvotes).
Convert HTML, React, Next.js, Vue, and Svelte into clean, editable Figma designs with structured layers, text, colours, typography and layout. Built for designers and developers who need to move from code back to Figma.
Hi Product Hunt! I’m Max, a product designer, and I built Source → Design.
The idea came from a workflow I kept running into: AI coding tools and frontend teams can now create a polished, working UI in HTML or React very quickly. But when someone needs to edit that interface in Figma, the usual answer is still to rebuild it manually.
That is frustrating when the interface already exists in code.
Source → Design converts HTML and frontend project files into editable Figma designs with structured layers, text, colours, typography and layout.
It currently supports:
• HTML
• React
• Next.js
• Vue
• Svelte
I built it for a few common situations:
→ The original Figma file is missing
→ The implementation has moved ahead of the design file
→ A designer needs to explore changes visually before the next code iteration
→ A founder or product team wants a usable Figma version of an existing interface
The plugin includes free imports, so you can test it with a real project before deciding whether it fits your workflow.
I’d love your honest feedback:
1. Where does your design-to-code or code-to-design workflow break down today?
2. What would make this genuinely useful enough to replace manual UI reconstruction?
3. Which project types or frameworks should I prioritise next?
Thanks for checking it out I’ll be here all day to answer questions.
No comment highlights available yet. Please check back later!
About Source → Design: HTML, React to Figma on Product Hunt
“Turn frontend code into editable Figma designs”
Source → Design: HTML, React to Figma was submitted on Product Hunt and earned 13 upvotes and 1 comments, placing #24 on the daily leaderboard. Convert HTML, React, Next.js, Vue, and Svelte into clean, editable Figma designs with structured layers, text, colours, typography and layout. Built for designers and developers who need to move from code back to Figma.
Source → Design: HTML, React to Figma was featured in Design Tools (262.2k followers), Productivity (659.4k followers) and Developer Tools (518.3k followers) on Product Hunt. Together, these topics include over 280.2k products, making this a competitive space to launch in.
Who hunted Source → Design: HTML, React to Figma?
Source → Design: HTML, React to Figma was hunted by Maxym Babenko. A “hunter” on Product Hunt is the community member who submits a product to the platform — uploading the images, the link, and tagging the makers behind it. Hunters typically write the first comment explaining why a product is worth attention, and their followers are notified the moment they post. Around 79% of featured launches on Product Hunt are self-hunted by their makers, but a well-known hunter still acts as a signal of quality to the rest of the community. See the full all-time top hunters leaderboard to discover who is shaping the Product Hunt ecosystem.
Want to see how Source → Design: HTML, React to Figma stacked up against nearby launches in real time? Check out the live launch dashboard for upvote speed charts, proximity comparisons, and more analytics.
Maxym Babenko