Code Connect

Who can use this feature

Available on the Organization and Enterprise plans

Requires a Full or Dev seat

Code Connect is a bridge between your codebase and Figma's Dev Mode, connecting components in your repositories directly to components in your design files. When implemented, these connections enhance the Figma MCP server's ability to guide AI agents with more precise implementation details by giving them direct references to your actual code.

Note: This is a general overview for approaching Code Connect as an organization. For implementation details and code samples, see the Code Connect developer documentation.

Code Connect UI open beta

🚧 Code Connect UI is currently in open beta. Some functions and settings may not yet be available. The feature may change and you may experience bugs or performance issues during the beta period.

The Code Connect UI helps you link design components in your Figma libraries to the corresponding code components in your codebase. It runs entirely inside Figma and connects directly to GitHub for repository access and mapping context. These connections enhance the MCP server’s ability to guide AI agents with more precise implementation details by giving them direct references to your actual code.

720092c03c3c9ff23b8cf2827c2a195c4b262c46.gif

Connection types

Connect to a GitHub repository (recommended)

Authorize Figma to access your GitHub repository and select components directly. This gives Figma the ability to be aware of code changes and allows you to browse and map components from your repo.

Manual mapping

Link components manually by pasting the relevant file path or URL and the component name.

Once mapped, this information is shared with the Figma MCP server. Anytime this design component is used, the linked code info is included in the design context sent to AI agents.

See our developer documentation to learn more about getting started with Code Connect UI ->

Note: You can only choose one connection type at a time, but you can switch between them later if needed.

Code Connect CLI

When using Code Connect CLI, Dev Mode displays real world code snippets defined by your design system instead of the autogenerated code snippets that Dev Mode provides by default. In addition to connecting component definitions, Code Connect CLI can also map properties from code to Figma, enabling dynamic and correct snippets.

Code Connect CLI is especially useful when you have an existing design system and want to drive consistent and correct adoption of that design system across design and engineering.

Overview

The exact steps you take to set up Code Connect CLI depend on the architecture of your design system and codebase. For example, if you use SwiftUI, you'll plan your approach to use the SwiftUI resources we provide.

Generally, your organization will follow these steps to get started:

  1. Plan the implementation. Usually this includes:
    • Identifying the requirements of your front-end developers, such as whether you need support for React or SwiftUI.
    • Identifying the components in your codebase that you want to integrate with Dev Mode.
    • Planning the configuration of Code Connect CLI and the mappings of your components.
  2. Get the Code Connect repository. Code Connect supports:
    • React (or React Native)
    • HTML (Web Components, Angular, Vue, etc.)
    • SwiftUI
    • Jetpack Compose
  3. Implement the component mappings. The exact way you build the mappings will depend on your codebase and design system, but broadly the process involves mapping properties from your design system components to properties in Figma. This allows Code Connect CLI to generate snippets of code that map the values in Figma to the architecture of your components, and then surface those snippets inside Dev Mode.
  4. Review in Dev Mode. In Dev Mode, review the Code Connect CLI output with your developers and designers to ensure the practical usability of the component examples and that the representations are accurate.

To take full advantage of Code Connect CLI, the developers responsible for your design system components should work with your designers to implement the mappings from your production codebase to Figma.

What's available?

To get started with Code Connect CLI, check out the detailed steps we provide in the Code Connect CLI developer documentation.

Code Connect CLI supports:

Additionally, Code Connect CLI provides some advanced features:

The Code Connect CLI repository is available on GitHub.

Privacy and Code Connect CLI

Figma only collects the minimum data needed to enable Code Connect CLI in the interface. When you run figma connect using Code Connect CLI, Figma gets the following data: 

  • The paths for components that are added
  • The repository URL where the Code Connect components are implemented
  • The properties and code in the .figma files

Figma logs only basic events for understanding Code Connect CLI usage: when components are published or unpublished, and calls to get Figma data when using the command-line interface.

For more information about Figma's approach to privacy, see Figma's Privacy Policy.

Was this article helpful?

Your feedback helps us improve Figma’s Help Center. To get help from support, submit a request through our contact form.

Your feedback helps us improve Figma’s Help Center. To get help from support, submit a request through our contact form.

Thank you for helping us improve Figma’s Help Center!