top of page

Figma Code Layers Beta 将共享探索带入可运行原型

1天前
讀畢需時 12 分鐘

Figma 表示,其 Code Layers beta 现已覆盖 100% 的用户,将可运行的原型直接带到团队原本审查设计的画布上。由运行中代码支持的交互原型 Code Layers,为设计师提供了一个可在外观之外比较行为表现的共享空间。这一变化对一种熟悉的工作流提出了挑战:先在其他地方构建实验,再带回链接供所有人评估。

这项公告侧重于扩大可用范围,而非一次完全的新功能发布。Figma 11 月 4 日的工作流文章称该功能已全面推出,而其文档将最初的公开 beta 日期标为 2026 年 10 月 15 日。这一区别很重要,因为眼下的问题已从能否使用转向是否有用。团队现在可以评估,共享画布是否足以改善决策,从而值得在设计与实现之间新增一条路径。

Framer 已在其画布上提供代码组件,因此在可视化工作区中运行代码本身并不新鲜。Figma 的主张聚焦于协作探索:在落实实现之前保留不同方案、编辑其外观,并整合构想。核心张力在于:一方面让原型更易于讨论,另一方面让其底层变更具备可交付条件。

Figma Code Layers Beta 扩展共享审查范围

真正有意义的变化在于,可运行的实验可以成为与其周边设计相同审查空间的一部分。

在其 code layers workflow 中,Figma 介绍了导入代码、生成替代方案、完善提取出的设计以及整合探索结果的过程。Figma agent 是其设计文件内的对话式 AI 助手,可协助完成这些变更。文章展示了一个名为 Pickup 的虚构市场,设计师围绕既有地图体验探索配送地址选择功能。

虚构示例可以说明一种工作流,但无法证明其效果。Pickup 有助于理解 Figma 所设想的流程,但不应被视为经过独立衡量的实际部署。该公告没有提供依据,证明每个团队都能缩短开发周期或产出更好的界面。

不过,实验所处的位置改变了审查者能够讨论的内容。截图只能呈现某一时刻的外观。可运行原型则让用户能够测试交互、回到周边设计,并在不失去整体视觉语境的情况下比较另一种方向。

设想一次围绕地址选择器分歧展开的审查。一个美观的布局,可能掩盖用户选择位置后生硬的过渡。相反,一个视觉上较为朴素的替代方案,可能让任务更清晰。将行为与外观并置,能为讨论提供更直接的证据。

这并不会自动让反馈变得更精确。审查者仍需说明自己测试了什么,以及某项差异为何重要。当没有人标明用途时,充满可运行替代方案的画布,也可能和堆满原型链接的文件夹一样令人困惑。

机会在于让问题始终与实验并列可见。一个变体可能测试用户是否理解入口;另一个可能测试确认前应呈现多少信息。即使两个原型包含相似屏幕,它们也是不同的产品问题。

这种区分也有助于防止生成结果本身变成决策。Agent 可以提供看似合理的替代方案,却无法确定哪一种最符合用户需求。团队仍需负责选择评估标准并识别缺失的证据。

因此,对评估此次推出的读者而言,可用性只是起点。更重要的问题是,共享审查空间是否让分歧更容易解决。如果所有人都能看到替代方案,却没有人能说明为何选择其中一种,那么工作流虽已改变,却未变得更具问责性。

Figma Code Layers beta 让更广泛的受众能够实际检验这一问题。团队可以直接评估这种协作模式,同时将该公司的工作流演示视为一项有待测试的提议。

设计师与开发者面临更早对齐的决策

共享原型将部分实现讨论提前到方向调整成本仍相对较低的阶段。

Figma 的 code layers documentation 表示,用户可以从设计、提示词、网页或已连接的代码开始。它还支持提取可编辑的设计图层,并将其变更发送回代码图层。文档提醒,Code Layers 并不适用于所有代码仓库。

最后这项限定有助于界定谁会感受到压力。设计师获得了让交互更具象的另一种方式,但开发者必须判断该实验与实际产品的贴合程度。产品经理则必须区分有说服力的演示与已达成共识的实现范围。

