Figma Code Connect

Connects your Figma component library to your codebase by generating template files that map design properties to code props. Point it at a Figma URL with a published component, and it walks through discovering unmapped components, fetching their properties (variants, booleans, instance swaps, slots), finding the matching React component in your code, and writing the .figma.ts template with the right property extractors. Requires the Figma MCP server running and an Organization or Enterprise plan. Honestly most useful if you're already bought into Code Connect and need to template out dozens of components without doing the tedious prop mapping by hand. Handles the fiddly bits like converting node IDs and parsing variant enums so you don't have to read the docs three times.

skills.sh installs: 3.6K
GitHub stars: 2.2K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add figma/mcp-server-guide --skill figma-code-connect --agent claude-code

Installs into .claude/skills of the current project.

Files

Code Connect

Overview

Create Code Connect template files (.figma.ts) that map Figma components to code snippets. Given a Figma URL, follow the steps below to create a template.

You write .figma.ts template files ONLY — never .figma.tsx. This skill produces parserless templates: a .figma.ts file whose default export uses a figma.code`...` tagged template. Do NOT write a .figma.tsx file and do NOT use figma.connect() — that is the separate parser-based Code Connect format (published a different way) and is the wrong artifact for this skill; output written as .figma.tsx is rejected outright. If a .figma.tsx already exists for a component, leave it untouched and add your .figma.ts template alongside it. A capable model may be tempted to reach for the more familiar .figma.tsx / figma.connect() pattern from memory — resist it; here the correct output is always .figma.ts + figma.code.