Button controlled Scroll/ carousel interaction in Figma | 🔗 Source file included

🔗 Source File: yakash91.gumroad.com/l/button...

[@ux.nicole]

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!

[@ladyj3474]

Thank you Nicole, huge help!!!!

[@dolonb12]

Thank you so much for the steps, and Mr. Akash for uploading the video.

[@77AlexS]

This was a life saver. It took me a little while to figure out but your video really helped. YAY!

[@marchsen]

You are amazing! This was waaaaaay easier than other videos I have seen💕

[@fated2pretend]

Just have to say thanks, again! This is the 2nd time this video has helped me out. Much appreciated

[@ladyj3474]

I put your first scroll lesson to practice on my prototype. Thank you for being clear and making the process easy to understand.

[@myriahwebb]

I have been searching for this tutorial for AGES, thank you so much for this!!

[@deliciouspizza4405]

Thank you so much. I've been looking for this carousel with click buttons and here I found it!

[@mariliatorres7563]

You saved my life! Thanks a lot for the tutorial! 💚

[@phil_creative]

Exactly what i was looking for. Awesome tutorial. Easy to follow along with. Thanks a lot!

[@armytaascellya]

thank you, I've been looking for this

[@creativerobtv498]

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!

[@AkashYadavUX]

Will do 😇

[@spirux]

My compliment!! You explain really well. Thank you!

[@user-bz3eg1xm7n]

This video was so easy to follow thank you so much!

[@hansana0]

Perfectly Explained! Thanks For Tutorial. ❤

[@tazimimran4578]

Amazing content...nicely explained. You earned a sub!

[@punkcake4073]

Thank you! You explain really so good!

[@fernnyapxrn]

YOU REALLY REALLY SAVE MY LIFE !! for those who confused about this "option command G" that is "Ctrl + Alt + G "on Windows

[@user-oc9jg6pk2n]

SAW UR OTHER VIDEOS TOO, U MAKE LEARNING FIGMA SO EASY.

[@mintfresh20]

THANKS FOR SUCH AN AMAZING TUTORIAL

[@fated2pretend]

Great tutorial. I watched 2 others before yours and yours was easy to follow along with.
Worked perfectly. Thanks!

[@christianahfolakemi8507]

Thank you so much for this video..Explanatory and detailed

[@chechibo283]

Thank you Akash! Really helpful and great explained!

[@Alexandre-dp6ix]

Je t'aime indien inconnue tes tutos sont incroyable
cœur sur toi et toute ta descendance

You did it perfect, thank you!

[@halaalsenussi]

Akash you are a life saver 🙏🏻❣️ thank you so much and please keep teaching us your tutorials are simple and easy to understand...

[@joshuanaut]

Great tutorial. Thank you!

[@killertofu88]

so easy to follow along! thank you!

[@OKhybrid]

Lovely stuff! Nice and clear.

[@kenniaolivera7871]

Thank you! Worked perfectly.

[@yakshkothari2309]

Amazing tutorial, very clean & crisp instructions!! 💯

[@alexsai5498]

Exactly what i was looking for 🎉❤

[@Sumee21051987]

Love the way you say Carousel. Great job bro.

[@AkashYadavUX]

Thanks! 😃

[@jonathanalexanderguerrero9431]

Thank you so much for your explanation! It was very useful for an university proyect! 🤗🤗🤗🤗🤗🤗

[@Ogabek_Kholboev]

this video helps me a lot. Thank you so much.

[@taiwofaruq3105]

Hi Akash, This is a very nice and comprehensive video. Thank you and welldone🥰

[@loiselw]

so helpful, thank you! This was very satisfying to make.

[@TheItchyi]

Well explained! Thank you from Gemany! :)

[@moecovidtracker4266]

great tutorial you've got yourself a subscriber

[@brunogato1758]

Thank you very much, your tutorial was excellent.

[@venkateshvp3395]

You are simply superb brother very calm and slow enough so that I did the carousel correctly thanks brother ❣️

[@AkashYadavUX]

Glad it helped

[@alina-vi]

Thank you so much! Your video is very helpful

[@olgayakovleva9562]

Great tutorial, thank you very much!!!

[@tatunagverdtsiteli4048]

