跳转到主要内容

Figma MCP服务配置

YouCode支持通过Model Context Protocol (MCP)服务集成Figma，实现设计稿到代码的转换。

方法一:通过友码直接下载Figma MCP服务（推荐）​

1. 安装Figma应用​

下载Figma桌面应用，可通过SVN下载Figma的安装包。安装包:Figma 安装包

下载好安装包后进行安装。

注意：

1.此方法需要先安装Figma应用，才能启动Figma的MCP服务。

2.使用公司邮箱进行账号注册，然后找陈星进行权限开通。

3.友码插件版本要求1.0.19及以上，使用Figma时的node版本需要大于18，如果版本不足请升级node版本。

2. 启动Figma的MCP服务​

1.进入所需要使用的Figma项目中，点击下方切换按钮或者使用“Shift+D”切换为开发者模式

Figma MCP服务设置界面

2.点击“Set up Figma MCP”（启用开发者模式MCP服务）选项。

Figma MCP服务设置界面-12

3.查看服务启动的IP和端口号

Figma MCP服务设置界面-10

3. 在友码中安装Figma MCP服务​

在YouCode的设置中启用MCP功能：

配置信息:（请直接使用我们提供的配置信息，确保figma提供的ip是127.0.0.1和端口号是3845即可，不需要将sse替换成mcp）

{
  "mcpServers": {
    "figma-dev-mode": {
      "type": "sse",
      "url": "http://127.0.0.1:3845/sse"
    }
  }
}

1. 打开"友码"导航到"MCP"选项卡

Figma MCP服务设置界面-5

2. 根据需求选择"编辑项目MCP"或者"编辑全局MCP"

Figma MCP服务设置界面-6

3. 在"mcp.json"文件中添加Figma MCP服务器配置

4. 保存并刷新MCP服务，当提示标识变为绿色时表示配置成功

Figma MCP服务设置界面-8

Q: 没有Dev权限，不能切换到开发者模型

  • 找陈星进行申请

相关资源​