Boosting AI Component Reuse with Figma Code Connect — From Mapping to Measurement in Large-Scale Design Systems

This article is written for frontend developers who use Figma Dev Mode. If you're new to Figma Dev Mode, it's enough to understand it as the feature that lets developers see CSS properties and code snippets when selecting a component in Figma.

Have you ever carefully built a design system, only to watch an AI editor ignore it and generate a brand-new component from scratch? I didn't understand why at first, but it turned out to be a simple reason — or more precisely, an obvious one. AI works without any knowledge of what components exist in your codebase or how to use them. Even with the Figma MCP Server, if there are no Code Connect mapping files, all the AI receives is layout coordinates.

When Code Connect mapping files are properly in place, the AI shifts from "guessing and generating new components" to "importing and reusing existing ones." This is why real-world adoption cases report saving 98 minutes per developer per week and cutting development time by 50% on specific projects. In this article, we'll look at how to systematically apply Code Connect to a design system with hundreds of components, and how to quantitatively measure its impact.

Core Concepts

Code Connect's Role in AI Code Generation

Code Connect is a mapping system that creates a 1:1 connection between Figma components and actual code components. By placing a .figma.ts file next to a component file, the Figma MCP Server delivers actual import paths, prop signatures, and usage examples — not just layout coordinates — to AI editors like Cursor and Claude Code.

Each mapping file contains four pieces of information:

Information	Role
Figma component URL	Identifies which Figma component to connect to
`source` field	Location of the actual code file
Props mapping	Conversion logic between Figma property names ↔ code props
`example` function	Actual usage examples exposed to Dev Mode and AI editors

Figma MCP Server is a server that connects AI code editors to Figma file information via the Model Context Protocol. When an MCP tool responds for a component that has a Code Connect mapping, the response includes not just layout information, but also the import path, props definition, and code examples in JSON form. The AI reads this data to learn "where this component lives and how to use it."

Two Approaches for Large-Scale Adoption

For teams with hundreds of components, choosing the right approach matters.

Approach	Characteristics	Best Suited For
Code Connect CLI	Runs locally, supports props mapping and dynamic code examples, high precision	When the codebase already exists and you want fine-grained control
Code Connect UI	Runs inside Figma, connects directly to GitHub repositories, AI auto-suggests code files, no coding required	Organization/Enterprise plans, when you want to get the initial setup done quickly

Honestly, the CLI approach is more accurate and flexible. The UI approach is Enterprise-only, which is limiting, but since the barrier to entry is nearly zero, a realistic strategy is to use the UI to establish the big picture and then refine with the CLI.

Practical Application

Define the Mapping Scope First with figma.config.json

The most common mistake when first trying Code Connect is starting by creating .figma.ts files. I did the same thing — I made all the files, ran figma connect publish, and nothing was uploaded. I spent a long time debugging. The CLI doesn't know where to look, so the right order is to configure figma.config.json at the project root first.

json

{
  "codeConnect": {
    "include": ["src/components/**/*.figma.ts"],
    "label": "React",
    "language": "jsx"
  }
}

For monorepo setups, it's recommended to separate figma.config.json per package to explicitly define each package's scope. Managing them as packages/ui/figma.config.json and packages/marketing/figma.config.json keeps the mapping scope of shared components and domain-specific components from getting mixed up.

Writing Mapping Files Per Component

This is the most fundamental pattern. Here's what it looks like using a Button component as an example.

You can copy the Figma component URL by selecting the component in Figma, right-clicking, and choosing "Copy link to selection." The format typically looks like this:

https://www.figma.com/design/[FILE_KEY]/[FILE_NAME]?node-id=[NODE_ID]

You can pass this directly as the second argument to figma.connect.

typescript

// Button.figma.ts
import figma from "@figma/code-connect";
import { Button } from "./Button";
 
figma.connect(Button, "https://www.figma.com/design/[FILE_KEY]/[FILE_NAME]?node-id=[NODE_ID]", {
  props: {
    variant: figma.enum("Variant", {
      primary: "primary",
      secondary: "secondary",
    }),
    disabled: figma.boolean("Disabled"),
    label: figma.string("Label"),
  },
  example: ({ variant, disabled, label }) => (
    <Button variant={variant} disabled={disabled}>{label}</Button>
  ),
});

