# sync-figma-token

This skill diffs design tokens in code against Figma variables, reports drift, and applies changes only after you approve them.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 676 installs · ★ 27
- Author: firebenders
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/firebenders/sync-figma-token-skill/tree/HEAD/skills/sync-figma-token/SKILL.md
- Updated: 2026-03-24
- HTML: https://affpapa.org/en/nevibecode/skills/sync-figma-token

## What it does

The skill reads tokens from JSON sources and lines them up with Figma variables: key, type, per-mode values, aliases, scopes, code syntax. Drift lands in named buckets — missing on either side, value mismatch, broken alias, type or mode mismatch. Every run starts with a dry-run: a headline count plus a detailed list of token keys with before and after values.

Then it stops. The skill must ask for approval and will not fire write calls in the same turn as the dry-run. Nothing changes until you answer yes. Deletion is off by default — the policy is `archive_only`, and removing tokens takes an explicit instruction.

One hard prerequisite: load `figma-use` before every `use_figma` call, otherwise the skill won't run. You also set the policies up front — direction, conflict handling, name normalization, mode mapping. Reports are persisted to `/tmp/sync-figma-token-dry-run-{runId}.json` and `/tmp/sync-figma-token-final-{runId}.json`, and the skill tells you if writing them fails. Write calls go one at a time, never in parallel.

## Requirements
- Works with: Figma

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add firebenders/sync-figma-token-skill --skill sync-figma-token -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/sync-figma-token/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/sync-figma-token/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add firebenders/sync-figma-token-skill --skill sync-figma-token -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/sync-figma-token/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add firebenders/sync-figma-token-skill --skill sync-figma-token -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/sync-figma-token/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install firebenders/sync-figma-token-skill sync-figma-token
```

2. **Manually: put the files in place**
- File: `.github/skills/sync-figma-token/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add firebenders/sync-figma-token-skill --skill sync-figma-token -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/firebenders/sync-figma-token-skill --path skills/sync-figma-token
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/sync-figma-token/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add firebenders/sync-figma-token-skill --skill sync-figma-token -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/firebenders/sync-figma-token-skill/tree/HEAD/skills/sync-figma-token/SKILL.md

## When to use it
- find drift between code tokens and Figma variables
- validate color and numeric values before writing to Figma
- repair broken aliases and scopes
- normalize token names across both sides
- keep a drift report for review after a sync

## Example prompts
- diff `tokens.json` against the Figma variables and show me the drift
- run a dry-run sync with direction `code_to_figma`
- check aliases and scopes, don't apply conflicts without me

## Similar
- [pp-figma](https://affpapa.org/en/nevibecode/skills/pp-figma.md) — skill · 726 installs
- [figma-integration](https://affpapa.org/en/nevibecode/skills/plugin87-figma-integration.md) — skill · 478 installs
- [figma](https://affpapa.org/en/nevibecode/skills/heygen-com-figma.md) — skill · 334000 installs
- [figma-generate-library](https://affpapa.org/en/nevibecode/skills/figma-generate-library.md) — skill · 32 installs
- [figma-generate-design](https://affpapa.org/en/nevibecode/skills/openai-figma-generate-design.md) — skill · 2900 installs
- [figma-code-connect-components](https://affpapa.org/en/nevibecode/skills/figma-code-connect-components.md) — skill · 2700 installs

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md