Hi everyone,
I’m a product designer who increasingly works with interfaces that start in code rather than in Figma.
A common situation I kept running into was having a working interface built with React, Next.js, or an AI development tool, but no current Figma file. Returning that interface to the design process usually meant rebuilding it manually or importing a flat screenshot.
So I built Source → Design, a Figma plugin that turns local frontend source files into structured, editable Figma designs.
How it works
You can upload:
-
A self-contained HTML file
-
A static frontend project ZIP
-
A React project ZIP
-
A Next.js project ZIP
-
A Vue or Svelte project ZIP
The project does not need to be publicly deployed.
Source → Design detects the project type, builds it in an isolated environment, and opens the result in Chromium. It then reads the rendered layout, computed styles, typography, assets, and element positions before rebuilding the interface in Figma.
What it creates
Instead of inserting a screenshot, the plugin creates:
-
Editable text layers
-
Frames and semantic layer groups
-
SVGs and supported icons as vectors
-
Fills, borders, gradients, shadows, opacity, and corner radii
-
Typography, spacing, and measured line breaks
-
Colors and reusable variables
-
Source-aware layer names
Browser-only elements such as canvas, WebGL, and active video may use a raster fallback, while the rest of the interface remains editable.
Why I built it
I think this workflow is becoming more common as developers and product teams build interfaces directly with v0, AI coding tools, React components, and working prototypes.
Sometimes the code becomes the most current version of the product, while the original Figma file is missing or outdated. Source → Design is intended to bring that implementation back into Figma so designers can review it, refine it, and continue working from an editable document.
I’d especially appreciate feedback from people working with React, Next.js, or v0 projects:
-
How important is visual accuracy compared with clean layer structure?
-
Would you use this workflow for design reviews, redesigns, or documentation?
-
What kinds of frontend projects would you want it to support next?
Plugin: https://www.figma.com/community/plugin/1671982756700161071
Website: https://sourcetodesign.com