Figma: code-backed screens now import with variables attached

Figma released an update on July 16, 2026 that changes how code-backed content arrives on the design canvas. When importing code-backed screens, Make previews, or web page captures, colors, type styles, and spacing values now automatically bind to existing design variables rather than landing as hardcoded values. More frames also arrive with auto layout enabled, reducing the manual cleanup that previously followed any import.

The change matters for teams running mixed design-code workflows. Previously, importing screens from a codebase or using Figma Make to generate a prototype meant receiving a static snapshot: useful for review but disconnected from the design system. Variables had to be reassigned manually, a step that created friction and was easy to skip under deadline pressure. The update removes that step from the workflow.

Figma’s code-to-canvas direction has been accelerating since Config 2026, and this release continues that pattern. For teams working with Code Connect or the Figma MCP server, imported screens now arrive in a state that is already usable within the design system rather than requiring a separate cleanup pass. For designers testing Make-generated prototypes, the output lands closer to a workable state than before.

The update is most relevant for product designers working on codebases with established design tokens and variable structures. Teams that have not yet set up design system variables in Figma will see less immediate benefit, but the release signals where Figma’s code integration is heading: toward a workflow where the gap between what’s in the codebase and what’s on the canvas continues to narrow.