Create Any Carousel in Figma (Beginner Tutorial)

Рет қаралды 109,653

Күн бұрын

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-c...
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

Пікірлер: 85

@deliciouspizza4405 8 ай бұрын

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!

@anastasiazakirova8091 4 ай бұрын

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

@luanajimenez8396 9 ай бұрын

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

@TimGabe 9 ай бұрын

happy they help, Luana!!

@egedepeter6038 10 ай бұрын

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

@TimGabe 9 ай бұрын

thank you for the support, my friend 💜

@kamipixeltips9416 7 ай бұрын

Thank you Jazaakumllahu khoiyr

@TimGabe 7 ай бұрын

no worries!! 😃

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

@phucho3837 8 ай бұрын

thank you it is easy to learn and make XD

@TimGabe 8 ай бұрын

that's great to hear 🤩

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

@shashibhushan3596 Жыл бұрын

awsm😍😍😍

@TimGabe Жыл бұрын

thank you!! 🤩

@b.rauschung Ай бұрын

thx

@jumfg2008 7 ай бұрын

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

@TimGabe 7 ай бұрын

happy it was useful at least!!

@jumfg2008 7 ай бұрын

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

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

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

@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

@adrianatellez8443 7 ай бұрын

thank you!

@TimGabe 7 ай бұрын

happy to be of help!! 😃

@user-ot5tp1te9l 7 ай бұрын

Awsomeeeee

@TimGabe 7 ай бұрын

woohoo!! thanks!

@attunery 4 ай бұрын

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

@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

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

@playthrugames 3 ай бұрын

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.

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

@jerangel1 8 ай бұрын

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

@TimGabe 8 ай бұрын

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

@carterjohnston2670 2 ай бұрын

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

@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 19 күн бұрын

I am having the same issue

@sibylle_ 8 күн бұрын

@@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: kzfaq.info/get/bejne/patgqZOoy76WcYU.htmlsi=-hcXtRTVZx9-jwLL&t=488

@RealMehedi Жыл бұрын

Please make it for framer too

@dimitrikyriacou5927 7 ай бұрын

okayyy bae

@TimGabe 7 ай бұрын

hopefully it was helpful!!

@ebukaezeanya512 11 ай бұрын

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

@danfox1360 3 ай бұрын

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_

@nicoleb4755 5 ай бұрын

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

@moonartist94 3 ай бұрын

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

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

@paramvvaid 7 ай бұрын

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

@TimGabe 7 ай бұрын

just for the aesthetics 🙌

@addibro4284 2 ай бұрын

hello tim gabe

@TolaFJB 7 ай бұрын

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

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

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

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

@sibylle_ 8 күн бұрын

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: kzfaq.info/get/bejne/patgqZOoy76WcYU.htmlsi=-hcXtRTVZx9-jwLL&t=488

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

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

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

@user-mn8lq7yk8i 7 ай бұрын

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

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

@aleuz7804 8 ай бұрын

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

not sure what you mean, my friend

@RazexFX 2 күн бұрын

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

@harshsrivastava8248 11 ай бұрын

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!

@ibrokersbg 4 ай бұрын

Where can I find the download link?

@SHePeRD220 3 ай бұрын

Install extension

@nickrig2383 3 ай бұрын

isn't it more easy to adjust components?

@user-wx8mz9pr8d 7 ай бұрын

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

@TimGabe 7 ай бұрын

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

@OLOGY009 4 ай бұрын

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

@carlosfagre4522 9 ай бұрын

me perdiste y perdiste un subscriptor pt

@TimGabe 9 ай бұрын

hola carlos!!