当它暴露出隐藏依赖时,更早引入开发者是有价值的。一个原型可能暗示用户操作后会立即响应,但生产环境中的产品可能需要等待服务、检查权限,或处理本地无法获得的信息。

这些是用于说明的工程考量,而非 Figma 功能已被证实的缺陷。它们解释了为何一个可运行界面无法回答所有实现问题。原型确立了用户能在实验中体验到什么,而生产审查则确立组织能够可靠支持什么。

压力也会延伸至审查流程本身。如果设计师能够将一个可运行的替代方案带入会议,“需要更清晰一些”这样的模糊要求就更难持续存在。参与者可以指向具体交互,并说明哪一部分造成了不确定性。

与此同时,开发者可以借助同一讨论将视觉决策与架构决策分开。一个按钮标签可能可以立即采纳;一组新的请求流程则可能需要更广泛的技术变更。保持这些判断彼此独立,可以避免一个有前景的界面附带不现实的交付承诺。

因此,Figma agent 原型设计改变协作的时机,多于改变责任归属。设计师仍负责设计判断,工程师仍评估实现,产品负责人仍决定提议的体验是否解决了值得解决的问题。

这里还涉及参与度问题。如果只有生成原型的人知道如何评估它们,共享工作区的价值就很有限。审查者需要足够的背景,才能探索相关行为,而不必每次都依赖口头导览。

对组织而言,有用的采用信号是在审查后得到更清晰的决策。一次成功的会议应明确首选方向、尚未解决的假设,以及发布前所需完成的工作。只有当更多替代方案能改善这一决策时,生成它们才有帮助。

现有工作流面临压力,是因为它将实验与集体评估分开。Figma 的方法让这些活动更为接近。这种接近是否能减少返工,仍需每个团队通过自身项目来验证。

Agent 将视觉探索与运行行为连接起来

Figma 方案中最有力的部分,是能够在不脱离周边讨论的情况下,往返于行为与视觉细节之间。

从分析角度看,这是一种反馈循环。团队尝试一种交互,发现设计问题,修改相关外观,再评估更新后的行为。重点在于,让每一次修改都与促成它的问题保持关联。

这种区别很重要,因为界面质量既涉及局部细节,也涉及更广泛的流程。间距会影响一个操作是否看起来可用;措辞会改变用户选择后对结果的预期;过渡效果则可能暴露出一个视觉均衡的屏幕在错误的时刻索取信息。

在这些关注点之间切换,往往正是审查失去精确性的地方。一场对话起初围绕可观察的问题展开,随后演变成对于风格的普遍偏好。将可运行体验置于视觉探索附近,让参与者有办法回到最初的证据。

Figma 的客户材料为这种解读提供了一些支持。其 customer prototype examples 描述了 Checkout.com 设计师 Kris Murphy 提取屏幕以共同检查,再将视觉编辑返回原型的做法。该合集还描述了 Superside 的 Leonardo Rica 在探索交互卡片概念时提供精确尺寸和动效细节。

这些是由 Figma 发布的具名客户案例,而非独立比较。它们说明了人们如何使用该功能,但不能证明其具有典型效果。其有用的共同点在于具体性:当有人知道需要检查或纠正什么时,工作流才更有意义。

例如,评估结账交互的团队可能会将对措辞的不确定性与对导航的不确定性分开。同时修改两者,会让人更难理解结果为何感觉更好。保留对比有助于让讨论聚焦于正在测试的决策。

这是比较带来的分析性益处,并非声称 Figma 会自动执行受控实验。团队仍必须让条件保持足够一致。不同的示例内容或缺失的状态,可能会让某个替代方案因无关原因而显得更强。

整合探索结果时也同样需要谨慎。将吸引人的功能组合在一起,并不能保证结果仍然连贯。当它们共享导航、术语或对于后续行为的预期时,单独来看合理的选择也可能发生冲突。

因此,整合后的原型需要进行另一轮独立审查。它应被当作完整体验来评估,而非因为其组成部分此前已获批准就被接受。这正是即便生成速度加快,设计判断仍不可或缺的地方。

