
Sync Figma Token
Skill在代码里的设计令牌与 Figma 变量之间做同步:先把两边整理成统一格式,按值、别名、模式、作用域等类别列出差异并给出预演结果,必须等用户确认后才写入,默认只归档不删除,每次运行把报告存成 JSON。需要 Figma MCP,需手动调用。
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.
相关资源

figma-export
CLI从 Figma 文件批量导出组件(如整套图标)为 SVG,并把颜色、文字、阴影等样式导出为 Sass/SCSS 变量或 Style Dictionary 令牌,让网站上的图标与样式跟设计稿保持同步。需要 Node.js、Figma 个人访问令牌(FIGMA_TOKEN),并按需安装对应的输出插件(如 @figma-export/output-components-as-svg)。
marcomontalbano/figma-export350
Figma Skills (mcp-server-guide)
SkillFigma 官方技能合集:把设计稿还原成代码、用 Code Connect 映射组件、从代码生成设计系统组件库、在画布上搭建页面和 FigJam 图表。需连接 Figma MCP 服务器;写入画布目前处于 Beta 阶段,暂时免费。
figma/mcp-server-guide2.2k
Figma Use
SkillFigma 官方技能:教 agent 用 use_figma 执行 Plugin API 脚本,直接在画布上创建和修改节点、组件、变量与自动布局,调用 use_figma 前必须先加载。需要 Figma 账号并连接远程 MCP 服务器。
figma/mcp-server-guide2.2k
figma-generate-design
Skill把代码里的页面、弹窗、侧栏等界面或文字描述,搭建成 Figma 画布上可编辑的设计稿,优先复用文件里已发布设计系统的组件与变量。Figma 官方维护,需连接 Figma 远程 MCP 服务器,并同时安装 figma-use 技能。
figma/mcp-server-guide2.2k
CC Figma Tokens
Skill把 component-contracts 中 W3C DTCG 格式的令牌文件同步成 Figma 原生变量,建立 Primitives 与 Semantic 两个集合,按角色设置作用域与 Web 代码语法,先展示计划经确认后再写入。是 cc-figma-component 的前置步骤,依赖 figma-use 与 figma-generate-library 技能。
nvillapiano/component-contracts-figma34
Figma (Codex)
PluginFigma 出品、收录于 OpenAI 官方市场的 Codex 插件:按设计稿实现界面、生成 Code Connect 映射,还能在 Figma 里创建或更新页面、组件库、FigJam 图表和幻灯片。需要连接 Figma 账号。
openai/plugins7.9k