Steps Written Out! 1. Enable Ruler In Figma or “Guides” with Shift R 2. Select all Carousel Components, they all should be frames 3. Drag it in the art board 4. Select the art board, unclip the content so you can see it 5. Select all of the Carousel Components 6. Hit “Option, Command, G” to add them in a frame 7. Rename the frame as “Main” PAY ATTENTION HERE 1. Select the frame with all of the carousel elements 2. Hit “Command” on your keyboard and resize the bounds of the frame to the boundaries of the carousel 3. Hit Clip Content to see the other elements are now hidden 4. Add Carousel Dots 5. Add buttons, but make sure they are out of the main frames. The buttons should be listed as frames not groups in the layers panel. 6. Select all of the elements that you just created, and pull them out of the frame. YOU ARE NOW WORKING OUTSIDE OF THE MAIN FRAME 1. Now put everything into a single frame. Option, Command, G 2. Now you have a frame with all the carousel elements you need. Now we are going to create a component set because we want to create interactive variants. 1. Duplicate the frame. Hold down option and drag the frame you would like to duplicate. 2. You should now have a new frame under the one you just created, with a “2” after it. 3. Select all of the carousel elements that are in the new frame. You are going to shift them over. Do this by holding down the shift and left (which ever direction you want your carousel to go) arrow key 4. Repeat by duplicating the second frame making it into frame 3. 5. Select all the carousel elements that you want to shift over using shift and arrow key. Now you have multiple carousels representing the carousel movements. 1. Recolor Carousel Dots. 1. Select all the main big frames, then select component set. 2. Rename as carousel components 1. Go to prototyping tap 2. Select component arrow (with the over blue dot) drag it over to the frame you want it to go to aka frame 2 3. It should say “On Tap” or “On Click”, Smart Animate, Ease out, 600ms 4. Do this will all of the arrow components 5. For the arrows (first and last) that go no where- make them have a pass through (opacity) of 0% Now our component is ready 1. Go to the asset tab 2. Your Carousel Component is ready, drag in onto the art board. 3. Now see what it looks like using your prototyping tab (play button) Done!
hello, when i dragged in the component into homepage, instead of showing default carousel component 1 only, it displayed all carousel component. how do i fix this?
Is it possible to make such a carousel endless? Everywhere I was looking endless carousels have only one foto on the screen at the same time usually. I want to make it cycle after the last page. When I do it my way it has awkward animation coming back to the first foto. Have no idea ho to make it smooth and still not create 100 new frames but leave it as a component
Not working well enough. As I'm dragging the carousel from the assets panel all the variants are getting included as well. But in your case, it's just the first variant as you pull the component from the assets panel. Would you mind letting me know how to get rid of it.
Hey I lost you at 10:49 once you have finished all the components, the final prototype was already there in assest automatically or it was added by you? I didn't quite understand that.. great video!! very helpful:)
Last week I tried to do it with some assets I alerady have here but it didn't work. Today I started from scratch and it worked. The problem was probably some aditional prototype interactions between the images, inside carousel main frame. Thanks for the tutorial
@@AkashYadavUX Checked again and it wasn't working because Smart Animate didn't identify all 3 elements as the same. Copying and pasting solved it. Once again, thank you
It's good but how to design quality cards, like it looks proffessional? I will make a ss of the video of the part I will catch what colours you have used on the assets?
very informative video question - in the interactive carousel there are buttons SHOW ALL can we prototype those buttons individually to work when we tap and jumps to next screens
i wanna ask , when i compile frame to main frame, then i resize the frame to use clip content, why the other frame inside frame is moving to center all..
I want to say thank you for an amazing video Akash, but my design had a small hitch. I followed all your instructions but I noticed it’s just the scrolling button that is in my assets and I seem to not understand why?
![How to build a fancy Scroll/ carousel interaction in Figma [Sneaker app]](http://i.ytimg.com/vi/9cVSZpJimk8/mqdefault.jpg)
Steps Written Out!
1. Enable Ruler In Figma or “Guides” with Shift R
2. Select all Carousel Components, they all should be frames
3. Drag it in the art board
4. Select the art board, unclip the content so you can see it
5. Select all of the Carousel Components
6. Hit “Option, Command, G” to add them in a frame
7. Rename the frame as “Main”
PAY ATTENTION HERE
1. Select the frame with all of the carousel elements
2. Hit “Command” on your keyboard and resize the bounds of the frame to the boundaries of the carousel
3. Hit Clip Content to see the other elements are now hidden
4. Add Carousel Dots
5. Add buttons, but make sure they are out of the main frames. The buttons should be listed as frames not groups in the layers panel.
6. Select all of the elements that you just created, and pull them out of the frame.
YOU ARE NOW WORKING OUTSIDE OF THE MAIN FRAME
1. Now put everything into a single frame. Option, Command, G
2. Now you have a frame with all the carousel elements you need.
Now we are going to create a component set because we want to create interactive variants.
1. Duplicate the frame. Hold down option and drag the frame you would like to duplicate.
2. You should now have a new frame under the one you just created, with a “2” after it.
3. Select all of the carousel elements that are in the new frame. You are going to shift them over. Do this by holding down the shift and left (which ever direction you want your carousel to go) arrow key
4. Repeat by duplicating the second frame making it into frame 3.
5. Select all the carousel elements that you want to shift over using shift and arrow key.
Now you have multiple carousels representing the carousel movements.
1. Recolor Carousel Dots.
1. Select all the main big frames, then select component set.
2. Rename as carousel components
1. Go to prototyping tap
2. Select component arrow (with the over blue dot) drag it over to the frame you want it to go to aka frame 2
3. It should say “On Tap” or “On Click”, Smart Animate, Ease out, 600ms
4. Do this will all of the arrow components
5. For the arrows (first and last) that go no where- make them have a pass through (opacity) of 0%
Now our component is ready
1. Go to the asset tab
2. Your Carousel Component is ready, drag in onto the art board.
3. Now see what it looks like using your prototyping tab (play button)
Done!
Thank you Nicole, huge help!!!!
Thank you so much for the steps, and Mr. Akash for uploading the video.
i cant find option and command button
Finally, I'm not freaking out anymore, everything was so easy with you, so clear and neat, thank you so much for your work!
YOU REALLY REALLY SAVE MY LIFE !! for those who confused about this "option command G" that is "Ctrl + Alt + G "on Windows
This is used to group, right?
@@aneela3586sorry for late reply it create frame selected objects
@@fernnyplovecatthank you. It would be useful for my test tomorrow 😊
The explanation was exceptionally clear. I look forward to seeing more animations. Thank you!
I put your first scroll lesson to practice on my prototype. Thank you for being clear and making the process easy to understand.
best video
This was a life saver. It took me a little while to figure out but your video really helped. YAY!
Just have to say thanks, again! This is the 2nd time this video has helped me out. Much appreciated
Thank you so much for taking the time to make this video. It worked out really good for me.
I have been searching for this tutorial for AGES, thank you so much for this!!
Je t'aime indien inconnue tes tutos sont incroyable
cœur sur toi et toute ta descendance
Hi Akash, I just want to thank you for all your videos. Been learning a lot from them, pls keep uploading more tutorials and have a great 2023!
Will do 😇
You are simply superb brother very calm and slow enough so that I did the carousel correctly thanks brother ❣️
Glad it helped
Thank you so much. I've been looking for this carousel with click buttons and here I found it!
You are amazing! This was waaaaaay easier than other videos I have seen💕
SAW UR OTHER VIDEOS TOO, U MAKE LEARNING FIGMA SO EASY.
Akash you are a life saver 🙏🏻❣️ thank you so much and please keep teaching us your tutorials are simple and easy to understand...
Love the way you say Carousel. Great job bro.
Thanks! 😃
fantastic tutorial. this is how I build all my carousels now
😄
excellent tutorial!I kinda figured it out at the 9 minute mark
Perfectly Explained! Thanks For Tutorial. ❤
Thank you so much for your explanation! It was very useful for an university proyect! 🤗🤗🤗🤗🤗🤗
hello, when i dragged in the component into homepage, instead of showing default carousel component 1 only, it displayed all carousel component. how do i fix this?
You saved me! Thank you SO much! ✨
first time i make this i failed but secon time with a new component i succes thankyouu so much this so helpfullll!!!!
Hi Akash, This is a very nice and comprehensive video. Thank you and welldone🥰
My compliment!! You explain really well. Thank you!
thank you, I've been looking for this
THANKS FOR SUCH AN AMAZING TUTORIAL
Take care with the frames and layers, follow it exactly to get the animation to work
Is it possible to make such a carousel endless? Everywhere I was looking endless carousels have only one foto on the screen at the same time usually. I want to make it cycle after the last page. When I do it my way it has awkward animation coming back to the first foto. Have no idea ho to make it smooth and still not create 100 new frames but leave it as a component
Amazing content...nicely explained. You earned a sub!
Need this type of videos 🙏🙏🙏🙏
It was great, thanks. Just made my first carousel, I needed it for my project
Wohooo glad it helped🤓🤓
Exactly what i was looking for. Awesome tutorial. Easy to follow along with. Thanks a lot!
Amazing! Thank you for the tutorial brother.
My pleasure!
This video was so easy to follow thank you so much!
Thank you for the knowledge shared, G-d bless you.
Thank you Akash! Really helpful and great explained!
Thank you so much for this video..Explanatory and detailed
You saved my life! Thanks a lot for the tutorial! 💚
this video helps me a lot. Thank you so much.
Great explanation! Thank you very much for sharing!
You're very welcome!
very helpful.....thnak you sir🙏
Awesome Video!!, Got it on my second attempt
so easy to follow along! thank you!
Thank you! You explain really so good!
Many thanks 👍 Greetings from Russia 💓
Not working well enough.
As I'm dragging the carousel from the assets panel all the variants are getting included as well. But in your case, it's just the first variant as you pull the component from the assets panel. Would you mind letting me know how to get rid of it.
Yup same issue here with no resolve that I could find.
Perfect tutorial!!!! Thanks you.
Thank you very much, your tutorial was excellent.
thank you so much, you really helped me!!
Muchas Gracias duré como 3 Dias para poder entender pero lo Logré!
🤞🤛
Very Nicely Explained!!
Amazing tutorial, very clean & crisp instructions!! 💯
Lovely stuff! Nice and clear.
so helpful, thank you! This was very satisfying to make.
To take this another step, how would you make it so you can hover over or click on one of the images for an action?
Thank you! Worked perfectly.
Awesome tutorial! Clear and pretty straightforward
I've create a component set but it's not visible on the assets
the carousel frame component doesnt move to the left when you select and tap left button
please help
great tutorial you've got yourself a subscriber
Well explained! Thank you from Gemany! :)
You did it perfect, thank you!
thank you, very clear!! worked out
Great tutorial. I watched 2 others before yours and yours was easy to follow along with.
Worked perfectly. Thanks!
Amazing and helpful video. Thanks
Hey I lost you at 10:49 once you have finished all the components, the final prototype was already there in assest automatically or it was added by you? I didn't quite understand that.. great video!! very helpful:)
since it has become asset as component, using asset will make it's child component carrying all property of master components.
very good, sir, that what i was looking for !
😇
tq bro u have solved my headache ❤
Amazing! Thank you Akash!
Exactly what i was looking for 🎉❤
Thank you brh for the informative video ❤
Last week I tried to do it with some assets I alerady have here but it didn't work. Today I started from scratch and it worked.
The problem was probably some aditional prototype interactions between the images, inside carousel main frame.
Thanks for the tutorial
Glad it helped Gustavo :)
@@AkashYadavUX Checked again and it wasn't working because Smart Animate didn't identify all 3 elements as the same. Copying and pasting solved it. Once again, thank you
Great tutorial. Thank you!
I am a beginner of Figma and this video really helped me.. Thank you so much :)
it was great
but i have a question
can you tell me if we should add auto layout for them or no????
Thank you for this tutorial 🙏🏼
Thank you so much amazing tutorial !
This is just what I needed :) Thank you for this very clear tutorial!
1: 40 should we group them or add auto layout to create carousal element
Please I'm struggling to move the items in the frame. Did you frame the pictures individually?
yes pictures are framed individually and then put up in a bigger frame. To move inside elements use the arrows keys with shift (for faster movements).
Thank you so much! 🙏
Thank you so much! Your video is very helpful
I did what you told me, but it's not working. When I export the asset from the asset library, it is not clicking to the next flows. Why is that?
Great tutorial, thank you very much!!!
It's good but how to design quality cards, like it looks proffessional? I will make a ss of the video of the part I will catch what colours you have used on the assets?
very informative video
question - in the interactive carousel there are buttons SHOW ALL can we prototype those buttons individually to work when we tap and jumps to next screens
NICE WORK, THANKS FOR SHARING.
Easy and too the point, Thanks !
Thanks for the help maza aaya😊
Thank you for sharing this tip
Thank you for this man
i wanna ask , when i compile frame to main frame, then i resize the frame to use clip content, why the other frame inside frame is moving to center all..
please could you share the figma file?, so that i can play and learn
At 7:07, when I move my sliders over in Figma , the buttons disappear when I move the image I want the second slider to appear. Why?
Hi Akash Yadav, Thanks for these videos, I'm learning a lot from your channel!
@10.16 Why did you hide the button instead of deleting it?
I gave it a 0% pass through from the right panel. That makes the opacity zero for anything and it will not be visible without deleting it :)
I want to say thank you for an amazing video Akash, but my design had a small hitch. I followed all your instructions but I noticed it’s just the scrolling button that is in my assets and I seem to not understand why?
Thanks so much for this video ...it's really helpful 💯
Awesome 👍🏼
Thanks!