根据 Figma 设计构建可用的应用
要点在 Figma 中使用 File → Save local copy… 得到一个 .fig 文件。在“项目”页点击 Figma 并拖入文件。MonstarX 会在浏览器中读取它并展示每个界面；勾选要构建的界面（最多 30 个），描述设计稿无法表达的内容，然后点击“构建此应用”，或点击“先规划”，在构建前先回答几个问题。
如果你的应用已经在 Figma 中设计好了，MonstarX 可以直接根据设计稿来构建。你会得到一个外观与设计稿一致、真正可用的应用：真实的图片和图标、配色和字体、原型中的页面跳转都会保留，还会加上这些界面所需要的数据、表单和登录功能。
我需要准备什么？
Section titled “我需要准备什么？”一个设计稿的 .fig 文件。在 Figma 中打开设计稿，使用 File → Save local copy…，保存下来的就是 MonstarX 要读取的文件。它必须是 Figma 的 Design 文件：不支持 FigJam 白板和 Figma Slides 演示文稿，如果你拖入这类文件，MonstarX 会提示你。
如何根据 Figma 文件构建？
Section titled “如何根据 Figma 文件构建？”-
在项目页，点击导入旁边的 Figma（它也在导入菜单中）。你也可以把
.fig文件直接拖放或粘贴到输入框上。 -
拖入或选择你的
.fig文件。MonstarX 会在浏览器中读取它，依次显示“正在读取文件…”“正在打开所有页面…”“正在绘制界面…”，此时还不会上传任何内容。 -
勾选要构建的界面。文件中的每个页面都会列出来，并以缩略图显示其中的画框。看起来像界面的画框默认已勾选；看起来像辅助内容的页面（封面、设计系统、归档）默认折叠且不勾选。每个页面都可以使用全选或取消全选。
-
在“它需要实现什么功能？（选填）”中，说明设计稿无法表达的内容：谁会使用、数据从哪里来、有人注册或付款时会发生什么。
-
检查左下角的模型（默认使用输入框中选择的模型，你也可以在这里更改）。
-
点击构建此应用 · 4 个界面，或点击先规划，让 MonstarX 先研究这些界面，在构建前询问设计稿无法表达的内容。
界面上传完成后（显示“正在上传设计…”），项目会以文件名命名并创建，第一次构建随即开始。
MonstarX 会从我的设计中获取哪些内容？
Section titled “MonstarX 会从我的设计中获取哪些内容？”- 每个界面的图片：让构建助手准确看到你画的样子，并在工作过程中拿页面和它对照。
- 每个界面的精确描述：布局、间距、每段文字的字体和字号、颜色、边框、圆角、阴影。
- 你的图片和图标：设计中的每张图片和每个图标都会成为应用中的文件，不会被替换成图库照片。
- 你的设计系统：颜色变量（浅色和深色）、字体、圆角半径和阴影。
- 组件：在十个界面中都用到的按钮，会成为应用中的同一个组件。
- 原型链接：点击后跳转到哪里，会成为真正的页面导航。
名称相同的界面（比如一组都叫“Desktop”的画框）会根据开头的文字来区分，让你分得清哪个是哪个。
聊天中会显示什么？
Section titled “聊天中会显示什么？”你的第一个请求会类似这样：“根据我的 Figma 设计‘bloom.fig’（4 个界面：Welcome、Home、Plant detail、Add plant）构建此应用。请准确还原设计，并实现可用的功能。”，下方附有一排界面缩略图。点击某个界面，可以查看它的完整尺寸，以及尺寸、页面和文件信息。构建过程中，聊天会显示“正在查看 Home 的设计”“已将 / 与 Home 的设计比较”这样的步骤。
之后可以添加更多界面吗？
Section titled “之后可以添加更多界面吗？”可以。在项目的聊天中拖放、粘贴或添加一个 .fig 文件，就会打开从 Figma 添加界面。勾选新界面，说明它们需要实现什么功能，然后点击构建这些界面。它们会加入项目的设计，并按照与应用其他部分一致的风格构建。一个项目最多保留 60 个设计界面。
有哪些限制？
Section titled “有哪些限制？”| 限制 | 数值 |
|---|---|
| 每次构建的界面数 | 最多 30 个 |
| 每个项目的界面数 | 最多 60 个 |
| 每份设计的图片和图标 | 最多 400 个文件、共 150 MB（每个 8 MB） |
.fig 文件最大可以是 250 MB，但非常大的文件（比如完整的设计系统套件）仍可能超出浏览器的处理能力。请把应用的界面移到一个单独的文件中，去掉设计系统页面，再为它保存一份本地副本。
可以粘贴 Figma 链接，而不是上传文件吗？
这个对话框不行，它读取的是 .fig 文件本身。请在 Figma 中使用 File → Save local copy…。（有些设计工具也可以通过你的编程智能体发送它们的作品。）
拖入设计文件时会上传吗？
不会。文件是在你的浏览器中读取的；只有你勾选的界面会在你点击构建时上传。
应用会和设计稿完全一样吗？
这正是目标：构建助手会按照每个界面的精确数值来还原，并在构建过程中拿页面和你的界面对照。你可以在聊天中指出差异，或用编辑模式修正。
我的设计只有手机界面，在电脑上会怎样？
手机设计在宽屏上会以居中的一列来构建，所以应用在电脑上也能正常使用。
MonstarX 说我的文件不是 Figma 文件，为什么？
它可能是 FigJam 白板、Figma Slides 演示文稿，或其他软件的 .fig 文件。请在 Figma 中打开设计稿，使用 File → Save local copy… 保存为 Figma Design 文件。