文章

如何把图片拆成图层再导入 Figma

把一张海报或商品图拆成可编辑透明 PNG 图层,再拖进 Figma。讲清 AI 图层拆分与九宫格切图的区别,以及适用场景。

作者: FreeMake.cc Editorial Team最后更新:

如何把图片拆成图层再导入 Figma

Figma 可以把海报、商品图或截图当成一张锁死的图片放进去。它不能钻进这个文件,把标题、产品和背景分开挪动。图层拆分做的就是这件事:几张透明 PNG,按原图的顺序叠在一起,这样你才能在 Figma 里挪文字、改一个形状的颜色,或藏起背景。

需要这些 PNG 时,打开 图片拆图层。这是 AI 工具。它会上传图片,并且消耗额度。它不是本地浏览器小工具,也不能只靠每日生图额度。跑之前先看下面的额度说明。

如果只要等分小块——Instagram 九宫格、分镜切片——用 在线切图。网格切分不是图层堆叠。

「给 Figma 的图层」是什么意思

一份能用的导入,是一组 PNG:

  • 画布尺寸和原图一致,空白处是透明像素。
  • 前景(产品、标题、角标、人物)和背景分开。
  • 拖进同一个 Figma 画框后叠在一起,不用逐张对位置。

然后在 Figma 里改:换文案、换颜色、单独导出某一层,或重做版式。拆分是起点,不是一套组件库。给图层起名、裁掉多余、有时重画被模型粘在一起的部分,都算正常。

这和「去掉背景、只留一个主体」不是一回事。一次抠图是一张 PNG。图层拆分的目标是多张 PNG。只需要主体透明底时,去除背景 更短。

AI 图层拆分和九宫格切图

图片拆图层在线切图
你得到什么可叠放、可编辑的透明 PNG从同一张图切出的等分小块
适合要在 Figma 里重新叠放的海报、商品图、界面截图九宫格、联系表、切开的横幅
怎么运行上传,AI 分离,需要登录浏览器里本地切网格
额度付费额度或注册赠送额度。不是单独靠每日生图额度本地工具,不消耗生图额度
它不是一格一格的方块带透明通道的独立物件

页面上的位置才是重点、每一块都该保持普通图片时,用网格。物体互相重叠、你要移动或重新上色时,用 AI 图层。

不要把海报丢进切图工具,还指望得到 Figma 图层。你得到的是同一张平面图的切片。也不要把九宫格需求丢进 AI 拆分,还指望得到整齐方格。

什么样的原图比较好拆

模型分开它看得清的东西。给它一张清楚的原图:

  • 海报或广告:主体、背景、少量文字或角标是分开的。
  • 商品图摆在简单场景里,产品应当能从场景上抬起来。
  • 分辨率够看清边缘。截图的截图会把文字和背景焊在一起。
  • 不要太挤。十张叠在一起的贴纸会糊成脏图层。两三组到五组视觉块更合适。

难例:头发贴着复杂背景、浅天上的白字、压缩很重、以及 Figma 自己的截图(像素套像素)。仍然可以拆,但要准备清理。

压平的 JPG 和 PNG 都能当输入。给 Figma 的输出要用 PNG,透明才留得住。JPG 存不了透明图层。

步骤:选择 2–8 层

  1. 打开 图片拆图层。
  2. 登录。工具在运行前会检查额度。
  3. 上传海报或商品图。这一步会把文件送去 AI 处理,不会只留在你的设备上。
  4. 层数设为 2 到 8。普通海报先从 4 层开始(背景、主体、标题、其余)。层数越多,分得越细,消耗的额度也越高,因为每一层都算在这次运行里。
  5. 开始拆分,等待 PNG 堆叠。
  6. 下载图层。原图留在旁边,方便对对齐。

标题和产品粘在一起时,提高层数再跑一次,或拆完后在 Figma 里手工处理标题。一个物件被打成碎片时,把层数降低。

额度,照实说

图层拆分不是「只靠每日额度」的工具,也不是本地转换。

  • 图片会上传后再拆。
  • 必须登录。
  • 每次运行消耗付费额度或注册赠送额度。能支付这个工具的,是这份付费与赠送余额。
  • FreeMake.cc 的每日额度用于登录后的普通 AI 生图。不要因为首页写着永久免费生图,就以为图层拆分包含在那份每日额度里。
  • 费用随你选的层数变化(2–8)。确认前看工作台里的额度提示。

站上的本地工具——GIF 与 Live Photo 转换、网格 切图——不走这份额度。不要把那些说法套到图层拆分上。

工具页本身公开。谁都可以阅读。只有生成这一步才要求登录并消耗额度。

在 Figma 里整理

  1. 按原图尺寸建一个画框。
  2. 把每张 PNG 拖进这个画框。如果文件共用原图画布,它们应当叠在原位。不要只缩放其中一层。
  3. 从后往前起名:背景、照片、产品、标题、角标。
  4. 隐藏背景层,确认前景 PNG 真的是透明的。
  5. 处理常见残留:头发边缘的光晕、文字带上的阴影、袖子上粘着的背景。遮罩或重画。主体已经差不多、其余堆叠不对时,可以用 去除背景 再处理那一层。
  6. 文字必须能编辑时,用真正的 Figma 文本替换烤进图片里的字。图像里的字仍然是像素。
  7. 导出画框,或导出你改过的单层。

只裁一张 PNG,对齐就会漂。堆叠看起来正确之前,保留完整画布,再裁画框。

相关流程

  • 要格子,不要图层:在线切图。
  • 只要一个主体、不要一叠图层:去除背景。
  • 先做新的海报像素再拆:在 FreeMake.cc 用每日额度生图并下载,需要图层时再花费付费或赠送额度来拆。
  • 导出后的裁切和体积:用浏览器里的压缩和改尺寸工具。那些留在本地。

常见问题

### 九宫格切图和给 Figma 的图层是一回事吗?
不是。在线切图 切等分小块。图片拆图层 做出可以叠放、编辑的透明 PNG。
应该要几层?
2 到 8 层。海报从 4 层开始比较稳。只有不同物件仍然粘在一起时,再提高层数。
图层拆分走每日免费额度吗?
不走。它上传图片,并消耗付费额度或注册赠送额度。每日额度用于普通 AI 生图,不用于这次拆分。
需要账号吗?
拆分运行前需要。阅读这篇说明、打开工具页,并不等于已经在生成。
PNG 在 Figma 里能对齐吗?
它们应按原图画布对齐。放进同一个画框,不要单缩放某一层。然后起名、加遮罩,并替换烤进去的文字。
能全程留在自己的设备上吗?
这个工具不能。拆分会上传文件。要在本地切成小块,用网格切图。简单背景上只要一个主体时,去除背景 是浏览器里的本地色键抠图,适合纯色棚拍背景,不是发丝级蒙版。

相关阅读