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

更新时间:2024/11/18, 10:03

我如何在 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 的魔力下可能需要几个月的时间!

AI奇想空间
AI奇想空间
https://aimazing.site
AI 奇想空间是一个汇聚人工智能工具、资源和教程的导航网站。 在这里,你可以发现最新的AI技术、工具和应用,学习如何使用各种 AI 平台和框架,获取丰富的 AI 资源。 欢迎广大 AI 爱好者加入我们的社区,开启你的AI之旅!
AI交流群
Copyright © 2024 AI奇想空间.微信