Figma中可通过三种方式实现基于显著性的智能图片裁剪:一、使用Figma AI Saliency Cropper插件自动分析热区并生成推荐裁剪框;二、调用第三方Saliency API获取坐标后在Figma中手动对齐裁剪;三、利用Figma AI配合精准提示词引导人脸等主体居中。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
如果您在figma中处理设计稿时发现图片裁剪依赖手动调整、难以精准聚焦主体,可能是由于缺乏对图像视觉重心的自动识别能力。figma原生暂不内置saliency检测功能,但可通过集成ai工具链实现基于显著性(saliency)的智能裁剪。以下是实现该目标的具体路径:一、使用Figma插件Figma AI Saliency Cropper
该插件通过调用轻量级显著性模型,在本地或边缘节点分析图像热区,定位人眼最易关注的视觉中心,并生成建议裁剪框。所有计算不上传原始图像,保障设计资产隐私。
1、在Figma桌面端打开设计文件,点击右上角“Plugins”按钮,选择“Search plugins”。
2、输入关键词Figma AI Saliency Cropper,安装并启用插件。
3、选中画布中的图片图层,右键选择“Run plugin > Figma AI Saliency Cropper”。
4、插件自动分析后,会在图片上叠加半透明红色热力图,并生成一个居中于最高显著性区域的80%宽高比推荐裁剪框。
5、点击“Apply Crop”将裁剪框转为蒙版,或拖动调整锚点微调范围。
二、借助第三方API构建自定义裁剪工作流
当需适配特定业务场景(如电商主图强制1:1、Banner图保留顶部信息),可绕过插件限制,利用公开Saliency API返回坐标后在Figma中手动对齐。此方式支持批量处理多张图片并保持策略一致性。
1、访问支持Saliency Map输出的API服务(如SaliencyAPI.dev或DeepAI Saliency Endpoint),获取Bearer Token。
2、使用Python脚本批量上传图片,请求返回JSON格式的显著性中心坐标(x, y)与建议ROI宽高。
3、将坐标值换算为Figma画布像素单位(需同步DPI与缩放比例),在Figma中创建矩形图层并定位至对应位置。
4、选中图片与矩形图层,执行“Boolean operation > Intersect”,完成精确裁剪。
三、利用Figma AI + Prompt Engineering模拟显著性引导
虽无原生Saliency模块,但Figma AI的“Make Designs”与“Edit Image”能力可被提示词定向激发。通过构造含视觉权重描述的指令,间接驱动AI优先保留高注意力区域。
1、右键点击图片图层,选择“Edit with Figma AI”。
2、在提示框中输入:"Crop this image to focus tightly on the person's face and eyes, removing background clutter while preserving natural framing"。
3、勾选“Preserve aspect ratio”后点击Generate,AI将输出一张以人脸为中心的裁剪结果图。
4、将生成图拖入画布,替换原图图层,并检查关键特征是否位于画布黄金分割点附近以验证视觉重心对齐效果。


















