Figma Make 太离谱了，解放UI产品80%体力活
长沙/UI设计师/173天前/684浏览
版权
Figma Make 太离谱了，解放UI产品80%体力活
前言：最近gaming3.0发布后，在各个行业发光，在设计圈他让设计师们减少大量的时间来手k设计稿，一个Prompt就可以直接生成页面，但同时也有个问题，生成的图没办法转换成源文件，不过这个问题在前段时间被figma解决了，figma make接入了gemini 3 pro，我们可以通过在figma使用gemini3 pro生成设计稿并且可编辑！！！
一、先说背景
1、Gemini3.0 pro厉害在哪
Gemini 3.0 Pro是Google DeepMind于2025年12月发布的最新前沿AI模型，被誉为“世界上最智能的模型（来自官方），Gemini 3 Pro在推理深度和准确性上大幅领先前代模型（如Gemini 2.5 Pro），能处理科学、数学和跨领域难题，接近人类专家水平，在多模态理解上相对于2.0理解能力直接翻倍，我们需要关注的是视图能力，在文档和视频上更加精准，例如对UI图的理解以及原型图pdf文件等理解能力都至少翻了一倍。
针对设计方面，我们只需要上传一张草稿图，它就能给我们产出对应的高保真设计稿（无法二次编辑），也能给我反推更加具体的prompt。
⬇️⬇️下图对比非常明显
- Gemini 1.0（2017-2020）：你画我改，纯手工，肝到凌晨三点老板说再改改让设计稿高级一点。
- Gemini 2.0（2021-2024）：组件 + 自动布局 + Variants，大家一起提效，肝到凌晨一点。
- Gemini 3.0（2025-现在）：你只负责写 Prompt，AI 给你吐完整可交互的高保真原型，肝到……晚上十一点就能洗澡睡觉了。
2、Figma Make与Gemin3.0 pro的强强联合
Figma Make是Figma的 AI 驱动原型生成工具，于2025年11月底开始内嵌Gemini 3.0 pro进行测试，前面说了Gemini3.0的理解能力非常强大，那在加上figma make生图能力，那对UI交互产品设计们真的简直太友好了，具体🐂在哪呢。
大致就是生成速度更快、设计直接到代码（利用的gemin3 pro的代理式编码）、多模态理解（利用Gemini 3 pro分析整个fgima文件和设计系统），其实了解一下就行，大白话就是没有Gemini 3 pro作为底层模型，figma make就相当于单缸的汽车，能用但不好用。。。
二、Figma Make生成引擎有什么用
1、Figma Make 的发展里程
- 2024.06 ：Figma Config 首次公开“Make”概念，当时叫“First Draft”，只能生成死图 ，非常不准确，各种乱码。
- 2024.12：内测阶段，加入自动布局和组件实例化，名字正式改为 Make ，这时候依旧难用。
- 2025.08：正式发布，支持 Variants、交互原型、Chart 插件假数据，开放给所有付费计划。
- 2025.11-12：接入 Figma 最新视觉大模型“Visio 2.0” + 自研布局引擎“GridMaster”，接入gemini3.0rpo，理解能力质的提升包括中文。
2、底层原理
它其实就是三层模型叠出来的：
- 最底层：视觉大模型（看懂竞品截图、设计语言）
- 中间层：Figma 自己训练的“设计语法模型”（知道导航该放哪、间距多少才规范）
- 最上层：布局推理引擎（根据 24px 网格系统自动算 Constraints 和 Auto Layout）
所以它生成的不是“看起来像”的死图，而是“真的能直接打开改”的活文件。
三、Figma Make核心能力拆解
好了，重头戏来了，Figma Make 再强，也是个“听话的小孩”，你让他干啥他干啥，你 Prompt 写得稀烂，他就给你吐一坨稀烂；你 Prompt 写得精细，他能给你省事很多，下面是用4个案例来直观的感受下。
1、prompt直出UI稿（最常用，也是最爽的）
SaaS 数据看板首页
这是我整理好的prompt，直接扔给make，页面生成出来后效果还是不错的，描述的越精确它吐出来的页面越精细。
【项目类型】企业级 ToB 后台管理平台【页面类型】Dashboard 数据看板首页【设计风格】极简抗白 + 柔和微玻璃拟物 + 赛博蓝科技感【参考竞品】GrowingIO + 神策数据 + 极客邦【主色】#0055FF 【辅助色】#00C6A2 【成功色】#00C48C【背景色】#FAFBFC 【文字主色】#222222【布局规范】左侧图标导航（默认64px收纳，可展开240px），顶部固定全局搜索+消息+头像，内容区最大1440px，24px网格系统【必须组件】欢迎横幅、4个可拖拽快捷入口、4个大数字KPI卡、双Y轴趋势图、Top10排名、待办事项、公告卡片、右下角FAB新建按钮【交互要求】卡片hover抬升0.5rem+投影加深，图表hover显示数据悬浮窗，快捷入口支持拖拽排序 【情绪板】专业、可信赖、高效、带温度【输出要求】完整可交互高保真页面，所有组件实例化+Variants完整，自动布局100%正确，使用Figma Chart插件填充假数据，生成深色模式备用页
看看效果⬇️⬇️
ToC 电商App 商品详情页
第二个是移动端页面，相对于b端，移动端看起来效果会更好一些，可能跟描述有关系，移动端没有加间距的描述，生成出来的风格跟b端也有点像，都是大卡片+大圆角，猜测跟布局推理引擎有关系，不加特定间距的话，默认就是这个排版风格。
【项目类型】消费级 ToC 电商App【页面类型】商品详情页（竖版单页滚动）【设计风格】新拟物 + 柔和渐变 + 少量粒子动效【参考竞品】淘宝新版商品页 + 小红书商品详情 + 得物【主色】#FF3B30 【背景】#FFFFFF → #FFF9F5 渐变【布局规范】沉浸式轮播图顶部，固定底部操作栏（加入购物车+立即购买），中间Tab切换（图文详情/参数/评价）【必须包含】轮播图（带小圆点+拖拽手势提示）、规格选择器弹窗、优惠券领取区、评价卡片（带用户头像+星级）、相关推荐横向滑动【交互要求】加入购物车按钮微震动反馈，规格弹窗从底部滑出，评价图片支持点击放大【输出要求】iPhone 15 Pro 尺寸，开启设备预览模式，所有文字可编辑，动效使用Figma Smart Animate
看看效果⬇️⬇️
2、原型图一键UI稿
当老板周五告诉你周一要一套高保真彩色界面，我们会m领导，现在10分钟就可以把一套低保真原型转成高保真设计稿。
a、把所有线框导出为一张张PNG
b、将png拖到make对话框
c、写一句prompt：保留原有布局逻辑，补全视觉风格、错误/加载/空状态，统一使用#xxxxxx颜色
等待10分钟左右（取决于网络），所有页面就会出现在眼前！
3、竞品风格迁移
领导最爱说的一句话：我觉得这个感觉不错，你参考参考。
在以前我相信大多设计师都是手动k图，把风格替换上给领导看效果，要花费大量时间。
现在就非常简单
a、竞品截图拖到make对话框
b、把自己的低保真原型拖进去
c、加上prompt：将图一的视觉风格、配色、圆角、投影、字体层级完整迁移到图二线框图上，保留图二的布局和品牌Log
4、调用产品组件库，统一风格设计稿
如果我们需要在自己产品基础上去增加设计页面，需要先将自己团队的设计规范系统添加到make。
回到make页面引用设计系统
加上prompt提示词，需要修改的点，发送出去，等着图出来就行
由于组件是公司内部问题没办法给大家看了，但这个吐出的页面确实沿用了至少90%的设计系统，这个在做体系化设计的时候还是非常不错的。
5、小结
无论是哪种生图方式，make吐出的UI图都是英文的，make没办法引用本地字体，我们只需要复制下来粘贴到figma文件里手动更改，未来估计会增加字体选择的功能。
相信各位“原研哉”们看完豁然开朗，make对我们的设计效率提升了几倍之多。
因为figma make内嵌了gemini3.0pro，所以提示词不用专门再去生成了，稍微自己调整下，它就能理解！
下面是我用figma make做的一个可交互的作品集网站，prompt提示词比较简单，所以页面也相对简单些，复制下来更换自己的项目还是不错的，也可以将代码下载下来，通过cursor部署到自己服务器上也非常不错！
提示词⬇️⬇️
为资深 UI/UX 设计师生成一个作品集网站。平台：桌面端。视觉风格（酸性设计）：- 美学：酸性图形，Y2K 复古未来主义，暗黑模式，实验性艺术风格。- 配色：深黑背景，搭配高饱和度的霓虹色（荧光绿、电光紫、镭射蓝）。- 材质：液态金属质感，铬金属光泽，磨砂玻璃，全息渐变。- 排版：极具张力的粗体标题（宽体字），正文使用代码风格的等宽字体。- 氛围：前卫，高科技，赛博朋克，视觉冲击力强。布局结构：- 网格：不对称布局，打破常规对齐，动态间距。包含板块：1. 首屏 Hero：巨大的排版标题，搭配液态金属 3D 形状的占位符，带有“向下滚动”的提示。2. 项目展示：瀑布流布局或横向滚动。项目卡片带有霓虹发光描边，深色玻璃背景，大尺寸缩略图。 3. 技能栈：跑马灯文字条，循环展示工具关键词。4. 关于我：野兽派排版，大尺寸头像占位符，原始的代码块风格文本。5. 页脚：超大字号的链接，金属徽章风格的社交图标。组件细节：- 按钮：锐利的矩形按钮，带有霓虹描边或全息填充。- 卡片：深色毛玻璃效果，极细的 1px 发光边框。
四、小技巧指令
严禁使用大面积渐变背景、装饰性插画、过度拟物图标
所有图标必须来自团队共享库【figma图标组件文件名】
所有输入框必须包含聚焦、错误、禁用三种状态
所有表格必须支持多选、批量操作、行hover高亮
同时生成移动端适配版本，放在右侧Artboard
自动为主要按钮添加0.2s ease-out微交互
所有卡片圆角统一8px，投影使用Figma最新多光源投影
图表必须使用真实可替换的假数据变量
自动生成Design Token表格页，放在文件最底部
参考2025 Red Dot + iF Award获奖作品气质，但不要过于前卫
生成后自动运行Figma官方Clean Up插件，删除所有未命名图层
五、Figma Make 目前存在的问题
看完文章相信很多人用完 Make 之后，第一反应是“哇太牛了”，第二反应是“卧槽，这里怎么又翻车了”，别急，翻车是正常的，因为 Make 目前确实还有一些硬性的问题。
1、问题：页面复杂信息层级无法区分
典型翻车：AI 喜欢把所有卡片都做成一样大小、一样投影，导致页面“哪吒闹海”，没主次
解决方法：
- Prompt里强制写视觉层级，例如视觉焦点顺序：【视觉焦点】大数字KPI > 趋势图 > 排名榜 > 待办 > 公告，投影强度依次递减 30%。
- 加一句“主视觉卡片占满视口 60% 以上高度，其他卡片高度不超过 320px”
2、问题：b端交互状态过于简单
典型翻车：表格只有正常态，批量操作栏、空状态、错误状态、骨架屏全都没有
解决方法：表格必须包含以下9种状态Variants：正常 / hover行 / 选中行 / 全选 / 批量操作栏展开 / 加载骨架屏 / 无数据空态 / 错误重试 / 导出中loading，并为主键列添加固定列功能。
3、问题：业务组件无法识别
典型翻车：make对设计系统中的业务组件识别比较差，用过之后感觉只能够识别基础的按钮、颜色、圆角这种通用的规范，例如业务属性的社交卡片组件、搜索栏组件、tab组件等等，识别出来后非常模糊。
解决方法：先让make基于组件库随便生成页面，生成后二次微调，使用div模式选中对应模块告诉make替换组件库中某某组件（带上组件命名），不过有这时间，自己其实也能手动替换。
4、问题：品牌和设计规范一致性略差
典型翻车：例如产品的设计风格是圆角8px，模块之间的间距是12px，那make可能会偷偷给你用16px间距，颜色也会出现不在颜色库的色值。
解决方法：锁死式Prompt。
在提示词最前面加一段强提示：【绝对约束·违反直接失败】本项目强制使用团队设计系统『设计规范文件名』，网格8px，圆角规格只有4/8/16px，文字规格只允许 12/14/16/20/24px...，禁止一切线性渐变背景，禁止装饰性插画，禁止非品牌色出现，一旦违反，生成失败并报错。
实测下来效果还是不错，因为我的prompt比较简单，所以吐出的图不够精细，但可以明显看到局部的细节还是按照设计规范库进行了修改
5、问题：响应式无法完美适配
典型翻车：桌面版响应式非常完美，切换到手机尺寸就会出现排版混乱。
解决方法：同时生成Desktop（1920px、1512px、1440px、1280px）、Tablet（768px）、Mobile（375px）三个断点，所有组件使用Auto Layout + Constraints 正确响应，移动端底部操作栏固定，顶部导航收纳为汉堡菜单。
6、小结
以上问题大家应该可以看到解决的规律，基本都是通过prompt进行强制控制，如果prompt描述的比较广泛，那make吐的就会乱七八糟，毕竟有的页面元素极其复杂，也不能把make当神～
六、写在最后
figma make不是完美的，它只是2025年目前最好的“设计体力外挂”。
真正的专业，不是无脑信赖 AI，而是知道它的天花板在哪，然后把天花板一拳一拳顶开，比如把ai的可用率从50%提升到80%，现在这个时代，设计师还是以接纳ai为主，ai终究是工具，思考如何利用工具赋能自己的设计。
剩下的20%就是自己的审美、业务理解、判断力，把这些发挥到极致～
11
举报
声明
14
分享
相关推荐
评论你的想法~
表情
喜欢TA的作品吗？喜欢就快来夸夸TA吧！
推荐素材
你可能喜欢
相关收藏夹
登录注册
11登录即可同步推荐记录哦
14登录即可加入我的收藏
评论登录即可评论想法
分享分享