Code Element	Role
`figma.connect(Button, URL, ...)`	Connects the code component to the Figma component
`figma.enum("Variant", {...})`	Converts a Figma Variant property to code prop values
`figma.boolean("Disabled")`	Connects a Figma boolean layer to a code prop
`example` function	Actual usage example exposed to Dev Mode and AI editors

One thing to watch out for is case sensitivity. It's common for mapping to silently fail when Figma has "Variant" but the code uses "variant". It's safest to copy the Figma property name exactly.

Use Batch Processing for Components with Repetitive Structures Like Icons

Creating 300 .figma.ts files for 300 icons is not realistic. For components that share the same code structure, you can use a batch approach that processes them in a loop within a single file. This is a situation that comes up often in practice, and I've seen teams struggle significantly with maintenance when they tried an individual-file approach for icons without batch processing.

typescript

// icons.figma.ts
import figma from "@figma/code-connect";
import * as Icons from "./icons";
 
const iconMappings = [
  { name: "IconArrow", figmaUrl: "https://www.figma.com/design/[FILE_KEY]/[FILE_NAME]?node-id=[ARROW_NODE_ID]" },
  { name: "IconClose", figmaUrl: "https://www.figma.com/design/[FILE_KEY]/[FILE_NAME]?node-id=[CLOSE_NODE_ID]" },
  // ... hundreds more can be added with the same pattern
];
 
iconMappings.forEach(({ name, figmaUrl }) => {
  const IconComponent = Icons[name as keyof typeof Icons];
  // Guards against icon names that don't exist
  if (!IconComponent) return;
 
  figma.connect(IconComponent, figmaUrl, {
    props: {
      size: figma.enum("Size", { sm: "sm", md: "md", lg: "lg" }),
    },
    example: ({ size }) => <IconComponent size={size} />,
  });
});

The official Figma documentation also recommends this approach for icon libraries.

Automatically Tracking Component Reuse Rate Per PR

If you've adopted Code Connect, its impact only has meaning if you actually measure it. There are three quantitative metrics you can use in practice:

Coverage: The ratio of design system component renders to total component renders. Teams at Mews and Supernova, among others, commonly cite 80%+ as the benchmark for a mature system.
Detachment Rate: The ratio of design system components replaced with custom variants. A high rate signals that the design system isn't keeping up with real-world requirements.
Adoption Rate: The ratio of active projects using the design system.

For AI-generated code specifically, per-PR tracking is the most practical approach. Running the Omlet CLI on every PR via GitHub Actions lets you automatically generate component change reports.

yaml

# .github/workflows/component-report.yml
name: Component Report
on: [pull_request]
jobs:
  omlet-scan:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Run Omlet scan
        run: npx omlet scan --output pr-report.json
      - name: Comment PR with report
        uses: actions/github-script@v6
        with:
          script: |
            const report = require('./pr-report.json');
            // The actual Omlet output schema may vary by version, so
            // it's recommended to check the pr-report.json structure locally first
            github.rest.issues.createComment({
              issue_number: context.issue.number,
              owner: context.repo.owner,
              repo: context.repo.repo,
              body: `## Component Reuse Report\n\`\`\`json\n${JSON.stringify(report, null, 2)}\n\`\`\``
            });

Monitoring "Component Not Found" patterns is also useful. By detecting commits where the AI created a component that didn't already exist, you can work backwards to identify which component mappings are missing.

Pros and Cons Analysis

Advantages

Item	Details
Improved AI reuse accuracy	Without mapping, AI is unaware that components exist and generates new ones. After mapping, MCP delivers actual paths and props as JSON, significantly increasing reuse of existing components
Automated Dev Mode snippets	When designers select a component in Figma, they can immediately see actual production code examples
Suppression of legacy component usage	Since AI only references components with mapping files, older component versions are naturally excluded
Multi-framework support	Broadly supports React, Vue, Angular, Web Components, SwiftUI, Compose, and more
Time savings	Based on adoption cases cited in the official Figma blog, reports of 98 minutes saved per developer per week and 50% reduction in development time on specific projects

