AI导哈

Figma设计工具

一个连接Claude与Figma的工具，允许用户通过描述创建和编辑Figma设计，适用于UI/UX设计师和开发团队。

  • by ihiteshsharma
  • TypeScript
  • 本地部署
  • 4 星标
  • 更新于
在 GitHub 查看 ihiteshsharma/figma-mcp-server

使用说明

Figma MCP服务器

一个让Claude直接在Figma中创建和编辑设计的工具。

这有什么作用

此工具将Claude与Figma连接起来，允许您：

  • 通过向Claude描述来创建新的Figma设计
  • 用简单的说明编辑现有的Figma设计
  • 生成完整的线框和UI元素
  • 导出您的设计

运作原理

  1. 克劳德：了解您的设计要求
  2. Figma插件：在Figma中创建设计
  3. 服务器：将Claude连接到Figma（自动运行）

快速入门指南

对于用户

  1. 安装Figma插件:

    • 打开Figma桌面应用程序
    • 转到插件>开发>从清单导入插件
    • 选择 figma-plugin/manifest.json 此项目中的文件

  2. 在Claude配置中配置Figma MCP服务器:

    • 检查MCP Config json在您的系统上的位置。这可能取决于您的操作系统。
    • 编辑 ~/Library/Application Support/Claude/claude_desktop_config.json:
    {
  "mcpServers": {
      "figma": {
      "command": "docker",
         "args": [
            "run",
            "-i",
            "-p",
            "9000:9000",
            "--rm",
            "mcp/hs-figma"
         ],
         "env": {
            "NODE_ENV": "production",
            "WEBSOCKET_MODE": "true",
            "WS_PORT": "9000"
         }
      }
  }
}

  3. 与Claude一起使用:

    • 打开克劳德
    • Figma工具应出现在Claude的工具菜单中
    • 请Claude在Figma中创建设计，例如：
      • “在Figma中创建登录屏幕”
      • “在Figma中设计一个圆角蓝色按钮”
      • “在Figma中制作一个简单的登录页面布局”

技术设置（IT/开发人员）

Click to expand technical setup instructions

先决条件

  • Node.js（>=16）
  • npm
  • Docker（安装在运行Claude的机器上）
  • Figma桌面应用程序

安装

  1. 克隆并安装:

    git clone <repository-url>
cd figma-mcp-server
npm install

  2. 构建:

    npm run build
npm run build:figma-plugin

  3. 构建Docker镜像和Figma插件:

    docker build -t mcp/hs-figma .

npm run build:figma-plugin

  4. 配置Claude: 编辑 ~/Library/Application Support/Claude/claude_desktop_config.json:

    {
  "mcpServers": {
      "figma": {
      "command": "docker",
         "args": [
            "run",
            "-i",
            "-p",
            "9000:9000",
            "--rm",
            "mcp/hs-figma"
         ],
         "env": {
            "NODE_ENV": "production",
            "WEBSOCKET_MODE": "true",
            "WS_PORT": "9000"
         }
      }
  }
}

    添加此配置后，Claude将在需要时自动启动服务器。

设计能力

你可以要求克劳德：

  • 创建矩形、圆形、文本和框架
  • 设计按钮、卡片和其他UI组件
  • 为网页和应用程序安排布局
  • 使用颜色、阴影和效果对元素进行样式设置
  • 将设计导出为图像

故障排除

常见问题

  1. 克劳德无法连接到菲格玛

    • 确保Figma插件正在运行
    • 确保您已正确设置了Claude配置文件
    • 重新启动Claude并重试

  2. 形状未按预期显示

    • 试着在给克劳德的指示中更具体一些
    • 对于颜色，使用常见名称，如“蓝色”或十六进制代码，如“#0000FF”

  3. 插件不工作

    • 确保您已打开Figma文件
    • 如果需要，请重新安装插件

有关技术故障排除，请参阅下面的“技术问题”部分。

Technical Issues

  1. WebSocket连接失败

    • 检查端口9000是否未被防火墙阻止
    • 验证服务器和插件配置中的WS_PORT设置

  2. 插件加载问题

    • 确保TypeScript文件正确编译
    • 检查Figma开发工具中的控制台错误

  3. 颜色格式问题

    • 颜色对象应使用不透明度而不是alpha（'a'）属性

例子

试着问克劳德：

  • 在Figma中创建一个简单的应用主页，包括页眉、英雄部分和页脚
  • 在Figma中设计一张包含头像、姓名和个人简介的用户资料卡
  • “在Figma中制作一组导航按钮”

许可证

麻省理工学院

相关 MCP