Figma教程12-列表拖动删除交互左滑删除

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

Figma教程12-列表拖动删除交互

本教程主要是运用自动布局来实现效果

制作组件

1.选中素材添加自动布局

复制一份素材调整宽度

Figma教程12-列表拖动删除交互

2.再复制一份素材选择裁剪内容,先任意填写一个高度值,这是为了原型链接比较方便

Figma教程12-列表拖动删除交互

3.选中素材组添加组件集,并重命名

Figma教程12-列表拖动删除交互

制作原型

1.切换到原型面板添加交互

组件1与组件2互相添加拖动-智能动画-300ms

Figma教程12-列表拖动删除交互

2.选中组件2的橘色按钮添加交互至组件3

选择单击-智能动画-300ms

Figma教程12-列表拖动删除交互

3.原型制作好后切换为设计面板,将第3个组件的高度调整为0.1,透明度为0

Figma教程12-列表拖动删除交互

制作界面

将组件添加至界面素材,再复制1份组件,添加垂直方向的自动布局,接着复制将会垂直自动添加

调整一下底部导航的层级就制作好了

Figma教程12-列表拖动删除交互

预览效果,点击删除按钮后,其他的列表会因自动布局主动向上对齐

Figma教程12-列表拖动删除交互

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


源文件地址:

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

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