--- chain-id: 2 name: Figma → MCP → tokens path: B · Standard status: live prompts: [01, 02] inputs: existing Figma file + governance.spec.md + archetype.spec.md outputs: output/tokens.css extracted from Figma source of truth documented-in: Ch15 — Figma + AI Foundation --- # Chain 2 — Figma MCP Extract Reads an existing Figma file via the official Dev Mode MCP and extracts tokens directly from the Figma source of truth into `output/tokens.css`. This is Path B's entry point — instead of generating tokens from a spec, you extract them from a Figma file that already encodes them. **When to use:** You have an established Figma file with a variable or style library already set up. The Figma file is canonical — values come from Figma, naming convention comes from the archetype spec. **Expected runtime:** 15–25 minutes (MCP setup: ~5 min first time, extraction: ~10 min, review: ~5 min). **Prerequisites:** Figma Dev Mode access. Official Figma Dev Mode MCP configured in Claude Desktop. A Figma file with variables (or styles) set up for your design system. --- ## Step table | Step | Prompt / action | What lands | Checkpoint | |---|---|---|---| | 0 (optional) | `19-mcp-diagnostic.md` | List of available Figma MCP tools + connection state report | Confirm MCP connection before proceeding | | 1 | `01-tokens-from-spec.md` (Path B mode) | `output/tokens.css` extracted from Figma artifact | Review extracted values against Figma | | 2 | `02-typography-scale.md` (Path B mode) | `output/tokens.css` updated with type tokens from Figma text styles | Confirm font families and scale match Figma | **Step 0 is optional but strongly recommended** for first-time Path B sessions or after MCP config changes. Running [Prompt 19 — MCP diagnostic](../prompts/19-mcp-diagnostic.md) takes 30 seconds and avoids hours of debugging when Step 1 later "fails mysteriously" because the MCP isn't actually connected. --- ## Step-by-step walkthrough ### Step 0 — Connect Figma via Dev Mode MCP **One-time setup:** 1. Install the official Figma Dev Mode MCP: Claude Desktop → Settings → MCP Servers → Add → Figma Dev Mode. 2. Open your Figma file. Enable Dev Mode (requires Figma Professional or above). 3. In Claude Desktop, connect to the MCP and navigate to your file. **Verify before running Prompt 01:** - Ask Claude: "List all variable collections in this Figma file." Your token collections (e.g., Colors, Spacing, Typography) should be visible. - Ask Claude: "Show the values in the [Colors] collection." Spot-check that values match your design system. - If the Figma file uses styles (not variables): extraction still works but produces a flatter token structure. Note this before proceeding. **Common failures:** - *MCP not finding the file:* Confirm the Figma URL is correct and your account has Dev Mode access to this specific file. - *Variable collections empty:* The file may use styles, not variables. Proceed with style extraction mode. --- ### Step 1 — Token extraction (Prompt 01, Path B mode) **What to paste:** 1. `specs/governance.spec.md` 2. `specs/[archetype].spec.md` 3. In the prompt body: "Path B — extract tokens from the connected Figma file via MCP. Map Figma variable names to the archetype spec's token naming convention. Do not generate a palette from the spec." **What the prompt does:** - Reads all variable collections from Figma via MCP - Maps Figma variable names to the archetype spec's token naming convention (e.g., Figma `bg/surface` → `--chrome-bg` for Lattice) - Validates extracted values against WCAG requirements from governance.spec.md - Generates `:root` and `[data-theme]` override blocks **What to check:** - Open `output/tokens.css` alongside your Figma file. Spot-check 10–15 values — hex values must match Figma variable values exactly. - Review the WCAG table: FAIL rows indicate real contrast failures in your Figma file that need fixing before components ship. - Review name mappings: the prompt lists every Figma variable → CSS token mapping. Confirm ambiguous mappings manually. **Common failures:** - *Name mapping gaps:* Figma variable names rarely match spec token names. The prompt asks for confirmation on ambiguous mappings — answer each one. These are design decisions. - *Missing tokens:* If Figma's variable set is incomplete, the prompt fills gaps from archetype spec defaults. Review these fill-ins — they may diverge from designer intent. - *WCAG failures in Figma:* These are real issues in the source file. Fix in Figma, then re-run Step 1. Do not override WCAG failures in the CSS — the problem is upstream. --- ### Step 2 — Typography extraction (Prompt 02, Path B mode) **What to paste:** - `output/tokens.css` from Step 1 - `specs/governance.spec.md` and `specs/[archetype].spec.md` **In Path B mode:** Indicate "Extract typography from Figma text styles." The prompt reads Figma text styles and maps them to archetype type scale token names. **What to check:** - Font families in `output/tokens.css` match what's in Figma text styles. - Type scale values (--text-sm, --text-base, etc.) match the px values in Figma styles. - If Figma's scale deviates from the archetype spec scale, the prompt notes the discrepancy. Resolve in Figma or accept with a documented deviation comment. --- ## Path B route — canonical rule Path B is artifact-first. The Figma file is the source of truth: | What | Source | |---|---| | Token values | Figma (extracted via MCP) | | Token names | Archetype spec (naming convention) | | WCAG requirements | governance.spec.md | | Component rules | Archetype spec | If Figma has a value that fails WCAG: fix in Figma, re-run. The spec wins over Figma on governance — never the other way. After this chain, continue with **Chain 3** (component generation). All component prompts consume `output/tokens.css` — they do not distinguish between Chain 1 and Chain 2 outputs. --- *Chain 2 · Figma MCP Extract · Design Systems That Build Themselves · © 2026 Ishdeep S Sahni*