Create Any Carousel in Figma (Beginner Tutorial)
Vložit
- čas přidán 2. 08. 2024
- 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
Thank you so much :) When I search for some tutorials wanna know, your videos are always there!
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
happy they help, Luana!!
broooo thank you.. so educating I love it ❤ what a great content
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😊
thank you so much for the suggestion, my friend!
Thank you
Jazaakumllahu khoiyr
no worries!! 😃
thank you
it is easy to learn and make XD
that's great to hear 🤩
This was useful, but I wish you showed how to create them using components, not different desktop frames.
happy it was useful at least!!
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
Thanks for the great tutorials is there a way we can do this as a component? Specifically the second Carousel option?
I have been searching for this but idk what they are called .... I found those on midjourney 🎉🎉❤luv u bro😊
thank you for the support, my friend 💜
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.
awsm😍😍😍
thank you!! 🤩
thx
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
I think this is doable only for things like tricks and animations. Doing something like this for UX beginners will take ages
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_
thank you!
happy to be of help!! 😃
Thank you for the great content. I just don't know how to get the exercise file!
here it is 😃:
www.figma.com/file/GSDvwbxZ69GfdPP6iCOalP/Carousels-in-Figma?type=design&node-id=0%3A1&t=v3b3Wm6zrqnwpQUb-1
Hello, cool tutorial thanks ! How do you have bounce effect at the end off the slider please ?
should work if you follow the tutorial step by step ☺️
You're a f***ing G. Thank you.
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
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
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!
Youre a great tutor 🎉❤ that’s all I can say … just a remake of the animation with the movie trailer app: 😢 stranger things
thank you so much 💜
I want to add this carousel I made to my app Home Screen, how do you do that?
Awsomeeeee
woohoo!! thanks!
How do you create multiple fancy on drag carousels on one screen?
Please make it for framer too
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!
I am having the same issue
@@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: czcams.com/video/oE0v0wfX2AQ/video.htmlsi=-hcXtRTVZx9-jwLL&t=488
can you do that carouse you showed in the beginning video. That spiral like carousel
maybe for a future video? let's see what the future holds!!
I love it when i have to watch a different tutorial just to follow along with this one. L
being dumb must suck
@@loopzz5526 not really but having my time wasted does
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?
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! 🙏
@@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.
@@TolaFJB Can you help me acheive the same please?
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: czcams.com/video/oE0v0wfX2AQ/video.htmlsi=-hcXtRTVZx9-jwLL&t=488
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 ?😊
I'm afraid that's not possible... (as far as I know) 😩
Is there anyway to do the exact same thing, except with a right and left arrow key?
yes! you'd just pick "key/gamepad" instead of "on click" 🥳
Thanks for this, what's the bottom blur for?
just for the aesthetics 🙌
okayyy bae
hopefully it was helpful!!
Question: Is there's a difference of using a frame instead of using rectangle that has image on it?
I think it gets choppy, and it would be harder to edit
Hello thanks for this tutorials. About the figma file, the link is not here lol
now it is.. sorry 😅
www.figma.com/file/GSDvwbxZ69GfdPP6iCOalP/Carousels-in-Figma?type=design&node-id=0%3A1&t=v3b3Wm6zrqnwpQUb-1
@@TimGabe no problème, thanks for your works ,✌️💥
hello tim gabe
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
not sure what the issue is there unless i see the project, sorry my friend!
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
not sure what you mean, my friend
Why are your eyes closed? 8:53? xD nice tut tho!
Where can I find the download link?
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
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?
hmm.. hard to say without seeing your file. sorry!
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
hola carlos!!