夜雨聆风学习资料网

ARTICLE · 1063452

做设计 5 年,我用过不少 AI 出图工具,也踩过不少坑.

做设计 5 年,我用过不少 AI 出图工具,也踩过不少坑.

它们总给我一张漂亮的图——然后就没有然后了。难就难在这。

图不能点、不能跑、不能拿给别人试。

其实 Figma Make 走的是另一条路:它给你的是能点、能跑的原型。

原来问题从来不是"出不出图",而是"出不出能用的东西"。

这篇把它讲成人话:是什么、主要功能有哪些、新手怎么开始。

一句话版本:在 Figma 里用聊天的方式说出需求,它直接给你一个可交互、可分享的原型或网页应用。
官方管这套叫 prompt-to-code——你说自然语言,它在背后写代码。

你说需求,它给一个能点的东西。

先说清楚:它生成的不是图,是能跑的原型

很多 AI 工具做的是"看起来像界面的图"。

Figma Make 生成的是真能点的东西:按钮能按、页面能跳、数字能算。

就算你不会写代码也能用,不用懂技术细节。但想看代码,随时能看,也能改。

一个冷知识:它的底层逻辑是"文字 → 代码 → 界面",先有代码,才有你看到的画面。

所以改东西有两条路:继续说需求,或者直接改代码。懂这一点,用起来会顺很多。

这也是本质上的区别:它不是画图工具,是生成工具。


它和我以前的工作流,差在哪

不讲概念,直接对比。下面这几件事,是我几乎每周都要做的:

环节
以前
用 Figma Make
验证想法
画几屏稿,靠脑补
生成能点的,当场试
交付评审
静态稿,别人只能看
发链接,对方自己点
改一版
等排期,或者重画
继续说一句
做内部小工具
提需求,等开发
自己先做出来验证

说个数字你就懂这个变化多大:Figma 2026 年的报告里,61% 的产品构建者说自己在做可交互原型,一年前这个数字还是 10%。

还有一项任务对比研究显示,用 Figma Make 做交互原型,设计师完成任务比手动做快约 19%。

速度是一方面。更值钱的是:能在同一小时里试三个方向,而不是纠结三个月。


主要功能:5 个,够你看明白

一个反常识的事实:它的功能列表看着很长,但真正每天用的是这 5 个。

先给你一句话速览,下面再逐个展开:

  • 说人话出原型
    :描述需求,生成界面和交互
  • 设计稿变活
    :把 Figma 里的 frame 粘进来
  • 继续说就继续改
    :也能直接改代码
  • 接真实数据
    :连后端或 API
  • 分享或发布
    :一条链接给出去

聊天 → 设计稿 → 迭代 → 真数据 → 分享,一条链。

功能 1

说人话就能出原型

在对话框里描述你要什么,它生成界面、交互和逻辑。

关键在说得够具体。对比一下差别:

模糊:帮我做个记账 App。

具体:做一个记账 App。要有账单列表、添加按钮、分类选择、本月总支出。

你给得越具体,它越少瞎猜。

描述不清,是新手绕不开的痛点。它不难学,难的是把想说的说准。

功能 2

把现有设计稿"变活"

你在 Figma Design 里画好的 frame 或组件,可以直接复制进 Figma Make。

粘 frame 比粘截图好:frame 带结构化数据,它读得准;截图它只能靠猜,颜色都取不准。

反过来也行:把生成的预览"复制成设计图层",拿回 Figma 里接着精修。

功能 3

不满意就继续说,也能直接改代码

改布局、加动画、调逻辑,都是继续说一句。

想更精细,内置代码编辑器让你直接上手改。

自己已有的代码也能粘进去,接着聊着改。

功能 4

接真实数据,不用靠猜

可以先用模拟数据,也可以连后端或 API,拿真实数据跑。

这个差别很大:假数据和真数据,界面的问题暴露得完全不一样。

举个例子,列表标题一长就换行、金额超过四位数就撑破卡片——这类问题只有真数据才会露出来。

功能 5

分享或发布,一条链接的事

发给同事或客户,对方点开就能用,不用装任何东西。

也能把它发布成公开的应用。

这一条是"能点"的价值所在:评审不用再靠脑补。

还有个加分项:品牌一致。它支持把你的设计系统包带进来,生成的东西更像你家的产品,而不是一股"AI 味"。

它省的不是画图时间,是"等到能点"的那段时间。

我日常怎么用它:3 个场景
  • 汇报前做能点的 demo
    :不用等排期,会上直接点给老板看,比十页静态稿都管用。
  • 内部小工具先自己做
    :表格、看板、表单这类东西,先跑出个能用的版本,验证完再交给开发。
  • 作品集里放链接
    :面试官点两下就知道你会什么。居然比一堆图片更有说服力。

第 3 条是我没想到的收获。

做了 5 年设计,我发现"能点"这件事,比"好看"更容易让人记住你。

对我们这种天天被需求追着跑的打工人来说,少等一天都是赚。对被排期卡住的人来说,能自己先把东西做出来,就是很大的解放。


新手 4 步开始

整个流程只有 4 个步骤,很短。我按自己的理解拆开讲,照着做就行:

STEP 1

新建一个 Make 文件

在文件浏览器里找到草稿,点右上角的 Make

也有现成模板可以直接用,别怕从零开始。

STEP 2

描述你要什么

在 AI 对话框里说清楚三件事:要哪些界面、里面有什么元素、点了会发生什么。

可以顺手把画好的 frame 粘进对话框,或者放一张图当风格参考。

STEP 3

等它生成,然后点两下

它会显示一份待办清单,实时告诉你做到哪一步了。

复杂一点的要等几分钟。预览出来后,先自己点两下试试。

STEP 4

继续聊着改

不满意的部分继续说。想精细就打开代码改。

它生成的时候你也不用干等——可以先把自己的想法排进队列。


几个要知道的限制

说完好处,也得说清楚边界和踩坑点。下面这几条是新手常遇到的,早点知道能少走弯路。

限制 1 · 免费能试,完整功能要付费

可以在免费计划上先试。发布、代码编辑、接后端这些能力,需要付费席位或更高计划。

限制 2 · 每次发提示词都消耗额度

AI 额度按次计算,模型和任务复杂度会影响消耗量。

所以别一句一句地发"再改改",把想改的攒成一段说清楚。

限制 3 · 发布前确认素材版权

它可能引入网上的字体、代码包、图片,这部分责任在你。要公开发布,先过一遍。

限制 4 · 它不替你判断

它擅长把想法变快,审美和取舍还是你的事。

圈内老话:工具越快,判断力越值钱。我们这行的同行都清楚这一点。


速查清单:什么需求怎么用

存一份备用,下次直接对照着用:

你的需求
怎么用
快速验证一个交互想法
直接从描述开始,一句话生成
手上已有设计稿
把 frame 粘进对话框,让它变活
要看真实数据下的表现
连后端或 API
给非设计同事看
分享链接,对方直接点
想改细节
继续提示,或者改代码
要贴合品牌
把设计系统包装进来

能点起来的那一刻,想法才算真的存在。

你会用它先做点什么?

内部工具、落地页、还是作品集 demo?评论区说一个,我给你具体的描述写法。

觉得有用就点个「在看」、顺手收藏,再分享给那个总说"我有个想法但做不出来"的朋友。

关注「像素牛马」,下篇写:怎么把一段需求描述写得让 AI 一次就懂

你今天是像素,还是牛马?我猜是刚点完自己做的原型的像素。

—— 像素牛马 · 用像素谋生,靠牛马续命

相关学习资料