Figma 如何导出指定图层为 PNG：右侧 Export 区域的设置与验收

需要把设计稿里的一个按钮、卡片或图标交给开发时，Figma 不必整页导出。选中目标图层后，在右侧属性面板的 Export 区域添加 PNG 配置，点击导出按钮即可得到对应资源；如果没有选中图层，导出的范围就可能变成整个画布。

最稳的判断顺序是：图层名称先选对，右侧出现目标图层的属性，再在 Export 区域确认倍率与 PNG 格式，最后用下载文件的尺寸和透明背景验收。

先确定要导出的图层范围

Figma Design 可以导出图层、Frame、组件、Group 或 Section。本文只处理“指定图层导出为 PNG”这一件事，示例是一个按钮资源，不讨论整页 PDF、原型演示或批量导出。

访问 Figma 官方导出说明时，官方页面把“选择内容”和“添加导出配置”分成两个动作：先选对象，再配置 Export。这个顺序很重要，右侧栏没有选中对象时通常不会显示对应的导出设置。

按编号路径完成 PNG 导出

步骤一：在 Layers 或画布中选中目标图层

打开目标 Figma Design 文件，在左侧 Layers 列表点击要导出的图层；也可以直接在画布上点击对象。若资源由多个子图层组成，选中外层 Frame、Group 或 Component，避免只选到文字或图标子层。

可见成功状态：画布对象出现蓝色选框，右侧属性面板显示该对象的尺寸、位置或外观信息；右侧顶部的选中数量与目标一致。如果显示的是单个文字层，先按住 Shift 补选或改选外层容器。

步骤二：在右侧属性面板定位 Export

保持对象选中，查看右侧栏底部，找到 Export 区域。拥有可编辑权限时，它位于右侧栏靠下的位置；只有查看权限时，官方说明显示它位于 Properties 标签下。看不到区域时，先确认当前确实选中了对象，并刷新页面检查文件所有者是否限制了复制或导出。

步骤三：添加配置并选择 PNG

点击 Export 标题右侧的 +，新增一条导出配置。配置行默认会出现倍率和格式下拉框：倍率按交付需求选择 1x、2x 或其他值，格式下拉框选择 PNG。

PNG 适合需要透明背景、细线或文字清晰度的资源。若图层本身是带背景色的 Frame，检查 Fill 区域的 Show in exports 是否符合交付要求；取消它会隐藏填充，但不会自动裁掉图层边界。

可见成功状态：Export 区域出现一条配置行，能明确看到倍率和 PNG，并出现类似“Export [图层名]”的按钮。只看到加号而没有配置行，说明尚未完成新增配置。

步骤四：执行导出并确认浏览器下载

点击配置行下方的 Export 按钮。使用 Figma 浏览器版时，文件会进入浏览器设定的下载位置；桌面版则通常会出现文件命名和保存位置提示。多人选中时，按钮文字可能显示导出图层数量，例如 Export 2 layers，这表示会按选中对象分别导出。

可见成功状态：浏览器下载列表出现新的 .png 文件，文件名与图层名称或 Figma 的命名规则相对应。没有下载文件时，先查浏览器是否拦截了自动下载，再回到 Export 区域核对配置是否仍存在。

用文件属性完成结果验收

把文件保存到项目资源目录后，至少抽查文件名、扩展名、像素尺寸和透明区域。倍率不是装饰：一个 120 × 40 的图层按 2x 导出后，预期尺寸应接近 240 × 80；圆角和文字边缘则应在放大查看时保持完整。

两个常见误区的处理方式

如果导出结果是整张设计稿，先回到画布按 Esc 取消全选，再从 Layers 点击具体图层。Figma 官方也支持在什么都未选中时导出当前页面，这个能力适合整页，不适合交付单个按钮。

如果 PNG 四周出现不希望的底色，检查目标 Frame 的 Fill 和 Show in exports。如果资源本来就需要白色底，不要为了“透明”而盲目取消填充；最终应以接收方的素材规范为准。

相关问题

为什么右侧看不到 Export？

先确认已选中图层，再检查当前是否在 Properties 标签；如果仍没有，可能是文件所有者限制了查看者的复制或导出权限。

PNG 和 SVG 应该怎么选？

需要透明像素、固定栅格尺寸或直接用于网页图片时选 PNG；需要继续保持矢量编辑能力时再考虑 SVG，不能只按文件更小来决定。

2x 导出后怎样确认倍率生效？

用图片属性查看像素尺寸，并与图层在 Figma 中的宽高相乘核对。下载提示只证明发生了下载，不证明选中的图层和倍率正确。

最后确认

这项操作可以固定成四步：选中目标图层，定位右侧 Export，新增配置并选择 PNG，点击 Export 后核对文件属性。遇到整页、格式不对或背景异常时，优先回看“选中了什么”和“Show in exports”这两个状态。