分享会文稿：Figma 3D 设计流程分享

一、背景

现状

在新公司工作快半年了，我对这里的工作模式已经有清晰的了解了。这里的设计师不多，但每个人要负责多个内部系统的 UI 和交互设计。

有些需求方的系统本身业务不复杂，都是简单的增删查改，但希望自己的系统能够与众不同，让人产生眼前一亮的感觉；而有些系统里的功能交互逻辑比较复杂，不同状态、不同情况比较多，希望设计师出一个交互方案能够让功能简单易用。

按这几个月的工作情况来看，第一种情况对我来说比较棘手。因为我当时面试的岗位是交互设计师，所以心理上和能力上都没有预期是要接触这样的需求的，而现实是这种需求的占比还不少。

所以我在遇到这种要为某个系统进行门户网站的设计，或者将内部系统打造得光鲜亮丽的需求的时候，我会耗费比较多时间，以及进行很多的尝试。

想法

于是我就在想：需求方们都希望自己的系统能在一众的高度规范化和模版化的系统中脱颖而出，那么使用 3D 素材会不会是一个比较好的解决方案？

有了这个想法之后，我调研了下网上其他大公司的对外产品，看看他们在 B 端产品中的 3D 素材使用情况。

看了一圈下来，我得出了这样的规律：

1. 3D 视觉素材在展示型页面用的较多。如官网首页，门户首页，登陆页等页面；
2. 在后台界面中使用较少。但也会用在功能入口、状态反馈、背景装饰等场景。

结论

基于这个规律、现实工作中的情况以及小范围的尝试之后，我得出了这样的结论：

1. 3D 素材在 B 端后台的场景使用的频率不高。恰当使用可以提升画面的丰富程度。但不必在此花太多时间。
2. 如果遇到需求方要求该项目需要与那种高度模版化的后台有明显区别的时候，使用 3D 素材确实是能满足需求方期待的。

二、难点

由于我没有 3D 设计的能力，同时公司的需求密集程度也似乎不允许我们专门花时间为一些日常需求来渲染 3D 视觉图，所以在最开始我是通过在素材网站上面搜寻 3D 素材，然后直接应用在工作当中。

这个方法最开始很好用，我可以快速地完成需求，但用久了之后发现短板也很明显。

1. 难以贴近公司业务。网络素材难以贴合公司内部的业务场景。大部份情况下只能找到通用素材，无法满足具体需求。
2. 缺乏系列素材。即使找到一个合适的素材，但要找到同系列的其他类型素材犹如大海捞针。
3. 侵权风险。网上找到的素材可能涉及版权问题，直接使用存在风险。
4. 质量参差不齐。高质量的素材通常需要付费，免费的素材质量参差不齐，难以满足设计内部标准。

所以我得出了一个结论：

仅靠找素材的方式对我们帮助有限，不能完全依靠这种方法。

如果不能仅依靠找素材的话，这意味着我需要有 3D 设计的能力？

当初我得出这个结论的时候，心里感到一丝的恐慌：现在的工作强度，还哪有时间学习复杂的 Cinema 4D 或者 Blender 之类的专业 3D 设计软件啊！

然后我再往深处想了想，其实我需要的不是 3D 设计的能力，而是需要有获得 3D 素材的能力！意思是我不一定得会用这种专业的 3D 软件，但我要有办法获得想要的 3D 视觉素材，并且这个过程必须具备以下特点才能满足我的实际工作情境：

1. 出图耗时短。因为实际工作中就是不值得在这方面投入过多时间。
2. 风格高度统一。才能保证扩展性，以及系统风格的统一性，而这正正是通过找素材的方式没法做到的。
3. 可定制程度高。指的是我要有办法定制 3D 素材里面的图像和元素，这样做才能确保产出物贴近实际业务，那用起来才有意义。

在想到这些东西的时候，刚好我了解到有一个叫做 Vector to 3D 的插件，似乎能够满足到以上三点需求，来提升我的工作效率和质量。于是我向领导提出这个设想，她也支持我去探索这个新工具。

这篇文章是公司内部分享会的文稿，记录着我当时探索出来的经验：如何利用 Vector to 3D 插件在 Figma 建立 3D 设计流程来提升我们的设计效率和质量。

三、通过 Vector to 3D 进行工作

插件介绍

这是一款付费插件，可以在 Figma 社区搜索并安装。

