figma-export-tokens

Installation
SKILL.md

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

Installs
44
GitHub Stars
51
First Seen
Jun 1, 2026
figma-export-tokens — southleft/figma-console-mcp-skills