Figma Code Connect

To use Code Connect, your organization must meet the following criteria:

• Plan: Available on Organization and Enterprise plans.
• Seats: Requires a full Design or Dev Mode seat.

Code Connect is a tool that connects your design system components in code with your design system in Figma. It allows Figma's Dev Mode to display true-to-production code snippets instead of autogenerated examples.

Key capabilities include:

• Connecting component definitions: Linking Figma components to their actual code implementations.
• Property mapping: Mapping properties from code to Figma to enable dynamic and correct code examples.

This helps drive consistent and correct adoption of a design system across both design and engineering teams.

Template files are the recommended, framework-agnostic way to use Code Connect. They provide full control over how components appear in Dev Mode and are the only method that will receive active maintenance moving forward.

Note on deprecation: Framework-specific parsers will no longer receive updates or support starting August 17th, 2026. If you are currently using parser-based Code Connect, you should follow the migration guide to switch to template files.

To automate the connection of large numbers of icons, use the provided example scripts. You must provide a FIGMA_ACCESS_TOKEN environment variable, which can be set directly in the command or provided via an .env file.

To run the script using npx tsx:

FIGMA_ACCESS_TOKEN=<my token> npx tsx import-icons.ts

If the token is already in an .env file, you can simply run:

# Assuming FIGMA_ACCESS_TOKEN is in .env
npx tsx import-icons.ts

The template generation logic converts Figma component property definitions into executable Code Connect code.

| Figma Property Type | Code Connect Method | Notes | | :--- | :--- | :| | BOOLEAN | figma.selectedInstance.getBoolean("name") | | | TEXT | figma.selectedInstance.getString("name") | | | VARIANT | figma.selectedInstance.getEnum("name", { ... }) | Used for multi-option variants. | | VARIANT (Boolean) | figma.selectedInstance.getBoolean("name") | Used if variants are true/false, yes/no, etc. |

Property Name Normalization:

• Figma Property Name: Strips variant index suffixes (e.g., Property#123 $\rightarrow$ Property).
• Code Variable Name: Converted to camelCase and stripped of special characters.

Code Connect uses ResultSection to represent the different types of content that can be emitted in a template. A ResultSectionList is an array of these sections.

Section Types

Usage

These types are primarily used when calling methods like __render__() or when working with the TemplateStringResult returned by template tags.

Code Connect uses modifiers to bridge the gap between Figma components and your actual code. Modifiers allow you to define how a component's properties are retrieved and how it is rendered in code.

There are two primary types of modifiers:

1. getProps: Used to extract the props from a component instance.
2. render: Used to define a render function that returns a JSX element, allowing Code Connect to map Figma properties to specific code implementations.

When using the render modifier, the first argument must be a function (arrow function, function expression, or function declaration) that returns a single JSX element.

If no parser or label is explicitly defined in your figma.config.json, Code Connect uses heuristics to determine them by walking up the directory tree from your current location:

Parser Detection Heuristics

• React: Found if package.json contains react in dependencies or peerDependencies.
• HTML: Found if package.json is present but no other supported web frameworks are detected.
• Swift: Found if *.xcodeproj or Package.swift files exist.
• Compose: Found if build.gradle.kts or build.gradle files exist.
• Custom: Manually specified in config.

Label Detection Heuristics

Code Connect looks for specific libraries in package.json to set a default label:

• Angular: Sets label to Angular if angular is a dependency/peer dependency.
• Vue: Sets label to Vue if vue is a dependency/peer dependency.

When setting up Code Connect, you can enable AI-powered property matching by setting useAi: true. This uses vector embeddings to find the best semantic matches between your code's props and Figma's component properties.

Requirements

• accessToken: A valid Figma access token.
• figmaUrl: The URL of the Figma file.
• apiUrlOverride (Optional): An override for the embeddings API endpoint.

Behavior

• If useAi is true, the CLI attempts to fetch embeddings for all unique matchable names (React props, Figma properties, and variant values).
• If the embedding service is unavailable or returns an error, the CLI logs the error and falls back to standard fuzzy matching to ensure the setup process continues.