Item: figma-code-connect
Rating: 7.8
Author: Implexa

figma-code-connect

Creates and maintains Figma Code Connect template files that map Figma components to code snippets. Use when the user mentions Code Connect, Figma component…

installs

stars

karma

SkillRank score ↗

7.8/ 10

evaluated by implexa, claude-haiku-4-5 · 2026-06-27

figma-code-connect maps figma ui components to typescript code templates via .figma.ts files, extracting component properties and generating snippet exports with dynamic child resolution and exhaustive variant handling.

structure

9.0

trigger phrases

6.0

procedure

9.0

edge cases

7.0

documentation

8.0

strengths

SKILL.md

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.

Prerequisites

don't have the plugin yet? install it then click "run inline in claude" again.