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
Thank you so much :) When I search for some tutorials wanna know, your videos are always there!
@TimGabe
8 ай бұрын
that's great to hear, friend!
i'm not usually leaving any comments on any video here, but THANKS A LOT for a good and easy-to-follow explanation
Thank youu, your tutorials are really easy to understand you help me a lot, new suscriber
@TimGabe
9 ай бұрын
happy they help, Luana!!
broooo thank you.. so educating I love it ❤ what a great content
@TimGabe
8 ай бұрын
thank you for the support, my friend 💜
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!
Thank you Jazaakumllahu khoiyr
@TimGabe
6 ай бұрын
no worries!! 😃
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.
thank you it is easy to learn and make XD
@TimGabe
7 ай бұрын
that's great to hear 🤩
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_
Hello, cool tutorial thanks ! How do you have bounce effect at the end off the slider please ?
@TimGabe
7 ай бұрын
should work if you follow the tutorial step by step ☺️
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 💜
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!
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
I want to add this carousel I made to my app Home Screen, how do you do that?
How do you create multiple fancy on drag carousels on one screen?
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
10 ай бұрын
I think this is doable only for things like tricks and animations. Doing something like this for UX beginners will take ages
awsm😍😍😍
@TimGabe
Жыл бұрын
thank you!! 🤩
thank you!
@TimGabe
6 ай бұрын
happy to be of help!! 😃
thx
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
6 күн бұрын
I am having the same issue
This was useful, but I wish you showed how to create them using components, not different desktop frames.
@TimGabe
6 ай бұрын
happy it was useful at least!!
@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
Please make it for framer too
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 💜
can you do that carouse you showed in the beginning video. That spiral like carousel
@TimGabe
10 ай бұрын
maybe for a future video? let's see what the future holds!!
Thanks for this, what's the bottom blur for?
@TimGabe
6 ай бұрын
just for the aesthetics 🙌
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) 😩
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
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
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
2 ай бұрын
@@TolaFJB Can you help me acheive the same please?
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" 🥳
Awsomeeeee
@TimGabe
6 ай бұрын
woohoo!! thanks!
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
You're a f***ing G. Thank you.
Question: Is there's a difference of using a frame instead of using rectangle that has image on it?
@SHePeRD220
3 ай бұрын
I think it gets choppy, and it would be harder to edit
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
7 ай бұрын
not sure what you mean, my friend
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
6 ай бұрын
not sure what the issue is there unless i see the project, sorry my friend!
hello tim gabe
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 ,✌️💥
I love it when i have to watch a different tutorial just to follow along with this one. L
@loopzz5526
Ай бұрын
being dumb must suck
@retrakk1054
Ай бұрын
@@loopzz5526 not really but having my time wasted does
okayyy bae
@TimGabe
6 ай бұрын
hopefully it was helpful!!
Where can I find the download link?
@SHePeRD220
3 ай бұрын
Install extension
isn't it more easy to adjust components?
u didnt show the smart animation settings, without that i am not able to replicate the scrolling part
@TimGabe
11 ай бұрын
that's always a case of experimentation to nail it down perfectly, I'd suggest you just play around a looot!
ive repeated every move but my animation looks like fading in instead of scrolling from side. Why?
@TimGabe
6 ай бұрын
hmm.. hard to say without seeing your file. sorry!
@patricklay
2 ай бұрын
try change the setting in prototype, dissolve into smart animate! hope it works :D
doesnt explain how to use when designing only how to do it
me perdiste y perdiste un subscriptor pt
@TimGabe
8 ай бұрын
hola carlos!!