相关推荐
您可能对下面课程感兴趣
Figma之UIUX项目交互教程

58小节已有3441人学过

UI设计之Figma系列教程

120小节已有22734人学过

Figma怎么编辑图形形状 Figma怎么做渐变色
发布时间:2025-01-23 15:11 [ 我要自学网原创 ] 发布人: 快乐小女 阅读: 3914

Figma提供了实用的矢量图形绘制功能,可轻松通过插入、钢笔等工具绘制各种图形。另外,Figma也提供了矢量图形的编辑功能,可对插入的图形进行形状、节点的编辑,让设计师可以更自由地进行图形的创作与设计。那么,Figma怎么编辑图形形状,Figma怎么做渐变色?接下来,一起来学习下吧。


一、Figma怎么编辑图形形状

在Figma的功能操作中,无论是插入的图形,还是钢笔工具绘制的图形,均可运用“编辑对象”的功能,进行图形形状的编辑。

以插入的星形为例,如图1所示,双击图形或使用Figma右侧设计面板中的“编辑对象”功能,可将图形转换为编辑模式。


图1:编辑对象

在Figma的图形编辑模式中,如图2所示,图形上会出现编辑节点。通过移动、添加、删除节点,可起到编辑图形的效果。



图2:矢量图形

1.调整现有节点

在图形编辑模式下,如动图3所示,点击选中节点后,可通过拖动鼠标的方式移动节点,使图形变换成其他形状。

图3:调整节点

2.添加节点

如动图4所示,将鼠标悬停在节点之间的线条上,箭头会变成钢笔形状,此时,在线条上点击一下,就能添加节点。

图4:添加节点

3.删除节点

如需删除节点,可使用shift+delete的组合键,该组合键可以只删除节点不删除路径。删除节点后,Figma会自动连接余下的节点。需要注意的是,如果仅按下delete键,会将整个图形删除。

图5:删除节点

二、 Figma怎么做渐变色

Figma可通过对象的填充功能,轻松制作渐变色。Figma不仅能制作简单的渐变色效果,还能加入透明度变化效果,让图形的设计更显美观、梦幻。

如图7所示,在Figma画板插入图形后,图形默认填充灰色。点击色块,可打开Figma的填充设置面板功能。

图6:填充功能

在Figma的填充功能面板中,默认打开纯色填充色板,如图7所示,将填充选项切换到“渐变”,即可制作渐变色填充效果。

在Figma渐变填充功能中,可通过设置渐变颜色、渐变范围、透明度变化等属性制作各种渐变效果。


图7:渐变填充

Figma提供的渐变效果包括线性、径向、角度、菱形渐变四种。本文会以线性渐变为例,教大家怎么进行Figma的渐变效果制作


图8:渐变类型

首先,如图9所示,在渐变填充设置功能中,点击色条下方的第一个方形色块,展开Figma的色板,可进行第一个渐变色的设置。


图9:展开色板

在Figma的色板中,如图10所示,选取色条上的颜色,如需添加透明度变化,可移动色条下方的透明度滑块,将其设置到合适的数值。

如果渐变色中添加了透明度效果,其方形色块上会出现透明图示(即包含灰白格子的图示)。

图10:设置第一个颜色与透明度

重复以上操作,进行第二个渐变色的设置。如图11所示,在设置渐变效果的过程中,我们可以在图形上实时观察到渐变填充的应用效果。

图11:设置第二个颜色与透明度

除了使用Figma默认的双色渐变效果外,我们也可以添加更多的渐变色,打造多色渐变效果。如图12所示,点击色块列表右上角的“+”按钮,可在色条中间添加渐变色。


图12:添加渐变色

Figma默认按照50%的渐变色范围布置颜色,如需调整该比例范围,如图13所示,可以在色条上移动颜色方块,或者直接调整色块列表上的百分数值。

图13:移动色块

三、小结

以上就是关于Figma怎么编辑图形形状,Figma怎么做渐变色的相关内容。无论是插入的图形,还是通过钢笔工具绘制的图形,均可运用双击图形的方式打开图形编辑模式,进行图形的节点、路径的编辑。Figma的渐变色融合了渐变与透明度的填充效果,能让图形的设置更显美观。大家在设计图形时,不妨尝试一下相关的功能。

Figma之UIUX项目交互教程
我要自学网商城 ¥40 元
进入购买
文章评论
0 条评论 按热度排序 按时间排序 /350
遵守中华人民共和国的各项道德法规,
承担因您的行为而导致的法律责任,
本站有权保留或删除有争议评论。
参与本评论即表明您已经阅读并接受
上述条款。
V
特惠充值
联系客服
APP下载
官方微信
返回顶部
相关推荐
您可能对下面课程感兴趣
Figma之UIUX项目交互教程

58小节已有3441人学过

UI设计之Figma系列教程

120小节已有22734人学过

分类选择:
电脑办公 平面设计 室内设计 室外设计 机械设计 工业自动化 影视动画 程序开发 网页设计 会计课程 兴趣成长 AIGC