Disadvantages and Caveats

Item	Details	Mitigation
Initial setup effort	Writing `.figma.ts` files for hundreds of components is substantial work	Use batch approach for identical patterns like icons; use Code Connect UI for initial auto-suggestions
Props mapping mismatch	Maintenance costs arise when Figma property names differ from code prop names	Establish naming conventions between designers and developers upfront
Enterprise restriction	Code Connect UI is only available on Organization/Enterprise plans	The same goal is achievable with the CLI approach
Incomplete Design Token integration	Directly connecting W3C Design Tokens Format to Code Connect is not supported	Run Style Dictionary as a separate parallel pipeline

Style Dictionary is an open-source pipeline tool that converts Figma tokens into code variables for various platforms (CSS Custom Properties, JS constants, etc.).

The Most Common Mistakes in Practice

Creating .figma.ts files before figma.config.json: No matter how many files you write, if the CLI doesn't know where to look, nothing will be uploaded. Setting up the config first is the starting point for everything.
Mixing case between Figma property names and code prop names: If Figma has "Variant" but you write "variant" in the code, the mapping silently fails. It often passes without any error, making it hard to diagnose.
Finishing with adoption and skipping measurement: Adopting Code Connect isn't the goal — improving AI reuse rates is. If you don't set up Omlet or a GitHub Actions-based report alongside it, you have no way to confirm whether improvement is actually happening.

Closing Thoughts

As mapping coverage increases, AI transforms from a tool that simply generates code into a collaborative tool that truly understands the component assets your team has built up over time. Code Connect mapping files are what drives that transformation, and measurement is what confirms in numbers that the transformation is actually happening.

Here are 3 steps you can start with right now:

Install the package with pnpm add @figma/code-connect, create figma.config.json at the project root, and define the "include": ["src/components/**/*.figma.ts"] scope first. This is the starting point for everything.
Pick the 5–10 components most frequently used by your team, write .figma.ts files for them, and upload to Figma with the figma connect publish command. Checking whether the snippet appears in Dev Mode will immediately tell you if the mapping is properly connected.
Connect Omlet or add a component report step to GitHub Actions, and track for 2–4 weeks how the frequency of new component creation in AI-generated PRs changes before and after Code Connect mapping. Once you see the numbers shift, working on the next component mapping becomes a lot more rewarding.

References

Boosting AI Component Reuse with Figma Code Connect — From Mapping to Measurement in Large-Scale Design Systems | DEV BAK - 기술블로그

Boosting AI Component Reuse with Figma Code Connect — From Mapping to Measurement in Large-Scale Design Systems

Core Concepts

Code Connect's Role in AI Code Generation

Each mapping file contains four pieces of information:

Information	Role
Figma component URL	Identifies which Figma component to connect to
`source` field	Location of the actual code file
Props mapping	Conversion logic between Figma property names ↔ code props
`example` function	Actual usage examples exposed to Dev Mode and AI editors

Figma MCP Server is a server that connects AI code editors to Figma file information via the Model Context Protocol. When an MCP tool responds for a component that has a Code Connect mapping, the response includes not just layout information, but also the import path, props definition, and code examples in JSON form. The AI reads this data to learn "where this component lives and how to use it."

Two Approaches for Large-Scale Adoption

For teams with hundreds of components, choosing the right approach matters.

Approach	Characteristics	Best Suited For
Code Connect CLI	Runs locally, supports props mapping and dynamic code examples, high precision	When the codebase already exists and you want fine-grained control
Code Connect UI	Runs inside Figma, connects directly to GitHub repositories, AI auto-suggests code files, no coding required	Organization/Enterprise plans, when you want to get the initial setup done quickly

Practical Application

Define the Mapping Scope First with figma.config.json

json

{
  "codeConnect": {
    "include": ["src/components/**/*.figma.ts"],
    "label": "React",
    "language": "jsx"
  }
}

Writing Mapping Files Per Component

This is the most fundamental pattern. Here's what it looks like using a Button component as an example.

