Create an Interactive WEB SLIDER in Figma

Get the SOURCE FILES for this project ($1.99): payhip.com/b/r...
Visit my STORE: bit.ly/mavi-de...
Explore Mavi Design COURSES : bit.ly/mavi-de...
Get FIGMA for FREE: bit.ly/get-sta...
Take FULL advantage of ALL FIGMA's features: bit.ly/figma-p...
Mobile App UI Design Playlist: • FREE Figma Mobile UI D...
This is a Figma interactive component / prototyping tutorial where I'll show you how to create an interactive (click + click & drag) web slider interactive component in Figma. This UI component is most frequently used on websites / web design. This slider supports a click interaction as well as click&drag interaction
FIGMA BASICS PLAYLIST: • Figma Basics
---------
© 2022 Mavi Design

[@UncleSalie]

Great tut. I appreciate the low fidelity approach you take. I've found myself getting bogged down by a lot of tutorials that create entire designs in one sitting.

[@mavidesign]

Thanks for the feedback! 😊

[@Konection12]

This tutorial combined with the Instagram carousel one made my life a little easier, thank you very much for helping this student!!!

[@AgosArg]

your videos are literally finding water in the middle of the desert! thank you so much for your help

[@anukrititripathi152]

It requires a lot of patience

[@biancadewlal8110]

It took me 2 hours to find a video like this! Step by step, easy to follow and exactly what I was looking for!! Thank you and please keep making videos like this!! :)

[@Friana_cwan]

11:18 i can't cut and paste there

[@Friana_cwan]

How to do that? And when i drop container slide, the arrow and navigation button move to back

[@reginaldcornishiii8518]

Can you easily copy and paste to duplicate. Changing out to put new images instead of doing all the steps over again?

[@raudhahalwani5481]

your tutorials helped me a lot for my assignments. Thank you so much, sir 🙏🏻

[@by.alejandria]

Complicated but effective... THAKS A LOTTTTTTTT

[@victorokwegada1280]

Please do another video for those of us using Windows

[@IsmailGMV]

there is the easy way and there is the right way you did it in the right way thank you

[@amberzoellner902]

This video was fantastic, super easy to follow, thank you so much!

[@syahirahzaki7111]

Hi i would like to ask, why when i paste the slide container, it becomes mirrored, all the text are backwards

[@designwizard3109]

One of the best youtube channel for learn ui design

[@AmbarMacarena18]

Muchas gracias! para hacer que se moviera en automático, edité las interacciones entre slides y seleccioné after delay, ahora se mueven y se ven hermosas ! Gracias por el contenido !

[@AmbarMacarena18]

le coloque 2 interacciones, la primera after delay y luego one click para que el usuario pueda navegar a su gusto :)

[@haneefahmed9748]

I would enjoy thunderstorm and then make the video, but you're enjoying the thunderstorm and making the video, great!

[@YuliiaShevel]

You are one of the few people who shoots how to design correctly, each topic is chosen well. Keep up the good work and we will encourage you. Best regards 🔵🟡

[@aditiraj4263]

Hey ! but I can't understand the main step at 11:20

[@gmblrvms]

doing modifications in the middle of resolving the solution made me very confused as i was learning and felt lost when you went back in the subject.

[@noorzaghal1383]

Thank you so much ! that helped me with my assignment

[@aikisustin3094]

hey there, I'm also learning Figma and I wonder, what if I want to add another slide, I will have to: 1 - add another navigation component 2 - edit all the navigation components 3 - add the slide and change prototypes the third step is kind of ok to me, but 1 and 2 looks a bit goofy is there a way to fix that?

[@anoushkanamdev2283]

Hi. The slide container is not going inside the slider. Did exactly what u did but it just not going. What could I be doing wrong, I dont get it. Can someone help

[@JoelB030]

Hey have you managed to solve this? I have the same issue

[@xadek821]

Actual goated tutorial, quick and easy to understand. Thank you a million times 🙏

[@rowirave_]

thank you so much for this, now I can make high fidelity designs

[@nealcaffrey8890]

18:10,I followed your tutorail to add drag interaction to sliders_container,but my figma change to is gray(unavailable).

[@user-tu3ny9bb7y]

Hi, it was amazing it was so helpful can you tell me that how can i organize the prototype section when i have 4 pictures??? please tell me as soon as possible🥺🙏🙏🙏🙏🙏🙏🙏🙏🙏🙏🙏

