我如何在 48 小时内使用 Figma 的新 AI 设计并构建一个可用的移动应用

本周，我给自己设定了一个挑战：利用 Figma 的新 AI 功能，尽可能多地完成我的产品设计和开发过程——从用户研究和分析，到生成我的 UI 设计、制作原型，然后将其转化为一个真正可用的应用——而我尝试在仅仅 48 小时内完成这一切。以下是我的经历...

问题

上周，我和我的会计师见面，他指出我记账的方式并不“理想”。我心想，“我真希望有一种简单的方法可以查看我的资金流入情况，并将其分配到特定的账户或资金池中。”这样，我就可以清楚地看到我是否在投资、储蓄、税务、个人开支或应急基金上投入了足够的资金。现在我想知道这是否也是其他人面临的问题。

计划

计划如下：

1. 通过与实际用户交谈和探索现有解决方案进行研究。

2. 根据我们发现的见解进行规划和策略制定。

3. 设计 UI 并创建一个单一流程或微应用进行测试和迭代。

4. 通过创建数据库和功能来无代码构建应用。

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

头脑风暴

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

然后，我使用 AI 生成了一个思维导图，深入研究自由职业者预算和资金分配的话题。我开始看到我的 MVP 可以成形的地方，收入、支出、税务和储蓄的资金池。

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

用户研究计划

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

现场用户访谈

在访谈中，我问了诸如“你如何为税务和自雇成本分配资金？”和“你如何决定投入多少用于个人支出与业务开支？”等问题。反馈非常有见地。我的受访者提到使用电子表格来计算季度收入和预算分配，尽管他们尚未确定投资策略。这次访谈验证了我的想法：自由职业者确实需要一个简单的工具来可视化他们的财务状况。

研究分析

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

竞争对手分析

为了了解现有的解决方案，我转向 Reddit 查看自由职业者讨论的预算工具。我查看了像 QuickBooks 这样的热门选项以及其他一些高度推荐的应用。特别是有一个应用反复出现，叫做 YNAB。我下载了它以观察其用户体验、界面和交互。用户可以选择账单类型并分配金额，这是一个有前途的设计模式，但尚未直接应用于自由职业者领域。

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

流程图

我回到 FigJam 并使用 AI 生成了一个流程图，详细说明了我的应用所需的每个屏幕和操作。流程包括从“添加余额”屏幕开始，创建资金池，分配资金和更新余额。有了这个指南，我准备好深入 UI 设计。

使用 Figma First Draft AI 进行 UI 设计

利用 FigJam 的所有研究，我使用 Figma 的 AI 功能创建了应用的设计和流程。Figma 的 First Draft AI 允许我在基本应用线框或桌面网站线框之间切换。

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

使用 Figma AI 进行原型制作

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

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

最后一步是使用 Buzzy 无代码插件将设计转化为功能性应用。我在 Buzzy 上设置了一个账户并安装了插件。

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

然后，我在 Buzzy 中生成了一个简要说明，就像一个产品需求文档，概述了应用的功能、用户角色和数据需求。

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

最后，Buzzy 将屏幕连接到数据库，使应用结构连贯并准备发布。

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

数据设计

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

一切就绪后，我发布了应用并扫描二维码在手机上测试。应用显示完美，具有添加和调整预算资金池等功能。看到我的设计变为现实真是太棒了。

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

最终结果

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

仅仅用了48小时，我就构建了一个完整的可用应用程序，这在没有 AI 的魔力下可能需要几个月的时间！