Create Any Carousel in Figma (Beginner Tutorial)

In this video we cover ALL you need to create ANY carousel in Figma. This includes clickable carousels, automatic carousels and draggable carousels - again... any kind of carousel!
🔴 Working File: timgabe.com/resources/figma-carousels
Timecodes
00:00 Intro
00:23 Creating the base
01:40 Basic Carousels
03:45 On Drag Carousels
07:28 On Click Carousels
08:49 Automatic Carousels

Пікірлер: 82

  • @deliciouspizza4405
    @deliciouspizza44058 ай бұрын

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

  • @TimGabe

    @TimGabe

    8 ай бұрын

    that's great to hear, friend!

  • @anastasiazakirova8091
    @anastasiazakirova80914 ай бұрын

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

  • @luanajimenez8396
    @luanajimenez83969 ай бұрын

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

  • @TimGabe

    @TimGabe

    9 ай бұрын

    happy they help, Luana!!

  • @egedepeter6038
    @egedepeter60389 ай бұрын

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

  • @TimGabe

    @TimGabe

    8 ай бұрын

    thank you for the support, my friend 💜

  • @sakibhassan1080
    @sakibhassan1080 Жыл бұрын

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

  • @TimGabe

    @TimGabe

    Жыл бұрын

    thank you so much for the suggestion, my friend!

  • @kamipixeltips9416
    @kamipixeltips94166 ай бұрын

    Thank you Jazaakumllahu khoiyr

  • @TimGabe

    @TimGabe

    6 ай бұрын

    no worries!! 😃

  • @playthrugames
    @playthrugames2 ай бұрын

    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
    @phucho38377 ай бұрын

    thank you it is easy to learn and make XD

  • @TimGabe

    @TimGabe

    7 ай бұрын

    that's great to hear 🤩

  • @danfox1360
    @danfox13603 ай бұрын

    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_

  • @jerangel1
    @jerangel17 ай бұрын

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

  • @TimGabe

    @TimGabe

    7 ай бұрын

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

  • @k.kaiserahmed8013
    @k.kaiserahmed8013 Жыл бұрын

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

  • @TimGabe

    @TimGabe

    Жыл бұрын

    thank you for the support, my friend 💜

  • @zinzaclickerzinzaclicker
    @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

    @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
    @sadaffarsa6058 Жыл бұрын

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

  • @TimGabe

    @TimGabe

    Жыл бұрын

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

  • @moonartist94
    @moonartist942 ай бұрын

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

  • @nicoleb4755
    @nicoleb47554 ай бұрын

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

  • @mustaphaabdullahi7951
    @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

    @AbdallahQuqas

    10 ай бұрын

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

  • @shashibhushan3596
    @shashibhushan3596 Жыл бұрын

    awsm😍😍😍

  • @TimGabe

    @TimGabe

    Жыл бұрын

    thank you!! 🤩

  • @adrianatellez8443
    @adrianatellez84436 ай бұрын

    thank you!

  • @TimGabe

    @TimGabe

    6 ай бұрын

    happy to be of help!! 😃

  • @b.rauschung
    @b.rauschung28 күн бұрын

    thx

  • @Royh224
    @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

    @mariakrati5154

    6 күн бұрын

    I am having the same issue

  • @jumfg2008
    @jumfg20086 ай бұрын

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

  • @TimGabe

    @TimGabe

    6 ай бұрын

    happy it was useful at least!!

  • @jumfg2008

    @jumfg2008

    6 ай бұрын

    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

  • @RealMehedi
    @RealMehedi Жыл бұрын

    Please make it for framer too

  • @clotildadaniels6453
    @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

    @TimGabe

    Жыл бұрын

    thank you so much 💜

  • @ebukaezeanya512
    @ebukaezeanya51210 ай бұрын

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

  • @TimGabe

    @TimGabe

    10 ай бұрын

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

  • @paramvvaid
    @paramvvaid6 ай бұрын

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

  • @TimGabe

    @TimGabe

    6 ай бұрын

    just for the aesthetics 🙌

  • @klokkerholm1993
    @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

    @TimGabe

    Жыл бұрын

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

  • @TolaFJB
    @TolaFJB6 ай бұрын

    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

    @TimGabe

    6 ай бұрын

    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

    @TolaFJB

    6 ай бұрын

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

    @NeelSingh-uj4xy

    2 ай бұрын

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

  • @Optable
    @Optable Жыл бұрын

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

  • @TimGabe

    @TimGabe

    Жыл бұрын

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

  • @user-ot5tp1te9l
    @user-ot5tp1te9l6 ай бұрын

    Awsomeeeee

  • @TimGabe

    @TimGabe

    6 ай бұрын

    woohoo!! thanks!

  • @lushbugmel
    @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

  • @attunery
    @attunery3 ай бұрын

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

  • @champolot
    @champolot4 ай бұрын

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

  • @SHePeRD220

    @SHePeRD220

    3 ай бұрын

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

  • @aleuz7804
    @aleuz78047 ай бұрын

    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

    @TimGabe

    7 ай бұрын

    not sure what you mean, my friend

  • @user-mn8lq7yk8i
    @user-mn8lq7yk8i6 ай бұрын

    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

    @TimGabe

    6 ай бұрын

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

  • @addibro4284
    @addibro42842 ай бұрын

    hello tim gabe

  • @polyskill9194
    @polyskill9194 Жыл бұрын

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

  • @TimGabe

    @TimGabe

    Жыл бұрын

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

  • @polyskill9194

    @polyskill9194

    Жыл бұрын

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

  • @carterjohnston2670
    @carterjohnston26702 ай бұрын

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

  • @loopzz5526

    @loopzz5526

    Ай бұрын

    being dumb must suck

  • @retrakk1054

    @retrakk1054

    Ай бұрын

    @@loopzz5526 not really but having my time wasted does

  • @dimitrikyriacou5927
    @dimitrikyriacou59276 ай бұрын

    okayyy bae

  • @TimGabe

    @TimGabe

    6 ай бұрын

    hopefully it was helpful!!

  • @ibrokersbg
    @ibrokersbg3 ай бұрын

    Where can I find the download link?

  • @SHePeRD220

    @SHePeRD220

    3 ай бұрын

    Install extension

  • @nickrig2383
    @nickrig23832 ай бұрын

    isn't it more easy to adjust components?

  • @harshsrivastava8248
    @harshsrivastava824811 ай бұрын

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

  • @TimGabe

    @TimGabe

    11 ай бұрын

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

  • @user-wx8mz9pr8d
    @user-wx8mz9pr8d6 ай бұрын

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

  • @TimGabe

    @TimGabe

    6 ай бұрын

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

  • @patricklay

    @patricklay

    2 ай бұрын

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

  • @OLOGY009
    @OLOGY0093 ай бұрын

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

  • @carlosfagre4522
    @carlosfagre45229 ай бұрын

    me perdiste y perdiste un subscriptor pt

  • @TimGabe

    @TimGabe

    8 ай бұрын

    hola carlos!!