Figma 到网站：上线落地页
把一个营销页画框从 Figma 转换为 HTML、CSS 和 JavaScript，然后发布完成的网站。
将 Figma 设计变成可用的 Web 应用
粘贴一个 Figma 画框链接，描述页面应完成的功能，并让 Manus 构建可发布的前端与后端。
从设计画框到可用页面
Manus 读取 Figma 画框中的布局、组件、字体和颜色，以构建可用的 Web 应用。
设计画框可用页面
示例说明。
为所需页面将设计转为代码
从落地页、仪表盘或几个相互关联的画框开始。每次请求都可以说明设计背后的交互逻辑。
Figma 转代码：构建可用的仪表盘
分享一个管理面板设计，并描述你需要的数据和操作。Manus 会构建包含前端和后端组件的 Web 应用。
Figma 到应用：打通完整流程
把多个画框放进一次设计转代码请求中。描述页面之间如何跳转、点击后会发生什么，以及哪些组件状态需要实现。
用链接而不是插件，把 Figma 转成代码
按文档中的流程，不需要单独的 Figma 转代码插件。连接你的 Figma 账号，粘贴画框链接，并说明页面上需要实现哪些功能。
发布你的网站，然后持续优化它
AI 设计转代码不止于预览。发布网站，连接你的自有域名，并在对话中描述你想要的更改。
一个链接，一个清晰的请求，即可得到可发布的网站
说明你的各个画框如何衔接。然后查看结果，并在对话中继续修改。
继续用 Manus 构建
常见问题解答
如何用 Manus 将 Figma 转换为代码？
将你的 Figma 账户连接到 Manus，然后分享一个 Figma 画框的链接，并描述你想构建的 Web 应用。Manus 会读取其布局、组件、字体与颜色，随后生成前端和必要的后端组件。
Manus 能把 Figma 转成 HTML 和 CSS 吗？
可以。按文档介绍，Figma 导入会为前端生成 HTML、CSS 和 JavaScript，并生成所请求 Web 应用需要的后端组件。默认情况下，Manus 会将其构建为 React 与 Tailwind CSS 项目，在浏览器中以 HTML、CSS 和 JavaScript 运行。提供画框链接时，请一并描述你需要的页面和交互。
Manus 是否支持 Figma 转 React 以及 Figma 转 Tailwind？
可以。Manus 默认使用 React 和 Tailwind CSS 构建网站，因此从 Figma 导入的设计会变成使用 Tailwind 样式的 React 前端，并附上你请求所需的后端代码。你可以将项目代码导出到私有 GitHub 仓库。
我需要 Figma 转代码插件吗？
文档中介绍的流程不需要单独的插件。连接你的 Figma 账号，将画框链接分享给 Manus 并说明要构建的内容；设计有多个页面或状态时，可以追加更多画框。
我需要安装 Figma MCP 服务器吗？
不会。Manus 通过 Figma 登录直接连接到你的 Figma 账号。连接后，导入一个画框链接并描述应用；无需安装或运行单独的 Figma MCP 服务器。
我需要 Figma Dev Mode 或付费的 Figma 席位吗？
不会。Manus 是通过你已连接的 Figma 账号导入画框，而不是通过 Dev Mode；免费 Figma 账号也可连接。Figma 会限制应用读取文件的频率：免费套餐和未启用 Dev Mode 的席位有较小的月度额度，启用 Dev Mode 的付费席位则拥有更高限额。达到限额时，Manus 会提示你。
Figma 转代码的 AI 工作流能构建可用的应用吗？
可以。分享一个 Figma 画框链接并描述应用。Manus 会分析设计，构建前端并生成用于可运行 Web 应用所需的后端组件。
Manus 能处理多页面设计和交互吗？
可以。分享多个 Figma 画框，并说明它们的页面流、交互或组件状态（如 hover）。这有助于 Manus 构建交互式的多页面网页体验。
转换完成后我可以发布网站吗？
可以。预览该网页应用，点击“发布”，它就会在线可访问。你可以连接自定义域名，并通过向 Manus 描述变更来持续修改。
这与 Figma Make 有何不同？
Figma Make 是 Figma 的产品。在 Manus 中，文档介绍的流程从一个 Figma 画框链接和一个 Web 应用请求开始：它可以包含后端组件，之后你可以发布网站，并在对话中继续编辑。
我可以使用 Figma 转 Flutter 或 Figma 转 React Native 的输出吗？
此页介绍从 Figma 到 Web 应用的转换。导入指南列出前端使用 HTML、CSS 和 JavaScript；未确认 Flutter 或 React Native 的输出。