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

figma-integration

GitHub

实现Figma与设计令牌的双向同步，支持代码到设计或设计到代码的映射与验证。通过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

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

Steps

Read 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 (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 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 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 components/* file.
After any token import: python3 scripts/validate_tokens.py passes.