Figma中文网 > 使用教程 > Figma怎么添加图层 Figma怎么填充图片
Figma怎么添加图层 Figma怎么填充图片
发布时间:2025/03/24 10:19:17

品牌型号:联想Yoga 14Sitl

系统:Windows 10 64位专业版

软件版本:Figma入门版

在Figma中,图层可以用来组织和管理设计元素,页面的结构会更加清晰。填充图片可以用来创建背景、按钮样式或界面装饰,增强视觉表现力。下面就为大家介绍Figma怎么添加图层,Figma怎么填充图片的相关内容。

一、Figma怎么添加图层

实际上,在Figma只有一个图层面板,是不可进行添加或删除操作的。但我们可以通过以下的五个方面来了解Figma中的图层面板。

1、默认情况下,Figma的图层面板显示在界面的左侧。

Figma的图层面板
图1:Figma的图层面板

2、有时候图层面板没有显示出来,我们可以在菜单栏的【查看】类目中,找到【面板】,选中【打开图层面板】,把图层面板显示出来。也可以使用快捷键Alt+1。

打开图层面板
图2:打开图层面板

3、我们在Figma文件中的所有元素,都会在图层面板中展示,相当于图层面板提供了概览。图层中会首先按照Frame(框架)进行组织,其实Frame更加像我们在Photoshop这些设计软件中认识到的“图层”的概念。每一个Frame是独立的,Frame中会呈现框架内拥有的要素。

框架中的要素
图3:框架中的要素

4、拖动Frame上下移动,可以调整层级顺序。也可以通过选中Frame,鼠标右击在上下文菜单中找到【移到顶层】或【移到底层】进行顺序调整。

顺序调整
图4:顺序调整

5、在上层的Frame会遮挡住下层的Frame。像图5中,Frame2在最上层,遮挡住了另外两个Frame的内容。

图层顺序
图5:图层顺序

二、Figma怎么填充图片

在Figma中,有很多场景中我们会用到图片。如果只需要用矩形形状的图片,我们可以直接复制本地的图片后,将它粘贴到画布中进行使用。填充图片经常是用在对图片的形状有要求的情况下。填充图片可以为形状或背景增添视觉效果。我们来制作一个填充了图片的圆形头像,可以用以下的四个步骤来实现:

1、创建基础形状:我们在工具栏中找到椭圆工具,按住键盘Shift键画出一个正圆。

绘制正圆
图5:绘制正圆

2、填充图片:在选中圆形的情况下,在右侧【填充】类目中,点击图6中标点1的位置后,打开填充面板。找到第三个类目【图片】,也就是图6中标点2的位置。

图片面板
图6:图片面板

点击后,界面发生切换,点击【Upload from computer】,可以从电脑本地中加载图片。

加载图片
图7:加载图片

3、选择图片填充模式:①默认情况下,图片是以填充模式展现的。这种模式下图片会完全填充到形状中,不保持原始比例。如果图片的宽高比与形状不一致,图片会被拉伸或压缩,可能导致图片变形。在圆形的头像中,还看不出来。我们在不规则的形状中,加载一张图片试一下效果,从图8中,可以看到图片的上半部分不能够显示出来。

填充模式
图8:填充模式

②我们可以根据需要切换为【适应】、【裁切】、【平铺】样式。【适应】模式中,图片会保持原始比例,完整显示在形状中。可以在图9中看到,这种模式下,图片完整地显示出来了。

适应模式
图9:适应模式

③【裁切】模式中,图片会保持原始比例,但会根据形状的边界进行裁剪。

④【平铺】模式中,图片会以重复平铺的方式填充到形状中。像图10,因为图片比形状大很多,平铺的话只显示出来了图像的一角。

平铺模式
图10:平铺模式

4、颜色修改:我们还可以通过Figma提供的工具,对图像的颜色细节做出调整。

颜色修改
图11:颜色修改

以上就是Figma怎么添加图层,Figma怎么填充图片的相关内容。Figma的图层功能能帮我们精准控制每个元素的上下关系,让界面编辑更高效。填充图片特别适合用在产品展示、卡片设计或者个性化背景里。

读者也访问过这里:
135 2431 0251