Liquid Swipe interaction in Figma

Join our mentorship program here 👉 www.upglance.com/
Follow me on:
/ akashy
/ kash__91
dribbble.com/akashy
Guys, 👋 I am also working on a full-fledged UX Design course on how design works in companies. Practical knowledge on design processes, hands-on design tools, product thinking, problem-solving, cracking design interviews and more.
You can now support me by buying me a coffee here: www.buymeacoffee.com/ZeWIlq6
Recommended books for UX:
1. Universal Principles of design (amzn.to/39XQ6s9)
2. Design of Everyday Things (amzn.to/31ifuoT)
3. Start with why (amzn.to/3i2QZCA)
4. Don’t Make Me Think (amzn.to/3ikiDeP)
5. Hooked: How to Build Habit-Forming Products (amzn.to/2PqUQxi)
6. The Lean Startup (amzn.to/31k0Nl1)
7. Made to Stick: Why Some Ideas Survive and Others Die (amzn.to/33rXzOY)
8. Creative Confidence: Unleashing the Creative Potential Within Us All (amzn.to/33rUFd6)
9. Thinking, Fast and Slow (amzn.to/2PocEcb)
My KZread setup gear:
Canon M50: amzn.to/2Xv6LP3
Tripod: amzn.to/30xluel
Boya shotgun mic: amzn.to/2XuZOxc

