Code Connect

Overview

Create Code Connect template files (.figma.ts) that map Figma components to code snippets. Given a Figma URL, follow the six-step workflow below to produce a validated template.

Note: This project may also contain parser-based .figma.tsx files (using figma.connect(), published via CLI). This skill covers templates files only — .figma.ts files that use the MCP tools to fetch component context from Figma.

References

Each file is loaded on demand — read one only when the task needs that depth (progressive disclosure).

• references/template-patterns.md — the Step 5 deep dive: property mapping per Figma type, exhaustive variant handling, interpolation rules, finding descendant layers, nested configurable instances, the full instance.*/InstanceHandle/TextHandle/SelectorOptions/Export quick reference, and the Rules & Pitfalls checklist · read when writing or reviewing the template body, or when Step 6 flags an issue.
• references/worked-example.md — a complete start-to-finish walkthrough of all six steps on one Button component · read when you want a concrete end-to-end example to adapt.
• references/api.md — the full Code Connect template API reference: figma.config.json configuration, the complete figma/instance API, publishing/CLI commands, type reference, best practices, and troubleshooting · read for authoritative API details, config, or publishing.
• references/advanced-patterns.md — advanced nesting: descendant/recursive templating, metadata.props passing between parent/child templates, findConnectedInstances filtering, and a multi-generation inheritance example · read for multi-level nested components or metadata prop passing.

Prerequisites