Code Connect

What is Code Connect?

Code Connect is a Figma tool that links your design components to their real code implementations. When a developer selects a component in Figma, instead of seeing auto-generated code snippets, they see the actual code from your codebase — with the correct import paths, prop names, and usage patterns.

This eliminates the most common source of design-to-code drift: developers guessing how to implement a component instead of using the existing implementation.

How It Works

Code Connect operates in four steps:

• Step 1: You create a .figma.tsx file next to your component that describes how the Figma component maps to your React component.
• Step 2: You run npx figma connect publish to upload the mapping to Figma.
• Step 3: When a developer selects the component in Figma, the Dev Mode panel shows your real code instead of auto-generated markup.
• Step 4: As your code changes, you update the .figma.tsx file and republish. The Figma panel always reflects your latest code.

Installation & Auth

Install the Code Connect CLI as a dev dependency:

npm install --save-dev @figma/code-connect

Authenticate with your Figma account:

npx figma connect auth

This will open a browser window where you log in to Figma and authorize the CLI. Your token is stored locally and used for all subsequent commands.

Your First Code Connect File

Step 1 — Get the Figma Component URL

In Figma, right-click on a component and select Copy link to selection. This gives you a URL like:

https://www.figma.com/design/ABC123/MyDesignSystem?node-id=1234-5678

You will paste this URL into your .figma.tsx file.

Step 2 — Create the .figma.tsx File

Create a file next to your component with the .figma.tsx extension:

// components/ui/Button.figma.tsx
import figma from "@figma/code-connect"
import { Button } from "./button"

figma.connect(Button, "https://www.figma.com/design/ABC123/MyDesignSystem?node-id=1234-5678", {
  props: {
    label: figma.string("Label"),
    variant: figma.enum("Variant", {
      Primary: "default",
      Secondary: "secondary",
      Destructive: "destructive",
      Outline: "outline",
      Ghost: "ghost",
    }),
    size: figma.enum("Size", {
      Small: "sm",
      Medium: "default",
      Large: "lg",
    }),
    disabled: figma.boolean("Disabled"),
    icon: figma.instance("Icon"),
  },
  example: (props) => (
    <Button
      variant={props.variant}
      size={props.size}
      disabled={props.disabled}
    >
      {props.icon}
      {props.label}
    </Button>
  ),
})

Publishing

Before publishing, validate your Code Connect files to catch errors:

npx figma connect validate

If validation passes, publish:

npx figma connect publish

After publishing, open Figma, select the component, and switch to the Dev Mode panel. You should see your real code snippet instead of the auto-generated one.

Tip: Add these commands to your package.json scripts for convenience:

"scripts": {
  "figma:validate": "figma connect validate",
  "figma:publish": "figma connect publish"
}

Figma Property Types

Code Connect provides several helper functions for mapping Figma properties to React props:

Real Example — Card Component

// components/ui/Card.figma.tsx
import figma from "@figma/code-connect"
import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "./card"

figma.connect(Card, "https://www.figma.com/design/ABC123/MyDesignSystem?node-id=5678-9012", {
  props: {
    title: figma.string("Title"),
    description: figma.string("Description"),
    content: figma.children("Content"),
    footer: figma.children("Footer"),
    hasShadow: figma.boolean("Has Shadow"),
  },
  example: (props) => (
    <Card className={props.hasShadow ? "shadow-lg" : ""}>
      <CardHeader>
        <CardTitle>{props.title}</CardTitle>
        <CardDescription>{props.description}</CardDescription>
      </CardHeader>
      <CardContent>
        {props.content}
      </CardContent>
      <CardFooter>
        {props.footer}
      </CardFooter>
    </Card>
  ),
})

Troubleshooting