Code Connect — The Bridge Figma Was Missing

In my last post I tested three methods for Figma-to-code — MCP, property copy, and CSS export. The best I got was 90%. The core problem was always the same: AI agents were drowning in context. Duplicate variants, unresolved tokens, inner component opacity. The agent was parsing too much and understanding too little.

Rosu Octavian dropped a comment that reframed the whole thing. His suggestion wasn't to parse better — it was to stop parsing altogether for connected components. That's what Code Connect does.

Quick Recap — The Root Problem

Figma files are built for human eyes. Duplicate variants for visual clarity, design tokens as names not values, component trees that AI agents have to traverse layer by layer. The result: context overload, accuracy loss, 90% ceiling.

What Code Connect Actually Does

Code Connect is a mapping layer. You link a Figma component to its real code implementation — the actual file in your repo. Once that mapping exists, when an AI agent looks at a Figma frame, it doesn't parse the inner layers of that component. It just reads: "This is a Button. Variant: no-icon. Here's where it lives in code."

The agent becomes a composer, not a renderer. It assembles screens from known, pre-mapped building blocks instead of trying to infer implementation from layer data.

Two Ways to Set It Up

Figma offers two approaches. Pick based on how technical your workflow is.

Option A — Code Connect UI

No CLI, no code. Entirely inside Figma. Best for getting started fast or for design-led teams.

Option B — Code Connect CLI

More setup, but this is the right path if you're a developer who wants full prop mapping, dynamic examples, and tight control over what the agent sees.

Install and authenticate

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

# Set your personal access token
# Get this from Figma → Account Settings → Personal access tokens
export FIGMA_ACCESS_TOKEN=your_token_here

Run the interactive setup

# Point it at your Figma file URL
npx figma connect

The CLI walks you through matching Figma components to code components, then generates a .figma.ts file for each match. You can edit the list — navigate with arrow keys, press enter to reassign, type to filter.

The connection file — this is the core

import figma from '@figma/code-connect/react'
import { Button } from '../components/Button'

figma.connect(Button, 'https://figma.com/file/YOUR_FILE?node-id=...', {
  props: {
    // Map Figma prop names → your code prop names
    label:    figma.string('Text Content'),
    disabled: figma.boolean('Disabled'),
    icon:     figma.boolean('Has Icon'),
    size:     figma.enum('Size', {
      Large:  'lg',
      Medium: 'md',
      Small:  'sm',
    }),
    variant: figma.enum('Variant', {
      Primary:   'primary',
      Secondary: 'secondary',
      Ghost:     'ghost',
    }),
  },
  example: ({ label, disabled, size, variant, icon }) => (
    <Button
      size={size}
      variant={variant}
      disabled={disabled}
      icon={icon}
    >
      {label}
    </Button>
  ),
})

The Figma node URL — that long node-id string — comes from right-clicking the component in Figma and choosing "Copy link to selection." You need the main component, not an instance.

Publish to Figma

npx figma connect publish --token=$FIGMA_ACCESS_TOKEN

# Verify what's published
npx figma connect list

After publishing, open any frame in Dev Mode. Select a component instance — you'll see a Code Connect section in the inspect panel with a live, prop-resolved snippet from your actual codebase. Not autogenerated. Yours.

The Rosu Trick — Variant Filtering via Instance Layer Name

This was the specific insight from the LinkedIn thread that solves the duplicate variant problem. When the agent reads a Figma frame via the REST API, instead of ingesting every variant definition, you set a detection rule on the component instance layer name.

The agent reads the layer name, identifies which component and variant it is, and records only that — skipping the visual duplicates entirely. Combined with Code Connect mappings, the flow becomes:

Screen: Dashboard

Components detected:
  → Button (variant="primary", size="md", label="Save changes")
  → Input  (variant="with-label", placeholder="Search...", disabled=false)
  → Badge  (variant="success", label="Active")

No inner layer traversal. No duplicate variant noise.
Each component resolves directly to its code implementation.

You still need to map the standalone component once. But after that, every instance on every screen is just a name and a prop set. Context stays flat. Accuracy holds.

What This Solves vs. What It Doesn't

The Revised Accuracy Picture

The jump from 90% to ~97% is real, but it's conditional. Code Connect only helps where you've done the mapping work. Every unmapped component is still a full layer-traversal problem. This is why starting with your top 10 most-used components is the right move — highest ROI on the mapping effort, immediate accuracy improvement on the screens that matter most.

Honest Take

Code Connect is the right architectural direction. Linking design components to code by reference — instead of parsing them on every agent call — is exactly how this should work. The MCP integration is genuinely useful: per-component instructions, direct code references, variant prop resolution. This is progress.

But it's not a switch you flip. It's infrastructure. You're essentially building and maintaining a handoff layer between your design system and your codebase. For a mature, stable design system with tight designer–developer collaboration, the payoff is real. For a fast-moving startup where design and code are still diverging weekly, it's overhead that will fight you.

And the plan gate is a problem. Locking this behind Organization/Enterprise pricing means the teams most likely to benefit from better AI tooling — smaller studios, freelancers, indie devs — can't use it. That's a product decision that undercuts the whole pitch.

Still — of everything I've tested, Code Connect + MCP is the closest thing to a real solution. 97% is achievable on components you've mapped. The last 3% is either a Figma rendering problem or a maintenance problem. Neither is easily solvable today.