sync-figma-token

Synchronizes design tokens between code and Figma variables with drift reporting and approval-gated writes.

Updated Aug 28, 2026
One-click install
npx skills add https://github.com/yerzong/TEMP-LEAGUE --skill sync-figma-token-yerzong
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: sync-figma-token
Source: https://github.com/yerzong/TEMP-LEAGUE/tree/main/.claude/skills/sync-figma-token
Command: npx skills add https://github.com/yerzong/TEMP-LEAGUE --skill sync-figma-token-yerzong

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Design tokens in code and Figma variables drift apart over time, causing inconsistent colors, spacing, and typography between design and implementation. This Skill detects that drift, reports it in detail, and applies corrections only after explicit human approval. ## Core Features & Use Cases - Drift Detection and Reporting: Normalizes tokens from both sides into canonical rows and classifies every difference (missing tokens, value mismatches, alias mismatches, mode mismatches, broken aliases) with before/after values. - Approval-Gated Writes: Always produces a dry-run summary first and stops for explicit confirmation before any write call to Figma, with archive-only deletion as the default policy. - Configurable Sync Policies: Supports direction (code_to_figma, figma_to_code, bidirectional), conflict policies (prefer_code, prefer_figma, manual_review), naming normalization, and mode mapping. - Use Case: A design system team updates color tokens in tokens.json and needs Figma variables to match. The Skill diffs both sources, lists each drift item, waits for a "yes" confirmation, then applies creates, updates, and alias fixes in a safe order and verifies zero remaining drift. ## Quick Start Ask the assistant to compare the tokens.json file in the repository with the Figma variables and show a dry-run drift report before applying any changes.

Frequently Asked Questions about sync-figma-token

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I sync design tokens between code and Figma variables?▼

Provide a token source such as tokens.json or a Style Dictionary file, then run a dry-run diff against Figma variables. Review the drift report listing creates, updates, and alias fixes, then confirm with yes to apply the changes in a safe order.

What token formats are supported for Figma variable sync?▼

The preferred sources are Design Tokens JSON in DTCG style, followed by Style Dictionary input JSON. Platform theme sources in Compose, Kotlin, or TypeScript are accepted only when no JSON source is available, with assumptions stated in the dry-run output.

Does the sync delete Figma variables automatically?▼

No. The default deletePolicy is archive_only, so stale tokens are archived rather than deleted. Actual deletion requires an explicit user instruction, and all writes happen only after dry-run approval.

How are color value differences detected during token comparison?▼

Colors are compared as RGBA values with a tolerance epsilon of 0.0001. Floats use strict numeric comparison unless a tolerance is configured, while strings, booleans, and alias targets require exact equality.

What happens when token conflicts are found between code and Figma?▼

Behavior depends on the conflictPolicy setting. With manual_review the conflicts are listed and the run stops, with prefer_code the Figma values are updated to match code, and with prefer_figma the Figma values are kept and drift is reported as informational.