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
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
3 жыл бұрын
Glad you liked it🤩🤩
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
3 жыл бұрын
Thanks for the support Will. Do share and subscribe, it Will 😁 be a great help🤗🤗
Excellent.wish you all the best.
Amazing tutorial!! Great work dude...waiting for more
@AkashYadavUX
3 жыл бұрын
thanks a lot 🙂 do check out the other tutorials on my channel 😇
Sahin, Good one Akash bhai, keep it up!
@AkashYadavUX
3 жыл бұрын
thank you 😀
Great idea sir...I'll definitely try this💯👏✌
Thanks so much for the awesome tutorial!!
@AkashYadavUX
3 жыл бұрын
thank you Lily 🤩🤩🤩🤩
very cool tutorial, thanks!
@AkashYadavUX
Жыл бұрын
Glad you liked it!
Thanks dude, I hope you will get more subscribers very quickly 👍
@AkashYadavUX
3 жыл бұрын
Thank you Deva🤩🤩
This is AMAZING Thanks a lot akash sir 😍🙌🎉
@AkashYadavUX
3 жыл бұрын
😇😇
How I get the Messege out of the Autolayout that I see just the half of it?
Awesome, thanks for sharing, it's very useful.
@AkashYadavUX
3 жыл бұрын
My pleasure
Absolutely brilliant
@AkashYadavUX
2 жыл бұрын
Thank you🤓
Awesome, ❤️
@AkashYadavUX
3 жыл бұрын
thanks :)
Looking forward to your next figma tutorial
@AkashYadavUX
3 жыл бұрын
Yay! :)
@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
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
so good!
@AkashYadavUX
3 жыл бұрын
Thank you 😊
its done in AE bro
Looking forward for the next video
@AkashYadavUX
3 жыл бұрын
thanks :)
thx very much
@AkashYadavUX
3 жыл бұрын
You're welcome! 🤗
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
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
Жыл бұрын
Hi creative_lifeline were you able to copy the animation properties to other cells??
Thank you for this video brother. I am having a question, how to export this prototype interaction from Figma to flutter code?
@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
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?
Wow that's cool!!
@AkashYadavUX
3 жыл бұрын
😊 thank you
omg so awesome !!!!
@AkashYadavUX
3 жыл бұрын
Thank you🙈🙈
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
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
2 жыл бұрын
@@AkashYadavUX thank you! Will do as yob say
Hello sir, can it have ability to swipe right and left on one card?
@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.🤟
how to do same animation with 2nd message?
@AkashYadavUX
2 жыл бұрын
Didnt get you
how to make an animate of boolean union?
@AkashYadavUX
3 жыл бұрын
Hey, sorry didn't get your question🙈.
Akash onde está o link do Figma pra pegar os Stage ?
@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
3 жыл бұрын
@@AkashYadavUX vou te chamar no LinkedIn 🤙
@MateusHenrique-ne5el
3 жыл бұрын
@@AkashYadavUX vish, não consegui mandar mensagem lá não :(
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
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
3 жыл бұрын
@@AkashYadavUX Thank you so much! I'll check them out!
how to implement this on the android app???
@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
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.
Hey man !! How to convert figma animation to code
@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.
Какой амазинг? Что за рофлы? Сравниваешь свою поделку с классной анимацией
Nice dummy names lol
@AkashYadavUX
3 жыл бұрын
😛😛😛 haha