Code Connect

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.

Two ways to use Code Connect

There are two ways to connect your code repositories to Figma: Code Connect UI and Code Connect CLI. Both contribute to the same MCP infrastructure, but differ in how they integrate into your workflow.

• Code Connect UI runs entirely inside Figma. It’s quick to set up, language-agnostic, and ideal for teams who want a simple, visual way to link design components to code. You can connect directly to a GitHub repository, or manually provide component paths and optional component names if you use another version control system.

  • Best for design and engineering teams who want an accessible, collaborative setup.
  • Connects to your repository through Figma or through manually entered component paths.
  • Provides component paths, component names, custom instructions, and codebase context to AI agents through the Figma MCP server.
  • Supports multiple code connections for a single design component across different frameworks and languages.

  See the Code Connect UI developer documentation →

• Code Connect CLI runs locally in your repository and provides developers with more precision and flexibility. It uses framework-agnostic template files to support property mappings and dynamic code examples for any codebase or language.

  • Best for developers who want precision and flexibility in how design and code are connected.
  • Runs from the terminal within your local codebase and publishes connections to Figma.
  • Provides property mappings and dynamic code examples that reflect your actual production components.

  See the Code Connect CLI developer documentation →

How Code Connect works with MCP

Both Code Connect UI and CLI feed into Figma’s MCP server, which makes your connected components accessible to AI-enabled tools and code editors. This ensures your design system context is reflected accurately wherever it’s referenced, from Dev Mode to external AI integrations.

Code Connect UI

The Code Connect UI helps you link published design components in your Figma libraries to the corresponding code components in your codebase. It runs entirely inside Figma and can connect 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.

Connection types

Connect to a GitHub repository (optional)

Authorize Figma to access your GitHub repository and select components directly. Connecting to GitHub is optional. You can map your design system components to code paths manually without a GitHub connection.

Manual mapping

Link components manually by entering the relevant path in your codebase and, optionally, the component name.

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

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

Connect one component to multiple frameworks

Code Connect UI supports one-to-many connections, allowing you to map a single design component to multiple code components across different languages or frameworks. For example, you can connect one Button component to its React, SwiftUI, Jetpack Compose, and Vue implementations.

Each connection is independent, so you can provide a different file path, component name, and custom instructions for each implementation.

Enhanced MCP codegen with previews

Code Connect UI includes enhanced MCP codegen, which surfaces example code previews based on your actual connected source files. In Dev Mode, you’ll see AI-generated snippets showing how the component might appear in your codebase, helping you understand implementation details before handing off.

You can also:

• Add custom instructions for each mapping, which Figma includes in the MCP server output to guide AI-assisted tools.
• Use the built-in component playground to see how different configuration options affect your code connections in real time.

Learn more about enhanced MCP codegen in Code Connect UI ->

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 maps properties in Figma to your production component API, enabling dynamic and accurate 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

Code Connect CLI uses template files, a framework-agnostic format that gives you control over how your components are represented in Dev Mode. The exact implementation depends on your design system and codebase, but template files work with any framework or language.

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

1. Plan the implementation. Usually this includes:
   • Identifying the languages and frameworks your design system supports and how code examples should appear.
   • 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. Install and configure Code Connect CLI. Install the command-line tool in your development environment and add a Code Connect configuration file to your project.
3. Implement the component mappings. Create template files that connect your Figma components to their corresponding production components. Map Figma properties to the values and patterns used by your component API so Code Connect can generate accurate examples in Dev Mode.
4. Review in Dev Mode. Review the Code Connect CLI output with your developers and designers to ensure the component examples are useful and accurately represent your production components.

To take full advantage of Code Connect CLI, the developers responsible for your design system components should work with your designers to map Figma properties to the appropriate production component APIs and usage patterns.

What's available?

The recommended way to use Code Connect CLI is with template files. Template files are framework-agnostic and give you full control over the code examples shown in Dev Mode.

• Get started with Code Connect CLI
• Learn how to write template files
• Explore the Template API reference
• Use batch files for large groups of similar components
• Continuous integration

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.