Figma Code Connect

Figma Code Connect

Figma Code Connect links your React components directly to their Figma counterparts. When a developer clicks a component in Figma Dev Mode, they see your exact React code — not a generated approximation.

What Code Connect Does

Without Code Connect:

Figma Dev Mode → generated CSS + HTML → developer has to translate manually

With Code Connect:

Figma Dev Mode → your actual React component code → ready to copy-paste

Code Connect files (.figma.tsx) define the mapping between a Figma component and a React component, including how Figma variant properties map to React props.

Setup

Code Connect is configured in .vscode/mcp.json and uses the FIGMA_API_KEY from your environment.

The code-connect-components skill handles the full authoring workflow. Invoke it with:

"Connect this component to Figma using code connect"
"Create a Code Connect mapping for the Button component"

Creating a Code Connect File

1. Get the Figma Component URL

In Figma, right-click your component → Copy link. This gives a URL like:

https://www.figma.com/design/FILE_ID/FileName?node-id=123:456

2. Create the .figma.tsx File

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

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

figma.connect(
  Button,
  "https://www.figma.com/design/FILE_ID/FileName?node-id=123:456",
  {
    props: {
      label: figma.string("Label"),
      variant: figma.enum("Variant", {
        Primary: "primary",
        Secondary: "secondary",
        Outline: "outline-primary",
        Danger: "danger",
        Link: "link",
      }),
      disabled: figma.boolean("Disabled"),
    },
    example: ({ label, variant, disabled }) => (
      <Button variant={variant} disabled={disabled}>
        {label}
      </Button>
    ),
  },
);

3. Publish to Figma

After creating the file, publish the mapping to Figma Dev Mode:

npx figma connect publish

Figma will now show your React code when a developer inspects the Button component in Dev Mode.

Available figma Prop Helpers

Helper	Figma Property Type	Example
figma.string("Prop")	Text / string	Labels, placeholder text
figma.boolean("Prop")	Boolean toggle	disabled, checked
figma.enum("Prop", map)	Variant / enum	variant, size, color
figma.children("Slot")	Nested components	Slot children
figma.instance("Prop")	Component instance	Icons, avatars
figma.nestedProps("Prop", obj)	Nested variant properties	Complex prop structures

Example: Card Component

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

figma.connect(
  Card,
  "https://www.figma.com/design/FILE_ID/FileName?node-id=789:012",
  {
    props: {
      title: figma.string("Title"),
      hasHeader: figma.boolean("Has Header"),
    },
    example: ({ title, hasHeader }) => (
      <Card>
        {hasHeader && (
          <CardHeader>
            <CardTitle>{title}</CardTitle>
          </CardHeader>
        )}
        <CardContent>{figma.children("Content")}</CardContent>
      </Card>
    ),
  },
);

Using the code-connect-components Skill

The code-connect-components skill handles the full Code Connect workflow:

1. Fetches the Figma component structure via MCP
2. Maps variants to React props automatically
3. Generates the .figma.tsx file
4. Publishes to Figma Dev Mode

Invoke with:

"Connect the Button component to Figma using code connect"
"Create code connect mappings for all components in src/client/components/ui/"

Which Components to Connect

Prioritize:

• High-frequency components — Button, Input, Card, Badge, Avatar
• Components with variants — Those with Figma variant properties map cleanly to React props
• Design system primitives — DSAi tokens (color, typography, spacing)

Skip or defer:

• One-off layout components not shared across designs
• Components that change frequently during iteration

Maintenance

When a component's API changes (new prop, renamed variant), update the .figma.tsx file and re-publish:

npx figma connect publish

→ Figma Integration — MCP setup and overall workflow · Figma Tokens — Design token mapping