☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
需启用mockup ai引擎的智能光照解析功能:一、安装v4.8+插件并导入设备模板;二、将app界面frame粘贴至“ai screen target”区域;三、通过编辑设置调整光照强度与环境预设;四、导出时勾选包含阴影选项。
如果您在figma中已完成app界面设计,但希望快速将其嵌入真实手机模型并自动添加匹配阴影以增强视觉真实感,则可能是由于未启用mockup ai引擎的智能光照解析功能。以下是实现此效果的步骤:
一、启用Mockup AI引擎并导入设备模板
Mockup AI引擎可自动识别设计图层内容,并基于设备屏幕角度与环境光方向生成物理一致的阴影,避免手动调节X/Y/Blur参数失真。需确保使用支持AI渲染的最新版Mockup Plugin(v4.8+)。
1、点击Figma顶部菜单栏“Plugins” → “Search plugins”,输入“Mockup AI”并安装官方插件(开发者:Mockup Studio)。
2、安装后,在画布空白处右键 → 选择“Mockup AI → iPhone 15 Pro (Matte Black)”或其他目标设备模板。
3、插件将自动生成含设备外壳、屏幕区域及预设环境光参数的完整图层组,其中阴影图层默认置于屏幕下方且锁定为AI驱动模式。
二、将设计图粘贴至AI识别区域
AI引擎通过分析粘贴图层的明暗分布与边缘锐度,动态计算投影方向与衰减曲线,确保阴影长度、模糊梯度与设备倾斜角严格对应。
1、在您的设计文件中选中包含APP界面的Frame(必须为单一Frame,不可嵌套多层Group)。
2、按Ctrl+C(Windows)或Command+C(Mac)复制该Frame。
3、切换至Mockup AI生成的设备文件,展开图层列表,找到标有“AI Screen Target”的图层组,单击其内部空白区域后按Ctrl+V粘贴。
4、粘贴后AI引擎自动触发分析,约2秒内生成带透视偏移的阴影图层,图层名称显示为“Shadow_AI_01”。
三、调整AI阴影强度与环境光参数
引擎提供三档预设光照模型(Studio / Outdoor / Ambient),每档对应不同阴影对比度与扩散范围,无需手动修改Blur或Spread值即可整体调控。
1、在图层面板中右键点击“Shadow_AI_01”图层 → 选择“Edit AI Shadow Settings”。
2、弹出面板中拖动“Light Intensity”滑块:数值0.6对应柔和室内光,0.9对应强直射光,实时更新阴影边缘硬度与灰度深度。
3、下拉选择“Environment Preset”:切换为“Outdoor”时,阴影自动延长30%并增加轻微色偏(模拟天空光反射)。
4、勾选“Sync with Device Angle”后,旋转设备画框将同步改变阴影投射方向,保持物理一致性。
四、导出带阴影的高清模型图
AI引擎在导出阶段会合并阴影图层与设备纹理,生成抗锯齿优化的位图,避免传统截图导致的阴影边缘像素断裂。
1、确保“Shadow_AI_01”图层可见且未被其他图层遮挡。
2、选中整个设备画框(含外壳与屏幕区域),右键 → “Export selection”。
3、格式选择PNG @2x,勾选“Include shadows in export”选项。
4、点击“Export”后,生成的图像中阴影已与设备曲面自然融合,无须后期PS修图。











