Figma教程16-Section原型制作demo

标记狮私有云部署
一键部署标记狮至私有服务器,构建快速,安全,高效,私密的UI设计团队云协作

本期教程主要讲解Figma的新功能Section分区在原型制作中的作用

Section分区在原型制作中的作用主要有亮点:


  1. 可将按钮链接一整个分区的页面

  2. 切换Section时会记录住上一次停留的界面。


具体我们结合下面的demo来理解一下:


制作分区

首先我们使用分区工具将准备好的素材添加两个分区:一个为首页,一个为消息

462DEB778439C8808598516A7192065A.png

然后制作好两个菜单栏的按钮组件一个为首页一个为消息,每个按钮需有两个样式状态。

11B40FE46CFB24D3A7A194DF76E9C0B1.png

添加原型

给菜单按钮添加原型链接,添加单击导航至各自的Section

007AD4A45C70100350142B60961965BF.png

9861E740BE8D88C13FC1C42EBD0A6CFB.png


给首页分区内的三个页面分别添加单击链接,让三个页面能在顶部菜单点击时切换。

946086BF13E6E02DAC4A62530C8A9C45.png

E66595D2F2BF44DCDDE2644AB9B242A6.png

以上原型链接好后,这个demo就制作好了。


演示


切换至首页可以顺次点击顶部三个菜单页面切换。

然后点击底部切换至消息,再切换至首页,可以看到首页停留在我们上一次最后点击的页面。

这就是Section在原型中的作用,可以更加真实地模拟原型的交互动作,以及减少一些重复的链接动作。



点击上方前往查看→查看视频教程

源文件地址:

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

标记狮私有云部署
一键部署标记狮至私有服务器,构建快速、安全、高效、私密的UI设计团队云协作
立即部署>>
标记狮私有云部署-一键部署标记狮至私有服务器,构建快速,安全,高效,私密的UI设计团队云协作