Claude Figma Skills

Claude Figma Skills

Reusable Claude Code skills for Figma work — built from real sessions on design system projects at Troy Web. These cover the full Figma-in-Claude workflow: session setup, component construction, spec cross-reference, token sync, variable binding, and library migration.

These are **not** the official Figma MCP skills. They're the layer above: operational workflows, hard-won API patterns, and codified technique that the official skills don't provide.

---

The Three-File Contract

Every skill in this repo reads the same three project files. Drop them into a project once and every skill works without per-skill configuration.

Layer	File	Lives in	Role
Rules	design.md	consuming project (e.g. my-project/docs/design.md)	Prose: naming, token scales, architecture, taste. Short (200–800 words). Skills read it every invocation.
State	figma-registry.json	consuming project (e.g. my-project/docs/figma-registry.json)	Machine-maintained cache: component node IDs, variable collection IDs, resolved alias chains, deprecation maps, audit triage rules.
Config	.claude/figma-config.json	consuming project	Declares fileKey, points at design.md and figma-registry.json, sets artifact paths.

The contract is **input-format as interface** — skills detect the three files, they don't assume layouts. Starter versions of all three live in `templates/`.

**Design philosophy:** skills encode *how to do things*, not *what things should be called*. Taste and naming live in `design.md`; state lives in `figma-registry.json`; skills stay thin.

---

Skills

`figma-workspace`

**Entry point for every Figma session.** Detects the three-file contract, loads `design.md`, surfaces the registry, and routes operations to the correct tool (`use_figma` vs Desktop Bridge).

Always invoke this first — other skills assume the context it establishes.

`figma-builder`

**Build and modify Figma compo