Align all your code components with your Figma components in the Code Connect UI. Users now have the ability to:
- Attach multiple code files to a single Figma component
- See code previews across multiple frameworks (requires GitHub connection)
- Set MCP instructions specific for each code framework to help agents implement those components correctly
This feature is now available for all Organization and Enterprise plans.
How it works
- Open a component in Figma
- Navigate to the Code Connect panel
- Add multiple code mappings for different frameworks
- Each mapping can have its own MCP instructions
Benefits
- Multi-framework support: Map React, Angular, Vue, and Web Components to the same Figma component
- Better AI assistance: MCP instructions help coding agents understand how to use each component correctly
- GitHub integration: See live code previews directly in Figma