Skip to main content

Introduction

info

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

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.

Code Connect UI (open 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.

Code Connect UI is a new way to connect your components using Code Connect. It runs entirely inside Figma and connects directly to GitHub for repository access and mapping context. This makes it easier to scale across both design and engineering teams, with upcoming features like automated mapping and broader framework support. Getting started with Code Connect UI →

note

It is still possible to use the Code Connect CLI to connect your components. In both cases the connections will be used to provide more code context via the Figma MCP server.

Code Connect CLI​

Make your design system easily accessible to your developers and create a shared source of truth for both the design and code elements.

Our getting started guide will walk you through the process of setting up Code Connect CLI, using our interactive setup to automatically map components, and publishing your first components. Getting started with Code Connect CLI →

Refine those mappings with a flexible API​

Code Connect CLI comes with support for different frameworks and languages. Our integration guides will walk you through the process of refining your components by mapping props and variants for:

Button.figma.tsx
import figma from '@figma/code-connect/react'

figma.connect(Button, 'https://...', {
  props: {
    label: figma.string('Text Content'),
    disabled: figma.boolean('Disabled'),
    size: figma.enum('Size', {
      Large: 'large',
      Medium: 'medium',
      Small: 'small',
    }),
  },
  example: ({ disabled, label, size }) => {
    return (
      <Button size={size} disabled={disabled}>
        <Text>{label}</Text>
      </Button>
    )
  },
})

Publish to Figma to make handoff a breeze​

Once published, your components will be available in Figma’s Dev Mode, displaying the true-to-production code snippets from your design system instead of autogenerated code examples.

image