Figma 到網站：上線落地頁
把一個行銷頁面畫框從 Figma 轉換為 HTML、CSS 和 JavaScript，然後發佈完成的網站。
將 Figma 設計變成可用的 Web 應用程式
貼上一個 Figma 畫框連結，描述頁面應完成的功能，並讓 Manus 構建可發佈的前端與後端。
從設計畫框到可用頁面
Manus 讀取 Figma 畫框中的版面、組件、字體和顏色，以建構可用的網頁應用程式。
設計框架可用頁面
示例說明。
為你需要的頁面將設計轉為程式碼
從登陸頁面、儀表板或幾個相互關聯的畫框開始。每次請求都可以說明設計背後的互動邏輯。
Figma 轉程式碼：建立可用的儀表板
分享一個管理面板設計，並描述你需要的數據和操作。Manus 會構建包含前端和後端組件的 Web 應用。
Figma 到應用：打通完整流程
把多個畫框放進一次設計轉程式碼請求中。描述頁面之間如何跳轉、點擊後會發生什麼，以及哪些元件狀態需要實現。
用連結而不是插件，把 Figma 轉成代碼
按文件中的流程，不需要獨立的 Figma 轉程式碼外掛程式。連接你的 Figma 帳戶，貼上畫框連結，並說明頁面上需要實現哪些功能。
發布你的網站，然後持續優化它
AI 設計轉程式碼不止於預覽。發佈網站，連接你的自有網域，並在對話中描述你想要的更改。
一個連結，一個清晰的請求，即可得到可發佈的網站
說明你的各個畫框如何銜接。然後查看結果，並在對話中繼續修改。
繼續用 Manus 構建
常見問題解答
如何用 Manus 將 Figma 轉換為程式碼？
將你的 Figma 帳戶連接到 Manus，然後分享一個 Figma 畫框的連結，並描述你想建立的網頁應用。Manus 會讀取其版面、元件、字型與顏色，隨後生成前端和必要的後端元件。
Manus 能把 Figma 轉成 HTML 和 CSS 嗎？
可以。按文件所述，Figma 匯入會為前端生成 HTML、CSS 和 JavaScript，並生成所要求網頁應用需要的後端元件。預設情況下，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 會分析設計，構建前端並生成可運作網頁應用所需的後端元件。
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 的輸出。