Card swipe interaction in Figma | Book App

[@Joanne0728]

Wow, appreciate for teaching this skill. Thank you so much!!

[@cigdemfindik]

Super clear explained! Please keep on doing this type of videos, they are a great source to learn !

[@AkashYadavUX]

Thank you so much, i am glad you liked it :)

[@somayaibrahim9839]

I loved everything you do 🎉

[@AkashYadavUX]

Thank you so much 😊

[@jerinjohn322]

Great tutorial as always!

[@AkashYadavUX]

thanks Jerin :)

[@mariabee5652]

Great tutorial, thank you so much!

[@AkashYadavUX]

Glad you enjoyed it😇😇

[@nanimattt]

great tutorial, thank you

[@AkashYadavUX]

thank you🤩

[@universe_verses]

Is that work as real app on bravo ? If you had a. Lot of books ??

[@cloudlyrics9344]

Osm❤️

[@angolic]

wow! I didn't know i can create awesome animations in figma too! Thanks for the tutorial!

[@AkashYadavUX]

Hey Germaine! There is a lot of stuff that you can do it in Figma. Thanks for stopping by, do subscribe if you haven't already :)

Thanks alot

[@souravdash8647]

Hey Akash,whats the difference between pass through and opacity?

[@AkashYadavUX]

Hey Sourav, So "Pass through" is one of the options in blending mode available in Figma. As the name suggest, it's a plain opacity changer. There are different blending modes available like multiply, color burn etc. This property is very helpful to quickly change the blending of a big component/group. Where as opacity is simple transparency changer, which is available in fill options. If you use "Pass through", then opacity and pass through have the same effect (changes the transparency).

[@Carroty_Peg]

🎉🎉🎉🎉🎉🎉

[@AkashYadavUX]

🤗🐝

[@meruyertkubasheva3604]

Hi, thanks for such great and clear tutorials! Greetings from Kazakhstan! I have a question: could we do the same but with videos and by scrolling down(like Tiktok videos). Is it possible in Figma?

[@AkashYadavUX]

yes you can do that, you need to follow the exact same step and instead of stacking card backwards, you need to stack them vertical. apply the same principle. I will make a short video soon on it, so stay tuned✌️

[@manums7989]

Hello brother you are doing a great job out there. Thank you so much for producing such great quality contents. I have 2 doubts, 1) you mentioned about creating an extra frame (14:40) I couldnt find the extra frame in layers panel also. Which frame is that you are mentioning about? 2) On the book detail interaction you have given the tap interaction on the entire frame. Incase if i want to scroll the above category section horizontally or atleast want to open a different category from the top of the cards how would we do the prototyping?(You have mentioned earlier that you are not going to animate anything else but I just want to know how it would work if I want to set up an entire app design)

[@AkashYadavUX]

Hey Manu, Great questions. 1. The extra frame is the last card (5th card in the back) which has 0 opacity. The zero opacity card is needed to slide the first card back stealthy in the deck in the 3rd artboard. It is required to make the card swipe it rotational or endless. 2. So when i recorded the video, figma used to allow only one interaction with one element. Hence i resorted to adding the tap trigger to the entire artboard. But now figma allows two different triggers on the same element. So you can add tap trigger to each card in the deck. this will give you freedom to link different pages to the category pills. Btw get the source file for this and every tutorial on my channel here: kzbin.info/www/bejne/ioS7qoyqadRjkMk Let me know if this clears your doubt 🤗🤗

[@maychai2101]

I love this

[@AkashYadavUX]

thank you May🤩🤩🤩

[@LadyVampire92]

the books are only drag down. what about up as well? my clients need both on the mockup and can't find a video with both interactions on the same item. Found a forum requesting the interaction from 2020, but can't find a workaround for it.

[@AkashYadavUX]

Hey checkout my new video, similar concept but in horizontal direction. you can apply the same idea to also create upward drags as well 🙂 kzbin.info/www/bejne/hYLapKewjshjY7M

[@LadyVampire92]

@@AkashYadavUX awesome! Thank you!!!

[@divyanshchauhan3263]

is there any way where in I don't have to make 5 screens for 5 books? How will I do for dynamic content that keeps on updating regularly, in which case my screens will increase infinitely, I am trying to find a solution here by using 2 frames for 2 animations, scroll down and book tap, or something like that. Stuck!!!

[@AkashYadavUX]

You can't do that in Figma! Figma is just a prototyping tool and can't do dynamic changes as you are hoping for.

[@uditshakya6111]

Is that an android on which you're mirroring this prototype ? If yes then which one , my prototypes laga terribly on android

[@AkashYadavUX]

Hey, Yes! I am mirroring it on my Oneplus 6T via the Figma mirror app. It runs pretty smooth on the mirroring devices. Mirror app actually requires quite a bit of RAM and fast wifi connection to run smoothly

[@namratharm6699]

Thank you..your tutorials are so creative please do more😁 I'm a beginner so i have doubt. How to create that ruler on artboard

[@AkashYadavUX]

hey, Namratha Thanks for the appreciation. I have a lot in store for Figma interaction in upcoming videos. You can get the ruler option by hitting ( Shift+R) on Figma. Once you do that you will see ruler on top and left. You can drag ruler lines from there.

[@namratharm6699]

@@AkashYadavUX thank you 😄 waiting for your upcoming videos

[@tolokaearnmoney4645]

awesome

[@AkashYadavUX]

thank you😇😇