Create Any Carousel in Figma (Beginner Tutorial)

[@deliciouspizza4405]

Thank you so much :) When I search for some tutorials wanna know, your videos are always there!

[@TimGabe]

that's great to hear, friend!

[@NigarNaghdiyeva]

Thank you so so much for your videos!!! Been looking for cool Figma animation tutorials for a while. Most of those I can find on the internet are basic/boring, but your channel is like a breath of fresh air! Thank you for your work!

[@ana.ev0]

i'm not usually leaving any comments on any video here, but THANKS A LOT for a good and easy-to-follow explanation

[@May_Moon18]

Thank you!! Your tutorial was really helpful :) I just converted those frames into a component and it's ready to use.

[@luanajimenez8396]

Thank youu, your tutorials are really easy to understand you help me a lot, new suscriber

[@TimGabe]

happy they help, Luana!!

[@sakibhassan1080]

I love your detailed tutorial video this helped me grow in design. please make details video on Color System😊

[@TimGabe]

thank you so much for the suggestion, my friend!

[@steelmeshh]

broooo thank you.. so educating I love it ❤ what a great content

[@TimGabe]

thank you for the support, my friend 💜

[@jumfg2008]

This was useful, but I wish you showed how to create them using components, not different desktop frames.

[@TimGabe]

happy it was useful at least!!

[@jumfg2008]

Yeah, I ended up using the simple one and it did a good job. I'll subscribe and keep an eye for future tutorials. Thanks,@@TimGabe

[@Royh224]

Hi Tim, thank you for making this creative video of a carouse in Figma, it seems I was able to follow your instructions and made the design to work but how can I add it into my design? I would appreciate it, I just started using Figma. Thanks!

[@mariakrati5154]

I am having the same issue

[@sibylle_]

​@@mariakrati5154 Create a component set and insert the component in your design from the assets panel. In this video @AkashYadavUX explains how to do that, starting at 8:08: kzbin.info/www/bejne/pXaTp2Otm71ld7Msi=-hcXtRTVZx9-jwLL&t=488

[@kamipixeltips9416]

Thank you Jazaakumllahu khoiyr

[@TimGabe]

no worries!! 😃

[@lancelegoff8770]

Thanks for the great tutorials is there a way we can do this as a component? Specifically the second Carousel option?

[@moonartist94]

I want to add this carousel I made to my app Home Screen, how do you do that?

[@lastspoil5547]

If I am building a e-commerce website design with a carousel on the home page, will this tutorial show me the basics to implement that carousel on the project that I’m working on?

[@k.kaiserahmed8013]

I have been searching for this but idk what they are called .... I found those on midjourney 🎉🎉❤luv u bro😊

[@TimGabe]

thank you for the support, my friend 💜

[@Optable]

Is there anyway to do the exact same thing, except with a right and left arrow key?

[@TimGabe]

yes! you'd just pick "key/gamepad" instead of "on click" 🥳

[@danfox1360]

This video was well explained and really helpful. I have been able to create the carousels as described. I have, however, a small problem. When scrolling the prototype the page jumps back to the top. It otherwise works. Any idea where i#m going wrong_

[@zinzaclickerzinzaclicker]

Hello, my friend, thank you for the great content. This is an inquiry, if you allow me - why should I design a landing page or sales Funnel on figma first and not do the design through the page builder directly? Any other platform.. Thank you very much

[@TimGabe]

for me, Figma is the best tool for ultimate creative freedom when it comes to UI/UX design. however, if you're super comfortable using a builder instead, that's totally fine too!

[@sadaffarsa6058]

Thank you for the great content. I just don't know how to get the exercise file!

[@TimGabe]

here it is 😃: www.figma.com/file/GSDvwbxZ69GfdPP6iCOalP/Carousels-in-Figma?type=design&node-id=0%3A1&t=v3b3Wm6zrqnwpQUb-1

[@JustinRemedios]

For the Drag Carousel, How do you add multiple drag interactions to go from Carousel 2 to 3 if it is already linked to Desktop 1? The effect is cool, but I am not being able to add more interactions! Someone please help!!

[@JustinRemedios]

Okay I figured it out. You can add multiple Drag interactions. New to Figma here, Sorry!

[@emilyxu1968]

@@JustinRemediosHello, I was having the same issue! I am able to add multiple drag interactions to go to desktop 1 to carousel 3, but in the preview only one of the interactions happens (returning to desktop 1) no matter which direction I drag. How did you get it to work?

[@JustinRemedios]

@@emilyxu1968 hey Emily, I just saw this. Did you figure it out??

[@playthrugames]

Thank you for this video! It has been very helpful. However, I have a problem. I can't apply an auto layout to combine the 4 bases after I have auto layouted each base individually.

[@phucho3837]

thank you it is easy to learn and make XD

[@TimGabe]

that's great to hear 🤩

[@aleuz7804]

How can i put the 3 different carousels that are in the 3 destokps in just one , so it can Work in a single page(desktop) without showing 3 carousels

