Figma的页面滚动设置

进入Figma的预览模式时,如果设置了预览的设备类型,那么预览时就会应用该设备的外观,将画布内容置入到设备屏幕中。

在Prototype原型编辑模式下,点击空白位置,则右侧的属性面板会切换成预览效果的设置,包括设备类型、设备外观色、展示方向、背景色、预览效果等。

而在实际设计过程,页面内容的宽度、高度往往会较长,超出预览设备的屏幕显示范围,于是就需要通过滚动手势进行画布内容的平移,查看被隐藏的部分。

如果选中演示画板Frame,则属性设置中会有一个 Scroll Behavior的属性栏,Overflow设置可以选择在预览模式中的滚动方向,包括:
- No scrolling:不做滚
- Horizontal:水平滚动
- Vertical:垂直滚动
- Both direction:自由滚动

需要注意,如果是整个页面的画板 Frame超出预览的设备的显示区域,那么它即使没有添加滚动设置,也能进行滚动。而这个设置更多是应用在画板内的其它下级 Frame中,比如需要横向平移的组件,我们就可以为它添加 Horizontal水平滚动。(请注意图中 Frame 和内容的尺寸和裁切关系,Frame 的左右边界即卡片滚动的左右边界)


也就是说,一个页面的预览会包含整个页面的垂直滚动(通常不会水平),然后根据下级组件的显示需要,再额外添加水平和垂直滚动方式,实现页面内容的基础交互需要。
除了滚动设置外,下级Frame选中后属性面板还有个 Position位置设置选项,包含:
- Scroll with patent:随父级画布一起平移
- Fixed:呆在固定的位置
- Sticky:在到达顶部后滞留
第一个默认选项不需要介绍,Fixed 设置用于需要固定在画面中的元素,比如页面的底部导航,它不需要随着页面滚动而被划走,所以可以为它添加 Fixed设置。而这个效果会和页面的响应式设置相结合,如果需要底部导航固定在预览窗口的底部,就需要为它添加底部的吸附。

添加Fixed 以后,则页面图层列表会增加 Fixed和Scrolls两个分类,所有添加Fixed设置的图层会被置入到该分类中,且它们处于 Scrolls图层的上方无法变更。只有移除 Fixed选项才能恢复默认的图层列表样式。

Sticky 则是一个比较特殊的设置,它指的是在元素随页面滚动时,到达顶部边缘以后就停下来产生顶部吸附的效果,相对使用场景较少。

