在6月28日凌晨举办的Config2024大会上,Figma正式推出Figma AI,通过文字描述就可以快速生成高保真的原型页设计, 帮助设计师和产品经理加速完成从初稿到成品落地。(Go from first draft to final product, faster)
AI可以根据设计需求为设计师先绘制线框图(wireframe), 智能推荐符合主题的颜色、字体和图片。从Config2024现场的设计师反馈看,AI辅助的设计比从一个空白画布开始(Start from a Blank Canvas)更能激发灵感,也更有效率。
AI生成UI与AI生成图片的区别?
文生图工具比如Midjourney,Stable Diffusion的原理是通过扩散模型(Diffusion Model)多步使用多个高斯模型来模拟像素的概率分布,生成的设计基本单位是像素(pixel)使用Figma设计UI的过程中,设计师使用的的基本单位是形状(shape):
“设计是对形状的布局,我们尝试从精神上抛开标题的意义、副本、视觉内容及其他元素,并把它们当作纯粹的形状”
多个形状的组合也可以变成通用的设计组件,比如:表单,地图,产品介绍等等。
AI能否模仿设计师的行为,基于形状/组件而不是像素来设计UI呢?
换言之,AI能否回答 “我要设计一个旅游网站,应该使用哪些组件?每个组件应该放在哪个位置?”
幸运的是,大语言模型天生就是选择的高手,chatGPT或Claude等LLM大语言模型的工作方式,就是根据用户输入的内容,选择下一个输出词,再把输出合并到输入,继续选择下一个输出词,以此不断循环回归的过程。
智能体(Agent)的本质是让AI从函数列表中选择最适合的函数,设计智能体(Design Agent)则是选择最适合的形状。
只需提供可选的组件列表和参考示例,AI就能学会如何设计UI!
把组件想象成乐高积木,AI生成UI的过程就是不断选择积木和摆放积木的过程。选择什么积木,如何摆放是由AI根据用户的要求和提供的示例实时选择的。
AI如何选择设计资源?
每个设计师都有珍藏的设计灵感网站,适合不同风格的图形,颜色,字体,动效,视频,音效等等。如果把每个设计资源想象成一颗星星,设计的过程就像在星空中遨游,设计需求是领路人,设计师在旅途中思考线路,寻找并收集最适合的星星,组合成最美的图案,旅行的过程就是设计的过程。
通过CLIP或者其他嵌入(embedding)模型, 设计智能体(Design Agent)也能在设计的宇宙中遨游,把用户输入的文字或图片转化成嵌入宇宙(embedding space)中的位置,智能体的飞船就会驶向目的地,并自动收集附近的资源。
Figma AI国产替代,直接预览小程序
在Config2024大会上,Figma希望用AI重新定义UI设计的流程和方法,目前Figma AI在Beta阶段,使用需要申请加入waiting list,国内是否有类似的AI UI设计工具呢?
FlowDoc(https://doc.flowcraft.net)是一款国产的类似Figma AI的UI自动化设计工具,从文字直出UI设计,直接预览微信小程序,并支持导出设计与代码。
目前FlowDoc在内测阶段,点击链接可免费试用。
申请创业报道,分享创业好点子。点击此处,共同探讨创业新机遇!