如今做出一款好产品需要什么

如今，做原型比以往任何时候都容易。真正更难的是：把速度一路保持到上线，选对方向，做出真正与众不同的产品。要做到这些，需要具备以下条件。

插画：Lena Muller

有了 AI，从写下一句 prompt 到点得动的界面，几个小时就能完成。但做得快不等于做得好。原型再精致，也绕不开那几个大问题：这个方向是最好的，还是只是最先想到的？它看起来像我们做的东西吗？最关键的是：它真的值得做吗？能把这些回答好的团队，在三个方面都很强——速度、方向、差异化。他们能在最后一段路上继续推进，在押注一个方向之前先权衡多个方向，并把结果打磨成只有他们才做得出来的样子。

速度：保持势头，直到上线

当 80% 变得轻松，团队往往会在最后 20% 掉链子，因为原型很容易让人误以为已经可以发布了。做产品的人可能会发现，自己快速搭出来的原型根本没用上设计系统，或者从设计进入代码时反而多出一堆活。难点在于，随着工作越来越细、牵涉的人越来越多、离上线越来越近，还要[守住最初那股速度

如何快速走向对的方向

有了 AI，速度来得容易，技术债也一样。所以最好的团队不是只求快，而是想清楚、做扎实，并且做出辨识度。](https://www.figma.com/blog/how-to-move-fast-toward-the-right-thing/)。[](https://www.figma.com/webinars/lc-chaos-as-a-catalyst/)看看 Sephora 技术高级副总裁 Sneha Narahalli 如何把速度用在快速交付之外。

用最快的媒介解决问题

产品成型的过程中，团队要不停迭代，从细微的视觉调整到功能行为的改变，不一而足。哪种方式最快，取决于你要解决的是什么问题。比如表单字段和按钮之间空隙太大，直接在 Figma 里调整间距，可能比用提示词描述这个改动更快。另一些改动则在代码里做更省事。假设你在做一个计算器，让用户根据有多少队友会使用产品来估算价格，那就不必为 10 人、20 人、50 人各设计一个版本。在代码里写一个简单的计算，人数一变价格就自动更新。提速的关键，是为每一类改动挑最快的那条路，而不是把所有任务都塞进同一套流程。在 Figma 里，这意味着根据你要做的改动，在直接编辑、提示词和代码之间切换。为任务选对工具：

• [直接做精确的视觉编辑

属性面板与标注，现已登陆 Figma Make

有了可视化编辑和标注，Figma Make 正在弥合设计与代码之间的鸿沟。选中任何你想改的元素，直接在属性面板里调整，或者用标注写下就地提示词。](https://www.figma.com/blog/properties-panel-and-annotations-now-in-figma-make/)，在 Figma Make 中用属性面板完成。间距、字体、布局、尺寸这类调整，不必再用提示词逐一描述。

• [把 Make 预览复制

将 Figma Make 带入画布

现在你可以把 Figma Make 预览中的任意设计复制到设计画布，继续编辑、迭代，把想法推进得更远。](https://www.figma.com/blog/bringing-figma-make-to-the-canvas/)到 Figma Design，变成可编辑的图层，团队可以直接在上面打磨、发散。

• [把 Figma Make 接入你的代码库

Figma Make，现已运行在你的本地代码上

从可视化编辑到上下文提示词再到协作，Figma Make 正在拓展团队用代码做设计的方式。](https://www.figma.com/blog/figma-make-now-on-your-local-code/?utm_source=chatgpt.com)，用产品现有的代码做改动并预览，然后把改动发给工程团队评审。

把捷径交给整个团队

工作在团队里流转时，想保持速度，就得让好用的捷径可以被反复使用。假设一位设计师摸索出一套快速可靠的方法，用来检查新流程是否符合无障碍标准。与其把这套方法留在自己手里，不如把它变成整个团队都能复用的工作流。在 Figma 里，团队可以把这些可重复的工作方式做成任何人都能复用的 skill 或 plugin。

Skill 与 plugin 的区别

Skill 是一组可复用的指令，用 / 命令就能触发，比如按无障碍规范检查设计稿。Plugin 则是可复用的工具，在画布上完成某个具体任务，比如生成仪表盘布局，或整理一组图片。让更好的工作方式在 Figma 里惠及整个团队：

• 自己创建[自定义 skill

试试这 10 个 skill——也亮出你自己的

现在你可以直接在我们的 agent 里、在 Figma 中编写 skill，把自己的想法用起来。下面是我们最喜欢的 10 个，供你上手。](https://www.figma.com/blog/try-these-10-skills-and-show-off-your-own/)，也可以借助 Figma agent 来创建，然后分享给团队，用于评审设计、用户测试、排查合规问题这类可重复的工作流。

• 让 Figma agent [构建一个可复用的 plugin

Figma 的设计 agent，现在支持自定义工具，上下文能力也更强

提示词只是起点。自定义工具、真实上下文和技能能让设计智能体走得更远——最终画布上呈现的东西才真正像你做的。](https://www.figma.com/blog/agent-custom-tools-context-skills/#generative-plugins)，用于团队经常在画布上执行的任务，比如自动把图片排成布局，然后分享出去，让别人也能用同样的快捷方式。

方向：先广泛探索，再做选择

过去探索多个方向要花更长时间，这有时迫使团队迅速收窄范围，或者让想法停留在过于假设的层面，无法真正理解它们如何（或能否）落地。现在，那些加速第一个方向的工具，同样让尝试更多备选方案变得更快，也能在投入之前看清有潜力的想法在更多场景下是否站得住脚。了解 OpenAI 产品设计负责人 Ian Silber 及其团队如何在决定值得交付什么之前广泛展开想法。

投入之前先检查边界情况

单个原型会掩盖分支、空状态和别扭的过渡——即便是一个有潜力的概念，也可能在这些地方于实践中制造问题。假设你在设计一个美发沙龙预约流程。有人选了一个空闲时段，然后收到确认。但原型没有展示：如果那一周没有任何可用时段会怎样，发型师取消会怎样，或者客户需要改期会怎样。这些正是原型过于局限、无法呈现全貌的时刻，也是你发现这个方向是否真正成立的地方。在 Figma 中查看完整视图：

• [借助代码图层，

Figma 画布上的代码

在 Figma Design 中，借助代码图层，你可以用代码探索多个方向，并与团队并排查看。](https://www.figma.com/blog/code-on-the-figma-canvas/) 将原型中的关键屏幕或状态提取为可编辑的设计图层，这样你就能在画布上查看完整流程、进行修改，再把改动应用回原型。

• [让 Figma agent

Figma 设计 agent 来了

从今天起，你可以直接在画布上与一个专为 Figma 打造的 agent 协作。](https://www.figma.com/blog/the-figma-agent-is-here/) 基于现有屏幕或流程，补全缺失的状态或分支。

• 让 Figma agent 指出当前流程可能没有覆盖到的缺口或场景。

一起比较不同方向

有对比，想法才更好判断。把几个方向摆在一起，取舍会更清楚——哪一个把视觉识别推得更远，哪一个优先保证 UI 体验更清晰。另外，很多 AI 实验都是关起门来做的，但团队需要比较、回应、争论，并在彼此的想法上继续搭建。共享画布给了他们这样一个场所，同时把各个方向和讨论放在一起，反馈不会散落到另一个线程里。除了队友的反馈，还可以让 Figma agent 从特定角度评审某个方向，比如首次使用的易用性，或企业销售的顾虑。这样团队在选定方向之前，能多一组问题需要考虑。在 Figma 中探索并比较不同方向：

• [让 Figma agent

Figma 的设计 agent，现在支持自定义工具和更丰富的上下文

提示词能帮你起步。自定义工具、真实上下文和技能让设计 agent 走得更远——最终出现在画布上的东西，看起来才真的像你。](https://www.figma.com/blog/agent-custom-tools-context-skills/) 从一条提示生成多个变体，这样你和团队的讨论一开始就有多种选择，而不是只有一个。

• 复制一个可交互的代码图层，在它旁边尝试其他方案，让每个版本都足够真实，可以比较它的行为方式——而不只是外观。

差异化：打造值得被关注的产品

当 AI 能让更多人抵达一个精致的起点，想要脱颖而出，就需要更刻意的选择。差异化来自不满足于第一版产出，持续打磨体验，直到它体现出一种明确属于你的观点。听 Airbnb 设计副总裁 Teo Connor 讲讲，在一个从 0 到 1 比以往任何时候都更容易的世界里，如何守住质量。

从坚实的基础出发

[一套强大的设计系统

重新定义 AI 时代设计系统的 5 个转变

随着 AI 重塑我们打造产品的方式，设计系统正在从可复用组件的库，演变为能够规模化承载品味与工艺的活的框架。我们与产品负责人和一线从业者聊了聊，他们在设计系统的构建、使用和维护方式上看到的转变。](https://www.figma.com/blog/5-shifts-redefining-design-systems-in-the-ai-era/)承载着产品的观点。它的组件和变量编码了成千上万个细小的决定——什么该有、什么不该有：哪种红才符合品牌，卡片的圆角该多大，元素之间该留多少空间，哪种按钮样式代表主操作。当团队把这些选择写进系统，AI 生成的产出就能继承同一套视觉语言，而不是退回千篇一律的默认样式。让产品与众不同的那些特质，会稳定地出现在团队创造的每一件东西里。在 Figma 中让你的标准可复用：

• 让 Figma agent 基于你的设计系统工作，并标出偏离之处。
• 通过 Figma MCP 使用 Code Connect，让 agent 知道 Figma 中哪些组件对应团队在代码里使用的组件，从而用同一套系统来构建，而不是靠猜或重写组件。

直接精修输出

提示词很强大，但为了一个小改动再写一条提示词，可能意味着重新生成的内容远比你预想的多。好作品来自对输出的掌控：保留可用的部分，改掉不合适的部分，在细节上不断打磨，直到结果符合你的意图。假设你生成了一款自定义 shader，只有辉光过强。用另一条提示词去要求修复，你可能会拿到一个颜色、模糊和图案也跟着变了的版本。不如直接手动调整辉光的强度。在 Figma 中掌控一切：

• 混合来自不同提供商的模型[在 Figma Weave 中

连接 Figma 与 Weave

今天，我们宣布了新的方式，让你的 Weave 创意工作流与 Figma 画框并存。](https://www.figma.com/blog/connecting-figma-and-weave/)，更接近你真正想要的结果。

• 使用shader 效果，直接在画布上应用扭曲、颗粒或纹理等视觉效果。

表达更多

一旦你能直接精修输出，就可以用自定义插画和动效等视觉表达把它推得更远。过去这意味着要引入另一个工具或另一位专家，但这些限制正在消失。比如，设计师想让菜单以特定的回弹效果滑出，而不是直接出现；或者让卡片使用闪烁的渐变，而不是纯色填充。现在，同一位设计师不用离开画布就能做出这两者，配合 Figma agent 把自己的构想变成现实。Figma 画布上的动效让你不用离开文件就能构建和精修动画，并在组件的每个实例中复用。使用方法： 从预设动画样式开始，描述你想要的效果，让 Figma agent 做出第一版，或者自己为位置、缩放、旋转或透明度设置关键帧。在时间轴上拖动图层调整时机，或把标记跳到任意时刻查看效果。构建完成后，开发者可以直接从 Dev Mode 复制精确结果，导出为 CSS、JSON 或 React。把你的产品体验推得更远：

• 用 [Figma Draw

Express yourself with Figma Draw

Figma Draw pairs faster, simpler vector editing with powerful tools for visual expression—so designers of all stripes can bring their vision to life without breaking focus.](https://www.figma.com/blog/introducing-figma-draw/) 直接在画布上创作矢量图。

• 在 Weave 中生成并组合图像或视频。
• 把画框切换到 [Figma Motion

Introducing Figma Motion: Your canvas now has a timeline

Motion now lives on the canvas—in the same file as your components, your variables, and your team—so your designs can come to life from day one.](https://www.figma.com/blog/introducing-figma-motion/) 模式，然后在时间轴上拖动图层，调整每个部分的动画起止时间和时长；也可以直接跟 Figma agent 对话，先拿到一个 v1。

• 描述一个自定义 shader，比如卡片上的微光效果，让 Figma agent 先做出一版，再在画布上调整。

打造优秀产品并没有变得轻松。变的是苦活累活发生在哪里。原型可以是起手式，但团队仍要在最后一公里保持势头、选对方向，做出真正有辨识度的东西。速度、方向、差异化三者合一，才能把更快的构建变成人们真正愿意用的产品。