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.

Source → Design: HTML, React to Figma

Turn frontend code into editable Figma designs

Turn frontend code into editable Figma designs