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




相关文章
|
4月前
|
缓存 数据库 数据安全/隐私保护
我绘制文章插图的三个神级工具
我绘制文章插图的三个神级工具
|
4月前
|
算法 图形学
Unity小游戏——武士击杀小怪兽(无限滚动的背景)
Unity小游戏——武士击杀小怪兽(无限滚动的背景)
|
9月前
Echarts实战案例代码(29):来找茬,柱状图在F11全屏下显示三角形的异形情况案例
Echarts实战案例代码(29):来找茬,柱状图在F11全屏下显示三角形的异形情况案例
53 0
|
9月前
|
计算机视觉
平面设计实验二 相册的制作与图层
平面设计实验二 相册的制作与图层
52 0
|
9月前
|
JavaScript 定位技术
WebGis——Pixi开发vue项目之使用遮罩实现图形缓慢填充颜色(三)
WebGis——Pixi开发vue项目之使用遮罩实现图形缓慢填充颜色(三)
|
iOS开发 MacOS Windows
Unity2D像素游戏开发——Aseprite简单人物绘画+动画制作导出精灵表示例
Unity2D像素游戏开发——Aseprite简单人物绘画+动画制作导出精灵表示例
517 0
Unity2D像素游戏开发——Aseprite简单人物绘画+动画制作导出精灵表示例
|
JSON Android开发 数据格式
原生app开发技巧——底部导航栏动画效果按钮制作方法之采用photoshop制作gif动画-过渡动画关键帧
原生app开发技巧——底部导航栏动画效果按钮制作方法之采用photoshop制作gif动画-过渡动画关键帧
原生app开发技巧——底部导航栏动画效果按钮制作方法之采用photoshop制作gif动画-过渡动画关键帧
|
关系型数据库 C#
通通玩blend美工(8)——动态绘制路径动画,画出个萌妹子~
原文:通通玩blend美工(8)——动态绘制路径动画,画出个萌妹子~       2年前我在玩Flex的时候就一直有一个疑问,就是如何来实现一个蚊香慢慢烧完的Loading动画呢?     刚经历了某甲方高强度一个月的洗礼后,这几天刚好闲下来,这个问题又浮现在我脑海里。
946 0
|
C#
[原译]一步步教你制作WPF圆形玻璃按钮
原文:[原译]一步步教你制作WPF圆形玻璃按钮 图1   1.介绍 从我开始使用vista的时候,我就非常喜欢它的圆形玻璃按钮。WPF最好的一个方面就是允许自定义任何控件的样式。用了一段时间的Microsoft Expression Blend后。
994 0