Figma + Principle UI Animation: Create a Liquid Swipe Effect!

In this video, I demonstrate how you can prototype a really cool, fluid swiping interaction in Principle for Mac. Subscribe for more tutorials like this!
Please take a moment to fill out the UI/Motion Design Survey for Course dropping later this year, I would really appreciate it!!!
Survey: forms.gle/xqhcUAT9snfHsM5f6
Business Inquiries: [e-mail]
Twitter: jpdesignacademy?l...

[@paweonorin2978]

OMG! Thanks you so much. 😍 You did it great. 👏 👏 👏
I hope something similar will be able to do in invision studio one day.

[@JakePomperDesign]

Thanks again for your question! This was fun. If studio ever comes out with scroll-based animations I think this will be possible

[@lautarosimoncini1230]

That's amazing!

[@coltalexis5174]

i dont mean to be offtopic but does someone know of a tool to log back into an Instagram account??
I stupidly lost the account password. I appreciate any assistance you can give me

[@jaydenayaan1930]

@Colt Alexis instablaster :)

[@john_rodrigues]

Love this! Going to give it a try.

[@yuxiny1726]

This is so great and really clearly explained. Thank you!

[@JakePomperDesign]

Sure thing, thanks for watching 🙏

[@uxreckyputra]

whoooop , thanks love tutorial
more figma with principle

[@SmitBarbhaya]

Loved this buddy, TBH I don't do comments usually but as a designer seeing this, is fabulous keep it up!

[@prakashhalolite2185]

Man this is great... hats off

[@danielalmeida_s]

Great tutorial! Thank you

[@JakePomperDesign]

You’re welcome, thanks for watching 🙏

[@daniewenren5863]

Thanks for sharing!

[@Jordan-zz8qu]

Great explanation, loved the 'Subscribe for more math' haha

[@JakePomperDesign]

Hahaha thank you! I'd like to think I'm good at some things but math is definitely not one of them

[@Jordan-zz8qu]

@@JakePomperDesign Can relate as a fellow designer haha

[@didikurniawan5548]

Thank you for the tutorial, this is very useful for those of us who are learning the interaction of design 😁

[@JakePomperDesign]

you're welcome, glad it was useful!

[@joanerhabor3233]

How's it going for you? I'd love to know

[@daniel_rad]

love it thanks

[@JakePomperDesign]

Daniel Rad thanks for watching 🤟

[@gonzalodegregorio9687]

Brilliant man! Thanks for that content. I know that each one has its virtues, but which software do you think is better? the Figma + Principle combo or Invision Studio? I am not familiar with Principle, but it looks interesting here!

[@JakePomperDesign]

Thanks man! Honestly both serve different purposes in my work flow. I really like Figma + Principle for scroll-based stuff like you saw in this video. For screen-to-screen animation I typically use Studio. But since Studio doesn’t integrate with figma yet, I need to export layers of my designs as PNG and bring them into studio to animate (or sometimes I’ll just design and animate directly in Studio, although Studio isn’t quite there yet as a fully featured design tool IMO). Sketch integrates with Studio pretty well so sometimes if I know I’ll be animating in Studio I’ll just do my UI design in Sketch...
All this to say....it is helpful to know a few tools so you can pick the best one for the job lol.
Thanks for watching!
Jake

[@andremedaglia350]

Hey, on minute 8:00 you should have include a KeyFrame for the "News" tab at 375 also (mantaining 50% oppacity), because you can see a small increase of oppacity on every swipe 😁

[@Ash-ku2rz]

When is your course coming in?

[@mybrightwheel]

Would love to see you recreating some Dribbble posts that feature more intricate UI animation

[@JakePomperDesign]

If you have any specific ones in mind, let me know!

[@mybrightwheel]

@@JakePomperDesign I'd love to see how to create and export an app demo - Cuberto Design has some really cool videos that I'd love to know how to reproduce

[@WheelieTruther]

Any chance you can provide the files for us to mess around with?

[@pankajchopra2573]

Hello bro hope you are doing good. I have request for you if you can create 1 video to show us how to share invision project/shot on dribbble. If you can make it that would very helpful for most of us. :)

[@bethanyrobinson5862]

is there a way to do this solely in figma?

[@dylanmurphy6944]

Having issues with keep the nav bar static across all screens. Because they are on the same artboard I cannot call them the same name so principle does not animate and keep them static. What am I doing wrong?

[@JakePomperDesign]

Hmmm not sure I follow but if you send a video of your issue to [e-mail] I can try to resolve!

[@davidfitcher2953]

Can’t you copy and paste keyframes?

[@JessUIdesign]

How do you put this 10px grid ?

[@JakePomperDesign]

You can change your grid settings on the right side panel

[@JessUIdesign]

JP Design Academy thank you :)

[@piyushpagaria567]

Is it possible to make this same interaction In figma ?

[@JakePomperDesign]

Unfortunately not, Figma does not support this level of scroll-based interactions at the moment

[@foodaupair]

@6:25 and @10:00

[@foodaupair]

@12:20