From Local Frontend Code to Editable Figma Layers

Most design-to-code workflows begin in Figma. A designer creates a screen, a developer implements it, and the team compares the result with the original design.

But sometimes the process runs in the opposite direction.

A working interface already exists in HTML, React, or Next.js. It may be a prototype, an internal tool, an AI-generated starting point, or a product that has evolved faster than its Figma file. The page works, looks right in the browser, and has real content and responsive behaviour, but there is no editable design file to continue working with.

In that situation, teams often rebuild the interface manually in Figma.

They inspect styles, copy text, recreate components, export images, approximate spacing, and eventually end up with something close to the real product. It works, but it is repetitive and often produces another version that can drift away from the code again.

I built Source → Design to reduce that work.

It is a Figma plugin that imports a local HTML file or a complete frontend project ZIP, renders it in Chromium, and rebuilds the result as editable Figma layers.

Plugin: [https://www.figma.com/community/plugin/1671982756700161071]
Website: [https://sourcetodesign.com]

Why a screenshot is not enough

There are already tools that capture a webpage and bring it into Figma. They are useful for references, audits, and quick visual snapshots.

But a screenshot is not a working design file.

For Source → Design, the goal was to preserve as much editable information as possible:

• text remains text;
• SVG assets remain vectors where supported;
• colours, typography, borders, shadows, gradients, and radii become Figma properties;
• layout is reconstructed with frames and groups;
• layers receive more meaningful names than a long list of anonymous divs.

This makes the output useful as a starting point for redesign, review, handoff, or creating a proper design system around an existing product.

Local projects were the important part

A live URL is not always available.

Many interesting interfaces exist only on a developer’s machine: an early React prototype, a local Next.js app, a customer project that cannot be exposed publicly, or a mobile web view under development.

That is why the plugin accepts:

• standalone .html files;
• ZIP archives with static HTML, CSS, JavaScript, images, SVGs, and local fonts;
• React, Next.js, Vue, and Svelte project ZIPs.

The service detects the project type, prepares it in an isolated environment, opens the result in Chromium, and reads the rendered page instead of relying on source code alone.

That last part matters because source code does not always describe the final visual result. CSS inheritance, computed styles, web fonts, responsive rules, JavaScript, pseudo-elements, and browser layout all affect what the user actually sees.

The browser already knows the final answer, so it is the best source of truth for the import.

The hard part is not creating a rectangle

Creating Figma nodes is straightforward. The more difficult question is deciding what should become a node.

A browser page may contain deeply nested technical wrappers that exist only for layout or styling. Importing every DOM element as a separate frame can be technically accurate, but it creates a Figma file that nobody wants to edit.

The plugin therefore combines source-aware information with the rendered result. The aim is to preserve visual accuracy while reducing unnecessary technical noise in the Layers panel.

There are also cases where an editable equivalent does not exist. Canvas, WebGL, active video, and some browser-only visual effects cannot be honestly recreated as normal Figma layers. For those areas, Source → Design can use a local raster fallback while keeping the rest of the page editable.

Who is it for?

The plugin is useful when:

• a frontend prototype needs a designer’s review;
• an AI-generated interface needs to return to a design workflow;
• the production site has drifted away from the original Figma file;
• a team is preparing a redesign based on what users actually see;
• you want to inspect an existing interface as structured editable layers instead of a static image.

There are three free imports available in the plugin.

I would love candid feedback, especially from people who work between design and frontend. What type of local project would you want to import into Figma, and what would make the result more useful for your workflow?