Components

To improve the output of your code, you can set up Code Connect to reuse existing components without having to prompt for it.

Code Connect

Figma’s Code Connect is a bridge between code and Dev Mode. It will connect your design components to code components. When selecting a component in Dev Mode, you will see an actual code snippet used from the codebase. This can be helpful, but where it gets really interesting is when you pair up Code Connect with Figma MCP. A selection can then be implemented with your actual components without you having to give it literal instructions to do so. Meaning less cleanup work and faster development.

Good to know, Code Connect currently supports:

  • React (or React Native)
  • HTML (Web Components, Angular, Vue, etc.)
  • SwiftUI
  • Jetpack Compose
  • For languages or frameworks that are not supported, you can create a custom parser.

Set up Code Connect

Using terminal

To set up Code Connect using the terminal, you have to follow a few steps:

  1. Install prerequisites: Make sure Node.js (version 18+) is installed and generate a Figma personal access token. Set the Code Connect scope to Write and File content to Read.
  2. Install Code Connect CLI: Run npm install --global @figma/code-connect@latest in your terminal.
  3. Begin interactive setup: In your project root, run: npx figma connect --token=PERSONAL_ACCESS_TOKEN, and follow the prompts to setup your component directory and Figma design system file URL.
  4. Configure property mappings: Use the terminal wizard to map design component properties to your code components; review, edit, and confirm the generated configuration files. This will be done automatically, but if your Figma components don’t match your code components, you might have to make some changes either in code or design. Make sure your properties are set up in the same way.
  5. Publish Code Connect files: Run npx figma connect publish --token=PERSONAL_ACCESS_TOKEN to publish your mapped components and make code snippets visible in Figma’s Dev Mode.

Read the full setup guide for Code Connect CLI

Using the UI

As of October 2025 the Code Connect UI is still in open beta, so this might change in the future.

To open the UI go to a library file and switch to Dev Mode. From the file name dropdown menu select Library > Connect components. When setting up Code Connect using the UI you can either connect a GitHub repo or do a manual mapping.

  • Connect to GitHub (recommended by Figma)
    You have to authorize Figma to access GitHub. After that, you can select components directly using the interface.
  • Manual mapping
    If your code is not in GitHub, you can do a manual mapping. For this, you will have to manually add the file path or URL and the component name.

Read the full setup guide for Code Connect UI

Figma MCP
DESIGN
ENGINEERING
Prototyping