No video :(

Create an Interactive WEB SLIDER in Figma

Подписаться 46 тыс.

Просмотров 149 тыс.

50% 1

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

Опубликовано:

26 авг 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 88

@AgosArg 4 месяца назад

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

@anukrititripathi152 21 день назад

It requires a lot of patience

@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 8 месяцев назад

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

@biancadewlal8110 4 месяца назад

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!! :)

@raudhahalwani5481 7 месяцев назад

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

@limagraphics96 14 дней назад

THANK YOU VERY MUCH! This was really helpful

@haneefahmed9748 Год назад

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

@xadek821 Год назад

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

@designwizard3109 Год назад

One of the best youtube channel for learn ui design

@by.alejandria Год назад

Complicated but effective... THAKS A LOTTTTTTTT

@marievl7284 3 месяца назад

absolute legend, you explain everything 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 🔵🟡

@IsmailGMV 4 месяца назад

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

@rowirave_ Год назад

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

@roedhake 6 месяцев назад

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

@Yemiakanbi Месяц назад

Goated for real!!

@jelenavoncina5387 11 месяцев назад

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

@yoericktv9610 5 месяцев назад

Fantastic tutorial. Thank you so much!

@Droid_facts Год назад

Thanks Mavi you make my day♥

@UXMurt Год назад

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

@reginaldcornishiii8518 Год назад

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

@user-ik2vm6jh9u 4 месяца назад

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

@parvinderkumar503 Месяц назад

thanks man 💌

@aikisustin3094 3 месяца назад

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?

@user-nd5wf1tv5e 6 месяцев назад

a very confusing tutorial

@DaYriSEShAYaRi 3 месяца назад

😂😂yes I think it's very confusing

@Chuby.3th 2 месяца назад

Extremely confusing tf😂

@leatapia3354 4 месяца назад

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.

@yashodhadhanushka1415 Год назад

Great tutorial. Thank you very much.💯

@nealcaffrey8890 3 месяца назад

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

@user-pq3mg6yg5h Год назад

Thanks for your perfect tutorial.

@gabyjerez9094 4 месяца назад

GRACIAS AMIGO, ME SALVASTE 😭🤧

@syahirahzaki7111 6 месяцев назад

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

@anoushkanamdev2283 8 месяцев назад

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 7 месяцев назад

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

@user-tu3ny9bb7y 9 месяцев назад

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🥺🙏🙏🙏🙏🙏🙏🙏🙏🙏🙏🙏

@seinololchoki2300 6 месяцев назад

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

@captainfunnybonesvlogs Год назад

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

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

@FallenWarriorXV Год назад

Brilliant. Thank you!

@panduGani8370 Год назад

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

@yasminerahma4921 Год назад

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

@shunmughaanand96 Год назад

Very useful, Thanks a lot man

@viktorpoplavsky5976 Год назад

Very useful. Thank you

@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

@ob5804 11 месяцев назад

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

@lipikasharma3194 6 месяцев назад

Thank you :)

@felipev5409 9 месяцев назад

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

@mavidesign 9 месяцев назад

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 RU-vid - thank you for your understanding! Mavi

@muhamadwahyudi9937 Год назад

awesome, thank you

@kennethmichael1427 Год назад

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

@aditiraj4263 Год назад

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

@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?

@vamboo8918 5 месяцев назад

you're a literal SuperSan

@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: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-g6L2xdX-TXc.html

@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 8 месяцев назад

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

@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 RU-vid channel or send a dm to my instagram page @mavidesignyt

@charityworks.studio Год назад

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

@sophiaschlarmann1229 10 месяцев назад

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

@AlokKanojiya-cs6lb 4 месяца назад

bro you making tutorial it,s so confusing some time

@harrymorgan595 Год назад

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

@mavidesign Год назад

Causmic - Distant Love from the RU-vid 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

@lamidiabassgbolahan3554 Год назад

great

@benjamn5459 Год назад

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

@sravyareddy3226 4 месяца назад

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

@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: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-IkL0bYUO0Is.html

@emmyugwuoti6245 Год назад

@@mavidesign thanksss

@mavidesign Год назад

And now this (the img carousel) haha: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-g6L2xdX-TXc.html