[@TimGabe]

not sure what you mean, my friend

[@jerangel1]

Hello, cool tutorial thanks ! How do you have bounce effect at the end off the slider please ?

[@TimGabe]

should work if you follow the tutorial step by step ☺️

[@klokkerholm1993]

Hi do you know i figma if is possible to make variables for Colors so my primary color had shades and then when updateing primary color it updates all the shades ?😊

[@TimGabe]

I'm afraid that's not possible... (as far as I know) 😩

[@Vaishali-t4z]

on the drag carousel, the second image on carousel i can't change the vertical padding into 56*2 .i don't know how to change each measurement

[@TimGabe]

not sure what the issue is there unless i see the project, sorry my friend!

[@clotildadaniels6453]

Youre a great tutor 🎉❤ that’s all I can say … just a remake of the animation with the movie trailer app: 😢 stranger things

[@TimGabe]

thank you so much 💜

[@nobody-my5yv]

ok then how can i add it to my frame?

[@nicoleb4755]

How do you create multiple fancy on drag carousels on one screen?

[@ebukaezeanya512]

can you do that carouse you showed in the beginning video. That spiral like carousel

[@TimGabe]

maybe for a future video? let's see what the future holds!!

[@polyskill9194]

Hello thanks for this tutorials. About the figma file, the link is not here lol

[@TimGabe]

now it is.. sorry 😅 www.figma.com/file/GSDvwbxZ69GfdPP6iCOalP/Carousels-in-Figma?type=design&node-id=0%3A1&t=v3b3Wm6zrqnwpQUb-1

[@polyskill9194]

@@TimGabe no problème, thanks for your works ,✌️💥

[@champolot]

Question: Is there's a difference of using a frame instead of using rectangle that has image on it?

[@SHePeRD220]

I think it gets choppy, and it would be harder to edit

[@TolaFJB]

Hi Tim! I love your work and thanks for sharing. So I created this for mobile and now I’m totally confused on how to implement this in one of my designs since the carousels are not in a component set..any suggestions?

[@TimGabe]

thanks a lot my friend!! hard to explain through text, and i don't have a tutorial with components for now, but maybe something for the future! 🙏

[@TolaFJB]

@@TimGabe ah no problem man, I think I figured it out already. Would have loved to send what it looks like to you if there was a way tho.

[@NeelSingh-uj4xy]

@@TolaFJB Can you help me acheive the same please?

[@sibylle_]

Create a component set and insert the component in your design from the assets panel. In this video @AkashYadavUX explains how to do that, starting at 8:08: kzbin.info/www/bejne/pXaTp2Otm71ld7Msi=-hcXtRTVZx9-jwLL&t=488

[@mustaphaabdullahi7951]

Please I love what you do you tutorial style is wow Please can you do a details video on introduction to UX for beginners step by step. like the process in UX

[@AbdallahQuqas]

I think this is doable only for things like tricks and animations. Doing something like this for UX beginners will take ages

[@paramvvaid]

Thanks for this, what's the bottom blur for?

[@TimGabe]

just for the aesthetics 🙌

[@lushbugmel]

Nice tutorial. BUT wait until the client sees how much they will get billed for the fancy carousel/slider by the developer to write the code for it

[@carterjohnston2670]

I love it when i have to watch a different tutorial just to follow along with this one. L

[@okaybossiamonyoutubeakkskd]

being dumb must suck

[@retrakk1054]

@@okaybossiamonyoutubeakkskd not really but having my time wasted does

[@AbuAnas-f9r]

ive repeated every move but my animation looks like fading in instead of scrolling from side. Why?

[@TimGabe]

hmm.. hard to say without seeing your file. sorry!

[@patricklay]

try change the setting in prototype, dissolve into smart animate! hope it works :D

[@attunery]

You're a f***ing G. Thank you.

[@ibrokersbg]

Where can I find the download link?

[@SHePeRD220]

Install extension

[@harshsrivastava8248]

u didnt show the smart animation settings, without that i am not able to replicate the scrolling part

[@TimGabe]

that's always a case of experimentation to nail it down perfectly, I'd suggest you just play around a looot!

[@RealMehedi]

Please make it for framer too

[@shashibhushan3596]

awsm😍😍😍

[@TimGabe]

thank you!! 🤩

[@nickrig2383]

isn't it more easy to adjust components?

[@Sirisirizadeh]

Awsomeeeee

[@TimGabe]

woohoo!! thanks!

[@t.schaui]

thx

[@addibro4284]

hello tim gabe

[@dimitrikyriacou5927]

okayyy bae

[@TimGabe]

hopefully it was helpful!!

[@RazexFX]

Why are your eyes closed? 8:53? xD nice tut tho!

[@OLOGY009]

doesnt explain how to use when designing only how to do it

[@carlosfagre4522]

me perdiste y perdiste un subscriptor pt

[@TimGabe]

hola carlos!!

[@adrianatellez8443]

thank you!

[@TimGabe]

happy to be of help!! 😃