mcpField
F
figma-integration

figma-integration

github.com/plugin87设计与 UI3.1k495 次安装3 天前更新
代码仓库

关于 figma-integration

figma-integration 是用于对齐 Figma Variables 与仓库令牌的设计系统 Skill，可选择任一方向同步，并检查映射与组件一致性。

主要功能

  1. 01将令牌层级映射到 Figma 集合
  2. 02用 Figma Modes 表示主题变体
  3. 03支持代码到 Figma 或反向同步
  4. 04连接 Figma MCP 服务时使用其工具
  5. 05检查组件变体、属性与状态

适用场景

  1. 01将仓库令牌发布为 Figma Variables
  2. 02将 Figma Variables 提取为代码令牌
  3. 03对照 Figma 与仓库中的组件

MCP 相关

连接 Figma MCP 服务时，Skill 建议使用其工具读取设计数据、创建 Variables 或组件，并关联代码组件。

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/plugin87/ux-ui-agent-skills --skill figma-integration

安装后在 Claude Code 中输入/figma-integration确认已加载。

详细介绍

技能：Figma 集成

步骤 0：工具包是否在这里？ 此技能会读取工具包中的文件。请检查一次： ls ${CLAUDE_SKILL_DIR}/../../../tokens >/dev/null 2>&1 && echo KIT_OK || echo KIT_MISSING 只有在 KIT_MISSING 时，才表示仅安装了技能文件夹，这是 npx skills add 的操作方式。请明确说明这一点，建议用户运行 npx ux-ui-agent-skills init 或安装插件，然后停止。不要猜测 无法打开的文件内容。

在设计（Figma）和代码（此仓库）之间双向衔接。令牌 JSON 始终是唯一事实来源；Figma Variables 与之保持一致。

步骤

  1. 阅读 ${CLAUDE_SKILL_DIR}/../../../workflows/figma-integration.md（令牌↔Variable 映射、同步方向、MCP 用法、一致性）。
  2. 将 3 层层级映射为三个 Figma 集合（Primitives → Semantic → Component），并设置别名；dark/brand/density 对应 Figma Modes（${CLAUDE_SKILL_DIR}/../../../tokens/theming.json）。
  3. 选择一种权威同步方向（从代码发布到 Figma，或通过 Tokens Studio / Variables REST API 从 Figma 提取到代码）。另一侧由此生成。切勿手动编辑两侧。
  4. 如果已连接 Figma MCP 服务： 优先使用其工具/技能（先加载其必需的前置技能）。用它将框架/变量/截图读入代码、根据我们的令牌构建 Variables/组件，或将 Code Connect 接到 ${CLAUDE_SKILL_DIR}/../../../components/*。
  5. 检查组件一致性：Figma 变体/属性必须涵盖我们的变体、尺寸和 8 种状态；标记缺漏。

验证（完成标准）

  • 每个 Figma Variable 都能解析到 ${CLAUDE_SKILL_DIR}/../../../tokens/*.json 中的一个令牌（设计中不得出现无归属的十六进制值）。
  • 只采用一种权威同步方向；生成的一侧不得有任何手动编辑。
  • 变体集必须涵盖全部 8 种状态；Code Connect 必须指向正确的 ${CLAUDE_SKILL_DIR}/../../../components/* 文件。
  • 导入任何令牌后：python3 ${CLAUDE_SKILL_DIR}/../../../scripts/validate_tokens.py 必须通过。

评论

支持 Markdown