Card swipes/ carousels in Figma

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

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

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

[@saeentist-hb]

this is exactly what I was looking for, thanks.

[@AkashYadavUX]

Glad I could help!

[@ekimguneykose8730]

how to swipe back on drag interaction ? I couldn't figure it out. it doesn't work

[@ahmedrabiul8576]

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

[@munnanginaveenbabu4386]

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

[@Learnerz-ep8fw]

bro keeps cooking awesome interaction ui

[@agnidiptahomroy8656]

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

[@MayurCreativeStudio]

This is good tutorial, but you can try to create in component as well.

[@Winifredokolo]

I love this video so much it has really helped me. Thank you sir

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

[@ajironkeajibola5182]

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

[@ElementCreative]

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

[@BarryHercules]

Beautiful effect.

[@parthbhadani8694]

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

[@AkashYadavUX]

My pleasure

[@Hacktivator]

The scaling part is a bit sketchy...can't trust my eyes enough...How do we get precise measurements with the scale tool? It's pretty confusing.

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

[@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 :)

[@princedaniel8523]

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

[@rajatnag1548]

Thank you so much Bhai 🙏

[@AkashYadavUX]

Always welcome

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

[@NandanaSenarath]

What a Idea. Amazing

[@AkashYadavUX]

Thank you

[@debel5971]

AWESOME!! THANK YOU

[@momirvidrica1695]

great tutorial!

[@AkashYadavUX]

Thanks!

[@user-gb3rd6wk7z]

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

[@sanjayviper3494]

Really awesome 🥰

[@nourfahoud]

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

[@shivamoeini1920]

You are amazing!

[@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!

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

[@zainabbawa2880]

This is super usefull

[@dariob.2547]

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

[@VinodNanaiah]

Absolutely fantastic..thank you!

[@lavishak4075]

Informative !

[@AkashYadavUX]

thanks lavisha 🤩

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

[@akshaychauhan.5678]

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

[@samnoel9910]

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

[@Syed_Lord]

How to swipe both side?

[@enesdovec2676]

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

[@vishalyadav630]

Awsm

[@Dhwrwm502]

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

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

[@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 :)

[@nkzzh8135]

GOOD!!

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