当 agent 支持一项具体调查时,Figma agent 原型设计最有用。探索某个特定交互的请求,会给团队留下可评估的对象;要求获得一种总体上更好的体验,则让太多评估标准未被明确说明。

实际含义是,共享画布探索依赖清晰意图。运行中的代码让行为可供检查,但不会决定哪种行为值得保留。

画布上的代码已是竞争赛道

由于其他平台已经存在基于画布的代码功能,Figma 的竞争论点建立在团队审查连续性之上。

Framer 的 code components 是 React 组件,即采用 JavaScript 库编写、可复用的界面元素,可在其画布、预览和已发布网站上渲染。其文档还介绍了可视化属性控制和组件共享。

这建立了一个相关的历史参照,但并不意味着这些产品可以互换。一个扩展网站构建器的组件,与在产品设计文件中探索的原型,服务于部分重叠但不同的目标。它们的价值取决于团队希望交付什么。

正在构建已发布网站的团队,可能更重视视觉编辑与最终网站之间的关系。探索应用改动的产品团队,则可能更重视备选方案、周边界面,以及解释为何选定某个方向的讨论。

两种需求都不天然更先进。它们代表不同的终点。仅根据工具是否能生成代码来比较,会忽视生成之后的工作,以及需要参与其中的人。

这让 Figma 的定位变得更清晰。它的机会在于,让共享设计文件成为审查可运行想法的有用场所。问题在于,这个位置能否保留足够的上下文,以抵消将代码引入其中所需的工作量。

独立的编码环境同样可以成为探索界面的有效场所。工程师可能更愿意在已有项目规范和开发检查机制的环境中试验。设计师则可能更偏好在其设计工作区中获得更完整的视觉概览。

这些偏好不应演变为视觉工具与代码工具之间人为制造的竞赛。实际问题在于,某项具体决策在哪里能够被清楚地作出。同一项目的不同阶段,完全可以合理地使用不同环境。

主要对手仍然是碎片化的探索。当原型、周边设计、反馈与决策依据变得难以关联时,就会出现这种碎片化。切换应用只是其中一种症状。单一应用中同样可能存在彼此脱节的工作。

因此,统计减少了多少次工具切换,会是一种不完整的评估。一个团队可能减少了切换频率,却花更多时间确认当前版本。另一个团队或许保留了独立工具,但能在证据与决策之间维持清晰关联。

Figma 示例所解释的代码层提供了一种空间化答案:将备选方案与讨论放在一起。当关系清晰可见时,空间邻近很有帮助。当不断扩展的画布让这些关系变得模糊时,它的帮助就会减弱。

因此,竞争压力既关乎审查质量,也关乎生成能力。Figma 需要证明,当原型能够在其现有协作环境中运行时,该环境会变得更有用。只要竞争方案能为团队提供一条从想法到有理有据的实施决策的更清晰路径,它们就仍然可信。

可运行原型仍需要代码与访问审查

在共享文件中运行的原型,会对其实现方式和可见性带来审查义务。

Figma 的 Git integration 文档描述了仓库克隆、分支和拉取请求,以及在合并前提交审查的拟议变更。文档还说明,文件查看者可以看到代码层的预览和预览源代码。文件编辑者即使没有相应的 GitHub 权限,也可以访问底层仓库代码。

在导入私有项目之前,这种可见性模型值得关注。相关受众是拥有设计文件访问权限的群体。团队应评估该受众是否与所引入代码的预期受众一致。

这是已记录的访问特性,而非安全事件的证据。它的实际重要性取决于仓库和共享安排。使用专有代码的组织,在将导入视为常规设计操作之前,需要先了解这一安排。

还存在独立的实现边界。Figma 记录了一条回到仓库审查的路径,但该路径的存在并不能证明生成的变更是正确的。拟议变更仍需根据项目要求进行评估。

对于地址选择功能,审查者可能会询问如何处理不可用地点,或在请求失败后确认信息是否仍然清晰。这些只是示例性的审查问题。它们旨在区分实验中令人信服的行为,与真实条件下可靠的行为。

