Liquid Swipe interaction in Figma
ฝัง
- เผยแพร่เมื่อ 21 ต.ค. 2024
- Join our mentorship program here 👉 www.upglance.com/
Follow me on:
/ akashy
/ kash__91
dribbble.com/a...
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.buymeacoff...
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 TH-cam setup gear:
Canon M50: amzn.to/2Xv6LP3
Tripod: amzn.to/30xluel
Boya shotgun mic: amzn.to/2XuZOxc
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 👍💯✌️
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.
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
thanks a lot 🙂 do check out the other tutorials on my channel 😇
@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?
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
Sahin, Good one Akash bhai, keep it up!
thank you 😀
very cool tutorial, thanks!
Glad you liked it!
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... :(
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
@@AkashYadavUX thank you! Will do as yob say
Thanks dude, I hope you will get more subscribers very quickly 👍
Thank you Deva🤩🤩
Great idea sir...I'll definitely try this💯👏✌
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?
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.✌️
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?
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.😇😇
@@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?
Awesome, ❤️
thanks :)
Absolutely brilliant
Thank you🤓
Thanks so much for the awesome tutorial!!
thank you Lily 🤩🤩🤩🤩
This is AMAZING
Thanks a lot akash sir 😍🙌🎉
😇😇
Looking forward for the next video
thanks :)
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?
hey Ankit, find the source file here: th-cam.com/video/TSXyYt4o0Zg/w-d-xo.html
See where you are committing an error. Let me know if this solves the problem.
@@AkashYadavUX Thank you so much! I'll check them out!
Awesome, thanks for sharing, it's very useful.
My pleasure
How I get the Messege out of the Autolayout that I see just the half of it?
Akash onde está o link do Figma pra pegar os Stage ?
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.✌️
@@AkashYadavUX vou te chamar no LinkedIn 🤙
@@AkashYadavUX vish, não consegui mandar mensagem lá não :(
its done in AE bro
how to implement this on the android app???
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
🤗🤗
@@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.
Hello sir, can it have ability to swipe right and left on one card?
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.🤟
Looking forward to your next figma tutorial
Yay! :)
so good!
Thank you 😊
Wow that's cool!!
😊 thank you
omg so awesome !!!!
Thank you🙈🙈
thx very much
You're welcome! 🤗
how to do same animation with 2nd message?
Didnt get you
how to make an animate of boolean union?
Hey, sorry didn't get your question🙈.
Какой амазинг? Что за рофлы? Сравниваешь свою поделку с классной анимацией
Hey man !! How to convert figma animation to code
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
😛😛😛 haha