I built a Figma plugin to turn HTML and frontend projects back into editable designs

Modern AI coding tools and frontend workflows make it possible to turn an idea into a working interface remarkably fast.

As a product designer, I use tools such as Codex and Claude alongside regular frontend work. Getting from a rough idea to HTML, React, or Next.js is no longer the slowest part.

The recurring problem comes after that.

Sometimes a designer needs to bring a working interface back into Figma:

• the original Figma file is missing;
• a frontend prototype has moved ahead of the design file;
• a team needs to explore changes visually before editing code;
• a designer needs editable text, colours, spacing and layers instead of a static screenshot.

Until now, that usually meant rebuilding the interface manually.

So I built Source → Design — a Figma plugin that converts HTML and frontend project files into editable Figma designs with structured layers.

It currently supports:

• HTML
• React
• Next.js
• Vue
• Svelte

The aim is not to replace frontend code or Figma. It is to reduce the friction between the two when code already contains the interface you need to work with.

You can try free the plugin in Figma Community :

More details:

I’m still early in the launch and would really value feedback from frontend developers, product designers and teams working across both code and design.

What would make a code-to-Figma workflow genuinely useful in your team?