dsh-figma-mcp
Allows AI agents to read Figma design files by pasting Figma links, extract text/content for tasks like i18n, and generate code (e.g., React) from design pages.
Click on "Deploy Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type
@followed by the MCP server name and your instructions, e.g., "@dsh-figma-mcp帮我把这个Figma文件里的按钮文案提取成中英文i18n表 https://www.figma.com/design/ab12CdEFgh"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
dsh-figma-mcp
DSH 的 Figma MCP 一键连接插件。
前置要求
DSH ≥ 0.1.2-rc.1(web profile)和 Figma 账号。
Related MCP server: Figma MCP Server
安装
# macOS / Linux
dsh plugin --profile web add link:$(pwd)
# Windows(PowerShell)
dsh plugin --profile web add link:"$PWD"重启 DSH,「设置 → 插件 → Figma」卡片出现,点「连接 Figma」完成授权即可。
卡片状态
未连接时:

已连接时:

状态 | 含义 | 该做什么 |
未连接 | 尚未授权 | 点「连接 Figma」 |
已连接(绿) | token 有效 | 什么都不用做 |
即将过期(黄) | 剩余不足 24 小时 | 建议点「刷新授权」 |
已过期(红) | token 已失效 | 点「重新授权」(会开浏览器) |
Token 行显示的是打码后的 token;旁边「⧉ 复制」可以拿完整 token 去其它 MCP 客户端手动配置(Authorization: Bearer <token>)——它等同你的 Figma 账号凭据,别外传。
过期与刷新
token 有效期以 Figma 下发为准,临近过期卡片会变黄提醒。「刷新授权」是后台静默续期,不开浏览器;只有完全失效才需要「重新授权」重走一次浏览器流程。
断开与卸载
「断开」只清本地:patch 文件里的 token 和刷新凭据立即删除。卸载插件前先点断开,否则 patch 文件里会残留一条仍然有效的 token。
使用示例
连接成功后,在 DSH 对话里直接把 Figma 链接贴进 prompt,告诉 Agent 你想做什么,Agent 会自动调用 mcp__figma__* 工具读取内容并执行任务。
阅读设计稿内容
帮我看这个设计稿里有什么内容:你的 Figma 文件链接(如
https://www.figma.com/design/<文件ID>)
提取文案做 i18n
从上面这个 Figma 文件里把所有按钮和标题文案抽出来,做成中英文 i18n 表
基于设计稿生成代码
把上面这个 Figma 页面转成 React 代码
下面是一次实际调用的截图:

安全
token 明文存于本地 patch 文件(
headers.Authorization: Bearer figu_...,因 streamable-http 传输不支持表达式求值),文件以 0o600 权限原子写入,不要分享 patch 文件、完整 token 或相关截图。
常见问题
点「连接 Figma」浏览器没弹出来:检查是否被弹窗拦截器拦截。
This server cannot be deployed
Maintenance
Related MCP Connectors
The Figma MCP server brings Figma design context directly into your AI workflow.
Sync Lightroom, Figma, Dropbox & Canva assets to WordPress and Shopify via natural language.
Sync Lightroom, Figma, Dropbox & Canva assets to WordPress and Shopify via natural language.
Connect AI coding agents to Anima Playground, Figma, and your design system.
Related MCP Servers
- FlicenseNot gradedqualityDmaintenanceConnects AI applications to Figma API for extracting design data, generating production-ready HTML/CSS from designs, and capturing screenshots in multiple formats.1,978 npm-
- AlicenseNot gradedqualityDmaintenanceEnables AI assistants to interact with Figma designs using natural language commands, supporting file analysis, component extraction, asset export, comment management, and design system queries through the Figma API.1,620 npm1ISC
- AlicenseNot gradedqualityDmaintenanceConnects Figma designs to AI agents, enabling extraction of production-ready code, assets, and design tokens through natural language descriptions. Supports React, Vue, CSS, and Tailwind with real-time design system analysis.69,542 npm40MIT
- AlicenseNot gradedqualityDmaintenanceEnables AI agents to extract design systems, analyze components, and maintain design-code consistency from Figma files, providing intelligent component analysis and accessibility compliance.158 npm29MIT