It was great, thanks. Just made my first carousel, I needed it for my project

[@AkashYadavUX]

Wohooo glad it helped🤓🤓

[@RachDev]

Thank you so much! 🙏

[@julianamadeiradesigner]

Amazing! Thank you Akash!

[@foreverprmnt1436]

excellent tutorial!I kinda figured it out at the 9 minute mark

[@theleilakitty]

thank you, very clear!! worked out

[@priyashalini5597]

Amazing and helpful video. Thanks

[@flaviolisboa4003]

WONDERFULL!!!! thanks so much

[@guaraferreira797]

Great explanation! Thank you very much for sharing!

[@AkashYadavUX]

You're very welcome!

[@user-xu7qe2zl4c]

tq bro u have solved my headache ❤

[@Lvisdynamite]

what a great help, thank you

[@anushkasharma6964]

Thank you so much amazing tutorial !

[@adeniyihabeeb5623]

Thanks so much for this video ...it's really helpful 💯

[@your-inner-eye]

Thank you for this tutorial 🙏🏼

[@RohitSingh-mz4xq]

Very Nicely Explained!!

[@AldiPrasetyo]

Amazing! Thank you for the tutorial brother.

[@AkashYadavUX]

My pleasure!

[@vealchop2490]

fantastic tutorial. this is how I build all my carousels now

[@AkashYadavUX]

😄

[@jiwanjotkaur1055]

very helpful.....thnak you sir🙏

[@peterabigail7895]

This was helpful, thanks a lot .

[@6boardss]

Thank you for this man

[@adityabedekar4449]

Awesome Video!!, Got it on my second attempt

[@xxtankiesharpxx-gaming7334]

Thanks bro, it helped a lot:)))))

[@yoericktv9610]

Thank you so much.

[@lordshishimanu5933]

Easy and too the point, Thanks !

[@kingsufi6164]

It works. :) Thank you so much

[@leonardoomarfernandez8672]

very nice ! thanks !

[@fonngigi9133]

Thank you for sharing this tip

[@alanbaskaev3907]

This is excellent my friend.

[@aaryanrana6895]

Thanks for the help maza aaya😊

[@ContentsTeamEcommerce]

Thank you so much 😍

[@cesara.pichardo2368]

Excelent video!!! Thanks! **o**

[@AkashYadavUX]

Thank you too!

[@Oleg194734]

very good, sir, that what i was looking for !

[@AkashYadavUX]

😇

[@margaret_Bobby_Tembo]

Thanks for the video, very helpful

[@Slampty]

Very helpful, thanks

[@shereelear997]

Super helpful! Thanks :)

[@golyrics1286]

NICE WORK, THANKS FOR SHARING.

[@birthdaydreamdream1013]

first time i make this i failed but secon time with a new component i succes thankyouu so much this so helpfullll!!!!

[@puneetsagar5014]

Need this type of videos 🙏🙏🙏🙏

[@julia_ggg]

This is just what I needed :) Thank you for this very clear tutorial!

[@saravanavel9700]

Thank you so much

[@nathanmeira5740]

Awesome tutorial! Clear and pretty straightforward

[@gtbaba123]

Ty for such small scrisp video

[@dansolo360]

Thank you.

[@dadangzulian9641]

THANK YOU

[@joserafaelcardenasg.1806]

Muchas Gracias duré como 3 Dias para poder entender pero lo Logré!
🤞🤛

[@SamyadeepPurkayastha]

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?

[@aud2ice]

Thank you. Very helpful

[@vicky-bl6yw]

thank you 😍

[@NguyenHoa-rb6un]

Thank you

[@viktoriamarch9571]

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

[@shakilarosli8757]

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?

[@user-tu3ny9bb7y]

it was great
but i have a question
can you tell me if we should add auto layout for them or no????

[@alokKumar-xg1ct]

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

[@jcasstudio]

Thank you thank you thank you!

[@techputraaa]

Thanks 👍

[@adityabedekar4449]

Take care with the frames and layers, follow it exactly to get the animation to work

[@user-sx7wz3mx1t]

Many thanks 👍 Greetings from Russia 💓

[@joshuamensah9309]

thank you

[@dedyaribowo8814]

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