品牌型号：联想GeekPro 2020

系统：Windows 10 64位专业版

软件版本：Figma入门版

Figma是一款可基于浏览器使用的矢量设计软件，可满足设计师们随时随地工作的需求。Figma提供了友好的操作界面，包含了图层、编辑画板、设计面板、原型等功能，其中编辑画板可根据需求扩张，并实现上下左右滑动。接下来，一起来看看Figma怎么左右滑动，Figma怎么做滚动页面的相关内容。

一、Figma怎么左右滑动

Figma编辑面板的左右滑动可通过鼠标的拖动实现。

如动图1所示，按住鼠标，并将鼠标左右拖动到画板显示范围以外，即可实现左右滑动的效果。在拖动鼠标过程中，Figma底部同时会出现一个滑动条，后续可通过滑动条进行左右滑动。需要注意的是，一段时间后，滑动条会自动消失，再次重复以上操作可再次显示滑动条。

如需上下滑动Figma的编辑画板，只需使用鼠标的滚轴上下滑动即可，此时Figma右侧也会出现一个纵向的滑动条。

二、Figma怎么做滚动页面

滚动页面效果常用于页面长于屏幕的情况，大部分app都会有滚动页面的设置。接下来，一起来学习下Figma怎么做滚动页面。

1、准备一个需要滚动的页面。为了让页面滚动起来，需要先准备一个长度比屏幕长的页面素材。如果素材长度刚好与屏幕一致，则无法实现滚动效果。

2、完成素材的准备后，设置预览设置。如图4所示，在Figma右侧的功能面板切换原型选项卡，该功能可以设置页面预览的设备型号。

比如图5所示，将预览机型设置为iPhone16，其预览方式设置为竖屏，即可在预览时以iPhone16作为设备浏览操作。

3、接下来，我们需要通过Figma的交互设计功能实现滚动效果。为了让整个页面都滚动起来，需要将整个页面作为整体进行操作。

如图6所示，在Figma左侧图层功能中，点击选择画框图层。该画框图层包含了整个页面元素的图层内容。

选择画框图层后，如图7所示，Figma右侧的原型功能面板会出现交互、滚动行为、溢出等功能选项。展开溢出的选项菜单，选择“垂直”功能，即让页面溢出时实现垂直滚动的效果。

4、设置了溢出页面的滚动效果后，需要对特定元素进行固定设置。比如图8所示的时间、信号、电量等页面元素，在滚动页面时会固定在顶端，需要另外设置不滚动的效果。

我们先在Figma左侧的图层面板中选择需要固定元素，本例是状态栏相关的元素。

然后，如图9所示，在Figma右侧的原型功能面板中，将所选元素的滚动行为设置为“固定（保持位置）”，即可将状态栏相关元素固定在原位，即顶端位置。

完成以上原型与交互动作设置后，点击原型面板右上角的“播放”按钮，可预览动作的设计效果。

点击播放按钮后，Figma会自动打开一个新的窗口，并加载以上设计效果。打开页面后，我们只需使用鼠标的滚轴进行滚动，即可浏览页面的滚动效果。

三、小结

以上就是关于Figma怎么左右滑动，Figma怎么做滚动页面的相关内容。我们可以通过Figma的原型设计功能，进行交互动作、滚动行为、溢出页面等功能的设计，以实现不同的程序应用效果。如果要左右滑动Figma的编辑面板，可将鼠标拖动到编辑面板显示范围以外来实现左右滑动，同时该操作也能带出底部的滑动条。

作者：泽洋