无障碍性也需要做出同样的区分。一个界面看起来可能令人信服,但在没有指针设备时仍然难以操作。键盘行为、焦点顺序和易于理解的反馈,都需要直接评估,不能从视觉精致度中推断。

原型代码与现有项目规范之间的关系同样重要。局部变更可能看似合理,却引入一种难以在其他地方维护的模式。即使原型让其预期行为显而易见,仍有必要在上下文中审查该变更。

因此,怀疑论的具体观点是:更容易展示,可能鼓励过早的信心。利益相关者可能会将一个可运行界面理解为剩余工作很少的证据。只要实验仍有重要依赖关系未解决,就应当质疑这种理解。

有用的审查应识别哪些行为已实现、哪些行为是模拟的,以及哪些假设仍未经测试。这样既能保留原型的价值,又不会让它变成无意间作出的承诺。

决策记录有助于在会议结束后保留这种区分。比较备选方案的团队,可以将其决策依据保存在一个可搜索的知识库中,并与相关技术文档放在一起。关键信息在于方向为何改变,以及哪些内容仍需验证。

因此,应根据进入工程审查的拟议变更质量来评判 Figma code layers beta。更易理解的原型很有用。附带明确假设和可审查实现的原型,则是更强的成果。

关注采用情况、修改保真度与探索经济性

接下来的证据应表明,团队是否能作出更清晰的决策、保留预期变更,并在初步实验后持续使用这一工作流。

第一个信号是在真实项目中的重复协作使用。在未来几个月中,更有力的证据将包括:团队成员比较备选方案,并将选定方向带入实施审查的案例。重复使用将支持 Figma 的论点,即画布解决了持续存在的协调问题。

一系列令人印象深刻的演示,则只能提供较弱的支持。演示证明某种工作流能够产出有吸引力的结果。但当项目约束变得棘手时,它们较少揭示团队是否会回到该工作流。

这一区别应指导评估采用案例的买家。应询问:哪项决策变得更清晰、谁参与了,以及原型审查之后发生了什么。这些细节比笼统地声称实验更快更有价值。

第二个信号是修改保真度:当工作在视觉编辑与代码之间流动时,变更是否保留了其预期的外观和行为。这是一项拟议的评估标准,而非 Figma 已发布的基准。它针对的是产品承诺背后的核心机制。

有限修正工作的证据会加强这一承诺。反复出现无关变更、细节丢失或难以协调的报告,则会削弱它。无论结果如何,都需要结合项目复杂性和所尝试的变更来理解。

第三个信号是在实际信用额度消耗下持续进行探索。Figma 的 AI credit rules 表示,代码层请求会消耗数量不定的额度。该公司还表示,无法在 AI 任务运行前预测确切消耗量。

这使得完整审查周期成为相关的评估单位。生成一个备选方案、完善它并修正它,都是达成可用决策的一部分。只评判第一次输出,会让其余工作变得不可见。

持续使用表明团队认为结果值得投入所需资源。若在初步试用后放弃比较的情况形成模式,则会引发对可重复性的疑问。仅凭发布公告本身,无法确立任一结论。

这些信号让预测保持与可观察结果相连。Figma 已在其共享设计环境中提供了可运行的探索能力。剩下的问题是,周边流程是否会变得足够清晰,以至于团队愿意持续使用它。

在下一次审查中,选择一个已经会引发分歧的交互,并明确评估问题。让备选方案针对同一用户任务进行比较,保留选定方向背后的推理过程,并识别工程团队必须验证的假设。询问审查者:可运行的比较是否改变了他们的判断,还是仅仅让展示更具吸引力。然后让拟议变更进入实施审查,并记录过程中所需的任何修正。将 Figma code layers beta 视为检视团队如何作出决策的机会。当它有助于参与者理解权衡,并为开发人员留下更清晰、可审查的方案时,就保留这一工作流。

 
 

免费开始使用

一款本地优先的AI助手

为了获得更好的人工智能体验,

remio 目前仅支持Windows 10+ (x64)和M-Chip Mac 。

你的 AI 工作伙伴

和 remio 一起高效工作

规划、创作、交付

一站式完成

bottom of page