Liquid Swipe interaction in Figma

[@millankumardas6593]

Actually I am looking for a channel where I can learn making prototypes and micro-interactions using Figma and I found this. You are really doing an amazing job. Keep it up 👍💯✌️

[@AkashYadavUX]

Glad you liked it🤩🤩

[@willd4421]

Figma is so powerful and Akash, you're unleashing it's power! Thanks for the tut, please keep em coming. Power to the people brother.

[@AkashYadavUX]

Thanks for the support Will. Do share and subscribe, it Will 😁 be a great help🤗🤗

[@rcprasadyadav5767]

Excellent.wish you all the best.

[@suvasishsahoo2189]

Amazing tutorial!! Great work dude...waiting for more

[@AkashYadavUX]

thanks a lot 🙂 do check out the other tutorials on my channel 😇

[@eddysnehal]

Sahin, Good one Akash bhai, keep it up!

[@AkashYadavUX]

thank you 😀

[@iamshubham1501]

Awesome, ❤️

[@AkashYadavUX]

thanks :)

[@doradong5955]

very cool tutorial, thanks!

[@AkashYadavUX]

Glad you liked it!

[@DevaRaj-th9pe]

Thanks dude, I hope you will get more subscribers very quickly 👍

[@AkashYadavUX]

Thank you Deva🤩🤩

[@doAnn88]

