乐于分享
好东西不私藏

产品经理的AI工具之Figma Make

产品经理的AI工具之Figma Make
今天介绍Figma Make。和Google Ai Studio类似,用来实现所有的产品交互细节,适用于产品需求明确、制作产品原型demo阶段。Figma被誉为“全球数字产品设计的标准工具”,它的AI产品Make延续了Figma在产品设计方面的优秀基因,更懂产品设计,因此用起来比其他产品更丝滑,更顺手!有了它,产品经理可以直接演示未来产品长什么样子,包括:页面、跳转、动画、交互。

更为方便的是,设计好页面后,代码随之生成。开发可以直接进入开发模式,减少了设计与开发之间的信息损失。

总之,个人强烈推荐~

https://www.figma.com/make/ 
1、首页
首页非常简洁,对话框占了一个屏幕,下方的 Onboarding flow、Data dashbord、Gradient gallery是三个模板用来设计用户注册、数据看板、渐变色图库相关的产品,点击后会有现成的提示词直接使用,也可以直接在对话框中输入自己的提示词,提示词需要指定AI角色、具体化要做的事情、明确产出和限制,可以参考产品经理的AI工具之Stitch的提示词。下面以“Onboarding flow”为例。
输入提示词后
  • 通过“+”,上传图片或文件,作为设计的辅助资料,比如产品功能思维导图、产品需求说明等;可以贴上之前做过的figma的设计,作为本次设计的设计系统或功能的参考。
  • 通过Enhance prompt,优化提示词,使提示词更有条理,符合产品设计规范,如下图为提示词优化后:
  • 选择"Build"选项进行原型设计。
  • 模型默认为"Default",也可以自己手动选择其他模型,一般使用Gemini系列模型。
以上做好后,回车,就开始设计了。
2、调整
在Make生成页面的时候,左侧首先显示它对提示词的理解和推理,然后给出to-do list,清晰的展示需要做几项工作,以及完成了哪几项,这些回应,让使用者很放心。
  • 点击项目名称后面的下拉框选择“Rename”,可以对项目进行重命名,方便后续查找。
  • 右侧为用刚刚的提示词生成的页面。
  • 通过左侧的对话框提出修改要求,对生成的页面进行细节调整。选中Edit功能,点击右侧页面的组件,可以对组件进行修改。例如删除“STEP 1 OF 3”。
  • Edit,每次只可以修改一处;每修改一次便会生成一个新的版本,点击某个版本,右侧便显示该版本的样子。
  • 对话框支持语音输入提示词。
  • 页面最上方,支持查看页面或代码的切换,支持电脑端或手机端模式的切换。
  • 可以通过右上角的“Share”功能,将项目分享给团队成员,通过对成员权限(View,Edit)控制,实现团队共建项目。
  • 可以选择“Open full-screen view”来全屏展示设计的页面,视觉和操作上更接近真实产品。
  • 点击“Publish”,将产品发布出去,可以在Figma Make的社区中看到该产品。
3、可与Stitch衔接
Stitch设计静态页面很高效、页面细节调整也到位。将Stitch设计的静态页面导入到Figma Make 进行更进一步的交互、跳转等设计,可以提高效率。
以上。