5分钟用Spline制作一个Figma图标

Spline是一个新出的轻量级3D软件，可以轻松创建和发布3D Web体验。快速构建和迭代，并可直接导出可开发的文件。

1. 新建Spline文件

打开spline软件，新建一个文件。这时默认会创建一个320✖️320px的白色背景，为了更好得显示，我们将背景放大至800✖️800，然后点左上角的锁定按钮，将白色背景固定住。

2. Figma图标的构成

从Figma官网上可以看到，Figma图标包含红、浅红、紫、蓝、绿5种颜色，半圆角矩形、圆形、3个圆角一个直角的图形3种类型。如果转换为3D图形，则应该为半球圆柱体、球体和尖角球体的球体（有些复杂）。

3. 绘制半球圆柱体

a. 由于Spline目前没有布尔和单独控制一个角的工具，所以选用锥体工具Cone改变参数来实现半球圆柱和尖角球体的创建。

b. 先画一个160大小的椎体，如图

c. 调整Shape里的Corners的U值为原始大小的一半，即80。再调整Corner Sides 为最大使球体更光滑。这时就已经呈现出我们想要的效果了

d. 再调整上面的Rotation的Z为90，图形即可逆时针选择90度，再修改颜色和材质。另外，调整Corners的D值，可以使直角边更圆滑一些。这样，我们要的效果就出来了。

e. 接下来需要做其他两个类似的图形。按住cmd键拖动图形，即可复制出一个。将Rotation的Z改为-90，图形就能翻转过来。

4. 添加球体

球体就很好做了，我们直接使用上方的Sphere工具来绘制球体，调整颜色和材质。

5. 绘制尖角球体

a. 尖角球体我们还是选用锥体工具Cone来创建，调整Rotation Z为-90；Corners U为0，D设置为一个比它自身尺寸更大的数比如200，Corner Sides也设为最大；添加材质和颜色。这时我们看到它的尺寸变小了，并且尖角有些长。

b. 调整大小为X 400，Y 200，Z 400

c. 旋转设置为Z -45，调整位置，效果就出来了

6. 分享和导出

点击右下角的Publish&Share，Type选择Public URL，稍等几秒，就能生成一个链接。
复制上方链接到网页分享给别人，就能在线查看刚才做出来的效果。点击此处预览

下方代码可以直接嵌入网页中，在制作网页banner等效果时非常方便。

如果Type选择Web Content，点击导出，则会生成一个.zip的压缩包。

这个压缩包包含三个文件，开发时可以直接使用。