figma-export-tokenslisted
Install: claude install-skill whiskfernlowdensitylipoprotein154/figma-console-mcp-skills
# figma-export-tokens — Figma variables → design tokens
Read every local variable in a Figma file and emit design-token files. The canonical output is
**DTCG** (W3C Design Tokens Community Group JSON); CSS, Tailwind, SCSS, TS, and JSON derive from it.
**Why this beats a raw REST export:** Figma's Variables REST API is **Enterprise-only** (`403` on
Starter/Pro/Org). This skill reads through the Plugin API via `use_figma`, so it works on **every
plan** and resolves aliases + multi-mode values that `get_variable_defs` (default mode only) drops.
## Skill boundaries
- **`use_figma` rules** — load the official **`figma-use`** skill first; it is the full Figma Plugin API reference. Essentials these scripts rely on: plain JS with top-level `await` + `return` (no IIFE, no `figma.closePlugin()`; `console.log` is not returned), inputs inlined as `const` at the top of each script, colors in 0–1 range, load fonts before any text op, `await figma.getNodeByIdAsync(...)`, and **atomic errors** (a failed script applies nothing — read the error, fix, retry).
- **Reverse direction** (code → Figma variables) → use the `figma-import-tokens` skill.
## Workflow
1. **Confirm scope & format.** Ask (or infer) the target format (`dtcg` is the safe default), whether
to split by mode/collection, and the output path. Get the file key from the active Figma file or a
URL the user provides.
2. **Read the variables.** Run [`scripts/read-variables.js`](scripts/read-variables.js) via `use_figma`
(