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




相关文章
SwiftUI—方便用户选择日期的DatePicker日期拾取器
SwiftUI—方便用户选择日期的DatePicker日期拾取器
1714 0
SwiftUI—方便用户选择日期的DatePicker日期拾取器
|
9月前
|
自然语言处理 安全 C++
【C++ 格式化输出 】C++20 现代C++格式化:拥抱std--format简化你的代码
【C++ 格式化输出 】C++20 现代C++格式化:拥抱std--format简化你的代码
5618 3
|
缓存 JSON 前端开发
CORS 详解,终于不用担心跨域问题了
CORS 详解,终于不用担心跨域问题了
5773 1
CORS 详解,终于不用担心跨域问题了
|
定位技术
阿里架构总监一次讲透中台架构,13页PPT精华详解,建议收藏!
本文整理了阿里几位技术专家,如架构总监 谢纯良,中间件技术专家 玄难等几位大牛,关于中台架构的几次分享内容,将业务中台形态、中台全局架构、业务中台化、中台架构图、中台建设方法论、中台组织架构、企业中台建设实施步骤等总共13页PPT精华的浓缩,供大家学习借鉴。
34996 14
|
9月前
|
人工智能 安全
【新手小白】Sora如何申请?Sora使用教程(最新)
近日,OpenAI发布的Sora模型引发了广泛关注,成为行业内外热议的焦点。这一模型不仅在专业领域引起了极大兴趣,还激发了普通群众对于人工通用智能(AGI)的热情。随着Sora模型的爆红,越来越多的人开始关注一个问题:我们何时能开始使用Sora?在OpenAI的官方论坛上,关于这个问题的讨论异常激烈。有关如何使用Sora的话题阅读量已接近70,000,显示出人们对此充满期待。下面这篇文章解答了大家的这些问题。
5458 3
【新手小白】Sora如何申请?Sora使用教程(最新)
|
9月前
|
SQL Oracle 关系型数据库
MySQL必知必会:MySQL中的Schema与DataBase
MySQL必知必会:MySQL中的Schema与DataBase
|
9月前
|
人工智能 算法 PyTorch
【Hello AI】AIACC-ACSpeed-AI分布式训练通信优化库
AIACC-ACSpeed(AIACC 2.0-AIACC Communication Speeding)是阿里云推出的AI分布式训练通信优化库AIACC-Training 2.0版本。相比较于分布式训练AIACC-Training 1.5版本,AIACC-ACSpeed基于模块化的解耦优化设计方案,实现了分布式训练在兼容性、适用性和性能加速等方面的升级。
|
9月前
|
Java Nacos 开发工具
nacos服务端2.0.3 问题之启动报错如何解决
Nacos是一个开源的、易于部署的动态服务发现、配置管理和服务管理平台,旨在帮助微服务架构下的应用进行快速配置更新和服务治理;在实际运用中,用户可能会遇到各种报错,本合集将常见的Nacos报错问题进行归纳和解答,以便使用者能够快速定位和解决这些问题。
1484 17
|
人工智能
ChatGPT 常见错误原因及解决方案:报错、回答不完整等
最近,由人工智能实验室 OpenAI 发布的对话式大型语言模型 ChatGPT 火得一塌糊涂。它可以与人类轻松地对话,无论是多么奇葩的问题 ChatGPT 都不在话下。在体验 ChatGPT 的同时我们也会遇到各种各样的问题,这里我总结了其对话过程中可能会发生的错误以及如何去解决它们。
212342 5
ChatGPT 常见错误原因及解决方案:报错、回答不完整等
|
前端开发 开发工具 Android开发
使用expo在安卓模拟器中运行React Native程序
看完这篇教程你会学到如何在安卓模拟器里运行一个React Native程序。 我的电脑及软件环境 系统: windows10 64 Node:8.5.0 然后安装下面的工具,不分先后。
2898 0

热门文章

最新文章