用 Figma 做精致的 3D 图标

今天推荐一个 Figma 插件：Vector to 3D 。

Vector to 3D

这是一款国人设计开发的插件，收藏量在官方插件仓库截止到现在已经有 60 多 k，其实在去年的时候，我就使用过这个插件的早期版本。那时候功能相对简单，使用过几次之后便没再关注过。

但是，现在它已进化到可以让没有 3D 建模基础的设计师，迅速制作出逼真的 3D 图标或是插图。甚至可以像使用 3D 软件一样制作出复杂的场景：

我自己也是在熟悉插件的过程中，就可以快速制作几个精致的图标：

接下来，简单说一下插件的工作原理与基本用法。

对了，插件基本上需要付费才能真正应用在工作中，目前的价格是 139 元，但是免费版也可以进行诸多操作来熟悉。我自己觉得很超值，这是我一直期待的轻量 3D 制作工具。对于平面类的设计师来说，建模的速度可能很慢，但是勾出各种线条的速度一定很快，通过线条生成的可调整 3D 模型，更是比 illustrator 的 3D 功能，强出了几个数量级。

工作原理

插件通过一个平面的矢量图形组，将其增加厚度，然后顺序排列。接着可以通过插件调整不同元素的角度、位置等，就像在一个 3D 软件中操作。

而这些操作后的位置、材质等信息，还可以通过作者的服务器存储起来，与该矢量图形组做关联。猜测是利用数据库存储了该图层组的 ID 与 3D 配置信息，下次再打开该图层组，或图层组被复制的时候，就可以载入 3D 信息快速重新生成一个 3D 渲染图。

最终生成渲染完毕的 3D 模型，可以作为图片直接插入到 Figma 文件中使用，也可以另存为 glb 模型文件，供其它软件再次处理。

基础用法

简单 3D 的效果很容易，想象你要做的 3D 物件被拍扁了之后，都包含哪些轮廓线，将这些轮廓线勾勒出来，选中全部，打组或者放在同一个 frame 中，然后执行插件，就会将这些矢量图形增加厚度，并按照图层的排布顺序摞在一起。其中要注意：

1. 颜色可以提前定义，但是透明度信息不会被插件处理（无论是颜色的还是图层的）
2. 增加了厚度被 3D 化的物件会依次根据图层的顺序排布，如果希望某几个元素在同一层，可以提前打组
3. 非一次性的物件一定记得用插件调整完毕后，点一下保存，将 3D 信息存入，这样下次再做修改补充重新调整参数，同时将该图层组找地方存好，方便找到后二次处理或复用

插件中调节相关的参数完毕后，点击插入即可插入一张图片到 Figma 文件中。默认情况下，插件会打开你上一次关闭时打开的 3D 模型，所以渲染的如果不是当前选定的图层组，则需要点击一下「从选择的图形转换」。

以上是基本的插件使用方法，除了这些，插件还可以调整材质、灯光等等高阶属性，每一个属性参数都值得深入探讨，这篇简要介绍插件的基本信息，便不再展开了，有机会再分享一些具体的制作技巧。

类似工具

最后，如果有轻量的建模需求，还有两个做的较好的线上工具推荐给你，只需要有浏览器就能进行建模，甚至可以做 3D 动画、带交互的游戏等：

• Vectary - Build interactive 3D and AR solutions online
• Spline - 3D Design tool in the browser with real-time collaboration