Figma 样机 Mockup 制作指南：平面贴屏、透视角度到 3D 设备分别用什么

做完界面要放进作品集、官网配图或者给客户提案时，几乎都会遇到同一个问题：Figma 里怎么把设计稿放进手机、电脑样机（Mockup）里？

答案取决于你要的效果。只是演示可点的原型，Figma 自带的设备框就够了；要一张正面的展示图，用图片填充加蒙版自己拼也很快；要斜角透视或者 3D 设备，才轮到插件。下面按这三档说清楚。

先看 Figma 自带能做到什么

1. 用 Frame 预设把画板尺寸对上设备

样机能不能贴准，第一步是画板尺寸和设备一致。按 F（或 A）启用 Frame 工具后，右侧栏会出现 Frame 预设列表，有 Phone、Tablet、Desktop、Watch 等分组；已经画好的 Frame 也可以选中后在右侧 Frame 下拉里换成别的预设。（来源：Figma 帮助：Frames in Figma Design）

这一步不是可有可无。后面很多样机插件都按 Frame 的尺寸去匹配设备，尺寸不对，贴出来就会被拉伸或留黑边。

2. 原型演示：Prototype 设置里直接选设备

如果你只是想让评审或客户「在手机壳里点原型」，不需要任何插件：

1. 点画布空白处，取消所有选择；
2. 切到右侧栏的 Prototype 标签；
3. 在 Device 里选设备类型、方向（Portrait / Landscape）和 Model（比如同一款 iPhone 的不同配色）；
4. 在 Background 里设置演示背景色。

如果你的画板本来就是用 Frame 预设建的，Figma 会自动选上匹配的设备。之后在演示模式（Present）或画布内预览里播放，就会看到设备外壳；演示模式的选项里还能用 Show device frame 开关外壳。（来源：Figma 帮助：Set prototype device and background settings、Play your prototypes）

边界： 这个设备框只出现在原型播放时，不会变成画布上的图层，所以不能直接导出成一张样机图。另外官方说明一个原型里不能中途切换横竖屏。

3. 平面样机：图片填充 + 裁切 + 蒙版自己拼

要一张正面、不带透视的展示图，用自带能力就能做：

• 把设计稿当图片填进屏幕区域。 在 Figma 里图片本质是「填充」，任何形状都能用图片填充；选中图层后点 Fill 色块，选 Image 上传即可，Fill 模式选 Fill 或 Crop 控制显示范围。（来源：Add images and videos to designs、Adjust the properties of an image）
• 换图不丢裁切。 官方说明替换图片填充时会保留已设好的 Fill 模式、裁切和位置，所以一套样机模板可以反复换截图。
• 圆角屏幕。 直接给屏幕矩形加圆角，或者用蒙版（Mask）把内容裁进屏幕形状；官方 Crop an image 也提到可以用圆角、图层填充或蒙版做出非矩形裁切。

更省事的做法是：直接用 Frame 嵌套，把设计稿 Frame 放进一个「屏幕」Frame 里并打开 Clip Content，外面再叠一张设备外壳 PNG。这样设计稿还是可编辑的矢量，不用每次导出截图。

自带做不到的： Figma 没有原生的四点透视变形，也没有 3D 设备渲染。想要斜着放的手机、电脑，或者带阴影反光的 3D 机身，就得用插件。

觅件库里的样机插件：11 款，按用途分

数据来自觅件插件库：「样机」分类目前收录 11 款插件，其中库内标记免费 7 款、付费 4 款。下面按「要什么效果」分组，介绍都基于插件作者的说明。

只想快速套一个设备边框

• Quick Mockups丨模型（免费）：选中 Frame 一键套进 iPhone、Android、MacBook、iPad、Apple Watch 或浏览器窗口。作者特别说明 Frame 尺寸要和目标设备一致才准，所以先做好上面的第 1 步。
• Bezel丨样机（免费）：给任意 Frame 加可自定义的设备边框，能改边框颜色（支持 HEX），可选带不带侧边按键。
• A Little Bit Mockup丨模型（免费）：主打轻量，只做 iPhone 边框，有 Light / Dark 两种；会根据 Frame 宽度自动匹配 iPhone 13 到 14 Pro Max 等机型，匹配不到就新建设备框。适合 iPhone 稿快速出图，其他设备不覆盖。

