Create Any Carousel in Figma (Beginner Tutorial)

Поділитися
Вставка
  • Опубліковано 29 вер 2024

КОМЕНТАРІ • 94

  • @jumfg2008
    @jumfg2008 9 місяців тому +7

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

    • @TimGabe
      @TimGabe  9 місяців тому +1

      happy it was useful at least!!

    • @jumfg2008
      @jumfg2008 9 місяців тому +1

      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

  • @k.kaiserahmed8013
    @k.kaiserahmed8013 Рік тому +1

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

    • @TimGabe
      @TimGabe  Рік тому +1

      thank you for the support, my friend 💜

  • @phucho3837
    @phucho3837 10 місяців тому +1

    thank you
    it is easy to learn and make XD

    • @TimGabe
      @TimGabe  10 місяців тому

      that's great to hear 🤩

  • @dimitrikyriacou5927
    @dimitrikyriacou5927 9 місяців тому

    okayyy bae

    • @TimGabe
      @TimGabe  9 місяців тому

      hopefully it was helpful!!

  • @nickrig2383
    @nickrig2383 5 місяців тому

    isn't it more easy to adjust components?

  • @deliciouspizza4405
    @deliciouspizza4405 11 місяців тому +10

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

    • @TimGabe
      @TimGabe  11 місяців тому +1

      that's great to hear, friend!

  • @moonartist94
    @moonartist94 5 місяців тому +2

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

  • @sakibhassan1080
    @sakibhassan1080 Рік тому +6

    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!

  • @JustinRemedios
    @JustinRemedios Місяць тому +1

    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
      @JustinRemedios Місяць тому

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

    • @emilyxu1968
      @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
      @JustinRemedios Місяць тому

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

  • @Optable
    @Optable Рік тому +3

    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" 🥳

  • @clotildadaniels6453
    @clotildadaniels6453 Рік тому +2

    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  Рік тому +1

      thank you so much 💜

  • @luanajimenez8396
    @luanajimenez8396 Рік тому +4

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

    • @TimGabe
      @TimGabe  Рік тому

      happy they help, Luana!!

  • @zinzaclickerzinzaclicker
    @zinzaclickerzinzaclicker Рік тому +2

    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  Рік тому +1

      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!

  • @Royh224
    @Royh224 4 місяці тому +1

    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 3 місяці тому

      I am having the same issue

    • @sibylle_
      @sibylle_ 2 місяці тому

      ​@@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: ua-cam.com/video/oE0v0wfX2AQ/v-deo.htmlsi=-hcXtRTVZx9-jwLL&t=488

  • @RazexFX
    @RazexFX 2 місяці тому

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

  • @sadaffarsa6058
    @sadaffarsa6058 Рік тому +2

    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

  • @klokkerholm1993
    @klokkerholm1993 Рік тому +1

    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  Рік тому +1

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

  • @nobody-my5yv
    @nobody-my5yv 15 днів тому

    ok then how can i add it to my frame?

  • @steelmeshh
    @steelmeshh Рік тому +3

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

    • @TimGabe
      @TimGabe  11 місяців тому

      thank you for the support, my friend 💜

  • @lastspoil5547
    @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?

  • @May_Moon18
    @May_Moon18 20 днів тому

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

  • @mustaphaabdullahi7951
    @mustaphaabdullahi7951 Рік тому +1

    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 Рік тому

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

  • @NigarNaghdiyeva
    @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!

  • @ebukaezeanya512
    @ebukaezeanya512 Рік тому +1

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

    • @TimGabe
      @TimGabe  Рік тому

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

  • @danfox1360
    @danfox1360 6 місяців тому

    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_

  • @playthrugames
    @playthrugames 5 місяців тому

    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.

  • @lancelegoff8770
    @lancelegoff8770 2 місяці тому

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

  • @aleuz7804
    @aleuz7804 10 місяців тому

    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  10 місяців тому

      not sure what you mean, my friend

  • @jerangel1
    @jerangel1 10 місяців тому +1

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

    • @TimGabe
      @TimGabe  10 місяців тому +1

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

  • @kamipixeltips9416
    @kamipixeltips9416 9 місяців тому +2

    Thank you
    Jazaakumllahu khoiyr

    • @TimGabe
      @TimGabe  9 місяців тому

      no worries!! 😃

  • @polyskill9194
    @polyskill9194 Рік тому +1

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

    • @TimGabe
      @TimGabe  Рік тому +1

      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 ,✌️💥

  • @carlosfagre4522
    @carlosfagre4522 Рік тому +1

    me perdiste
    y perdiste un subscriptor
    pt

    • @TimGabe
      @TimGabe  11 місяців тому

      hola carlos!!

  • @nicoleb4755
    @nicoleb4755 7 місяців тому

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

  • @OLOGY009
    @OLOGY009 6 місяців тому

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

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

  • @Vaishali-t4z
    @Vaishali-t4z 9 місяців тому

    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  9 місяців тому

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

  • @attunery
    @attunery 6 місяців тому

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

  • @ana.ev0
    @ana.ev0 7 місяців тому

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

  • @champolot
    @champolot 7 місяців тому

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

    • @SHePeRD220
      @SHePeRD220 6 місяців тому

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

  • @RealMehedi
    @RealMehedi Рік тому

    Please make it for framer too

  • @harshsrivastava8248
    @harshsrivastava8248 Рік тому

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

    • @TimGabe
      @TimGabe  Рік тому +1

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

  • @AbuAnas-f9r
    @AbuAnas-f9r 9 місяців тому

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

    • @TimGabe
      @TimGabe  9 місяців тому

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

    • @patricklay
      @patricklay 5 місяців тому

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

  • @addibro4284
    @addibro4284 5 місяців тому

    hello tim gabe

  • @paramvvaid
    @paramvvaid 9 місяців тому

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

    • @TimGabe
      @TimGabe  9 місяців тому

      just for the aesthetics 🙌

  • @t.schaui
    @t.schaui 3 місяці тому

    thx

  • @carterjohnston2670
    @carterjohnston2670 5 місяців тому

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

  • @shashibhushan3596
    @shashibhushan3596 Рік тому +1

    awsm😍😍😍

  • @ibrokersbg
    @ibrokersbg 6 місяців тому

    Where can I find the download link?

    • @SHePeRD220
      @SHePeRD220 6 місяців тому

      Install extension

  • @TolaFJB
    @TolaFJB 9 місяців тому

    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  9 місяців тому

      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 9 місяців тому +1

      @@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 5 місяців тому

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

    • @sibylle_
      @sibylle_ 2 місяці тому

      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: ua-cam.com/video/oE0v0wfX2AQ/v-deo.htmlsi=-hcXtRTVZx9-jwLL&t=488

  • @Sirisirizadeh
    @Sirisirizadeh 9 місяців тому

    Awsomeeeee

    • @TimGabe
      @TimGabe  9 місяців тому

      woohoo!! thanks!

  • @adrianatellez8443
    @adrianatellez8443 9 місяців тому

    thank you!

    • @TimGabe
      @TimGabe  9 місяців тому

      happy to be of help!! 😃