How to Create Parserless Code Connect Templates for Plugins

Parserless Code Connect templates use .figma.ts files and MCP-driven data to map Figma components to code snippets without custom parsers, running in a sandboxed QuickJS environment.

The openai/plugins repository provides a figma-code-connect skill that automates the creation of parserless Code Connect templates. These .figma.ts files bridge published Figma components and your codebase through deterministic, MCP-driven property mapping. This workflow eliminates the need for traditional figma.connect() parsers while ensuring type-safe, maintainable code generation.

Understanding Parserless Code Connect Templates

Parserless templates execute in a sandboxed QuickJS environment and rely exclusively on the Code Connect MCP tools for data retrieval. Unlike traditional approaches that require custom parsers, these templates use the instance.* API to access Figma properties directly.

According to the source code in plugins/figma/skills/figma-code-connect/SKILL.md, the architecture follows three core principles:

• MCP-driven data flow – All component metadata, property definitions, and hierarchy come from MCP tools (get_code_connect_suggestions, get_context_for_code_connect), eliminating guesswork.
• Deterministic mapping – Because the template receives exact property definitions from the MCP, the mapping generates automatically without ambiguity.
• Dynamic nesting – Child components render through executeTemplate() calls rather than hard-coded JSX, ensuring nested components update automatically when their own templates change.

The Six-Step Workflow for Creating Templates

The skill documented in plugins/figma/skills/figma-code-connect/SKILL.md defines a deterministic six-step process for generating valid .figma.ts files.

Step 1: Parse the Figma URL

Extract the fileKey and nodeId from the Figma component URL. Convert any hyphens (-) in the nodeId to colons (:) to match the expected format.

Step 2: Discover Unmapped Components

Call get_code_connect_suggestions with excludeMappingPrompt: true to identify components requiring templates. The tool returns one of three states:

• No published components found
• All components already mapped
• A list of unmapped components requiring templates

Step 3: Fetch Component Properties

Use get_context_for_code_connect to retrieve the complete property list for the target component. Record all properties including TEXT, BOOLEAN, VARIANT, INSTANCE_SWAP, and SLOT types.

Step 4: Identify the Matching Code Component

Search your codebase for a component whose props interface aligns with the Figma properties. Use figma.config.json (specifically paths and importPaths) to locate candidate components. Confirm the match with the user before proceeding to template generation.

Step 5: Create the Template File

Place a .figma.ts file next to existing templates, naming it <Component>.figma.ts. Implement the required export object using the instance API methods (getString, getBoolean, getEnum, getInstanceSwap, getSlot, findInstance) to map each Figma property to a code prop.

Step 6: Validate the Template

Read back the file and verify four critical requirements:

1. Every Figma property is covered in the mapping
2. The emitted code type-checks against the component’s Props interface
3. No hard-coded children or guards are present
4. Interpolation follows the syntax rules (string values in quotes, instance/slot values in braces)

Anatomy of a .figma.ts Template File

A valid parserless template requires specific header comments and an export object structure. The file must reside in your designated templates directory and import the figma namespace.

Below is a minimal, fully-functional template for a Button component following the exact pattern prescribed in plugins/figma/skills/figma-code-connect/SKILL.md:

// url=https://www.figma.com/design/QiEF6w564ggoW8ftcLvdcu/MyDesignSystem?node-id=4185-3778
// source=src/components/Button.tsx
// component=Button
import figma from 'figma'

const instance = figma.selectedInstance

// 1️⃣ Map Figma properties → code props
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 iconSwap = instance.getInstanceSwap('Icon')
let iconCode: any = null
if (iconSwap && iconSwap.type === 'INSTANCE') {
  iconCode = iconSwap.executeTemplate().example
}

// 2️⃣ Export the Code Connect template
export default {
  // The rendered snippet; interpolation follows the rules
  example: figma.code`
    <Button
      variant="${variant}"
      size="${size}"
      ${disabled ? 'disabled' : ''}
      ${iconCode ? figma.code\`icon={\${iconCode}}\` : ''}
    >
      ${label}
    </Button>
  `,
  // Optional import statements for the final consumer
  imports: ['import { Button } from "src/components/Button"'],
  // Unique identifier for the component (used by the MCP)
  id: 'button',
  // Metadata – make the component nestable in parent templates
  metadata: { nestable: true, props: {} },
}

The header comments (lines 1–3) specify the Figma URL, source file path, and component name. Lines 8–19 demonstrate the property-mapping API, while lines 22–34 present the export object with the mandatory id, example snippet, and optional imports.

Validation Rules and Best Practices

When implementing parserless templates, adhere to the validation checklist documented in plugins/figma/skills/figma-code-connect/SKILL.md:

• No hard-coded children – Always use instance.getInstanceSwap for fixed swapped children and instance.getSlot for free-form slots. Never hard-code child JSX; always call executeTemplate() on the child handle.
• Exhaustive enum handling – Every value returned by get_context_for_code_connect must appear in the getEnum mapping. Missing values silently produce undefined.
• No guards – The runtime automatically falls back when a child has no Code Connect mapping. hasCodeConnect() checks are unnecessary and discouraged according to rule 2 in the "Rules and Pitfalls" section.
• Proper interpolation – String values belong in quotes within the template, while instance and slot values belong in braces.

Summary

• Parserless Code Connect templates use .figma.ts files and the MCP-driven workflow defined in plugins/figma/skills/figma-code-connect/SKILL.md to eliminate custom parsers.
• The creation process follows six deterministic steps: parse URL, discover components, fetch properties, identify code matches, create the file, and validate.
• Key API methods include get_code_connect_suggestions, get_context_for_code_connect, instance.getString, instance.getEnum, and instance.getInstanceSwap.
• Templates execute in a sandboxed QuickJS environment and must avoid hard-coded children, guards, and incomplete enum mappings.
• Reference files include plugins/figma/skills/figma-code-connect/references/api.md for the instance API and plugins/figma/skills/figma-code-connect/references/advanced-patterns.md for complex nesting scenarios.

Frequently Asked Questions

What is the difference between parserless templates and traditional figma.connect() parsers?

Parserless templates run in a sandboxed QuickJS environment and rely entirely on MCP tools for data retrieval, whereas traditional figma.connect() parsers require custom parsing logic to extract component information. The parserless approach uses .figma.ts files with the instance.* API to map properties deterministically, eliminating the maintenance overhead of custom parsers while ensuring type safety through automatic validation.

How do I handle nested components in parserless templates?

Use instance.getInstanceSwap for fixed swapped children and instance.getSlot for free-form slots. Always call executeTemplate() on the child handle to render nested components rather than hard-coding JSX. This ensures that child components render correctly according to their own Code Connect templates, and the runtime automatically handles cases where a child lacks a mapping.

What file naming convention should I use for parserless templates?

Name the file <Component>.figma.ts and place it alongside existing templates in your configured directory. The file must include header comments specifying the Figma URL (url), source file path (source), and component name (component). According to the workflow in plugins/figma/skills/figma-code-connect/SKILL.md, the file should be created next to existing templates to maintain consistent project structure.

Why are hasCodeConnect() guards discouraged in parserless templates?

The QuickJS runtime automatically falls back when a child component lacks a Code Connect mapping, making manual hasCodeConnect() checks redundant. Including these guards violates rule 2 of the "Rules and Pitfalls" section in SKILL.md and can interfere with the runtime's automatic fallback behavior. Instead, rely on executeTemplate() and let the runtime handle missing mappings gracefully.

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