我如何使用 Figma 的新人工智能在 48 小时内设计并构建一个可运行的移动应用程序

本周，我挑战自己尽可能多地使用 Figma 的新 AI 功能来完成我的产品设计和开发过程——从用户研究和分析到生成我的 UI 设计，原型制作，然后将所有内容转化为一个真实的工作应用——我尝试在 仅仅 48 小时 内完成这一切。以下是发生的事情……

问题

上周，我和我的会计见面，他指出我记账的方式并不是“最佳的”。我心想：“我希望有一种简单的方法来查看我的资金流入，并将其分配到某些账户或类别。” 这样，我就可以清楚地看到我是否在投资、储蓄、税务、个人开支或应急基金上投入了足够的资金。现在我想了解这是否也是其他人面临的问题。

计划

这是计划：

1. 通过与实际人交谈，了解他们的问题并探索现有解决方案来进行研究。
2. 根据我们发现的见解进行规划和战略制定。
3. 设计用户界面并创建单一流程或微应用进行测试和迭代。
4. 通过创建数据库和功能来无代码构建应用。

我们将全部在 Figma 中完成。我将使用 FigJam AI 进行前两个步骤，然后使用 Figma AI，最后使用 Buzzy AI 插件进行 Figma。

头脑风暴

首先，我打开了一个 FigJam 文件进行用户研究。我的第一步是头脑风暴。我使用 FigJam 中的一个按钮，通过 AI 见解生成了关于自由职业者预算的头脑风暴。它建议探索当前预算应用的格局，了解自由职业者面临的独特挑战，以及考虑不同的策略。

然后，我使用 AI 生成了一张思维导图，深入探讨自由职业者的预算和资金分配主题。我开始看到我的 MVP 可能的形状，包含收入、支出、税收和储蓄的分类。

在深入用户研究之前，我使用 FigJam 的 AI 驱动的 “Jambot” 工具创建了一个快速的用户研究计划。我将我的便签连接到 Jambot，Jambot 为我的研究计划生成了一个细分：进行调查和访谈，分析现有的预算应用，创建界面，开发应用等。

用户研究计划

接下来，我为我安排的面试做准备。我需要起草问题，于是我使用了另一个 FigJam 便签，写道：“给我写一些关于自由职业者预算需求、习惯和解决方案的面试问题。”将其连接到 Jambot 后，我得到了相关问题的集合，比如：“作为自由职业者，你如何优先考虑支出？”以及“你目前使用什么工具？”这些问题非常适合深入了解自由职业者在预算方面所面临的困难。

现场用户访谈

在访谈中，我问了诸如“您如何分配税款和自雇成本的资金？”以及“您如何决定个人支出与商业支出之间的比例？”这样的问题。反馈非常有启发性。我的受访者提到使用电子表格来计算季度收入和预算分配，虽然他们尚未确定投资策略。这次访谈验证了我的想法：自由职业者确实需要一个简单的工具来可视化他们的财务状况。

研究分析

我在采访过程中做了详细的笔记，并将转录文本粘贴到 FigJam 的便签中。然后，我使用 FigJam 的 Jambot 将关键见解总结成要点。一些主要观点包括处理意外的低收入月份、设定基于百分比的预算，以及组织和跟踪资金。我意识到这将是我 MVP 关注的主要流程。

竞争对手分析

为了了解已有的解决方案，我转向了Reddit，查看自由职业者讨论的预算工具。我研究了一些流行的选项，如QuickBooks和其他一些高度推荐的应用程序。其中一款特别频繁出现的应用叫做YNAB。我下载了它，以观察其用户体验、界面和交互。用户可以选择账单类型并分配金额，这是一种有前景的设计模式，尚未直接应用于自由职业者领域。

我最喜欢的竞争对手分析工具之一是 Mobbin，它收录了数千个真实应用程序，并展示了它们的流程、屏幕和UI元素的演示。我在Mobbin中搜索了“预算”，得到了大量的见解。我强烈推荐给任何UX/UI设计师。

流程图

我回到 FigJam 中，利用 AI 生成了一个流程图，详细说明了我应用程序所需的每个屏幕和操作。流程包括从“添加余额”屏幕开始，创建资金池，分配资金，以及更新余额。以此为指导，我准备好深入进行 UI 设计。

使用 Figma 进行 UI 设计初稿 AI

通过 FigJam 的所有研究，我利用 Figma 的 AI 功能创建了应用程序的设计和流程。Figma 的初稿 AI 让我可以在基本应用程序线框和桌面网站线框之间切换。

我首先选择了一个应用程序线框，使用了 Figma AI 的新“初稿”功能，并提示它生成一个金融应用程序。线框立即准备就绪，我通过调整深色模式、颜色、按钮样式和间距等进一步自定义它们。我还使用相同的提示生成了另一个屏幕，但这次我使用了基本应用程序生成模式。

使用 Figma AI 进行原型设计

一旦线框图完成，就可以开始创建原型。我选择了所有屏幕并点击“ 制作原型。” Figma AI 自动连接了屏幕，使我能够预览和测试交互。所有设置都非常完美，我可以点击查看应用程序的功能。这真是节省了大量时间！

使用无代码插件 Buzzy AI 构建真实应用程序

最后一步是将设计转化为一个功能齐全的应用程序，使用了无代码插件 Buzzy。我在 Buzzy 上注册了一个账户并安装了插件。

Buzzy 的自动标记功能扫描了我的屏幕，识别了组件，并进行了标记以准备开发。

然后我在 Buzzy 中生成了一份简报，类似于产品需求文档，概述了应用程序的功能、用户角色和数据需求。

接着我创建了一个数据库模型，Buzzy 自动设置了用户、桶和分配金额的数据表。

最后，Buzzy 将屏幕连接到数据库，使应用程序结构紧凑且准备发布。

Buzzy 的这个新自动标记功能真的为我节省了数百小时的手动标记时间。它只是一个简单的向导，易于遵循，并且产生了很棒的结果。

数据设计

仍然有一些小事情需要手动完成，因此在 Buzzy 中切换到专家模式，我进行了手动调整，以确保字段和按钮正常工作。我将某些字段指定为用户输入的“表单”，并将它们链接到数据库。

一切对齐后，我发布了应用程序并扫描了二维码以在我的手机上进行测试。应用程序显示得非常完美，具有添加和调整预算桶等功能。看到我的设计变为现实真是令人难以置信。

我使用基础计划将其部署到 Buzzy 托管服务器，但您也可以在自己的域名下发布，并将其发布到您的 Apple 和 Google（Android）应用商店，使用 Buzzy 部署计划。

最终结果

在进行了一些手动调整后，我在发布时遇到了一些问题，但经过一些故障排除和Buzzy支持团队的指导，我成功发布了一个完全功能的应用程序。该应用程序允许用户在Figma中实时创建和管理预算类别。我意识到，当发布出现问题时，清空工作区并从Figma重新发布是一个不错的解决办法。

仅仅48小时，我就构建了一个完整的工作应用程序，如果没有AI的魔力，这本来需要几个月的时间！如果你喜欢这个，务必查看Buzzy，并看看我的课程，我在课程中教导了成千上万的学生掌握成为熟练、高效和有意识的产品设计师所需的基础、工具和技巧。

最初发布于https://designerup.co于2024年11月4日。