# How the OpenAI Figma Plugin Implements Code Connect Templates for Design-to-Code Workflows

> Discover how the OpenAI Figma plugin uses MCP-driven workflows to generate Code Connect templates for seamless design-to-code implementation. Extracts schemas and emits typed code snippets.

- Repository: [OpenAI/plugins](https://github.com/openai/plugins)
- Tags: how-to-guide
- Published: 2026-06-20

---

**The Figma plugin generates [`.figma.ts`](https://github.com/openai/plugins/blob/main/.figma.ts) templates through a six-step MCP-driven workflow that discovers unmapped components, extracts property schemas, and emits typed code snippets linking design to implementation.**

The **openai/plugins** repository contains a Figma plugin that bridges the gap between design files and production code through **Code Connect**—a system that transforms published Figma components into executable TypeScript templates. According to the source code in [`plugins/figma/skills/figma-code-connect/SKILL.md`](https://github.com/openai/plugins/blob/main/plugins/figma/skills/figma-code-connect/SKILL.md), this process relies on Model-Control-Plane (MCP) tools rather than direct file scraping, ensuring reliable mapping even when components live in shared design libraries.

## The Six-Step MCP-Driven Workflow

The `figma-code-connect` skill organizes template creation into deterministic steps that move from URL parsing to final validation.

### Step 1: Parse the Figma URL

The workflow begins by extracting the `fileKey` and `nodeId` from a Figma component URL. The parser converts hyphenated node identifiers to colon-separated format (e.g., `42-100` becomes `42:100`) to match Figma's internal API expectations.

### Step 2: Discover Unmapped Components

The plugin calls **`get_code_connect_suggestions`** to list components lacking Code Connect mappings. This MCP tool, documented in [`plugins/figma/skills/figma-generate-library/references/code-connect-setup.md`](https://github.com/openai/plugins/blob/main/plugins/figma/skills/figma-generate-library/references/code-connect-setup.md), returns a canonical list of published components that require template generation, filtering out already-mapped instances.

### Step 3: Fetch Component Properties

For each unmapped component, the skill invokes **`get_context_for_code_connect`** to retrieve the property schema. The response enumerates Figma property types including **TEXT**, **BOOLEAN**, **VARIANT**, **INSTANCE_SWAP**, and **SLOT**, along with their valid values and constraints.

### Step 4: Identify Matching Code Components

The system locates the corresponding implementation by searching the codebase (typically `src/components/`) and analyzing TypeScript interfaces. It uses [`figma.config.json`](https://github.com/openai/plugins/blob/main/figma.config.json) and heuristic matching to pair Figma properties with React props, ensuring type compatibility before template generation begins.

### Step 5: Generate the [`.figma.ts`](https://github.com/openai/plugins/blob/main/.figma.ts) Template

The skill creates a TypeScript file containing:
- A header comment with the source URL and component path
- Import of the `figma` runtime API
- Property extraction using `instance.*` helpers
- An exported object with `example`, `imports`, `id`, and optional `metadata`

```typescript
// url=https://www.figma.com/file/abc123/MyDesign?node-id=42-100
// source=src/components/Button.tsx
// component=Button
import figma from 'figma'

const instance = figma.selectedInstance

const label    = instance.getString('Label')
const variant  = instance.getEnum('Variant', {
  Primary:   'primary',
  Secondary: 'secondary',
})
const size     = instance.getEnum('Size', {
  Small:  'sm',
  Medium: 'md',
  Large:  'lg',
})
const disabled = instance.getBoolean('Disabled')
const icon     = instance.getInstanceSwap('Icon')

let iconCode: any = null
if (icon && icon.type === 'INSTANCE') {
  iconCode = icon.executeTemplate().example
}

export default {
  example: figma.code`
    <Button
      variant="${variant}"
      size="${size}"
      ${disabled ? 'disabled' : ''}
      ${iconCode ? figma.code`icon={${iconCode}}` : ''}
    >
      ${label}
    </Button>
  `,
  imports: ['import { Button } from "components"'],
  id: 'button',
  metadata: { nestable: true }
}

```

### Step 6: Validate the Generated Template

After writing the file, the skill re-reads it to verify that every Figma property is accounted for, the code is type-correct against the component's `Props` interface, and there are no hard-coded children or missing enum values. This validation loop ensures the template compiles before registration.

## Mapping Figma Properties to Code Props

The Code Connect system maps Figma's visual properties to code using specific helper methods defined in [`plugins/figma/skills/figma-code-connect/references/api.md`](https://github.com/openai/plugins/blob/main/plugins/figma/skills/figma-code-connect/references/api.md):

- **`instance.getString`** maps TEXT properties to string interpolation
- **`instance.getEnum`** handles VARIANT properties and requires explicit mapping of **all** values (e.g., `Primary: 'primary'`)
- **`instance.getBoolean`** optionally maps BOOLEAN properties to conditional attributes
- **`instance.getInstanceSwap`** resolves nested components by calling `executeTemplate()` on the child instance
- **`instance.getSlot`** handles SLOT properties for freeform content, returning `ResultSection[]` ready for interpolation

When dealing with nested components, the template uses `findConnectedInstance` or `findConnectedInstances` to locate child templates. The parent must declare `metadata: { nestable: true }` to allow discovery during evaluation, as detailed in [`plugins/figma/skills/figma-code-connect/references/advanced-patterns.md`](https://github.com/openai/plugins/blob/main/plugins/figma/skills/figma-code-connect/references/advanced-patterns.md).

### Handling Slot Content

For components accepting arbitrary children, the **SLOT** property type provides direct interpolation:

```typescript
const content = instance.getSlot('Content')

export default {
  example: figma.code`<Card>${content}</Card>`,
  id: 'card',
  metadata: { nestable: true }
}

```

Unlike other helpers, `getSlot` returns pre-formatted sections rather than primitive values, allowing complex nested markup to flow from design to code.

## Registration and Persistence

After validation, the plugin registers the template using the **`add_code_connect_map`** MCP tool. The registration payload includes `templateDataJson` with metadata flags:

```json
{
  "fileKey": "abc123",
  "nodeId": "42:100",
  "templateId": "button",
  "templateDataJson": "{\"nestable\": true, \"isParserless\": true}"
}

```

This registration, documented in [`plugins/figma/skills/figma-generate-library/references/code-connect-setup.md`](https://github.com/openai/plugins/blob/main/plugins/figma/skills/figma-generate-library/references/code-connect-setup.md), enables parent components to discover and execute child templates at runtime, creating a composable design system where each component knows how to render its children.

## Triggering Batch Template Creation

Developers initiate the workflow through the **Code Connect templates** command (`/connect-figma-components`), defined in [`plugins/figma/commands/connect-figma-components.md`](https://github.com/openai/plugins/blob/main/plugins/figma/commands/connect-figma-components.md) and surfaced in the UI via [`plugins/figma/ui/figma-workbench.html`](https://github.com/openai/plugins/blob/main/plugins/figma/ui/figma-workbench.html). This command delegates to the `figma-code-connect` agent, which orchestrates the six-step process across multiple components in a design library.

## Summary

- The **openai/plugins** Figma plugin implements Code Connect through a deterministic six-step workflow defined in [`SKILL.md`](https://github.com/openai/plugins/blob/main/SKILL.md).
- **MCP tools** (`get_code_connect_suggestions`, `get_context_for_code_connect`) drive discovery and property extraction without direct file scraping.
- Templates are **TypeScript files** ([`.figma.ts`](https://github.com/openai/plugins/blob/main/.figma.ts)) that use `instance.*` helpers to map Figma properties to React props with full type safety.
- **Nested components** require `metadata: { nestable: true }` and use `getInstanceSwap` with `executeTemplate()` for composition.
- **Validation** ensures every property is mapped and the generated code compiles before registration via `add_code_connect_map`.
- The system supports **batch processing** through the `/connect-figma-components` command for large design libraries.

## Frequently Asked Questions

### What file extension does the Figma plugin use for Code Connect templates?

The plugin generates files with the **[`.figma.ts`](https://github.com/openai/plugins/blob/main/.figma.ts)** extension. These are TypeScript files that import the `figma` runtime API and export a default object containing `example`, `imports`, `id`, and optional `metadata` properties, as specified in the skill documentation at [`plugins/figma/skills/figma-code-connect/SKILL.md`](https://github.com/openai/plugins/blob/main/plugins/figma/skills/figma-code-connect/SKILL.md).

### How does the plugin handle nested Figma components?

The plugin handles nesting through **`getInstanceSwap`** for child components and **`getSlot`** for freeform content. Child components with their own templates are resolved using `executeTemplate()`, while the parent template must declare `metadata: { nestable: true }` to enable discovery. This architecture is documented in [`plugins/figma/skills/figma-code-connect/references/advanced-patterns.md`](https://github.com/openai/plugins/blob/main/plugins/figma/skills/figma-code-connect/references/advanced-patterns.md).

### What MCP tools does the plugin use to discover components?

The plugin relies on **`get_code_connect_suggestions`** to list unmapped components and **`get_context_for_code_connect`** to retrieve property schemas. For persistence, it uses **`add_code_connect_map`** to register completed templates. These tools are defined in the MCP specification at [`plugins/figma/skills/figma-generate-library/references/code-connect-setup.md`](https://github.com/openai/plugins/blob/main/plugins/figma/skills/figma-generate-library/references/code-connect-setup.md).

### Why does the validation step re-read the generated template file?

The validation step re-reads the file to guarantee that every Figma property is accounted for in the code, that TypeScript types match the component's `Props` interface, and that there are no hard-coded children or missing enum values. This catch-and-correct loop ensures the template compiles correctly before registration, preventing runtime errors during design-to-code synchronization.