Repolode
提交项目
awdr74100

awdr74100/figwright

免费的双向 Figma MCP 服务器，让编码智能体既能把设计转为代码，也能把代码写回 Figma 画布。

可替代:Figma Dev Mode MCP

在 GitHub 查看
Star
1,103
Fork
63
未关闭 Issue
5
最近提交
昨天

这是什么？

Figwright 通过本地 WebSocket 中继把 MCP 服务器与 Figma 插件连接起来，让 Claude Code、Cursor、Codex 等 AI 智能体能够读取并修改 Figma 文件。读取方向上，它基于布局、字体、变量和组件等设计上下文，将所选画面生成与项目框架匹配的代码；写入方向上，可直接在画布中创建和编辑 Frame、文本、自动布局、样式、变量、组件乃至整套页面。

服务器与插件都在本地运行，使用 Figma 插件 API 而非 Dev Mode，因此免费版 Figma 即可使用。生成代码时会识别项目的框架和样式方案，并尽量复用已有组件、设计令牌和图标。多个智能体可同时连接，各自认领所打开的 Figma 文件。

安装方式是在 MCP 客户端配置中添加 npx 命令，并从发布包导入插件。项目还提供 figma-codegen 与 figma-build 两个可安装的智能体技能，用于指导读取和生成两类工作流。

核心功能

  • 01将 Figma 选中内容转为代码，并结合项目框架、样式方案和已有组件。
  • 02提供 121 个 MCP 工具，覆盖对 Figma 画布的读取与写入。
  • 03可创建和编辑 Frame、文本、自动布局、样式、变量与组件。
  • 04完全在本地运行，插件仅使用 Figma 公开的插件 API。
  • 05多个智能体可同时操作不同的已打开 Figma 文件。
  • 06插件面板记录每次工具调用，并展示发送给模型的完整内容。

适用场景

  • 在无 Dev Mode 付费席位的情况下，把 Figma 设计实现为 React 等框架组件。
  • 让 AI 智能体根据文字需求在 Figma 画布上搭建页面或区块。
  • 使生成的代码与现有设计令牌和组件库保持一致。
  • 让多个编码智能体同时处理不同的 Figma 文件。

标签

#figma#mcp#design-to-code#code-generation#ai-agents#typescript#ai#claude-code#codegen#codex

常见问题

figwright 是什么？
免费的双向 Figma MCP 服务器，让编码智能体既能把设计转为代码，也能把代码写回 Figma 画布。 Figwright 通过本地 WebSocket 中继把 MCP 服务器与 Figma 插件连接起来，让 Claude Code、Cursor、Codex 等 AI 智能体能够读取并修改 Figma 文件。读取方向上，它基于布局、字体、变量和组件等设计上下文，将所选画面生成与项目框架匹配的代码；写入方向上，可直接在画布中创建和编辑 Frame、文本、自动布局、样式、变量、组件乃至整套页面。
figwright 可以免费使用吗？用的什么许可证？
figwright 以 MIT 许可证开源。用于商业产品前，请先确认许可证条款。
figwright 还在维护吗？
活跃维护中。figwright 最近一次提交是在 2026年10月19日。
figwright 适合用来做什么？
在无 Dev Mode 付费席位的情况下，把 Figma 设计实现为 React 等框架组件。 让 AI 智能体根据文字需求在 Figma 画布上搭建页面或区块。 使生成的代码与现有设计令牌和组件库保持一致。 让多个编码智能体同时处理不同的 Figma 文件。
在哪里获取 figwright？
源代码和安装说明在 GitHub 上：https://github.com/awdr74100/figwright

概要由 AI 根据项目 README 生成；GitHub 数据每日更新。

相关项目