figma中制作圆环效果的常见两种方法

简介: figma中制作圆环效果的常见两种方法


image.png

效果展示


右侧面板属性介绍说明


①. Sweep 表示圆的完整程度,以百分比表示(如上所示)。


②. Start 控制柄表示扇形的开始位置。手柄的起始位置设置为0,但你可以围绕圆圈拖动它以更改环的位置。


③. 圆圈中心的 Ratio 手柄允许你将圆圈更改为圆环,比例越大,圆环越小。


④. 圆角Corner Radius:环形两端的圆角大小,默认是0,输入圆环的可以调整为圆角端头。


image.png



两个方法大同小异,一个是填充,一个描边。


填充,主要是通过ratio的值来改变环的粗细,只有百分比;


描边,主要是通过描边的值来改变环的粗细,单位是px;


方法一:



Step01


画个正圆,改个颜色,快捷键O,再按Shift


Step02


鼠标悬停在上面,上下拖动Arc,可以扫出一个扇形


鼠标点击中间的手柄 Radio,让外拖拽,可以看到成环形


鼠标点击手柄sweep,拖拽至和另一端start重合


圆环制作完成


image.png


Step03


cmd+D 复制一份,改个颜色


鼠标悬停,点击手柄sweep往上拖拽,出现缺口


鼠标点击手柄start,更改圆环的开始位置


image.png


Step04


右上角,圆角的大小为圆的半径即可


image.png


操作动画演示


image.png



方法二



Step01


画一个400X400的圆,关掉填充,描边stroke设置为64px


关键点:描边设置为居中描边


image.png


Step02


Cmd+D 原地复制一层,改个颜色


重复方法一的操作,鼠标拖拽出想要的角度和占比;


鼠标点击start手柄拖动,可以修改它开始的位置。


操作演示


image.png





相关文档 Reference


相关文档:https://figmachina.com/guide/vectors-and-shapes/using-the-arc-tool.html




相关文章
|
2月前
Threejs制作窗户透亮效果
这篇文章讲解了如何在Three.js中制作窗户的透亮效果,包括设置透明材质和光照以实现逼真的窗户渲染效果的技术细节。
50 1
|
2月前
Threejs制作海面效果
这篇文章详细介绍了利用Three.js制作逼真海面效果的过程,包括设置Water材质、调整光照及实现波动动画的步骤。
35 0
Threejs制作海面效果
|
4月前
|
API
【threejs教程】让你的场景五颜绿色:纹理贴图与环境贴图
【8月更文挑战第6天】【threejs教程】让你的场景五颜绿色:纹理贴图与环境贴图
173 11
|
6月前
鬼刀画风扁平化粒子炫动引导页美化源码
鬼刀画风扁平化粒子炫动引导页美化源码
43 5
鬼刀画风扁平化粒子炫动引导页美化源码
|
7月前
|
图形学
如何在微信小游戏制作工具中做出好看的粒子效果?
如何在微信小游戏制作工具中做出好看的粒子效果?
114 1
|
7月前
|
缓存 数据库 数据安全/隐私保护
我绘制文章插图的三个神级工具
我绘制文章插图的三个神级工具
111 0
|
存储 前端开发 定位技术
brython | 笨办法写个连连看-3.地图制作
brython | 笨办法写个连连看-3.地图制作
143 4
Photoshop使用路径描边制作梦幻潮流光丝字
Photoshop使用路径描边制作梦幻潮流光丝字
67 0
|
存储 C++ Windows
眼前一亮!2款免费手绘风流程图绘制工具
“这种风格的流程图好漂亮啊,请问是用什么工具画的啊?”
眼前一亮!2款免费手绘风流程图绘制工具
|
图形学
Unity 如何制作星空粒子效果?
本经验介绍在Unity游戏引擎中使用Particle System,如何使用自带资源,快速制作星空的粒子特效。工具/原料 Unity 方法/步骤1: 首先,新建一个场景,如果有自己的天空盒资源的话,在Window->Lighting下设置下天空(默认天空盒也不影响演示) 方法/步骤2: 新建一个空对象命名为Star, 为其添加Particle System组件。
3640 0