要斜角、透视、贴在真实照片里

• Angle Mockups丨角度模型（免费，作者说明无需注册）：用钢笔画一个四点的 Screen 区域，插件把设计贴进去，适合手机、电脑的透视展示。更多素材在 Angle 自己的 1000+ 矢量样机库里。
• Easy Mockup丨模型（免费）：任意设备照片都能当底图，用钢笔画出屏幕区域，选已有 Frame、图片或上传新图，一键 Transform 贴合。适合手里已经有一张设备实拍图的情况。
• Mockup Plugin丨样机插件（付费）：ls.graphics 出品，3800+ 样机，覆盖设备和海报、名片、包装、服饰；支持四点透视，也支持 Warp 变形贴到布料、曲面屏、杯子等表面。作者说明里有免费样机可用于个人和商业项目，完整库以安装时提示为准。

要 3D 设备或大型场景库

• Mockup3D丨样机（免费）：把设计贴到设备模型上，有 Texture（替换模型贴图）和 Sticker（把 Logo、图标贴到表面）两种模式。
• MockRocket – 3D Mockups丨3D 模型（付费）：iPhone、MacBook、iMac 等 3D 模型可自由拖动旋转，能调阴影、反射、颜色、Clay Mode 和透明背景，按 1x–4x 导回 Figma。作者说明免费最多导出 10 个，之后需要购买授权。
• Rotato 3D Mockups + Explosions丨3D：4K 写实 3D 设备、动画视频导出、图层「爆炸」展开效果。注意作者说明这个插件主要面向 macOS，需要配合 Rotato for Mac 使用；库里标的是免费，但实际能用到什么程度以安装时提示为准。Windows 用户可以直接跳过。
• Mockuuups Studio｜样机（付费）：5100+ 设备和场景，选中 Frame 自动放入；免费版可用精选免费集合，Premium 才是无限导出和商业授权，另有测试中的印刷类样机。
• Artboard Mockups丨画板模型（付费）：接入 Artboard Studio 的素材库，设备、包装、服饰、印刷品都有，还支持视频样机，可以用来展示 Figma 做的动效。

怎么选：按场景直接对号入座

你要的效果 先试 备注 给评审点原型时有手机壳 Prototype 设置里的 Device 不用插件，只在播放时显示 正面平面展示图 图片填充 + Clip Content + 外壳图 设计稿可保持矢量可编辑 iPhone 稿快速加边框 A Little Bit Mockup、Bezel 先用 Frame 预设对齐尺寸 多种设备一键套 Quick Mockups Frame 尺寸要和设备一致 斜角透视、贴实拍照片 Angle Mockups、Easy Mockup 都是钢笔画四点屏幕区域 3D 机身、可旋转 Mockup3D、MockRocket MockRocket 免费 10 次导出 作品集大批场景图 Mockuuups Studio、Mockup Plugin、Artboard Mockups 完整库需付费，商用看授权

有两个容易踩的坑值得再提一次：

1. 商用授权。 付费样机库的免费部分和完整库授权范围不同，给客户交付或做官网配图前，确认一下当前方案是否允许商业使用。
2. 尺寸先对齐。 绝大多数「贴歪、留黑边」的问题，根源都是 Frame 尺寸和设备屏幕不一致。

用中文更快找到合适的样机插件

上面这些插件都能在觅件里按「样机」分类直接看到中文介绍、是否付费和适用场景，不用再拿英文关键词在社区里一个个试。如果你在 Cursor、Claude、ChatGPT 等 AI 工具里工作，也可以接入觅件 MCP，直接用中文问「有没有能做透视样机的 Figma 插件」。