Create an Interactive WEB SLIDER in Figma
HTML-код
- Опубликовано: 30 авг 2022
- Get the SOURCE FILES for this project ($1.99): payhip.com/b/rNjOF
Visit my STORE: bit.ly/mavi-design-store
Explore Mavi Design COURSES : bit.ly/mavi-design-courses
Get FIGMA for FREE: bit.ly/get-started-with-figma
Take FULL advantage of ALL FIGMA's features: bit.ly/figma-professional-plan
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 
Хобби
This tutorial combined with the Instagram carousel one made my life a little easier, thank you very much for helping this student!!!
your videos are literally finding water in the middle of the desert! thank you so much for your help
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!! :)
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 🔵🟡
Actual goated tutorial, quick and easy to understand. Thank you a million times 🙏
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.
Thanks for the feedback! 😊
your tutorials helped me a lot for my assignments. Thank you so much, sir 🙏🏻
I would enjoy thunderstorm and then make the video, but you're enjoying the thunderstorm and making the video, great!
One of the best youtube channel for learn ui design
love your tutorials! they are helping me so much :>
thank you so much for this, now I can make high fidelity designs
Complicated but effective... THAKS A LOTTTTTTTT
Amazing stuff thank you so much! This is really useful for ecommerce card components
absolute legend, you explain everything great
Thanks Mavi you make my day♥
Amazing tutorial! Thank you so much.
Thank you very much!) you helped me a lot)
Hi ,i want to know how to use the slide component can be prototyped with frame/rectangle
This was really helpful, thank you!
Only thing I had to add was a close button :D
there is the easy way and there is the right way you did it in the right way thank you
Great tutorial. Thank you very much.💯
Can you easily copy and paste to duplicate. Changing out to put new images instead of doing all the steps over again?
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.
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?
Very useful, Thanks a lot man
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🥺🙏🙏🙏🙏🙏🙏🙏🙏🙏🙏🙏
Thanks for your perfect tutorial.
Brilliant. Thank you!
I have downloaded the fig slider file and imported it but how do add it to my own prototype for use there ?
Very useful. Thank you
GRACIAS AMIGO, ME SALVASTE
😭🤧
Hi i would like to ask, why when i paste the slide container, it becomes mirrored, all the text are backwards
What if I want to create the appearance of a loop? What am I supposed to do? Please help me.
Mwuuuuuuaaaaaahhhhhh!!!!! 😂😂😂😂 thank you so much for this tutorial!!!! It has helped me a great deal!
18:10,I followed your tutorail to add drag interaction to sliders_container,but my figma change to is gray(unavailable).
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?
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
awesome, thank you
I can't understand where I did it wrong(, could you help me, if so, where should I drop the link, because RUclips will delete it.
Thank you :)
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?
Could you share your Figma file with me? That would be faster for me to get to the core of the issue:)
@@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...
Either my email in the “about” section of my RUclips channel or send a dm to my instagram page @mavidesignyt
@@mavidesign I DM-ed the link! Thank you so much!
@@charityworks.studio i have the same issues right now. can you explain?
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.
Thank you so much .. Thank you Thank you Thank you.
thanks
Hey ! but I can't understand the main step at 11:20
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
Hey have you managed to solve this? I have the same issue
how do you make when you have more than 3 slides at 14:19 min ? I do not understand. Thamk you.
Hey, I have the same question. Have you managed to solve this?
GREAT WORK AND THANKS SO MUCH FOR SHARING THIS.. PLS CAN WE HAVE THE MOBILE APP VERSION OF THIS? THANK YOU
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:
ruclips.net/video/g6L2xdX-TXc/видео.html
great
at 14:20 it doesn't let me choose the slide option, just the first three options, whats wrong!!
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 RUclips - thank you for your understanding!
Mavi
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.
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'.
What's the name of the instrumental playing in the background
Causmic - Distant Love from the RUclips audio library
@@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
@@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
@@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
you're a literal SuperSan
Would this work as an image carousel?
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:)
@@mavidesign thankss
there's also this: ruclips.net/video/IkL0bYUO0Is/видео.html
@@mavidesign thanksss
And now this (the img carousel) haha: ruclips.net/video/g6L2xdX-TXc/видео.html
i want to buy source file?
Check the link in the description:)
bro you making tutorial it,s so confusing some time
a very confusing tutorial
😂😂yes I think it's very confusing
This does not work you cant add the slide container to the slider
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
Fantastic tutorial. Thank you so much!