美文网首页figma
figma中制作圆环效果的常见两种方法

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

作者: LRachel | 来源:发表于2020-04-14 17:40 被阅读0次


效果展示


右侧面板属性介绍说明

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

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

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

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

两个方法大同小异,一个是填充,一个描边。
填充,主要是通过ratio的值来改变环的粗细,只有百分比;
描边,主要是通过描边的值来改变环的粗细,单位是px;


方法一:

Step01

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

Step02

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

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

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

圆环制作完成

Step03

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

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

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


Step04

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


操作动画演示



方法二

Step01

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

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


Step02

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

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

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

操作演示



相关文档 Reference

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

相关文章

网友评论

    本文标题:figma中制作圆环效果的常见两种方法

    本文链接:https://www.haomeiwen.com/subject/ydbtvhtx.html