it doesnt do the scrolling of the tiles for me. I exactly did what you did with 7 tiles and same iphone frame... what did I do wrong?also my frame is moveable within the phone mock up in ever direction... :(

[@AkashYadavUX]

Seems like an issue with either frame and its content or scroll properties. For scrolling to happen frame should be smaller than inside elements. Or go the prototyping tab and select scrolling property to vertical scroll. Alternatively checkout the source file of all my videos here: www.figma.com/community/file/932223204866138211/High-fiedlity-interactive-prototypes--Part-1

[@doAnn88]

@@AkashYadavUX thank you! Will do as yob say

[@TheQuatum]

Absolutely brilliant

[@AkashYadavUX]

Thank you🤓

[@robertkrautschick5113]

How I get the Messege out of the Autolayout that I see just the half of it?

[@alexkiran4212]

its done in AE bro

[@minalmukarande]

Great idea sir...I'll definitely try this💯👏✌

[@aryandhanawade8063]

This is AMAZING Thanks a lot akash sir 😍🙌🎉

[@AkashYadavUX]

😇😇

[@ryanphillips8197]

@akash Great work but actually the finished product was still not perfect as you stated. If you look at the transition from the first screen to the second screen the initial droplet was showing a transparency during the auto animation. Have you been able to address this fix?

[@AkashYadavUX]

Hey Ryan! Yes, you are right. Actually, my original intention was to not add any transparency in the first frame (the drop) all together to avoid this premature transparency creep. The problem is how Figma handles shape changes, it adds transparency automatically when a shape changes and it was more problematic with weird shape transition showing up. Hence I decided to go with the approach of giving 0 opacity. I tried the same approach in XD without giving any transparency in the first frame or second and it worked perfectly, as XD handles shape transitions well. But in Figma, this is the most we can do, at least as far as I know. Let me know if you find a better solve 😇 Source file: www.figma.com/community/file/932223204866138211/High-fiedlity-interactive-prototypes--Part-1

[@LilyBrand12345]

Thanks so much for the awesome tutorial!!

[@AkashYadavUX]

thank you Lily 🤩🤩🤩🤩

[@cypherash]

how to implement this on the android app???

[@AkashYadavUX]

Hey Yash, There are two ways of doing it, either export the files to AE, animate it there and then covert them into JSON using bodymovin plugin. 2nd you can find the source code for the same interaction here: github.com/Cuberto/gooey-cell 🤗🤗

[@cypherash]

@@AkashYadavUX actually the thing was , converting them into json file i could implement the animation on a button press, but how to control the duration of animation . if u could get some contact info maybe i can explain better ( please help as i'm working on a project and i seriously need to learn this for my project to succeed ) . Thanks for replying.

[@yashodhanxyz]

Looking forward for the next video

[@AkashYadavUX]

thanks :)

[@MateusHenrique-ne5el]

Akash onde está o link do Figma pra pegar os Stage ?

[@AkashYadavUX]

Hey Akira! Not sure if I got you correct, in case you need the Figma file then you can message me on Insta/linkedin. I will share the access with you.✌️

[@MateusHenrique-ne5el]

@@AkashYadavUX vou te chamar no LinkedIn 🤙

[@MateusHenrique-ne5el]

@@AkashYadavUX vish, não consegui mandar mensagem lá não :(

[@李家安-v2h]

Awesome, thanks for sharing, it's very useful.

[@AkashYadavUX]

My pleasure

[@arunpraseeth9940]

Thank you for this video brother. I am having a question, how to export this prototype interaction from Figma to flutter code?

[@AkashYadavUX]

hey Arun, you can use the Figma to flutter plugin for figma to get a flutter code. But the plugins don't produce correct results many times due to complexity in the interaction. Do give it a try though.😇😇

[@arunpraseeth9940]

@@AkashYadavUX upon your instruction I tried it. I can reproduce the layout with the help of that plugin however I'm not able to get that interaction (prototyping - any actions/transitions) any other work around?

[@vedikagirl997]

Hi Akash great job, thank you so much! I had a question, can you copy the animation properties to all the other cells so as to not repeat the same actions again and again? And what if what if we want to have the previous message back? Should we do a reverse animation for every cell?

[@AkashYadavUX]

hey👋🏻👋🏻 1. So as of now Figma doesn't allow copying the interaction from one element to another. But there is a trick to doing this: Create a component and then create an instance of it. Whatever interaction you will add to the main component, its instances will automatically inherit the same interaction. This however only works in similar instances, and can be applied to random independent components. 2.If you want to have the previous message back the ideal way would be to add a snackbar below when you delete a cell and provide an option to undo it.✌️

[@blackillustration1638]

Hi creative_lifeline were you able to copy the animation properties to other cells??

[@hanajooseyo]

so good!

[@AkashYadavUX]

Thank you 😊

[@AbdulHannan-ey7og]

how to do same animation with 2nd message?

[@AkashYadavUX]

Didnt get you

[@revinaaniver]

Wow that's cool!!

[@AkashYadavUX]

😊 thank you

[@ondifrans3283]

how to make an animate of boolean union?

[@AkashYadavUX]

Hey, sorry didn't get your question🙈.

[@Гиголяндрия]

thx very much

[@AkashYadavUX]

You're welcome! 🤗

[@afifhusain6615]

Hello sir, can it have ability to swipe right and left on one card?

[@AkashYadavUX]

Yes Afif, You can link the same card to left and right drag (swipe) both. Figma allows it. Just do the exact same thing i have shown in the other direction and it will work.🤟

[@angolic]

Looking forward to your next figma tutorial

[@AkashYadavUX]

Yay! :)

[@Thao.Nguyen]

omg so awesome !!!!

[@AkashYadavUX]

Thank you🙈🙈

[@aniket_rc3]

Hi Akash! I tried this tutorial step by step....but I could'nt get the stretch animation....the card swipes but the drop is showing the disslove animation.....Could you please tell me why is that?

[@AkashYadavUX]

hey Ankit, find the source file here: kzbin.info/www/bejne/ioS7qoyqadRjkMk See where you are committing an error. Let me know if this solves the problem.

[@aniket_rc3]

@@AkashYadavUX Thank you so much! I'll check them out!

[@harshvijaybhaargavh4829]

Hey man !! How to convert figma animation to code

[@AkashYadavUX]

unfortunately you cant convert figma interaction to code. Few things you can do via anima plugin for Figma and some other plugins that gives out Json codes for certain interaction but that's it. Figma is an interaction tool, so it is not possible to export code out of it now.

[@WindokiTarot]

Какой амазинг? Что за рофлы? Сравниваешь свою поделку с классной анимацией

[@North_Kai27]

Nice dummy names lol

[@AkashYadavUX]

😛😛😛 haha