Figma MCP服务器
基于MCP协议连接AI与Figma,实现设计文件管理与操作。
安装使用
复制下面这段提示词发给你的 AI(Claude / Cursor / TRAE / Codex / WorkBuddy 等),它会自动帮你完成安装:
帮我安装这个 AI Skill:Figma MCP服务器。 它的用途是:基于MCP协议连接AI与Figma,实现设计文件管理与操作。 详细介绍见:https://321skill.com/skills/figma-mcp服务器-figma-mcp-server/ 请根据该页面的说明完成安装。
使用示例
“帮我列出‘用户中心’项目下的所有Figma文件,并查看首页设计的画板列表。”,它会通过此Skill调用Figma API,获取项目文件树和指定文件的画板结构并清晰呈现给你。或者说:“获取我们设计系统中主按钮的所有样式属性,包括颜色、圆角和字体。”,AI会查询对应的组件节点并返回详细的样式代码和设计参数。
介绍
这个Skill通过MCP(Model Context Protocol)协议,将Figma REST API的能力集成到AI助手(如Claude Desktop)中,解决了AI无法直接访问和操作Figma设计文件的痛点。它允许用户通过自然语言指令,让AI助手代为查询设计文件信息、获取组件详情、管理设计系统等,无需手动在Figma界面和AI工具间切换。
使用时,用户需要先在Figma官网生成个人访问令牌,并在本地配置好MCP服务器。之后,在支持的AI客户端(如Claude Desktop)中,用户就可以直接向AI提问,例如“查看项目X的Figma文件列表”或“获取按钮组件的设计规范”,AI会通过此Skill调用Figma API并返回结果。
它特别适合需要频繁与设计稿打交道的前端开发、UI设计师和产品经理。前端开发可以快速获取设计标注和资源,UI设计师能便捷管理设计资产,产品经理则能随时查看设计进度和评审稿。
使用前请确保已安装Node.js环境,并妥善保管Figma访问令牌,避免泄露。由于依赖Figma官方API,其功能受API本身限制,且网络请求可能存在延迟。建议在需要高频、批量查询设计信息或自动化处理设计资产时使用。
核心特点
这是首个基于MCP协议将Figma设计管理能力深度集成到AI对话环境中的工具,实现了用自然语言直接操控设计资产;相比其他仅能截图或简单预览的集成方案,它提供了完整的文件、项目、组件和样式查询与管理能力。
注意事项
不适合需要高频率、实时协同编辑Figma设计稿的深度设计创作场景。
常见问题
如何获取Figma访问令牌?
登录Figma官网,在设置中生成Personal Access Token即可。
支持哪些AI客户端?
支持任何实现了MCP协议的客户端,如Claude Desktop、Cursor等。