Code Connect UI: Multi-Framework and Multi-File Component Mapping
FigmaFigma updated Code Connect UI on March 4, 2026, adding the ability to attach multiple code files to a single Figma component and preview implementations across different frameworks side by side. Teams can now map one design component to multiple code implementations — such as React, SwiftUI, Jetpack Compose, or Vue — and set per-framework MCP instructions to guide AI agents.
Sources & Mentions
5 external resources covering this update
Figma Code Connect UI Gets Multi-Framework and Multi-File Component Mapping
Figma shipped a meaningful update to Code Connect UI on March 4, 2026, introducing one-to-many component mapping.
What Changed
Previously, Code Connect allowed a design component to be linked to a single code file. With the March 4 update, the Code Connect UI now supports attaching multiple code files to one Figma component.
Multi-Framework Code Preview
Framework-specific code previews are now available directly in Dev Mode. Developers inspecting a component can switch between framework views and see generated code snippets that reflect the actual connected source files.
Per-Framework MCP Instructions
The update adds the ability to set MCP instructions on a per-framework basis. This means teams can provide AI agents with specific guidance for each code implementation — helping tools like Claude Code or Cursor generate more accurate component usage.
Who It Affects
Available to users on Figma's Organization and Enterprise plans who have a Dev or Full seat. GitHub repository integration is optional but required for the framework-specific preview functionality.
Why It Matters
Design systems at scale often span multiple platforms, and previously keeping those code implementations in sync with Figma components required manual documentation or CLI tooling. Code Connect UI moves that mapping work into a visual interface inside Figma itself.