# How to Create Parserless Code Connect Templates for Plugins

> Learn to create parserless Code Connect templates for plugins using .figma.ts files and MCP data. Map Figma components to code snippets efficiently in a sandboxed environment.

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

---

**Parserless Code Connect templates use [`.figma.ts`](https://github.com/openai/plugins/blob/main/.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`](https://github.com/openai/plugins/blob/main/.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`](https://github.com/openai/plugins/blob/main/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`](https://github.com/openai/plugins/blob/main/plugins/figma/skills/figma-code-connect/SKILL.md) defines a deterministic six-step process for generating valid [`.figma.ts`](https://github.com/openai/plugins/blob/main/.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`](https://github.com/openai/plugins/blob/main/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`](https://github.com/openai/plugins/blob/main/.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`](https://github.com/openai/plugins/blob/main/plugins/figma/skills/figma-code-connect/SKILL.md):

```typescript
// 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`](https://github.com/openai/plugins/blob/main/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`](https://github.com/openai/plugins/blob/main/.figma.ts) files and the MCP-driven workflow defined in [`plugins/figma/skills/figma-code-connect/SKILL.md`](https://github.com/openai/plugins/blob/main/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`](https://github.com/openai/plugins/blob/main/plugins/figma/skills/figma-code-connect/references/api.md) for the instance API and [`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) 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`](https://github.com/openai/plugins/blob/main/.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`](https://github.com/openai/plugins/blob/main/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`](https://github.com/openai/plugins/blob/main/SKILL.md) and can interfere with the runtime's automatic fallback behavior. Instead, rely on `executeTemplate()` and let the runtime handle missing mappings gracefully.