mcpField
F
figma-official-skills

figma-official-skills

github.com/podo设计与 UI29215 次安装1 天前更新
代码仓库

关于 figma-official-skills

figma-official-skills 是面向 Figma 设计与开发工作的官方技能套件，覆盖设计转代码、代码生成或更新 Figma 画面、设计系统库、插件 API 自动化，以及 FigJam、Slides、动效和 SwiftUI。技能依赖已连接的 Figma MCP 服务和 Figma 账号。

主要功能

  1. 01将 Figma 设计转为代码
  2. 02从代码生成或更新 Figma 画面
  3. 03构建设计系统库并连接代码组件
  4. 04自动化 Figma 插件 API
  5. 05支持 FigJam、Slides、动效与 SwiftUI

适用场景

  1. 01将 Figma 设计实现为生产代码
  2. 02依据代码变化更新 Figma 画面
  3. 03连接 Figma 组件与代码组件
  4. 04通过插件 API 自动化设计任务

MCP 相关

这些技能调用 Figma MCP 服务提供的工具；需连接 https://mcp.figma.com/mcp 并拥有 Figma 账号。Claude Code 官方插件可同时配置服务与技能，使用 skills CLI 安装时则需另行添加服务。

安装

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

$npx skills add https://github.com/podo/design-agent-skills --skill figma-official-skills

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

附带文件stub.yaml

详细介绍

figma-official-skills

目录占位条目 — 完整软件包：figma/mcp-server-guide

决策树

  1. 是否已安装完整技能？ 此软件包会安装 16 个技能（figma-use、figma-design-to-code、figma-generate-design、figma-generate-library、figma-code-connect、figma-create-new-file、figma-generate-diagram、figma-use-figjam、figma-use-slides、figma-use-motion、figma-implement-motion、figma-swiftui、figma-code-workflows、figma-generative-plugins、figma-shaders、figma-spec）；这里检查第一个技能。

    • 全局：f=~/.agents/skills/figma-use/SKILL.md; [ -f "$f" ] && ! grep -q "^das:" "$f" && echo "installed" || echo "pointer"
    • 项目：f=.agents/skills/figma-use/SKILL.md; [ -f "$f" ] && ! grep -q "^das:" "$f" && echo "installed" || echo "pointer"
    • installed → 技能已安装为 figma-use，调用它并继续
    • pointer → 转到步骤 2

  2. 检测作用范围，然后安装：

    [ -e ~/.agents/skills/figma-official-skills ] && echo "global" || echo "project"

    全局：

    npx skills add figma/mcp-server-guide --skill figma-use figma-design-to-code figma-generate-design figma-generate-library figma-code-connect figma-create-new-file figma-generate-diagram figma-use-figjam figma-use-slides figma-use-motion figma-implement-motion figma-swiftui figma-code-workflows figma-generative-plugins figma-shaders figma-spec -g -y

    项目：

    npx skills add figma/mcp-server-guide --skill figma-use figma-design-to-code figma-generate-design figma-generate-library figma-code-connect figma-create-new-file figma-generate-diagram figma-use-figjam figma-use-slides figma-use-motion figma-implement-motion figma-swiftui figma-code-workflows figma-generative-plugins figma-shaders figma-spec -y

    Claude Code： 发送一条以 ! 开头的命令作为聊天消息，即可在不离开对话的情况下运行它。

Claude Code 插件方式：

claude plugin install figma@claude-plugins-official

注意事项

  • 要求： Figma 账户；Figma MCP 服务（https://mcp.figma.com/mcp），Claude Code 插件会为其完成配置，而技能 CLI 不会；正常使用需拥有付费 Figma 计划的 Dev 或 Full 席位（Starter 计划、View 和 Collab 席位每月最多只能调用 6 次 MCP 工具）
  • 许可证： 无 LICENSE 文件

安装后调用

技能调用方式
figma-use“运行 Figma Plugin API”，“Figma 脚本”
figma-design-to-code“实现此 Figma 设计”，“Figma 转代码”
figma-generate-design“生成 Figma 设计”，“代码转 Figma”
figma-generate-library“构建 Figma 库”，“在 Figma 中创建设计系统”
figma-code-connect“代码连接”，“将 Figma 连接到代码”
figma-create-new-file“创建 Figma 文件”，“新建 FigJam”
figma-generate-diagram“在 FigJam 中创建图表”
figma-use-figjam、figma-use-slides、figma-use-motion通过 use_figma 处理 FigJam、Slides 和动画工作
figma-implement-motion“实现此动画”，“根据 Figma 制作动画”
figma-swiftuiSwiftUI ↔ Figma，支持双向转换

还会安装：figma-code-workflows、figma-generative-plugins、figma-shaders、figma-spec。

功能

Figma 官方技能套件，涵盖完整的设计 ↔ 代码桥接。它可将 Figma 设计转换为生产代码，根据代码更改生成或更新 Figma 屏幕，构建设计系统库，通过 Code Connect 将 Figma 组件连接到代码组件，编写 Figma Plugin API 脚本以实现自定义自动化，并扩展到 FigJam、Slides、动画、着色器和 SwiftUI。调用对应的 Figma MCP 工具前，必须先具备相应技能。

这些技能会驱动 Figma MCP 服务，因此也必须连接该服务，并且你需要拥有 Figma 账户。在 Claude Code 中，官方插件会同时配置 MCP 服务和技能；使用技能 CLI 时，你只会获得技能，需要自行添加服务（claude mcp add --transport http figma https://mcp.figma.com/mcp）。

不适用场景

  • 对现有设计系统中的每次 Figma 写入都执行设计令牌合规检查 — 使用 claude2figma
  • 在 Figma 之外进行令牌架构设计 — 使用 design-tokens-skill
  • 不使用 Figma MCP 服务的静态设计转代码流程（这些技能默认使用该服务的工具）

评论

支持 Markdown