Skip to main content

Getting Started with Code Connect UI (Beta)

warning

Code Connect UI is currently in open beta. Some features may not yet be available, and you may encounter bugs or performance issues during this period. Functionality and settings may change before general release.

info

Available on a Dev or Full seat on the Organization, and Enterprise plans

Requires a Figma library file with published design components

Code Connect UI lets you map design components in your Figma libraries to the corresponding code components in your repository. These mappings enhance the Figma MCP server by giving AI agents direct references to your code, enabling more accurate implementation guidance.

Connect your design library​

  1. In Figma, open a library file that contains design components.
  2. Switch to Dev Mode.
  3. From the dropdown menu next to the file name, choose Library → Connect components to code.
Code Connect UI menu

The Code Connect UI opens and lists all published components from the library. From here, you can begin mapping components to your codebase.

Code Connect UI

Click the Settings icon in the Code Connect UI to connect your repository to GitHub.

Once connected:

  • Mapping fields will autocomplete with file paths from your repository.
  • You can still create mappings manually by entering the component path and, optionally, the component name.

Code Connect UI - connecting all buttons

All mappings are shared with the Figma MCP server. Whenever a mapped design component is used, its code context is included in the data sent to AI agents.

Connect components from a selected frame​

When you run the Figma MCP server on a selected frame, the quality of results depends on whether its design components are connected to code.

  • If the frame contains unmapped components, the MCP server won’t have complete context, and results may be less accurate.
  • From Dev Mode’s inspect panel, click Connect components to open the Code Connect UI. This allows you to connect missing components for the current frame.
  • Once added, mappings are shared with the MCP server immediately and used as context, improving the accuracy of AI-generated results.

Code Connect UI - In context