Agent Skills › plugin87/ux-ui-agent-skills › figma-integration

figma-integration

GitHub

实现 Figma 设计令牌与代码的双向同步，映射 DTCG 令牌至 Figma Variables，支持通过 MCP 服务器连接进行数据交换，并验证组件变体状态的一致性以确保设计与代码对齐。

.claude/skills/figma-integration/SKILL.md plugin87/ux-ui-agent-skills

Trigger Scenarios

用户希望将设计令牌推送到 Figma 用户需要从 Figma 拉取设计到代码用户需要设置令牌与变量的同步机制用户需要检查设计与代码之间的差异

Install

npx skills add plugin87/ux-ui-agent-skills --skill figma-integration -g -y

More Options

Non-standard path

npx skills add https://github.com/plugin87/ux-ui-agent-skills/tree/main/.claude/skills/figma-integration -g -y

Use without installing

npx skills use plugin87/ux-ui-agent-skills@figma-integration

指定 Agent (Claude Code)

npx skills add plugin87/ux-ui-agent-skills --skill figma-integration -a claude-code -g -y

安装 repo 全部 skill

npx skills add plugin87/ux-ui-agent-skills --all -g -y

预览 repo 内 skill

npx skills add plugin87/ux-ui-agent-skills --list

SKILL.md

Frontmatter

{
    "name": "figma-integration",
    "description": "Keep Figma and code in sync — map the 3-tier DTCG tokens to Figma Variables (collections + modes), sync in either direction, use the Figma MCP when connected, and verify component parity (variants\/states). Use when the user wants to push tokens\/components to Figma, pull a design into code, set up token↔Variable sync, or check design-code drift."
}

Skill: Figma Integration

Step 0 — is the kit here? This skill reads files from the kit. Check once: ls ${CLAUDE_SKILL_DIR}/../../../tokens >/dev/null 2>&1 && echo KIT_OK || echo KIT_MISSING On KIT_MISSING only the skill folders were installed, which is what npx skills add does. Say so plainly, point the user at npx ux-ui-agent-skills init or the plugin install, and stop. Do not guess the contents of a file you could not open.

Bridge design (Figma) and code (this repo) in both directions. The token JSON stays the source of truth; Figma Variables mirror it.

Steps

Read ${CLAUDE_SKILL_DIR}/../../../workflows/figma-integration.md (token↔Variable mapping, sync directions, MCP usage, parity).
Map the 3-tier hierarchy → three Figma collections (Primitives → Semantic → Component) with aliasing; dark/brand/density → Figma Modes (${CLAUDE_SKILL_DIR}/../../../tokens/theming.json).
Choose ONE authoritative sync direction (code→Figma publish, or Figma→code extract via Tokens Studio / Variables REST API). The other side is generated — never hand-edit both.
If a Figma MCP server is connected: prefer its tools/skills (load its mandatory prerequisite skill first). Use it to read frames/variables/screenshots into code, build Variables/components from our tokens, or wire Code Connect to ${CLAUDE_SKILL_DIR}/../../../components/*.
Check component parity: Figma variants/properties must cover our variants + sizes + the 8 states; flag gaps.

Verification (definition of done)

Every Figma Variable resolves to a token in ${CLAUDE_SKILL_DIR}/../../../tokens/*.json (no orphan hex in designs).
One authoritative direction; the generated side has zero hand edits.
Variant sets cover all 8 states; Code Connect points to the right ${CLAUDE_SKILL_DIR}/../../../components/* file.
After any token import: python3 ${CLAUDE_SKILL_DIR}/../../../scripts/validate_tokens.py passes.