[@javiercordero4026]

I find it very difficult to complete the tutorial because there are steps that are not explained 🤔, which were possibly done using keyboard shortcuts that are not shown in the video. It’s a shame because it’s a good tutorial 👍, but without those steps, I can’t continue or finish it 😔.

[@seinololchoki2300]

Mwuuuuuuaaaaaahhhhhh!!!!! 😂😂😂😂 thank you so much for this tutorial!!!! It has helped me a great deal!

[@successfabiri]

THANK YOU VERY MUCH! This was really helpful

[@roedhake]

love your tutorials! they are helping me so much :>

[@yasminerahma4921]

What if I want to create the appearance of a loop? What am I supposed to do? Please help me.

[@ob5804]

I can't understand where I did it wrong(, could you help me, if so, where should I drop the link, because KZbin will delete it.

[@felipev5409]

at 14:20 it doesn't let me choose the slide option, just the first three options, whats wrong!!

[@mavidesign]

To get personalized & specific help + feedback with your project, please join my free Discord server. You can send me an Instagram DM or reach out to my email (About section of my channel) to get your invite. I'm unable to help everyone over KZbin - thank you for your understanding! Mavi

[@marievl7284]

absolute legend, you explain everything great

[@sakshikhandagale09]

thank you so much for this wonderful tutorial☺

[@panduGani8370]

Hi ,i want to know how to use the slide component can be prototyped with frame/rectangle

[@TheUltraKekster]

Slider Container thing doesn't work.

[@jasminef338]

Question: if I have 4 slides, then how can I display slide #2 and slide #3 in the "slider"? Align center doesn't work. Thank you.

[@ruffidou]

GRACIAS AMIGO, ME SALVASTE 😭🤧

[@Yemiakanbi]

Goated for real!!

[@jelenavoncina5387]

This was really helpful, thank you! Only thing I had to add was a close button :D

[@dbz-g1379]

thank you man! good job

[@Droid_facts]

Thanks Mavi you make my day♥

[@orlish95]

how do you make when you have more than 3 slides at 14:19 min ? I do not understand. Thamk you.

[@Up_iz_down]

Hey, I have the same question. Have you managed to solve this?

[@kennethmichael1427]

I have downloaded the fig slider file and imported it but how do add it to my own prototype for use there ?

[@ФаинаСтепанова-ж6й]

Thank you very much!) you helped me a lot)

[@joyusagi]

Hello! Thank you for your tutorial. I have a question. I tried to not include the left arrow on the first slide (which ends up arrow's being smart animated and just not working) and tried having the last slide smoothly slide to the right to the first slide (not looking like going reverse). But I reazlied that can't be made in figma. So.. if I can't make exactly what I want in figma how should I show clients? Do people animate in after effects and show it to clients or how do designers make detailed interactions?

[@mavidesign]

Great question. In this case I’d suggest duplicating the the three slides so that when you click the “next” arrow , it’ll move to the next slide which is just a copy of the first one, making it look as if it’s infinite. And regarding not showing the arrow at the beginning, try hiding it in the very first state - I think that should work? Anyway when there’s something that can’t be made in Figma , then yes, after effects or some kind of Figma workaround needs to be done :) Figma workarounds usually help you with a very specific case, but eliminate the possibility to have a scalable / reusable / universal template for different use cases

[@UXMurt]

Amazing stuff thank you so much! This is really useful for ecommerce card components

[@legtheartist]

It legit won't let me paste the slides container in the slider. I've tried it so many times. So frustrating when basic copy paste functions don't work. Has anyone else got this problem?

[@mavidesign]

Try dragging it in instead of pasting

[@AzmiPRINT9]

nice very good, i like it

[@yashodhadhanushka1415]

Great tutorial. Thank you very much.💯

[@parvinderkumar503]

thanks man 💌

[@KidShows-qd1gd]

thank you

[@AlokKanojiya-cs6lb]

bro you making tutorial it,s so confusing some time

[@shunmughaanand96]

Very useful, Thanks a lot man

[@ملیکاپاینده]

Thanks for your perfect tutorial.

[@abiolaadedoye5873]

GREAT WORK AND THANKS SO MUCH FOR SHARING THIS.. PLS CAN WE HAVE THE MOBILE APP VERSION OF THIS? THANK YOU

[@mavidesign]

