The SIMPLEST Way to Create an Interactive SLIDER in Figma (Tutorial)

Visit my STORE: bit.ly/mavi-design-store
Explore Mavi Design COURSES : bit.ly/mavi-design-courses
Download FIGMA for FREE: bit.ly/get-started-with-figma
Take FULL advantage of ALL FIGMA's features: bit.ly/figma-professional-plan
Mobile App UI Design Playlist: • FREE Figma Mobile UI D...
In this video I'll show you how to create an interactive slider component with moving / changing numbers in Figma. We will be using interactive components, instances, variants and prototyping features to achieve the result. The button will also have a "pressed down" / "while pressing" state in order to be more itneractive and pleasant to use. The process I'm about to show you is also one of the simplest ways to do this.
Topics: interactive figma prototype, component with variants, figma ux / ui design
--------
© 2022 Mavi Design

Пікірлер: 52

  • @IAMTHEMUSK
    @IAMTHEMUSK

    Damn! I'm a developper trust me it's easier in code

  • @mohsinansari5264
    @mohsinansari5264

    Why this numbers not stopping in between ?

  • @user-uj7qb6uz6m
    @user-uj7qb6uz6m

    I've tried this three times being very careful to make sure that everything is the same including position in the layers panel but when I get to the part where you use align bottom to show 1000 instead of the 0 in the second variant it wont change the number from 0. Any thoughts?

  • @ShreedharKasbekar
    @ShreedharKasbekar Жыл бұрын

    it. is going back once loose the controll

  • @ramonaliable
    @ramonaliable Жыл бұрын

    Hey Im having some issues connecting the number to the slider. Wondering if you have a link to your figma board so I can look at your structure.

  • @yanxiao5286
    @yanxiao5286 Жыл бұрын

    it not work, when i drag the button and slide, i want to stop at a number 500, it already slide to 1000, it don't stop at the right number i want

  • @alantan6786
    @alantan6786

    Thanks for the tutorial. How do we create a more complex version where I can release the slider and not have it jump to 1000 but wherever I release it? I can't seem to find any tutorial that explains how to make something like this.

  • @andrewg9787
    @andrewg9787 Жыл бұрын

    Great tutorial! I’ve got a quick question. I have the slider on about 5 pages. Each page has 1 chip that must be selected before the final page where the slider is to be used followed by clicking “update profile”. The issue I am running into is the slider not resetting after I click update profile and try the flow again. Any suggestions?

  • @ashudhengale2971
    @ashudhengale2971 Жыл бұрын

    my question if drag circle to 100 to 900 leave mouse why circle goes at its position, why cant it stop between these value

  • @newyonface3700
    @newyonface3700 Жыл бұрын

    Thank you I have successfully attempted the prototype and working well with 0 to 100. but when I have created 0 to 100 total 10 different slider with values 10, 20, 30.....100. and when I am playing the prototype I am not able drag it to directly from 0 to 100. instead I have to click and drag 10 times to reach to 100, even though I have connected the wire of each component with each other.... for Example I have connected 10 with 20, 30, 40, 50...100 and vice versa for each. Have I made any mistake in here, please let me know

  • @desmondgodswill1857
    @desmondgodswill1857

    Amazing tutorial Mavi. Thanks, It worked perfectly.

  • @equiz
    @equiz Жыл бұрын

    Thanks for the tut, you rock buddy!

  • @franco81111
    @franco81111 Жыл бұрын

    Great, thank you!!!

  • @meaganmccomiskey5337
    @meaganmccomiskey5337

    This is so helpful, thank you so much!

  • @PlamenaMileva-mh8ef
    @PlamenaMileva-mh8ef Жыл бұрын

    Amazing job! Thanks for sharing :)

  • @adamdaniel5119
    @adamdaniel5119

    Many thanks for this. Took me a couple of attempts but I filled in some gaps in my figma knowledge doing so.

  • @jackieqiu7139
    @jackieqiu7139 Жыл бұрын

    Amazing tutorial!! Just used this for my bootcamp project

  • @user-ue6pp1vi7f
    @user-ue6pp1vi7f Жыл бұрын

    Brilliant video

  • @ramanified
    @ramanified21 сағат бұрын

    thanks

  • @Mint2255
    @Mint2255

    Great tutorial but I have problems with auto layout, once I create it all elements are in different positions and slider control sets next to sliderbar, not remains on top of it like your did