Hal Lee

2020年12月12日发布

Figma 原型支持锚点啦,快用它来做个个人网站

滚动到
锚点
超能铜草帽

https://www.figma.com/community/file/918189250907220365

最近 Figma 原型功能增加了「滚动到」特性,也就是前端常说的锚点,请看视频:

锚点跳转很容易设置,只需要将元素连接到同一个顶级 Frame (画板)下的另一个元素即可,可以设置纵向也可以设置横向滚动,不过横向滚动记得先设置容器为横向可滚动且裁切内部元素(clip content)。

Scroll To Prototype

除此之外,你还可以设置滚动的动画曲线,以及偏移。所谓偏移,比如下图中的顶栏是滚动时固定不动的(fixed),如果不设置偏移,黄色区域滚动到顶部之后会被顶栏盖住,此时设置偏移为 -120(顶栏高度是 120px),那么滚动到顶部时就不会被盖住了。

ScrollPrototype.png

这个新特性让我们用 Figma 做个人网站变得方便起来,配合 Smart Animate 你完全可以用 Figma 做一个很酷的个人网站。关于使用 Figma 做个人网站可以参考这篇文章:当设计师把作品集造到了Figma里...

更加详细的信息请观看草帽的视频,以及官方教程文件。