
Sync Figma Token
SkillSyncs design tokens between code and Figma variables: normalizes both sides, reports drift by value, alias, mode and scope in a dry run, then stops for explicit approval before writing, archives rather than deletes, and saves JSON reports. Requires the Figma MCP server; invoked manually.
name: sync-figma-token
description: "Sync design tokens between code and Figma variables with strict drift reporting, mandatory approval gate, safe delta apply, and persisted reports."
disable-model-invocation: true
metadata:
mcp-server: figma, figma-staging
sync-figma-token
Use this skill for token parity workflows (code tokens vs Figma variables).
MANDATORY prerequisite: load figma-use before every use_figma call.
Non-negotiable safety rule
After producing dry-run output, you MUST STOP and ask for approval.
- Do NOT run any write
use_figmacalls in the same turn as dry-run output. - Ask a normal confirmation question (example: "Apply these changes? (yes/no)").
- Only proceed on explicit affirmative approval.
- If the response is unclear or negative, do not apply writes.
Standard source formats (required)
Prefer real token sources in this order:
- Design Tokens JSON (
tokens.json,tokens/*.json, DTCG-style) - Style Dictionary input JSON
- Platform theme sources (Compose/Kotlin/TS) only when JSON source is unavailable
If source format is non-standard, explicitly state assumptions in dry-run output.
Required policies before writes
direction:code_to_figma(default),figma_to_code,bidirectionaldeletePolicy: defaultarchive_only(NOT delete)conflictPolicy:prefer_code,prefer_figma,manual_reviewnamingPolicy: token key normalization strategymodePolicy: code mode <-> Figma mode mapping
Never delete by default. Deletion requires explicit user instruction.
Normalization rules
Normalize both sides to canonical rows:
key(canonical token name)type(COLOR,FLOAT,STRING,BOOLEAN)modeValues(light/dark/etc.)aliasTargetscopescodeSyntax
Name normalization examples:
color.bg.primary<->color/bg/primaryNeutral10<->Neutral/10only if explicitly mapped by naming policy
Value validation (required)
Dry-run must validate values, not only presence/type.
- COLOR: compare RGBA with tolerance
epsilon = 0.0001 - FLOAT: strict numeric comparison unless tolerance is configured
- STRING/BOOLEAN: strict equality
- Aliases: compare canonical alias targets
Drift categories
Each drift item must include one of:
missing_in_figmamissing_in_codevalue_mismatchalias_mismatchtype_mismatchmode_mismatchscope_mismatchcode_syntax_mismatchbroken_alias
Dry-run output format
Always return:
- Headline summary:
{
"create": 0,
"update": 0,
"aliasFix": 0,
"scopeFix": 0,
"syntaxFix": 0,
"archive": 0,
"delete": 0
}
- Detailed drift list with token keys and before/after values.
Then ask:
Dry-run complete. Apply these changes? (yes/no)
Report persistence (required)
Persist report JSON every run:
/tmp/sync-figma-token-dry-run-{runId}.json/tmp/sync-figma-token-final-{runId}.json
If file persistence fails, mention that explicitly in output.
Conflict handling
When conflicting data is found (type/mode/alias ambiguity):
- If
conflictPolicy=manual_review, list conflicts and STOP. - If
conflictPolicy=prefer_code, update Figma to source values/types. - If
conflictPolicy=prefer_figma, keep Figma and emit drift as informational.
Apply order
Apply deltas in this order:
- Ensure collections/modes
- Create missing primitives
- Create/update semantic aliases
- Apply value updates
- Apply scopes and code syntax
- Archive stale tokens per
deletePolicy
Never parallelize write use_figma calls.
Success condition
After apply, run a fresh diff. Success = unresolved drift is zero, or only explicitly approved exceptions remain.
Ähnliche Ressourcen

figma-export
CLIExports Figma components (such as a full icon set) to SVG in bulk and styles like colors, text and shadows to Sass/SCSS variables or Style Dictionary tokens, keeping site icons and styles in sync with designs. Needs Node.js, a Figma token (FIGMA_TOKEN) and the matching output plugins.
marcomontalbano/figma-export349
Figma Skills (mcp-server-guide)
SkillFigma's official skill collection: implement designs as code, map components with Code Connect, generate design-system libraries from code, and build screens and FigJam diagrams on the canvas. Needs the Figma MCP server; canvas writes are in beta and currently free.
figma/mcp-server-guide2.1k
Figma Use
SkillFigma's official skill that teaches agents to run Plugin API scripts via use_figma, creating and editing nodes, components, variables and auto layout directly on the canvas. Load it before any use_figma call. Needs a Figma account and the remote MCP server.
figma/mcp-server-guide2.1k
figma-generate-design
SkillBuilds editable Figma designs on the canvas from screens, modals or sidebars in your code, or from a text description, reusing components and variables from the file's published design system first. Maintained by Figma; needs the remote Figma MCP server and the figma-use skill.
figma/mcp-server-guide2.1k
CC Figma Tokens
SkillSyncs component-contracts token files in W3C DTCG format into native Figma variables, building Primitives and Semantic collections with role-based scopes and web code syntax after you approve a plan. Prerequisite for cc-figma-component.
nvillapiano/component-contracts-figma32
Figma (Codex)
PluginFigma's Codex plugin in OpenAI's official marketplace: implements UI from designs, generates Code Connect mappings, and creates or updates pages, component libraries, FigJam diagrams and slides in Figma. Needs a connected Figma account.
openai/plugins7.5k