Figma MCP服务 Cursor 安装流程

27 阅读1分钟

一、Figma MCP 介绍

Figma MCP(Model Context Protocol)是基于Anthropic开放标准协议的Figma服务,通过它,Cursor等AI编程工具能直接读取Figma的组件、布局和样式数据,精准将设计稿转化为高质量前端代码,无需截图即可实现“设计到代码”的无缝转化。

官方文档 developers.figma.com/docs/figma-…

二、cursor安装流程

  1. 安装 figma 插件

    打开 cursor settings > Plugins

    在 marketplace 里搜索 figma 并安装 image.png image.png

  2. 配置 mcp 服务

    点击 Figma MCP server deep link,会在cursor 打开 MCP配置 image.png 点击 Install 安装 image.png

    点击Connect,会跳转figma授权页,需要进行登录

    登录完成会进入授权页

    点击 Agree同意,安装完全 image.png

三、使用

点击Plugins的figma插件的Try in Chat,ai助手会介绍figma MCP,以及提供 figma链接可以生成代码 image.png image.png image.png