Design

AI-assisted reverse design from production screens, HTML, and design-system mapping

Figma’s updated code-to-design workflow helps designers pull live, authenticated, code-only, or captured HTML product screens back into Figma with more preserved structure, then map imported colours, typography, spacing, and components to existing variables and libraries or simplify those imported screens into wireframes for redesign work without rebuilding the current state from scratch.

Why the human is still essential here

Designers still need to decide what product change to make, audit bindings and mappings, simplify or restructure imported layouts, test layout behavior, and verify accessibility, component structure, semantic correctness, and token alignment before handoff.

How people use this

Live screen import for redesign

A product designer imports a shipped checkout or settings screen into Figma and uses the preserved structure as the starting point for a redesign instead of rebuilding the current UI by hand.

Figma / Builder.io Visual Copilot

Authenticated flow capture

A team pulls screens from a logged-in or localhost product environment into Figma so they can quickly explore UX fixes on real interface states in editable layers.

Builder.io Visual Copilot / Figma

Storybook screen system mapping

AI imports code-defined screens and Storybook states into Figma, then suggests matching components, tokens, and variables from the design system.

Figma / Storybook / Cursor

Need Help Implementing AI in Your Organization?

I help companies navigate AI adoption -- from strategy to production. Whether you are building your first LLM-powered feature or scaling an agentic system, I can help you get it right.

LLM Orchestration

Design and build LLM-powered products and agentic systems

AI Strategy

Go from idea to production with a clear implementation roadmap

Compliance & Safety

Build AI with human-in-the-loop in regulated environments

Related Prompts (4)

Latest community stories (3)

Personal Story
Blog

I turned my design process into a dozen small skills, not one giant prompt

The first version of my design workflow was one enormous prompt. Thousands of words describing every step of how we design. I was pretty proud of it. It held together for about three steps and then quietly fell apart.

Not with an error. It failed the way a big prompt always does. The model lost the thread halfway down, blended two steps into one, skipped the one in the middle, and handed me something that looked like process but wasn't. And I couldn't fix it, because touching one part broke three others. One block of text, no seams.


The deeper problem was worse than maintenance. A single prompt gave the AI nowhere to stop. It ran from requirements straight to a prototype in one breath, sailing past every point where a human should have said "wait." It was automating the exact thing I'd promised to keep human.


Think of it as a team, not a prompt


The fix was to stop treating it as a prompt and start treating it as a team. A team isn't one person holding the whole job in their head. It's small roles with clear handoffs, and a check before the next person picks it up.

PS
Prateek SinghSenior Product Designer
Aug 7, 2026
News
LinkedIn

4 ways we’re using our MCP server at Figma

Fun fact! I’m a huge fan of using the Figma MCP server with slides. Just ask my team, I’ve sent them 10 examples of how cool it is.

Check out the link below for an overview!

MD
Mallory DeanDesigner Advocate at Figma
Jul 31, 2026
News
Medium

Figma Just Made β€œBack to Design” Much More Useful

Importing a live product screen into a design tool has never been the hard part.

The hard part is what happens next.


You often get a picture made of editable layers, but not the system behind it. A brand blue becomes a hex value. A spacing token becomes 24 pixels. A responsive layout becomes a pile of positioned objects. The screen looks familiar, yet behaves like a stranger inside the file.


Figma’s July 16 update aims at that less glamorous and far more important problem.


When you bring a code-backed screen onto the Figma canvas, its colours, typography, and spacing can now connect to most of the variables already in your file. More frames also arrive with auto layout. In other words, Figma is trying to preserve some of the design logic behind the pixels, not merely the pixels themselves.

AR
Ayush RamawatProduct designer
Jul 20, 2026