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).
Product upvotes vs the next 3
Waiting for data. Loading
Product comments vs the next 3
Waiting for data. Loading
Product upvote speed vs the next 3
Waiting for data. Loading
Product upvotes and comments
Waiting for data. Loading
Product vs the next 3
Loading
Source → Design: HTML, React to Figma
Turn frontend code into editable Figma designs
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.
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.
On the analytics side, Source → Design: HTML, React to Figma competes within Design Tools, Productivity and Developer Tools — topics that collectively have 1.4M followers on Product Hunt. The dashboard above tracks how Source → Design: HTML, React to Figma performed against the three products that launched closest to it on the same day.
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.
For a complete overview of Source → Design: HTML, React to Figma including community comment highlights and product details, visit the product overview.
Maxym Babenko