How to export a working web app to editable Figma layers

Every AI builder can turn a Figma frame into code now. Type "Figma to code" into Google and you'll find a dozen plugins, three startups, and a feature announcement from every major design tool.

Try searching the other direction — app to Figma — and it goes quiet. Turning a running web app into editable Figma layers is rare. Shipd ships it as a first-class feature, and this post explains why the reverse direction matters and how to use it.

Why you'd want code → design at all

The Figma-to-code crowd assumes design always comes first. In practice, three situations flip the arrow:

• The app outran the design file. You (or an AI) iterated in code for two weeks. The Figma file is now fiction. Designers rejoin the project and need a canvas that reflects reality — not a screenshot they can't edit.
• There was never a design file. Prompt-built apps skip Figma entirely. That's fine until a stakeholder asks for "the designs," or a designer needs to explore a variant without touching code.
• Redesign work starts from what exists. The honest starting point for a redesign is the current product, as editable layers you can push around — not a rebuild-from-memory.

In all three, a screenshot doesn't cut it. Screenshots are pixels. Design work needs layers: real text nodes you can retype, frames with auto layout, extractable colors and spacing.

What Shipd exports

When you export a Shipd-built app to Figma, you get:

• Editable layers, not a flattened image — every heading, paragraph, and button is a real Figma node you can select and change.
• Layout structure preserved — containers arrive as frames with sensible nesting, so moving a card moves its contents.
• Real text — copy is editable text layers, which means designers can rewrite microcopy directly on the canvas.
• Your visual tokens — the colors and type styles the app actually uses, ready to extract into Figma styles.

The result reads like a file a careful designer would have produced by hand — except it took under a minute and it's guaranteed to match the shipped app.

How to do it

1. Build (or open) your app in Shipd. Anything you've generated works — the export walks the app's real rendered structure, not a design-time approximation.
2. Install the Shipd plugin from the Figma Community. Search "Shipd" in Figma's plugin browser and hit install — it's free.
3. Pair the plugin with your Shipd account. This happens in the browser with one click. There's no API token to generate, copy, or paste — the plugin and the app pair directly.
4. Pick the project and import. Choose which app (and which pages) to bring in. The plugin lays each page out on your canvas as editable frames.
5. Design. Rearrange, restyle, explore variants — it's a normal Figma file from here. When you're happy, bring the changes back to Shipd as a prompt ("match the new hero layout in frame 2") or re-import specific frames the usual Figma-to-code direction.

That last step is the point: with both directions available, Figma and your app stop drifting apart. Code-first when you're moving fast, design-first when you're exploring — the round trip keeps them honest.

Where this fits in an AI-generation workflow

AI app builders collapsed the time between idea and running software. But most teams still have designers, stakeholders, and brand reviews — the parts of shipping that happen on a canvas, not in a terminal.

The uncomfortable truth about prompt-built apps has been that they exist outside that process: no file to review, nothing to redline. Exporting the app into Figma puts AI-generated work back inside the normal design loop, where it can be critiqued and evolved with the tools design teams already use.

Figma-to-code gets you from mockup to app. App-to-Figma gets you back. You need both to make the loop a loop.