品牌型号:联想GeekPro 2020
系统:Windows 10 64位专业版
软件版本:Figma入门版
作为一款可在线使用的UI设计软件,Figma拥有丰富而实用的矢量绘图功能,能通过图层、画框、组件等各种工具轻松完成产品的设计。Figma还拥有优秀的实时协作功能,能让设计团队在同一个设计文件上协作,大大提高产品设计的效率。接下来,让我们一起来学习Figma中如何删除图层,Figma如何删除所有交互的相关内容。
一、Figma中如何删除图层
与大部分矢量设计软件相类似,Figma依靠图层进行各种元素绘制。无论是文本,还是图形、图像,Figma均能创建与元素相对应的图层类型。接下来,本文会通过实例教大家Figma如何创建与删除图层。
Figma创建图层的操作很简单,如图1所示,只需使用Figma底部的工具栏绘制图形、插入图像、插入文本等,Figma会自动在左侧面板生成与元素类型相对应的图层。
比如本例绘制了两个矩形,并插入了一个文本。此时左侧面板会自动添加两个矩形图层,并分别命名为矩形1、矩形2。文本图层则以文本内容命名。
![创建图层](/WebDir/figma/images/news/676035e3c90d6_0.png)
如需删除图层,可在选择图层后,按下delete键删除。如果想批量删除图层,可以按下ctrl键的同时,依次选择图层后按下delete键批量删除。
![选择图层](/WebDir/figma/images/news/676035e3c90d6_1.png)
二、Figma如何删除所有交互
Figma支持动画与交互的制作,其交互效果包括点击、拖动、悬停等。另外,Figma也可通过设置动画的方式,设置交互的过渡效果,让交互更具有真实性。接下来,一起来看看Figma如何创建与删除交互。
首先,如图1所示,展开底部的画框工具,在画板上绘制一个画框。
![创建画框](/WebDir/figma/images/news/676035e3c90d6_2.png)
然后,如图4所示,在画框内绘制一个圆形,并插入“上传(upload)”的文本字样,此时简单地完成了第一个画框的制作。
![绘制图形](/WebDir/figma/images/news/676035e3c90d6_3.png)
接着,继续绘制第二个画框,并在画框内绘制两个矩形。同时,在两个矩形中分别插入PIC、TEXT的文本。
![绘制第二个画框](/WebDir/figma/images/news/676035e3c90d6_4.png)
完成两个画框的制作后,在Figma的右侧面板切换“原型”编辑功能。如图6所示,在“创建新的连接”提示中,Figma会教大家如何制作交互效果,即通过画框的圆形节点连接画框。
![原型面板](/WebDir/figma/images/news/676035e3c90d6_5.png)
具体的操作如动图7所示,在左侧图层面板选择画框1后,画框上会出现一个带“+”的圆形节点,将该圆形节点拖动到画框2,即可完成连接的创建。
![创建连接](/WebDir/figma/images/news/6760362e7a2a5.gif)
创建连接后,如图8所示,Figma会自动弹出交互设置面板,其中包含触发、动作、目的、动画的设置选项。
触发功能,即画框1通过什么动作指向画框2。Figma提供的触发选项包括单击、拖动、悬停、按下等。
![触发](/WebDir/figma/images/news/676035e3c90d6_6.png)
动作,即触发行为发生后的结果,比如单击画框1后打开画框2对应的链接。Figma提供的动作包括导航到、后退、打开链接等。
![动作](/WebDir/figma/images/news/676035e3c90d6_7.png)
如果要设置交互的过渡效果,可使用动画功能。Figma提供了溶解、移入、移出、滑入、滑出等动画效果。
![动画效果](/WebDir/figma/images/news/676035e3c90d6_8.png)
添加交互效果后,如图11所示,原型面板会自动添加交互项目。如果要删除交互项目,只需点击右侧的“—”符号即可。
![删除交互](/WebDir/figma/images/news/676035e3c90d6_9.png)
每添加一个交互,原型面板就会自动增加一个交互项目。如果要删除所有交互,如图12所示,依次点击右侧的“—”即可。
![删除所有交互](/WebDir/figma/images/news/676035e3c90d6_10.png)
三、小结
以上就是关于Figma中如何删除图层,Figma如何删除所有交互的相关内容。Figma提供了实用的矢量图形设计功能,可通过图层、组件、交互等功能设计各种矢量图形。其中,图层功能位于Figma界面左侧,可通过绘制图形、插入文本等方式创建图层,如需删除图层,只需选择图层后按下delete键即可。而交互项目的删除,只需点击交互项目的减号按钮即可。
作者:泽洋