dsh-figma-mcp

English

简介

DSH 的 Figma MCP 一键连接插件，对话中粘贴链接，Agent 即可读写节点/图层/变量/样式，生成 React/Vue 代码，OAuth 安全登录，Token 本机存储，临近过期自动提醒，内置工作流指令和 Skill 引导使用。

Related MCP server: Figma MCP Server

安装

从 npm 安装

dsh plugin add dsh-figma-mcp

从 GitHub 安装

dsh plugin add github:lubanqihao9875/dsh-figma-mcp

本地开发

先克隆仓库并进入目录：

git clone https://github.com/lubanqihao9875/dsh-figma-mcp.git
cd dsh-figma-mcp

再把当前目录链接到 DSH：

# macOS / Linux
dsh plugin add link:$(pwd)

# Windows（PowerShell）
dsh plugin add link:"$PWD"

安装后重启 DSH，「设置 → DSH Figma MCP」卡片出现，点「连接 Figma」完成授权即可。

卡片

卡片分为两个组：「连接」（授权状态）和「Skill」（是否把 Figma MCP 用法注入到Agent skill 列表）

连接

授权完成后卡片会自动从「未连接」切到「已连接」。

Skill

「Skill」开关控制是否把 dsh-figma-mcp-skill 注入 Agent 的技能列表， dsh-figma-mcp-skill 告诉 DSH 怎么选 mcp__figma__* 工具，默认开启。

过期与刷新

token 有效期以 Figma 下发为准。临近过期状态标签会变成黄色「即将过期」。「刷新授权」是后台静默续期，不开浏览器；只有完全失效才需要「重新授权」重走一次浏览器流程。

断开与卸载

「断开」只清本地：patch 文件里的 token 和刷新凭据立即删除。卸载插件前先点断开，否则 patch 文件里会残留一条仍然有效的 token。

使用示例

连接成功后，在 DSH 对话里直接把 Figma 链接贴进 prompt，告诉 Agent 你想做什么，Agent 会自动调用 mcp__figma__* 工具读取内容并操作任务。也可以使用 /dsh-figma-mcp <指令> [补充说明] 开启固定工作流。缺少必要信息时，Agent 会交互式逐项提问，拿到回答后自动继续。涉及写入 Figma、下载资产或写入本地文件时，会先给出确认再操作。

阅读设计稿内容

帮我看这个设计稿里有什么内容：你的 Figma 文件链接（如 https://www.figma.com/design/<文件ID>）

提取文案做 i18n

从上面这个 Figma 文件里把所有按钮和标题文案抽出来，做成中英文 i18n 表

基于设计稿生成代码

把上面这个 Figma 页面转成 React 代码

常见问题

• 点「连接 Figma」浏览器没弹出来：检查是否被弹窗拦截器拦截。