Flinto UI/UX Tutorial: Awesome Tab Bar Animation!

In this video, i demonstrate a really sweet tab bar animation inspired by Pawel Kwasnik's Dribbble shot: dribbble.com/shots/6062239-Bi...
Project file: bit.ly/2VgcJPZ
Subscribe for weekly product design tutorials!
email: [e-mail]

[@JakePomperDesign]

Hey fellow designers! I hope you enjoyed this tutorial! Here is the project file if you'd like to follow along: bit.ly/2VgcJPZ
Happy designing!
Jake

[@jennifermicieli991]

Very cool. Thanks for posting!

[@JakePomperDesign]

Jennifer Micieli you’re welcome!

[@rodrigocarmona3947]

hello JP Design Academy, your design is very good, one question, it is possible to do this same example in Adobe XD

[@JakePomperDesign]

Hi there, thank you for you question! I haven’t used XD in a while but I don’t think this is possible since you can’t work with vectors in the same way. You may be able to “hack” this using layer masks though
Best,
Jake

[@jefm3598]

Hi, how do we, the designers handover these animated work to developers? Is Flinto just a prototyping tool for demonstrations? Ive been using Flinto a while and I quite like it.

[@JakePomperDesign]

Siang C generally I will say flinto is mostly for demonstration purposes, and is great for demonstrating some more custom, complex behaviors and micro interactions (I.e. showing how objects would behave while scrolling). You can send dev’s videos of your animations so they understand how elements behave. You can also send them the easing curve numerical values so they can more accurately represent your idea.
Thanks for your question!
Jake

[@realmeee]

nice tuts jake !
hey do you think it is possible in principle too or invision studio ?

[@JakePomperDesign]

0riginee thanks! I don’t think this is possible in those tools...definitely is not in Studio.

[@realmeee]

@@JakePomperDesign lets hope for principle , don't know about invision studio though . saw this type of effect in protopie and kite but not this much easy :D
p.s: thanks for the feedback , keep up the godspeed work bro 🤘

[@JakePomperDesign]

0riginee thank you for your kind words 🙏

[@JamesDrake2]

More Invision and principle for beginners :P

[@JakePomperDesign]

DemonikJD definitely more of those on the way :)
Any topics in particular?

[@JamesDrake2]

@@JakePomperDesign I'd really like long introduction videos, like this is how to do these 10 things etc. One thin that jumps to mind is a swiping back and forth animation, think something like instagram stories on the instagram home screen when they're at the top in circles, you can scroll back and forth

[@JakePomperDesign]

Ok thanks! I’ll definitely do some more Principle/Invision intro tutorials. Also, regarding your IG stories question, do you just mean how to scroll horizontally?