Design-to-code handoff has always had a slightly comic flaw: it mostly works in one direction.
On July 16, Figma changed the return trip. When a code-backed screen comes onto the canvas, its colors, type and spacing can now bind to most variables already in the file instead of arriving as hardcoded values. More imported frames also come in with usable auto layout.
Figma lists three paths where this applies: copying a Figma Make preview as design layers, generating design from code through Figma's MCP server, and capturing a live web page with its Chrome extension.
The real product can come back into the conversation
The interesting part is not importing a screen. Tools have been turning web pages into layers for years, with results ranging from useful to digital archaeology.
The problem is what happens next. If every color and gap becomes an isolated value, the imported screen looks like the product but has lost the logic of the design system. Editing it properly means rebuilding that logic.
By reconnecting values to existing variables and bringing in more auto layout, Figma is trying to preserve some of that structure.
This is not magical two-way synchronization between code and design. Figma says values bind to "most" variables, not all of them. An editable capture does not automatically become a beautifully structured component either.
But the workflow points somewhere useful. A design file no longer has to be only the blueprint that exists before the product. A screen that already exists in code can come back onto the canvas, be discussed and changed without rebuilding everything from scratch.
For small teams where design and code evolve together, that may be more useful than another way to generate mockups. The real product always drifts away from the design file eventually. Giving that drift a route back is a practical improvement.