做设计这些年我见过最多的一个操作就是设计师把移动端设计稿做完之后直接截图丢给开发然后开发在旁边猜半天“这里到底能不能滚动”“这块要不要固定住”。Figma的移动端预览能力其实一直在更新但很多人还停留在“点一下右上角Play”这个层面根本没有把预览和滚动交互这两个环节真正打通。这一篇我不讲那些官方文档里已经写烂的入门教程就结合我自己跑过的一些实际项目讲清楚Figma里怎么实现移动端预览以及溢出滚动到底怎么配置才能让预览效果尽可能接近真实App。1. 先想明白移动端预览到底在解决什么问题1.1 静态画板与真实交互之间的落差很多团队的工作流还是“设计稿交付一张长截图”。设计稿里明明画了一个列表内容超出屏幕开发拿到手之后第一反应是这个列表要不要滚动滚动到哪一行停顶部导航栏是不是一直悬浮这些问题如果没在预览里说清楚开发就得来回找你对需求。Figma的移动端预览本质上是要把“静态视觉稿”变成“可操作的交互Demo”。它能让你在手机上用真实手势去滑动、点按、查看反馈而不是对着电脑屏幕想象“这里应该能滚”。尤其是当你给客户或者给产品经理演示的时候一个能在手机上滑动的原型比十页说明文档都管用——对方不需要理解什么是Frame、什么是交互连线他只需要像用真实App一样去滑就能立刻知道你要什么。1.2 适合谁看、解决谁的痛点做移动端预览这件事涉及的并不只是设计师一个人。如果你是设计师预览能帮你自查字号在手机上合不合适、底部安全区有没有被遮挡、列表滚动时状态栏怎么处理。这个环节我建议放在每次交付前做一遍。如果你是产品经理或交互设计师用真机预览原型去和业务方确认方案比开会摆画板效率高得多对方可以直接在手机上体验操作路径。如果你是前端开发Figma的预览和开发者模式配合使用能直接拿到滚动容器、固定定位等关键信息不用再靠猜。文中提到的滚动交互设置对应的就是CSS里的overflow: scroll和position: fixed这个对应关系理解了之后Figma对你来说就是一个“可视化原型标注工具”。2. Frame才是起点尺寸、机型与裁切设置2.1 Frame不能随便画尺寸选错后面全是坑做移动端预览最基础也最容易被忽略的是Frame的尺寸。很多新手习惯用快捷键F拖一个画板就开始画画完之后发现预览到手机上比例不对、字太小、布局挤压根本原因往往是Frame尺寸没按真实机型来。Figma里新建Frame的时候右侧Design面板有一排预设尺寸iPhone系列、Android系列、iPad系列都在里面。我这里直接给一个主流基准参考iPhone 12到iPhone 15 Pro的逻辑宽度是390到393ptiPhone 14 Pro Max这种大屏是430ptAndroid机型一般按360dp为基准做设计。团队如果没有特殊规范我建议统一以390pt宽度为基准做移动端设计兼顾大多数机型。关键点是Frame的宽度要对应逻辑分辨率不是物理像素。iPhone 15 Pro的物理分辨率是1179×2556像素但Figma里对应的Frame尺寸是393×852因为Figma用的是pt单位。这个搞反了预览出来的元素会巨大无比。2.2 Clip content控制溢出内容的显示边界理解了Frame尺寸之后接着要理解Frame的“容器”属性。Frame像是一个有边界的容器子元素放进去之后默认情况下子元素超出Frame外框的部分是“露在外面”的——这在设计画布上看不出来有什么问题但一旦进入预览模式露出来的内容就会穿帮。解决办法是给Frame开启Clip content。操作很简单选中Frame在右侧Design面板找到Clip content的开关打开即可。打开之后超出Frame边界的部分会被裁掉和在手机上屏幕边界的效果是一致的。这个开关和后面要讲的滚动是强关联的。滚动的前提是“有内容被裁掉了”如果Clip content没打开内容溢出后直接显示在Frame外面你设置滚动行为也不会生效。所以我的习惯是建立移动端Frame之后的第一件事就是把Clip content打开然后再往里放内容。2.3 机型切换一套设计稿预览多款设备Figma现在支持在预览的时候临时切换设备机型不需要把同一个页面复制出好几个不同尺寸的Frame。在右上角进入演示模式后Preview设置里可以直接换设备外壳和比例iPhone、Android机壳都能选。这里有个实操技巧如果团队内部有“兼容多尺寸”的要求不要真的做375、390、430三套完整设计稿维护成本太高。正确做法是保持主稿用基准宽度比如390其他尺寸用预览时的设备切换功能临时看效果。遇到极端机型的时候单独做一个局部Frame验证一下布局就行。这样既能满足演示需要又不至于把自己累死在维护画板的路上。3. 三种主流预览方式按场景选就行3.1 手机App预览最接近真机效果的自查方式Figma官方有移动端App以前叫Figma Mirror现在功能已经合并到Figma APP里了。在手机上装好App之后登录同一个账号打开设计文件就能直接在手机上看设计稿。这种方式最适合设计师自己自查和团队内部互评因为需要登录同一个Figma账号给客户看不太现实总不能把账号密码都交出去。不过它有一个不可替代的优势App预览的渲染和字体加载是最接近真实渲染效果的能看到很多电脑端预览看不出来的细节。用App预览的操作流程是电脑端Figma里先打开设计文件手机上打开Figma App找到同一个文件并打开。如果文件比较多建议在Figma里创建一个专门用于预览的文件把需要演示的页面都放在里面方便查找。3.2 浏览器原型链接跨端跨网络的分享利器如果要给客户、给开发发预览浏览器链接是最方便的。在Figma右上角点击Share设置好访问权限Anyone with the link选Can view复制链接发出去就行。对方不需要注册Figma账号直接用手机浏览器打开链接就能看原型交互。这里要提醒一个细节分享出去的链接对方打开后默认是“文件浏览”模式而不是“幻灯片放映”模式如果只发链接不给任何说明对方可能不知道交互在哪里看。我的做法是在链接后面加一个简短的提示或者直接在Figma的Share设置里生成一个“演示模式链接”。演示模式链接打开后直接进入可交互的预览状态不用再多点一步。另外Figma原型链接在手机浏览器上打开支持触摸滑动操作这在给客户演示的时候非常有用。客户不需要理解原型工具直接把手机递过去他像平时玩App一样滑一滑就懂了。3.3 开发者模式与团队协作场景开发拿设计稿的时候用浏览器预览链接最大的问题是看不到尺寸、间距、样式参数。这个问题用Dev Mode解决在Figma页面里切到开发者模式点击任意元素右侧会直接显示对应的CSS属性、尺寸、圆角、字体信息。不过Dev Mode和交互预览是两回事。推荐工作流是开发先用浏览器链接过一遍交互逻辑确认滚动、跳转、弹层这些行为都符合预期然后再打开Dev Mode看具体标注。先看行为再看样式顺序别反。我实际踩过的坑是开发只看Dev Mode里的静态样式不看预览结果做了一个页面内容超出屏幕之后没有滚动硬生生把长列表截断了。后来我要求所有移动端页面交付时必须附带一个浏览器预览链接并在设计说明里标注“哪些容器有滚动”这个问题才没有再犯。4. 溢出滚动让内容在预览时真正“滑”起来4.1 滚动交互的前提条件在Figma里实现溢出滚动需要同时满足几个条件缺一个滚不起来。第一存在溢出内容。换句话说容器内的内容高度或宽度必须大于容器本身的尺寸。你不可能让一段只有三行文字的列表在屏幕里滚动内容都没有滚什么呢想测滚动效果就得把内容拉到超出Frame边界的高度。第二开启Clip content。前面说过这个开关确保溢出内容被“藏起来”模拟真实屏幕的边界。第三在Prototype面板里给Frame设置滚动方向。选中Frame切到Prototype面板底部有一个Overflow behavior的选项里面可以选None、Vertical scroll、Horizontal scroll、Both scroll。三个条件齐了进入演示模式纵向滑动鼠标滚轮或者手机触摸屏内容才会跟着滚。4.2 设置滚动方向的详细步骤我以一个常见的“商品列表页”为例完整操作一遍第一步新建Frame选择iPhone预设宽度390高度844。打开Clip content。第二步在Frame里面放一个组或者子Frame命名为“列表容器”把商品卡片一个个放进去总高度拉长到比如1600。第三步选中最外层的Frame切到Prototype面板找到Overflow behavior选择Vertical scroll。第四步点右上角播放按钮用鼠标滚轮测试列表会上下滑动。这里有一个容易忽略的操作如果你在第二步用的是“组Group”滚动设置有可能不生效。原因在于Group不是真正的容器它的子元素坐标是相对整个页面的设置滚动行为时Figma对Group的处理没有Frame那么直观。我的建议是凡是要滚动的容器一律用Frame不要用Group。这是我在Figma社区里看到讨论最多、也最容易踩的一个坑。4.3 固定元素让导航栏停留在屏幕顶部真实App里页面上滑的时候顶部导航栏往往是固定不动的。Figma里怎么实现选中导航栏所在的图层在Prototype面板的Overflow behavior里选择Fixed。这样设置之后外层Frame滚动时这个导航栏会一直钉在屏幕顶部不跟着内容滚走。它对应到开发语言里就是position: fixed或者position: sticky前端看到这个设置就明白要怎么做了。这里要特别留意一个顺序问题先选中外层Frame设置滚动方向再选中子元素设置Fixed。如果顺序反了或者你选错了图层Fixed的效果是不会出现的。我在早期项目里就遇到过导航栏设置Fixed之后完全没反应的问题检查了半天才发现是把Fixed设在了外层Frame上——外层Frame本身都在滚动它的Fixed当然没有意义就像你不能让一块木板钉在一条流动的河上一样。底部Tab栏也是同样的道理做成Fixed之后列表滚动时底部导航栏保持不动观感上和真实App一模一样。4.4 嵌套滚动横向Tab加纵向列表的典型场景实际项目中很多页面并不是单一方向的滚动而是嵌套的。比如一个商品详情页顶部是一个横向滑动的Tab栏下面是商品列表纵向滚动。这在Figma里怎么做正确做法是外层Frame设置Vertical scroll内部那些横向滚动的区域单独建一个子Frame将子Frame的宽度设成外层宽度然后内部放一排横向排列的内容内容总宽度超出子Frame宽度再对该子Frame设置Horizontal scroll。这里有一个要点横向区域必须是独立的子Frame不能直接把一堆横向排列的元素堆在外层Frame里。原因在于外层的纵向滚动是一个全局行为而横向滚动必须限定在局部区域Figma处理不了“同一层级里既有纵向又有横向”这种复杂的布局逻辑。把横向区域封装成子Frame等于明确告诉Figma“这个区域内自己管自己”。嵌套滚动在预览时的手感已经和真实App非常接近了我在项目里用这种方式给开发演示过几次对方看完就知道内层需要独立滚动容器很少再来追问。4.5 大长图的预览替代方案有时候会遇到一个特殊情况设计稿内容特别长比如一张严格的纵向时间轴高度可能到3000、5000。这种超长画板在手机上预览Figma的滚动性能会明显下降手指滑动时会有卡顿感而且体验和真实App差距很大。我的建议是不要试图做一个5000px高的Frame去模拟真实体验。要么把内容拆成多个页面用交互跳转来替代连续滚动要么只展示首屏内容并在旁边注释“此处实际可滚动”。这两种方式都能让演示更聚焦也避免在客户面前出现滚动卡顿的尴尬。真要做非常逼真的长列表滚动演示Figma原型毕竟不是最终产品它可以验证逻辑替代不了性能优化。5. 预览踩坑实录几个高频问题的排查思路5.1 常见问题速查表下面这个表格是我这几年做Figma移动端预览和滚动配置时遇到的最高频问题和对应解法直接照着排查就行。问题现象根本原因解决方法预览时内容直接显示在外面没有裁切Frame的Clip content没打开打开Clip content开关内容确实被裁切了但无论如何都滚不动没有设置滚动方向选中Frame在Prototype里设置Vertical/Horizontal scroll滚动时导航栏跟着内容一起跑未将导航栏设为Fixed选中导航栏在Prototype里设置Fixed横向滚动区域设置后不生效横向内容没有放进独立子Frame把横向区域封装为子Frame再对该子Frame设置滚动真机App预览字体和电脑端不一样手机端字体没有同步/缺失检查字体授权换用Figma内置字体测试手机浏览器打开预览白屏网络问题或共享权限未设置检查链接权限换成浏览器再访问单元格内容被挤压变型使用了Group导致布局约束失效改用Frame并设置好Auto Layout5.2 演示前的必要自查在把预览链接发给客户之前我建议至少花五分钟做一轮自查别等对方点开发现问题再补救。第一用手机真机打开一遍预览实际滑动一下所有可滚动区域确认每一处滚动都顺手。电脑端鼠标滚轮和手机触摸手势的手感差别很大手机上觉得不流畅的地方你用手一定能试出来。第二确认所有Fixed元素都生效。滚动时固定元素如果跑位了客户可能说不清哪里不对但会下意识觉得“这个原型做得不行”。第三检查一遍链接权限。只要你的链接权限是“Anyone with the link can view”就一定要在发送前用浏览器的无痕模式打开链接测一次确认没有登录墙。这个操作非常重要好几次我都以为自己发的链接别人能打开结果客户那边一打开就要求登录用来回浪费了一个下午。5.3 别忽视的Figma插件与资源协作最近Figma生态里多了很多与AI协作相关的玩法像Figma MCPModel Context Protocol这类工具可以让AI辅助读取设计稿内容。不过这些工具目前更多还是辅助开发写代码或者辅助设计师做标注整理。对于“移动端预览和滚动交互”这个核心场景还是先把Figma本身的原型能力吃透比较重要不要一上来就依赖插件基础操作不熟练插件也救不了场。另外补充一点Figma汉化问题在中文团队里讨论度一直很高。如果你用的是客户端版官方其实已经内置了部分中文界面支持不需要额外找汉化工具。如果偶尔遇到界面还是英文大多是版本更新滞后导致的更新到最新版本之后基本能解决。预览和滚动交互相关的功能名称中英文对照掌握起来也很方便Overflow behavior就是“溢出行为”Scroll就是“滚动”Fixed就是“固定”。6. 一些体验层面的心得刷到这篇文章的读者估计都是被“为什么预览没有滚动效果”折磨过的人。说句实在话Figma的滚动交互和真实浏览器、真实App里的滚动在体验上永远有细微差距。真实App有惯性滑动、有回弹效果、有滚动条宽度的视觉差异这些Figma原型里都做不到。但如果只是用来确认“内容结构是什么样的、固定的区域怎么处理、哪些容器可以滚”Figma的设置已经够用了。我做团队规范的经验是在项目交付规范里固定好基准机型、滚动规则和标注规范哪怕是刚入职的新人也能照着规范做出可滚动的移动端原型。滚动这个能力一旦吃透了其实也就那么回事——记住“溢出内容裁剪滚动行为”这组三角关系再记住“固定元素独立设置”基本上就能应付90%以上的移动端滚动场景。剩下的10%靠一次一次在手机上滑出来的手感慢慢补。