AI-assisted reverse design from production screens and design-system mapping
Figma’s updated code-to-design workflow helps designers pull live, authenticated, or code-only product screens back into Figma with more preserved structure, then map imported colours, typography, spacing, and components to existing variables and libraries so teams can explore changes to real interfaces without rebuilding the current state from scratch.
Why the human is still essential here
Designers still need to audit bindings and mappings, test layout behavior, decide what product change to make, 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 CopilotAuthenticated 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 / FigmaLegacy UI modernization kickoff
Designers convert older production pages into editable Figma frames to preserve the existing layout logic and accelerate concepting for a modernization project.
html.to.design / FigmaNeed 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 (2)
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.