Figma Smart Animate | Animation Tutorial with Tab Bar
31.4K views · 2020-09-28
UI DesignInteraction & UX
Figma Overlay Tutorial: https://www.youtube.com/watch?v=tyUIvi1IBls
Figma Components Tutorial: https://www.youtube.com/watch?v=S3uQTNUtczY
In this video I go over how to animate a tab bar with Smart Animate. I show you the entire Figma tutorial, where I go over the designs and then use the prototype mode to make the design interactive. I use Smart Animate to create a seamless transition between the frames.
Enjoying this tutorial? Subscribe to stay up to date with my latest content: https://www.youtube.com/channel/UC_TjoSnaI3CTgIgmSn3rruA?sub_confirmation=1
In this video I show you:
0:00 -Intro
0:59 - How to add interactivity to your Figma prototype
3:14 - Figma Smart Animate
3:52 - Page Transitions with Smart Animate
6:53 - Opacity Transitions with Smart Animate
Want to improve designer to development handoff? View my Sketch to Zeplin workflow here: https://www.youtube.com/watch?v=D3ZF2...
--
Gear
Microphone - https://amzn.to/34bDTxH
Hard Drive - https://amzn.to/30m5E5M
--
Let's Connect
Dribbble: https://dribbble.com/angeladelise
Blog: https://medium.com/@angeladelise
--
DISCLAIMER: Links included in this description might be affiliate links. If you purchase a product or service with the links that I provide I may receive a small commission. There is no additional charge to you! Thank you for supporting my channel so I can continue to provide you with free content each week!
Figma Components Tutorial: https://www.youtube.com/watch?v=S3uQTNUtczY
In this video I go over how to animate a tab bar with Smart Animate. I show you the entire Figma tutorial, where I go over the designs and then use the prototype mode to make the design interactive. I use Smart Animate to create a seamless transition between the frames.
Enjoying this tutorial? Subscribe to stay up to date with my latest content: https://www.youtube.com/channel/UC_TjoSnaI3CTgIgmSn3rruA?sub_confirmation=1
In this video I show you:
0:00 -Intro
0:59 - How to add interactivity to your Figma prototype
3:14 - Figma Smart Animate
3:52 - Page Transitions with Smart Animate
6:53 - Opacity Transitions with Smart Animate
Want to improve designer to development handoff? View my Sketch to Zeplin workflow here: https://www.youtube.com/watch?v=D3ZF2...
--
Gear
Microphone - https://amzn.to/34bDTxH
Hard Drive - https://amzn.to/30m5E5M
--
Let's Connect
Dribbble: https://dribbble.com/angeladelise
Blog: https://medium.com/@angeladelise
--
DISCLAIMER: Links included in this description might be affiliate links. If you purchase a product or service with the links that I provide I may receive a small commission. There is no additional charge to you! Thank you for supporting my channel so I can continue to provide you with free content each week!