Пікірлер: 76

  • @millankumardas6593
    @millankumardas65933 жыл бұрын

    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

    @AkashYadavUX

    3 жыл бұрын

    Glad you liked it🤩🤩

  • @willd4421
    @willd44213 жыл бұрын

    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

    @AkashYadavUX

    3 жыл бұрын

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

  • @rcprasadyadav5767
    @rcprasadyadav57673 жыл бұрын

    Excellent.wish you all the best.

  • @suvasishsahoo2189
    @suvasishsahoo21893 жыл бұрын

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

  • @AkashYadavUX

    @AkashYadavUX

    3 жыл бұрын

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

  • @eddysnehal
    @eddysnehal3 жыл бұрын

    Sahin, Good one Akash bhai, keep it up!

  • @AkashYadavUX

    @AkashYadavUX

    3 жыл бұрын

    thank you 😀

  • @minalmukarande6108
    @minalmukarande61082 жыл бұрын

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

  • @LilyBrand12345
    @LilyBrand123453 жыл бұрын

    Thanks so much for the awesome tutorial!!

  • @AkashYadavUX

    @AkashYadavUX

    3 жыл бұрын

    thank you Lily 🤩🤩🤩🤩

  • @doradong5955
    @doradong5955 Жыл бұрын

    very cool tutorial, thanks!

  • @AkashYadavUX

    @AkashYadavUX

    Жыл бұрын

    Glad you liked it!

  • @DevaRaj-th9pe
    @DevaRaj-th9pe3 жыл бұрын

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

  • @AkashYadavUX

    @AkashYadavUX

    3 жыл бұрын

    Thank you Deva🤩🤩

  • @aryandhanawade8063
    @aryandhanawade80633 жыл бұрын

    This is AMAZING Thanks a lot akash sir 😍🙌🎉

  • @AkashYadavUX

    @AkashYadavUX

    3 жыл бұрын

    😇😇

  • @robertkrautschick5113
    @robertkrautschick5113 Жыл бұрын

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

  • @user-nz7zj9gl8i
    @user-nz7zj9gl8i3 жыл бұрын

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

  • @AkashYadavUX

    @AkashYadavUX

    3 жыл бұрын

    My pleasure

  • @TheQuatum
    @TheQuatum2 жыл бұрын

    Absolutely brilliant

  • @AkashYadavUX

    @AkashYadavUX

    2 жыл бұрын

    Thank you🤓

  • @iamshubham1501
    @iamshubham15013 жыл бұрын

    Awesome, ❤️

  • @AkashYadavUX

    @AkashYadavUX

    3 жыл бұрын

    thanks :)

  • @angolic
    @angolic3 жыл бұрын

    Looking forward to your next figma tutorial

  • @AkashYadavUX

    @AkashYadavUX

    3 жыл бұрын

    Yay! :)

  • @ryanphillips8197
    @ryanphillips81972 жыл бұрын

    @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

    @AkashYadavUX

    2 жыл бұрын

    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

  • @theworldofHANA
    @theworldofHANA3 жыл бұрын

    so good!

  • @AkashYadavUX

    @AkashYadavUX

    3 жыл бұрын

    Thank you 😊

  • @alexkiran4212
    @alexkiran4212 Жыл бұрын

    its done in AE bro

  • @yashodhanxyz
    @yashodhanxyz3 жыл бұрын

    Looking forward for the next video

  • @AkashYadavUX

    @AkashYadavUX

    3 жыл бұрын

    thanks :)

  • @user-op5nj7dh3z
    @user-op5nj7dh3z3 жыл бұрын

    thx very much

  • @AkashYadavUX

    @AkashYadavUX

    3 жыл бұрын

    You're welcome! 🤗

  • @vedikagirl997
    @vedikagirl9972 жыл бұрын

    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

    @AkashYadavUX

    2 жыл бұрын

    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

    @blackillustration1638

    Жыл бұрын

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

  • @arunpraseeth9940
    @arunpraseeth99403 жыл бұрын

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

  • @AkashYadavUX

    @AkashYadavUX

    3 жыл бұрын

    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

    @arunpraseeth9940

    3 жыл бұрын

    @@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?

  • @revinaaniver
    @revinaaniver3 жыл бұрын

    Wow that's cool!!

  • @AkashYadavUX

    @AkashYadavUX

    3 жыл бұрын

    😊 thank you

  • @Thao.Nguyen
    @Thao.Nguyen3 жыл бұрын

    omg so awesome !!!!

  • @AkashYadavUX

    @AkashYadavUX

    3 жыл бұрын

    Thank you🙈🙈

  • @doAnn88
    @doAnn882 жыл бұрын

    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

    @AkashYadavUX

    2 жыл бұрын

    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

    @doAnn88

    2 жыл бұрын

    @@AkashYadavUX thank you! Will do as yob say

  • @afifhusain6615
    @afifhusain66152 жыл бұрын

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

  • @AkashYadavUX

    @AkashYadavUX

    2 жыл бұрын

    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.🤟

  • @AbdulHannan-ey7og
    @AbdulHannan-ey7og2 жыл бұрын

    how to do same animation with 2nd message?

  • @AkashYadavUX

    @AkashYadavUX

    2 жыл бұрын

    Didnt get you

  • @ondifrans3283
    @ondifrans32833 жыл бұрын

    how to make an animate of boolean union?

  • @AkashYadavUX

    @AkashYadavUX

    3 жыл бұрын

    Hey, sorry didn't get your question🙈.

  • @MateusHenrique-ne5el
    @MateusHenrique-ne5el3 жыл бұрын

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

  • @AkashYadavUX

    @AkashYadavUX

    3 жыл бұрын

    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

    @MateusHenrique-ne5el

    3 жыл бұрын

    @@AkashYadavUX vou te chamar no LinkedIn 🤙

  • @MateusHenrique-ne5el

    @MateusHenrique-ne5el

    3 жыл бұрын

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

  • @aniket_rc3
    @aniket_rc33 жыл бұрын

    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

    @AkashYadavUX

    3 жыл бұрын

    hey Ankit, find the source file here: kzread.info/dash/bejne/hoeM27utZNKWiso.html See where you are committing an error. Let me know if this solves the problem.

  • @aniket_rc3

    @aniket_rc3

    3 жыл бұрын

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

  • @cypherash
    @cypherash3 жыл бұрын

    how to implement this on the android app???

  • @AkashYadavUX

    @AkashYadavUX

    3 жыл бұрын

    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

    @cypherash

    3 жыл бұрын

    @@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.

  • @harshvijaybhaargavh4829
    @harshvijaybhaargavh48293 жыл бұрын

    Hey man !! How to convert figma animation to code

  • @AkashYadavUX

    @AkashYadavUX

    3 жыл бұрын

    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
    @WindokiTarot3 жыл бұрын

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

  • @JasonFernandesJF
    @JasonFernandesJF3 жыл бұрын

    Nice dummy names lol

  • @AkashYadavUX

    @AkashYadavUX

    3 жыл бұрын

    😛😛😛 haha