Figma MCP演示
用于探索Figma MCP集成的演示web应用程序（用于通过AI生成代码）
该项目是通过以下方式启动的 创建React应用程序.（已弃用）
npm install -g create-react-appnpx create-react-app figma-mcp-demo
环境
- nodeJShttps://nodejs.org/en/download
- 光标
- Figma
安装
安装依赖项
npm install
启动本地web服务器（在本地web浏览器中查看结果）
npm run start
设置
按照以下说明配置Figma MCP服务器https://help.figma.com/hc/en-us/articles/32132100833559-Guide-to-the-Dev-Mode-MCP-Server
光标
- 光标设置>添加新的MCP工具
{
"mcpServers": {
"Figma": {
"url": "http://127.0.0.1:3845/sse"
}
}
}Expand to view screenshots
Figma
- 启用MCP开发服务器（注意：不适用于免费计划（仅适用于团队或企业）以及开发或全席位）
Expand to view screenshots
用法
Figma
- 将URL复制到Figma组件（或节点）
- 例如，使用个人项目中的示例PrimaryButton组件@https://www.figma.com/design/kQSjh7sw77rH4jNflXpKX2/MCP-Demo?node-id=1-6&m=dev
光标
- 要求Cursor（或代理）生成代码
- 例如 Create React component for @https://www.figma.com/design/kQSjh7sw77rH4jNflXpKX2/MCP-Demo?node-id=1-6&m=dev
演示
为Figma PrimaryButton组件创建React组件
Expand to view screenshots
截图
Expand to view screenshots
演示
Expand to view demos
故障排除
- 提示时出现403个错误？
- 确保您拥有一个非免费帐户（专业版或企业版）和一个正式版或开发版席位 - 确保你的Figma文件在Figma项目中
- 将MCP添加到Cursor后，重新启动Figma
- 检查浏览器中的MCP服务器是否正在运行http://127.0.0.1:3845/sse
Expand to view old README
Available Scripts
在项目目录中，您可以运行：
npm start
在开发模式下运行应用程序。\ 打开 http://localhost:3000 在浏览器中查看。
当您进行更改时，页面将重新加载。\ 您还可以在控制台中看到任何lint错误。
npm test
在交互式观察模式下启动测试运行器。\ 请参阅以下部分 运行测试 了解更多信息。
npm run build
为生产构建应用程序 build 文件夹。\ 它正确地将React捆绑在生产模式中，并优化构建以获得最佳性能。
构建被缩小，文件名包括哈希值。\ 您的应用程序已准备好部署！
请参阅以下部分 部署 了解更多信息。
npm run eject
注意：这是一个单向操作。曾经的你 eject你不能回去！
如果您对构建工具和配置选择不满意，可以 eject 在任何时候。此命令将从项目中删除单个生成依赖项。
相反，它会将所有配置文件和可传递依赖项（webpack、Babel、ESLint等）直接复制到您的项目中，这样您就可以完全控制它们。除以下命令外的所有命令 eject 仍然可以工作，但它们会指向复制的脚本，以便您可以对其进行调整。此时，你只能靠自己了。
你永远不必使用 eject。精心策划的功能集适用于中小型部署，您不应该觉得有义务使用此功能。但是，我们理解，如果您在准备使用时无法对其进行自定义，则此工具将毫无用处。
了解更多
您可以在 创建React应用程序文档.
要学习React，请查看 React文档.
代码拆分
本节已移至此处：
分析捆绑包大小
本节已移至此处：
制作渐进式Web应用程序
本节已移至此处：
高级配置
本节已移至此处：
部署
本节已移至此处：
npm run build 无法缩小
本节已移至此处：