Styles To Token Migration — Data skill for Claude Code

Styles → Token Migration

Migrates a Figma library from hardcoded Paint Styles to semantic Variables — so that every layer of every component variant is bound to a token, and switching themes happens with a single click in the Variables Panel.

*Українська версія — [нижче](#styles-token-migration-ua).*

---

What it does

• Scans a ComponentSet in Figma and pulls its structure (colors, variants, layer roles) into a YAML file.
• From the YAML it builds an apply-script that walks every component variant and binds Figma Variables to fills / strokes instead of Paint Styles.
• Keeps a token catalog in two Figma Variables collections: Primitives (raw colors) and Tokens (semantic aliases over primitives). Any apply-script only works with Tokens.

---

How it works

Figma ComponentSet
       │
       ▼
[ Plugin Component → YAML ]          ← scans structure, colors, variants
       │
       ▼
components/*.yaml                    ← semantic component spec
       │
       ▼
[ Claude Code ]                      ← fills token_map, generates apply-script
       │
       ▼
[ Scripter → apply-[component].js ]  ← select ComponentSet → Run
       │
       ▼
Figma Variables bound ✅

The whole pipeline is driven through **Claude Code**. The repo ships with `CLAUDE.md` containing the instructions — clone the repo, open it in Claude Code, and it will walk you through every step itself.

Step 0 — Tokens (once per project)

Two files — `tokens/primitives.css` (raw colors) and `tokens/tokens.css` (semantic aliases). The same values are duplicated as JS objects in `scripter/create-variables.js`.

Running `create-variables.js` in Scripter creates two collections in Figma Variables:

• Primitives — Blue/500 = #3B82F6, Gray/900 = #111827, …
• Tokens — Action/primary/bg-default → Primitives/Blue/500 (VARIABLE_ALIAS)

Upsert by name: re-running doesn't duplicate variables, it only updates values.

Step 1 — Plugin pulls the component structure

The **Compone