You can copy the Figma component URL by selecting the component in Figma, right-clicking, and choosing "Copy link to selection." The format typically looks like this:

https://www.figma.com/design/[FILE_KEY]/[FILE_NAME]?node-id=[NODE_ID]

You can pass this directly as the second argument to figma.connect.

typescript

// Button.figma.ts
import figma from "@figma/code-connect";
import { Button } from "./Button";
 
figma.connect(Button, "https://www.figma.com/design/[FILE_KEY]/[FILE_NAME]?node-id=[NODE_ID]", {
  props: {
    variant: figma.enum("Variant", {
      primary: "primary",
      secondary: "secondary",
    }),
    disabled: figma.boolean("Disabled"),
    label: figma.string("Label"),
  },
  example: ({ variant, disabled, label }) => (
    <Button variant={variant} disabled={disabled}>{label}</Button>
  ),
});

Code Element	Role
`figma.connect(Button, URL, ...)`	Connects the code component to the Figma component
`figma.enum("Variant", {...})`	Converts a Figma Variant property to code prop values
`figma.boolean("Disabled")`	Connects a Figma boolean layer to a code prop
`example` function	Actual usage example exposed to Dev Mode and AI editors

One thing to watch out for is case sensitivity. It's common for mapping to silently fail when Figma has "Variant" but the code uses "variant". It's safest to copy the Figma property name exactly.

Use Batch Processing for Components with Repetitive Structures Like Icons

typescript

// icons.figma.ts
import figma from "@figma/code-connect";
import * as Icons from "./icons";
 
const iconMappings = [
  { name: "IconArrow", figmaUrl: "https://www.figma.com/design/[FILE_KEY]/[FILE_NAME]?node-id=[ARROW_NODE_ID]" },
  { name: "IconClose", figmaUrl: "https://www.figma.com/design/[FILE_KEY]/[FILE_NAME]?node-id=[CLOSE_NODE_ID]" },
  // ... hundreds more can be added with the same pattern
];
 
iconMappings.forEach(({ name, figmaUrl }) => {
  const IconComponent = Icons[name as keyof typeof Icons];
  // Guards against icon names that don't exist
  if (!IconComponent) return;
 
  figma.connect(IconComponent, figmaUrl, {
    props: {
      size: figma.enum("Size", { sm: "sm", md: "md", lg: "lg" }),
    },
    example: ({ size }) => <IconComponent size={size} />,
  });
});

The official Figma documentation also recommends this approach for icon libraries.

Automatically Tracking Component Reuse Rate Per PR

If you've adopted Code Connect, its impact only has meaning if you actually measure it. There are three quantitative metrics you can use in practice:

Coverage: The ratio of design system component renders to total component renders. Teams at Mews and Supernova, among others, commonly cite 80%+ as the benchmark for a mature system.
Detachment Rate: The ratio of design system components replaced with custom variants. A high rate signals that the design system isn't keeping up with real-world requirements.
Adoption Rate: The ratio of active projects using the design system.

For AI-generated code specifically, per-PR tracking is the most practical approach. Running the Omlet CLI on every PR via GitHub Actions lets you automatically generate component change reports.

yaml

# .github/workflows/component-report.yml
name: Component Report
on: [pull_request]
jobs:
  omlet-scan:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Run Omlet scan
        run: npx omlet scan --output pr-report.json
      - name: Comment PR with report
        uses: actions/github-script@v6
        with:
          script: |
            const report = require('./pr-report.json');
            // The actual Omlet output schema may vary by version, so
            // it's recommended to check the pr-report.json structure locally first
            github.rest.issues.createComment({
              issue_number: context.issue.number,
              owner: context.repo.owner,
              repo: context.repo.repo,
              body: `## Component Reuse Report\n\`\`\`json\n${JSON.stringify(report, null, 2)}\n\`\`\``
            });

Pros and Cons Analysis

Advantages