这款插件的 3D 能力分为两部分，全局配置项和当前物体配置项。接下来我将通过介绍这个插件的界面来简单介绍下这款插件。

对于全局配置项，我们可以在 “常规” 面板里配置视角和背景等参数、“渲染” 面板可以配置渲染质量、“光影” 面板可以配置灯光相关参数，如灯光数量 / 大小 / 位置 / 强度和颜色等。

对于单个物体配置项，我们可以通过 “厚度” 或 “旋转” 等的方式建立模型，并使用 “细分品质” 提升模型的质量。值得注意的是，这个软件是通过将矢量图形挤压或旋转生成出 3D 模型的，不能像传统 3D 软件那样有多种建模方式（比如克隆、布尔运算或雕刻等）。

除此之外，该插件还支持配置材质参数，如粗糙度、金属度、折射率等。这些简单材质足以应对绝大部分的 B 端场景了。

制作模版

这一小节会介绍两个该插件的功能，保存配置和模版化。

保存配置允许我们将当前画框内的视角参数、建模参数和材质参数等记录到该画框当中。下次打开编辑，或者分享给其他人打开的时候可以读取之前的配置，一键将矢量图形变成之前保存好参数的 3D 场景。

模版化则是该插件与 Figma 原生功能联动的完美范例，也是高效产出 3D 素材的关键因素。

先说效果：插件会将当前物体的配置项（如厚度、位置、材质等）记录，然后用户可以将任意元素与该物体替换，并继承该物体的配置项。

这个能力极大便利了模版化生产素材。我们只要做好一个模版，然后无限替换元素，就可以生产出适用于各种业务场景的素材了。

方法很也简单，我们需要将画框设为组件，想要替换的元素也要作为这个画框组件内的子组件。（下面的例子中，我将圆球的底座作为可替换元素）

将这个画框组件拖一个出来，在插件中设定好 3D 配置并保存。

然后做出其他可供替换的元素，确保图层的数量、排序、命名与画框内的替换元素一致

最后我们在左侧面板中按住 Cmd + Option 将其他替换元素与画框内的替换元素进行替换，然后在插件中重新加载一遍模型，我们能看到新的形状也应用上原有替换素材的参数。

这时，我们的模版已经制作成功了，后续只要无限制作替换素材，就可以获得无限的视觉素材。

实际应用

这里分享一个我在工作中实际应用的例子。我制作了一个生成蓝色 3D 玻璃风格图标的模版。

这个模版中，图标和背景面板的形状均可以替换，由此可以生产出很多种变化，适应不同的业务场景。所以也可以积累成为素材库，供团队的其他成员使用。

同时，我也建立了一个色板，可以用于表达一些状态（成功、失败、警告等），或者用在不同颜色主题风格的系统内。这样我们的模版能产生更多的变化，适用到更多的场景中。

四、总结

上文介绍了 Vector to 3D 的界面使用、如何制作模版以及分享了我在实际工作中应用的例子，我们现在已经掌握了在 Figma 中进行 3D 设计的流程。文章的最后总结一下做这件事的优点。

1.学习成本低

可以将 Vector to 3D 理解为是一个简化版的 3D 软件，移除了像传统 3D 软件比如 Cinema 4D、Blender 里面的很多复杂功能，仅保留基础能力。

2.Figma 内完成全流程

用这套工作流程可以使设计师不离开 Figma 工作环境就能生产出不错的 3D 素材，并且出图后也能在 Figma 内进行简单调色。不需要像传统 3D 工作流程那样在不同软件里的来回导出导入。

3.可定制程度高

Vector to 3D 的特点是基于矢量图形生成 3D 模型，所以我们能轻松生产出业务相关的元素，使得视觉素材能高度贴近业务场景。

4.风格高度统一

Vector to 3D 能够与 Figma 组件能力联动。可以将灯光、摄像机等全局参数记忆在组件中，替换子组件也能继承原本的材质、位置参数。同时能够将这些参数模版化，无限产出相同风格的视觉素材。

这套工作流除了在我自己的实际工作中有成功应用，也成功影响到了团队中的其他设计师。在这次分享会过后，团队中有50%成员已经用在需求中使用该插件来生成视觉素材了。

五、非 Figma 工作流

最后看到这里的朋友如果当前团队没有在用 Figma 作为工作软件，或者并非 UI/UX 设计师也想试试通过 SVG 图形制作 3D 模型的过程，这里我贴 Vector to 3D 的网页版连接：https://www.meimu.design/vector-to-3d/