Figma交互篇 | 如何做页面的滚动效果？
时间：2023-09-10 15:30:01 | 来源：网站运营
时间：2023-09-10 15:30:01 来源：网站运营
Figma交互篇 | 如何做页面的滚动效果？：话不多说，先来看看本文教学的最终效果：
在figma中，如何让页面滚动起来，做这个交互说简单不简单，说难也不难。
拿我自己来说，我就会经常忘记这个交互怎么做，今天分享这个既能强化自己的记忆，又能让看到这篇文章的你学会，简直就是一举两得之事！
为什么要做滚动的交互，那当然是为了客户爸爸更好的体验，你给一张张效果图还不如直接甩一个交互链接的体验来的爽。
就先拿最简单的PDF文件来讲，也不是说只有这一个滚动的场景，涉及到滚动的页面可多了。
比如微信聊天列表，是不是需要滚动；
比如看公众号文章，是不是也需要滚动；
比如浏览文件也有滚动的效果，只要有手机的都懂，不管是鼠标还是手机都需要滚动。
现在直接手把手教学，下面只是案例参考，可以复用于所有相同的滚动场景，首先做一个简单的页面：
基本的图层结构如下图
如下图，第 ② 步的意思是把 ① 固定在页面顶部，勾选 ③ “ Fix position when scrolling ” 的意思是 “ 当页面滚动时，这个Frame（顶部）固定在顶部不动 ” 。
如果不做上面这一步，顶部也会跟着一起滚动了，就像下面这种效果：
接着添加滚动交互，“ Vertical scrolling ” 是垂直滚动的意思，“ Horizontal scrolling ” 是水平滚动的意思。使用谷歌浏览器的同学，可以右键翻译中文。
然后我们点击右上角有一个播放的按钮看看效果：
大家有没有发现，页面还是滚动不了，这一步一定要铭记，不管Frame里面套了多少个小的Frame或者组。
我们一定要先把需要滚动的那个Frame（内容滚动），拖动到整个页面范围内，如下图：
再来看看效果，完美！
一个简单的滚动效果就完成了，垂直滚动跟水平滚动操作的逻辑是一样的，希望大家能够举一反三。
公众号：
会设计 平凡且普通的UI设计师，分享我的设计宝藏和小技巧！
公众号后台回复：【书】 免费领取 100+本，UI设计相关电子书！！
往期原创文章：
在线咨询
