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 到網頁應用程式的轉換。匯入指南列出前端使用 HTML、CSS 和 JavaScript；並未確認 Flutter 或 React Native 的輸出。