Card swipes/ carousels in Figma

🔗 Source file for this tutorial: yakash91.gumroad.com/l/swipe
👉 Follow me on my socials for more:
/ ui.kash
/ akashy
dribbble.com/akashy
👉 My KZbin setup gear:
Canon M50: amzn.to/2Xv6LP3
Tripod: amzn.to/30xluel
Boya shotgun mic: amzn.to/2XuZOxc
Time stamps:
00:00 Intro & Setup
11:13 Prototyping
13:10 Troubleshooting choppiness/ stuttering issue
15:00 Bonus: Video trailer addition

[@akshitks1909]

Thank you for sharing this tutorial. Just finished following these steps and loved how good it turned out.

[@JEdmund81]

Thank you SO MUCH for this awesome tutorial! Made a huge difference in the prototype I'm building.

[@BarryHercules]

Beautiful effect.

[@ahmedrabiul8576]

Fantastic tutorial , Plz Keep teaching us and best of luck for the further days

[@saeentist-hb]

this is exactly what I was looking for, thanks.

[@AkashYadavUX]

Glad I could help!

[@munnanginaveenbabu4386]

Not only nice explanation it's good explanation too❤❤❤

[@debel5971]

AWESOME!! THANK YOU

[@shens_genki5587]

Thank you so much for the video! I was also wondering how to keep swiping so that it goes back to the first card?

[@wellpal]

would be cool to see this in a template for after effects as well

[@tanzirhasan5035]

A great tutorial again from you....Thanks a lot 🥰

[@AkashYadavUX]

You’re welcome 😊

[@DesignLB]

​@@AkashYadavUXIs it possible to insert the native Figma file for us to practice?

[@shivamoeini1920]

You are amazing!

[@NandanaSenarath]

What a Idea. Amazing

[@AkashYadavUX]

Thank you

[@sanjayviper3494]

Really awesome 🥰

[@VinodNanaiah]

Absolutely fantastic..thank you!

[@parthbhadani8694]

Hello, akash I have found this very helpful. Thank you so much keep making content like this

[@AkashYadavUX]

My pleasure

[@hanankhashir7540]

What exactly do you write/ search in shutterstock, pexels to get these kind of images especially the harry potter one and the one you use in the tutorial?

[@momirvidrica1695]

great tutorial!

[@AkashYadavUX]

Thanks!

[@khushbudas4736]

Sir I am asking a different question please if you can help me. So my question is that if I want to put my recorded app screen in my case study so how can I crop it because I want to just add the mobile screen which is recorded.🤔

[@zainabbawa2880]

This is super usefull

[@akshaychauhan.5678]

Is there any way we can do this with component's help?

[@user-gl2by3un3o]

is there a version of this but for a desktop in figma also

[@MoveBeyondMind]

Great Tutorial !! Can u also do a tutorial for card swipes / carousel in PRINCIPLE ?😋

[@lavishak4075]

Informative !

[@AkashYadavUX]

thanks lavisha 🤩

[@princedaniel8523]

In this one how to apply after delay to frame because that was disabled

[@vishalyadav630]

Awsm

[@samnoel9910]

That's cool bro..I'll add this in my portfolio 😊 thank u❤

[@agnidiptahomroy8656]

How is that possible? How can a single frame accept drag interaction in 2 different directions?

[@rajatnag1548]

Thank you so much Bhai 🙏

[@AkashYadavUX]

Always welcome

[@user-gb3rd6wk7z]

How hard is it to implement this in HTML/CSS and javascript?

[@nkzzh8135]

GOOD!!

[@fadlandaris3326]

you are legend man

[@AkashYadavUX]

Thanks bro :)

[@fadlandaris3326]

@@AkashYadavUX do you have any IG or something so i can connected with you? im 20 years old and right now im learning UI/UX so i got alot of question. or imma just drop the question in this comment section or something?

[@pranjaljain2721]

Hey, ur work is amazing....it would be great if u can plz create a video on how to add figma animations prototype on linked

[@AkashYadavUX]

Hey sure! will try to create a video :)

[@Syed_Lord]

How to swipe both side?

[@Charmyng_and_Chubby]

Thank you Akash for this video, I am in my 17th week as a UX Designer, and this video is very helpful. For some reason I can't figure out why going Back for me never works...It will always get stuck between the last two slides. Can you help when you get a chance? Thank you so much.

[@ajironkeajibola5182]

pls why did you have to duplicate the screens? why not use a component and variants? Thank you

[@joshuasaitong9023]

I'm having issue. Im currently designing a website and when I smart animate to the next picture I takes me all the way to the top of the website instead of changing the pictures smoothly. å´please help if anyone knows

[@Dev_pandat0004]

Change the frame

[@marthat2958]

Hi @AkashYadavUX. @AkashYadavUX thank you for this video however it is not working the same for me There is part of this not working for me. You said to 1 - create a frame for the card add the image and content (did you use fill to add the image) group the images 2. line them up beside each other and group - the group icon looks like the frame icon, is it group or frame? 3. i tried both group cmd + G and frame cmd + F and when I drag a framed card off screen, it moves outside the grouped/framed selection which doesn't happen to you - I then move it back down inside on the left layers panel but it becomes permanently invisible bar the outline I resize the framed selection to include it 4. I repeat this step 4 times when I go to prototype and set drag options as you did and play it does not work only the main screen frame moves Please could you write the steps and share if they have changed or advise why although I copy you exactly there are various differences occurring on my end, is it due to new updates it would be useful if you shared what keys you use in future videos - for example when you drag a card from its selection screen are you pressing a key at the same time to keep it within its selection? can you

[@JEdmund81]

For #3, you use the shortcut Command + Option + G to create a group frame. I did this wrong the first time and couldn't figure out what I did wrong. I had to rewatch the video to realize I only hit Command + G. Then, when you move your "cards" off screen, move them off using your arrow keys; don't just drag them off with your mouse as it seems to remove it from the frame (as I understand it). Good luck!

[@tauriurbanik5509]

Can you do it with figma components?

[@AkashYadavUX]

You can do it with components, I havent used components here because i was shifting between blurs and it doesnt work that well with components in it.

[@enesdovec2676]

nice, now tell me how can I made it with css lol

[@hanankhashir7540]

From where do you get these images?

[@AkashYadavUX]

I mostly get my images from either pexels.com or unspalsh.com For this specific one i got it from shutterstock / getty images (have a paid account).

[@hanankhashir7540]

@@AkashYadavUX What exactly did you give them prompt / name to get these kind of images? Like the harry potter one and the one you used in the video

[@akshayjain8876]

Can we create this using components

[@AkashYadavUX]

yes this can be done by creating components. I haven't used components here as I was changing blurs between the card and that will not be straightforward with components :)

[@Dhwrwm502]

Backflow is not working, i mean only one interaction is working

[@dontpanicalreadyhappened]

Too much shortcuts in the tutorial. Not beginner-friendly

[@jannedistor8247]

the shortcuts were done to remove redundancy. every essential process is spoon-fed to you, what else do you want?

[@dariob.2547]

Really cool, I'm looking for something similar for Adobe XD but can't find it