---
title: "Figma 样机 Mockup 制作指南：平面贴屏、透视角度到 3D 设备分别用什么"
excerpt: "Figma 怎么把设计稿放进手机、电脑样机？先用自带的 Frame 预设、原型设备框和图片填充做平面样机，再按透视、3D、大型场景库挑插件。觅件库样机分类 11 款插件逐一说明适用场景、免费与付费边界。"
canonical: https://plugmate.figmod.top/blog/figma-mockup
---

# 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](https://help.figma.com/hc/en-us/articles/360041539473-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](https://help.figma.com/hc/en-us/articles/21158597546391-Set-prototype-device-and-background-settings)、[Play your prototypes](https://help.figma.com/hc/en-us/articles/360040318013-Play-your-prototypes)）

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

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

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

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

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

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

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

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

### 只想快速套一个设备边框

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

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

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

### 要 3D 设备或大型场景库

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

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

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