Item	Details
Improved AI reuse accuracy	Without mapping, AI is unaware that components exist and generates new ones. After mapping, MCP delivers actual paths and props as JSON, significantly increasing reuse of existing components
Automated Dev Mode snippets	When designers select a component in Figma, they can immediately see actual production code examples
Suppression of legacy component usage	Since AI only references components with mapping files, older component versions are naturally excluded
Multi-framework support	Broadly supports React, Vue, Angular, Web Components, SwiftUI, Compose, and more
Time savings	Based on adoption cases cited in the official Figma blog, reports of 98 minutes saved per developer per week and 50% reduction in development time on specific projects

Disadvantages and Caveats

Item	Details	Mitigation
Initial setup effort	Writing `.figma.ts` files for hundreds of components is substantial work	Use batch approach for identical patterns like icons; use Code Connect UI for initial auto-suggestions
Props mapping mismatch	Maintenance costs arise when Figma property names differ from code prop names	Establish naming conventions between designers and developers upfront
Enterprise restriction	Code Connect UI is only available on Organization/Enterprise plans	The same goal is achievable with the CLI approach
Incomplete Design Token integration	Directly connecting W3C Design Tokens Format to Code Connect is not supported	Run Style Dictionary as a separate parallel pipeline

Style Dictionary is an open-source pipeline tool that converts Figma tokens into code variables for various platforms (CSS Custom Properties, JS constants, etc.).

The Most Common Mistakes in Practice

Creating .figma.ts files before figma.config.json: No matter how many files you write, if the CLI doesn't know where to look, nothing will be uploaded. Setting up the config first is the starting point for everything.
Mixing case between Figma property names and code prop names: If Figma has "Variant" but you write "variant" in the code, the mapping silently fails. It often passes without any error, making it hard to diagnose.
Finishing with adoption and skipping measurement: Adopting Code Connect isn't the goal — improving AI reuse rates is. If you don't set up Omlet or a GitHub Actions-based report alongside it, you have no way to confirm whether improvement is actually happening.

Closing Thoughts

Here are 3 steps you can start with right now:

Install the package with pnpm add @figma/code-connect, create figma.config.json at the project root, and define the "include": ["src/components/**/*.figma.ts"] scope first. This is the starting point for everything.
Pick the 5–10 components most frequently used by your team, write .figma.ts files for them, and upload to Figma with the figma connect publish command. Checking whether the snippet appears in Dev Mode will immediately tell you if the mapping is properly connected.
Connect Omlet or add a component report step to GitHub Actions, and track for 2–4 weeks how the frequency of new component creation in AI-generated PRs changes before and after Code Connect mapping. Once you see the numbers shift, working on the next component mapping becomes a lot more rewarding.

Core Concepts

Code Connect's Role in AI Code Generation

Two Approaches for Large-Scale Adoption

Practical Application

Define the Mapping Scope First with figma.config.json

Writing Mapping Files Per Component

Use Batch Processing for Components with Repetitive Structures Like Icons

Automatically Tracking Component Reuse Rate Per PR

Pros and Cons Analysis

Advantages

Disadvantages and Caveats

The Most Common Mistakes in Practice

Closing Thoughts

References

Core Concepts

Code Connect's Role in AI Code Generation

Two Approaches for Large-Scale Adoption

Practical Application

Define the Mapping Scope First with figma.config.json

Writing Mapping Files Per Component

Use Batch Processing for Components with Repetitive Structures Like Icons

Automatically Tracking Component Reuse Rate Per PR

Pros and Cons Analysis

Advantages

Disadvantages and Caveats

The Most Common Mistakes in Practice

Closing Thoughts

References

Recommended Posts

Figma MCP Server + Claude Code/Cursor Integration: Building React Components from a Single Design URL

Five Inference Optimization Techniques to Double or Quadruple LLM Serving Throughput on the Same GPU — From Quantization to Speculative Decoding

Building an AI Agent Monitoring & Evaluation System: Catching Quality That Silently Breaks in Production with DeepEval and Langfuse

Cutting the Design-to-Code Iteration Cycle by Up to 80% with Figma MCP: Practical Integration of Model Context Protocol and AI Coding Agents

Applying Coding Rules and Design Rules Simultaneously to AI Agents — How to Use CLAUDE.md and DESIGN.md Together for Claude Code Team Setup

DESIGN.md: The Agent-Native File Format That Makes AI Coding Agents Follow Brand Design Rules on Their Own