Thanks for the suggestion! You might want to check this out in the meantime. Not 100% identical to this slider, but similar in a lot of ways: kzbin.info/www/bejne/nWevY6uajZKHjsU

[@charityworks.studio]

Hi, thanks for making this tutorial! It's well organized compared to others. I just have a question: I changed my test frame to 1440 x 900 px, but somehow the text is off-center even if I tried to fix the slides container (didn't seem to have problem on that frame). Perhaps I should create a separate frame in the "slider" component for the texts, and it would behave the same as the "navigation" (dots) component? Ultimately, my goal is to make the text to be in the center (as intended) even if I resize the "test frame" to smaller (or bigger) width. Could you advise?

[@mavidesign]

Could you share your Figma file with me? That would be faster for me to get to the core of the issue:)

[@charityworks.studio]

@@mavidesign Sure, where shall I send you the link? In the meantime, I just resized the slides' width inside the "slider" component so that the text is centered in the test frame (with 1440px width). I'm thinking taking out the text from the "slide" component and bringing it together in the "slides_container" instead might make it work...

[@mavidesign]

Either my email in the “about” section of my KZbin channel or send a dm to my instagram page @mavidesignyt

[@charityworks.studio]

​@@mavidesign I DM-ed the link! Thank you so much!

[@sophiaschlarmann1229]

@@charityworks.studio i have the same issues right now. can you explain?

[@harrymorgan595]

What's the name of the instrumental playing in the background

[@mavidesign]

Causmic - Distant Love from the KZbin audio library

[@harrymorgan595]

@@mavidesign thanks Alot, you're really doing an amazing Job, I salute you... Do you work in a tech firm or basically your freelance? Cause you're really good.. I've learned so much from you

[@mavidesign]

@@harrymorgan595 that’s so nice of you to say! Thank you:) I’m a freelancer right now with the vast majority of my clients being tech companies

[@harrymorgan595]

@@mavidesign That's awesome, I am a freelancer as well but I haven't gotten any gig yet, am still taking some courses online to perfect my skills.. you've been really helpful. Wishing you the very best

[@lipikasharma3194]

Thank you :)

[@captainfunnybonesvlogs]

Thank you so much .. Thank you Thank you Thank you.

[@FallenWarriorXV]

Brilliant. Thank you!

[@emmyugwuoti6245]

Would this work as an image carousel?

[@mavidesign]

Yes, it’s all about setting up the slide contents (can be text , image, or combination of both) Also video on an image carousel is coming soon, stay tuned:)

[@emmyugwuoti6245]

@@mavidesign thankss

[@mavidesign]

there's also this: kzbin.info/www/bejne/f5yvYZWPirRjf9U

[@emmyugwuoti6245]

@@mavidesign thanksss

[@mavidesign]

And now this (the img carousel) haha: kzbin.info/www/bejne/nWevY6uajZKHjsU

[@ArpitaSaha-d4k]

a very confusing tutorial

[@sagarjoshi_figcraft]

😂😂yes I think it's very confusing

[@Chuby.3th]

Extremely confusing tf😂

[@Sufleeez]

Not at all

[@victorokwegada1280]

Very very confusing

[@viktorpoplavsky5976]

Very useful. Thank you

[@Karajo.design]

The best

[@vamboo8918]

you're a literal SuperSan

[@asimxhk]

i want to buy source file?

[@mavidesign]

Check the link in the description:)

[@muhamadwahyudi9937]

awesome, thank you

[@kenpachi_sama69]

This is very informative Mavi! Can you pls show how can we make that button in the slide be interactive as well? Like when we click the slide, it should lead to another page. I have been struggling figuring that out. Also, you have a sub from me.

[@mariaeduardacarvalho7004]

if you want the button to change color, for instance, you can turn the button into a component and then use the hover effect just as he did with the arrows. More over, if you also want to be able to click the button and then go to another page you open the component in the slide and then you open property and conect the button to the page you wish using 'click' and 'instant'.

[@benjamn5459]

This does not work you cant add the slide container to the slider

[@sravyareddy3226]

did you mnage to resolve this issue? i keep trying to copy paste it, cut and paste it but still i cannot see my arrows and slider buttons below

[@lamidiabassgbolahan3554]

great

[@selvakumarjp7088]

😂

[@josephinejoulie-er9ng]

Amazing tutorial! Thank you so much.

[@yoericktv9610]

Fantastic tutorial. Thank you so much!