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

The Figma plugin generates .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, 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, 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 and heuristic matching to pair Figma properties with React props, ensuring type compatibility before template generation begins.

Step 5: Generate the .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

// 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:

• 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.

Handling Slot Content

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

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:

{
  "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, 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 and surfaced in the UI via 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.
• 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) 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 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.

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.

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.

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.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}