> ## Documentation Index
> Fetch the complete documentation index at: https://manus.im/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# 從 Figma 匯入：設計到應用程式，一步到位

> 透過分享框架連結並描述您的需求，將您的 Figma 設計轉變為可運作的 Web 應用程式

對於使用 Figma 進行設計流程的團隊，Manus 提供強大的整合功能，讓您只需一個指令，即可將設計轉變為功能齊全的 Web 應用程式。

### 運作方式

您無需手動將 Figma 設計轉換為程式碼，只需向 Manus 提供 Figma 檔案的連結即可。Manus 將分析設計，包括版面配置、元件、字體和顏色，並自動產生對應的 Web 應用程式程式碼。

### 流程

1. **在 Figma 中設計**：像平常一樣在 Figma 中建立您的應用程式設計。

   <img src="https://mintcdn.com/docs-manus/lidNm1_-GLX2OqHW/images/image.png?fit=max&auto=format&n=lidNm1_-GLX2OqHW&q=85&s=e3ec8ac3e79fe1a72136b12e5e3c3683" alt="image.png" width="720" height="448" data-path="images/image.png" />
2. **提供連結**：與 Manus 分享 Figma 框架連結，並描述您想要建置的內容。

   例如：

   > 「這是我們新行動應用程式的 Figma 設計。請根據此設計建置一個功能齊全的 Web 應用程式。」
3. **Manus 建置應用程式**：Manus 將解讀設計並產生前端的 HTML、CSS 和 JavaScript，以及必要的後端元件，讓您的設計栩栩如生。

   <Tip>
     您可以將多個框架附加到您的請求中。告訴 Manus 這些框架之間的關係—頁面流程、互動或元件狀態（例如懸停）。這有助於 Manus 產生準確的多頁面或互動式體驗。
   </Tip>

此整合功能顯著加快了開發流程，彌合了設計與開發之間的鴻溝，讓您能夠在極短的時間內從靜態設計轉變為即時、互動式的應用程式。