> ## 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.

# Import 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>
     You can attach multiple frames to your request. Tell Manus how these frames relate—page flow, interactions, or component states (like hover). This helps Manus generate accurate multi-page or interactive experiences.
   </Tip>

这种集成极大地加快了开发流程，弥合了设计与开发之间的鸿沟，让您能够在更短的时间内从静态设计转变为实时、交互式的应用程序。