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!
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:)
When I tried to move my elements in the frame to left, it didn't work. And I followed exactly every step and action you make but I have this problem that does not allow me to proceed. What could be the problem?
I had this problem too, and it had me stumped for a long while. And I figured out a few things, they may or may not be applicable to you? 1. I somehow kept ending up with multiple nested frames, keeping them as simple as possible is important 2. You can't have any padding on the "Parent" frame (the one that clips the images and determines your bounding box. If there's padding on it, even if it's zero, it won't allow the images to move past the bounding edge of that padding. So make sure your frame is a hashtag icon, not the three bars which indicate there are alignment properties on the frame.
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
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?
I added mouse hover along-with this but the problem is half of the button is inside the picture, and so hovering on the inner half of the button is causing the hover animation, how do I separate the button from the hover animation? Was I able to explain the problem?
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..
how do you get them to move faster to the left ? i press the left key but it goes extremely slow and spend so much time doing this. Thank you for this vid!!!!
Hello Akash sir 🔥 once again a really beneficial video , but their's a small request to make , as i observed you used some short cut keys , just like that , can you kindly help us to know some short cut keys which you would recommed for every just starting Designer's ☺️ Thank you 💫
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?
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.
kinda bummed I wasted time trying to step by step do this and the asset didnt stay with 1 frame the way it shows for him. Also didn't even work sooooo guess I'm gonna just try to overlay or something since this didnt work and i'm not about to pay you for it lol
Akash, can I make dependency between components? I have 4 clickable options/buttons as variants in 1 component and I want to switch 4 images according to my 4 buttons. How can I do this to avoid placing multiple screens?
Hey Ole👋🏻 Yes you can do that. For this what you have to do is to have a combo of 1 image and 4 buttons as one component. So basically Image-1 with all 4 button below, Image-2 with all 4 buttons below, and so on. The component that contains the first image should have the button-1 selected, second image component has 2nd button selected. Once this setup is done, combine all components as variants, link all the buttons in every component to their respective components via "change to" animation setting and done 😀
@@AkashYadavUX thank you so much, but what if I have buttons in 3 tabs and image above these tabs. I have an image with clothes item. Under it I have 3 tabs (fabric, buttons, threads), in every tab I have 4 buttons(options) that can change the image. Is it possible to do in Figma?
dude i make the slider with instance of a card component and i try to move left like what you did press the left button but mine is only move the frame to the left not the card inside the frame how did you do that?
