Figma创建sticky效果 figma是一个设计工具,可以进行原型设计或者动效展示。 今天我们尝试使用figma来创建sticky效果,即随着鼠标滚动隐藏某些组件。 准备原型 我使用之前为了尝试用的模版进行后续创建。称为原型1。 全选当前frame的所有组件,进行复制,复制后把需要隐藏的部分选择为透明显示。 完成后复制页面展示效果: 之后为了展示固定部分的页面效果需要选取固定的组件group,并进行fixed: 我们把固定的组件挪到页面的顶端,实现顶端固定显示的效果。称为原型2。 动作设置 这样我们文件素材就准备好了,开始进行prototype的配置。 为了能够模拟实际的展示效果,我们需要设计我们的动作的触发器;可以看出sticky效果实际是滚动后消失部分组件;所以我们选择使用mouse enter[^1]的触发器来实现效果。 首先选择我们鼠标需要进入的区域,进去该区域后就会就行组件的消失效果,从鼠标滚动后变化的位置开始选择后面的组件,进行group, 进行原型设计,选择透明后的组件,使用mouse enter触发器。 然后为了能够模拟实际场景,鼠标上滑应该显示之前消失的组件,所以我们按照之前的设计,反向操作一遍。在原型2中选择除了消失组件和之前group的组件外的其他组件,group, 使用mouse enter触发器,返回原型1。 最后我们使用figma的present进行查看。可以看到顶部图片banner消失并置顶固定了一行tab。 [^1]: Mouse Enter 这允许在鼠标移入热点区域时显示目标框架,这类似于 While Hovering Trigger 的工作方式; 但与 While Hovering Trigger 不同的是当用户将鼠标移动到热点之外时,用户不会自动返回到原始框架。 这对关闭按钮很有用。