Figma / How to Hack a Slider with Auto-Layout

Поділитися
Вставка
  • Опубліковано 7 вер 2024
  • Inspired by this Figma video - • Figma in 5: Design Sys...
    Follow me on Twitter for more tips! / dannysapio

КОМЕНТАРІ • 38

  • @markfrain
    @markfrain 2 роки тому +13

    Nice tip and sliders although I'm curious how this could be used in an interactive prototype

  • @stevestremsterfer6038
    @stevestremsterfer6038 2 роки тому

    Huge help! Thank you. I battled with making an Auto Layout interactive slider just last week and couldn't figure it out. Your "hack" is slick!

  • @nirjagauchan
    @nirjagauchan 3 роки тому +1

    Wow! Its amazing what we can achieve from auto-layout and variants combo.. It's magical. Figma's amazing. Thank you so much for sharing. I can't wait to try it out by myself in my next project

  • @graphinicusparashar2563
    @graphinicusparashar2563 2 роки тому +3

    I love the method and how you described it but how i used in the interaction so I can view sliding in prototype mode

  • @partheniadis
    @partheniadis Рік тому +1

    Great! Could you please update it with Figma Variables to make it fully interactive?

  • @kss4652
    @kss4652 5 місяців тому

    Thanks! Nice tutorial. Now how to go to the next page based on choices on the slider

  • @yamilafritzler9607
    @yamilafritzler9607 3 місяці тому

    this works well when the line of the range selector is slim but when it's thick you can see the edges. Is there a solution for that case?

  • @ndutasamwa9114
    @ndutasamwa9114 Рік тому +2

    Great tutorial! How do you animate the range in an interactive prototype?

  • @basharatfaiz10
    @basharatfaiz10 3 роки тому +1

    Awesome one Danny

  • @tuyentruong2843
    @tuyentruong2843 Рік тому +2

    Hi Danny, do you have advice on how to remove the slight gap from the ellipses inside the Slider frames?

  • @n3060422004
    @n3060422004 3 роки тому +1

    So good! Love your channel!

  • @yashodhanxyz
    @yashodhanxyz 3 роки тому +1

    awesome, got a lot of tips from this one

  • @user-dv4sk6ge1m
    @user-dv4sk6ge1m Рік тому +1

    Thank you so much! It's amazing 🔥🔥🔥🔥🔥

  • @ibukunoluwaodukoya8936
    @ibukunoluwaodukoya8936 3 роки тому +1

    Amazing, I learnt something !

  • @adelanaofficial
    @adelanaofficial 2 роки тому

    I learnt something new today!!!!!
    Thank you!!!

  • @baptistepons
    @baptistepons 3 роки тому +1

    Wow! Brilliant!

  • @jenya4009
    @jenya4009 2 роки тому +1

    Thanks for sharing this nice method! I have some questions about it.
    What about the tiny spaces you can see between the rectangles and the circles? Is that something that needs to be fixed, UI-wise, or will most users not notice?
    Also, I can't make the whole slider resize proportionally, the selected area always remains the same length. Would it be something for developers to figure out, or can we fix it with auto layout?

  • @canngo123
    @canngo123 2 роки тому +1

    I was curious, what do people end up using this for? It'll eventually be coded but do these figmas really need to be that interactive??
    It's really cool but I can't figure out a good use case yet.

    • @KavateJayesh
      @KavateJayesh 2 роки тому

      its a common slider mechanic that you will on job search or property search websites

  • @hortike123
    @hortike123 2 роки тому

    Thank you that's what I 'm looking for 🙏

  • @user-md3tk3il4k
    @user-md3tk3il4k 2 роки тому

    Thank you! Very helpful and smart!

  • @khawajaansaruddin6940
    @khawajaansaruddin6940 10 місяців тому

    Cool One - How are you animate for functional prototype?

  • @oZenakos
    @oZenakos 2 роки тому

    This was very helpful thanks

  • @yxyxs
    @yxyxs 2 роки тому

    This is awesome lol very creative

  • @bombdiggity90
    @bombdiggity90 2 роки тому +1

    How did you constrain the purple bounding box without the object moving around? I can't seem to constrain it so that it perfectly resizes around the circle

    • @thedjnute
      @thedjnute 2 роки тому

      I have the same issue

    • @bombdiggity90
      @bombdiggity90 2 роки тому

      @@thedjnute I think I figured it out. Press "command"

    • @thedjnute
      @thedjnute 2 роки тому

      @@bombdiggity90 I tried that, it didn'tt work for me

  • @jindrichs
    @jindrichs 2 роки тому

    Thank you so much!

  • @muhammedsultanmohiuddin816
    @muhammedsultanmohiuddin816 3 роки тому

    Thank you that helped a lot

  • @utkarshacharya5213
    @utkarshacharya5213 Рік тому

    thanks alot

  • @MyntillaeNashMyntifreshDesigns

    How do you make this slidable on the prototype so it's interactive?

  • @BhawinJagad
    @BhawinJagad 3 роки тому

    Subscribed 🥳🥳🥳

  • @aremu_smog
    @aremu_smog 3 роки тому

    👏👏👏

  • @yongleiyan9852
    @yongleiyan9852 2 роки тому

    牛逼啊兄der