Figma / How to Hack a Slider with Auto-Layout

Поделиться
HTML-код
  • Опубликовано: 2 фев 2025

Комментарии • 38

  • @markfrain
    @markfrain 2 года назад +15

    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

  • @tuyentruong2843
    @tuyentruong2843 2 года назад +2

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

  • @partheniadis
    @partheniadis Год назад +1

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

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

    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 года назад +2

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

  • @basharatfaiz10
    @basharatfaiz10 3 года назад +1

    Awesome one Danny

  • @n3060422004
    @n3060422004 3 года назад +1

    So good! Love your channel!

  • @khawajaansaruddin6940
    @khawajaansaruddin6940 Год назад

    Cool One - How are you animate for functional prototype?

  • @bombdiggity90
    @bombdiggity90 3 года назад +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 3 года назад

      I have the same issue

    • @bombdiggity90
      @bombdiggity90 3 года назад

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

    • @thedjnute
      @thedjnute 3 года назад

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

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

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

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

  • @СветланаГаврилова-и9ъ

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

  • @yashodhanxyz
    @yashodhanxyz 3 года назад +1

    awesome, got a lot of tips from this one

  • @jenya4009
    @jenya4009 3 года назад +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?

  • @adelanaofficial
    @adelanaofficial 2 года назад

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

  • @ibukunoluwaodukoya8936
    @ibukunoluwaodukoya8936 3 года назад +1

    Amazing, I learnt something !

  • @MyntillaeNashMyntifreshDesigns
    @MyntillaeNashMyntifreshDesigns 2 года назад

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

  • @baptistepons
    @baptistepons 3 года назад +1

    Wow! Brilliant!

  • @hortike123
    @hortike123 2 года назад

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

  • @ВикторияНикитко
    @ВикторияНикитко 3 года назад

    Thank you! Very helpful and smart!

  • @yxyxs
    @yxyxs 2 года назад

    This is awesome lol very creative

  • @oZenakos
    @oZenakos 2 года назад

    This was very helpful thanks

  • @jindrichs
    @jindrichs 2 года назад

    Thank you so much!

  • @muhammedsultanmohiuddin816
    @muhammedsultanmohiuddin816 3 года назад

    Thank you that helped a lot

  • @utkarshacharya5213
    @utkarshacharya5213 Год назад

    thanks alot

  • @BhawinJagad
    @BhawinJagad 3 года назад

    Subscribed 🥳🥳🥳

  • @aremu_smog
    @aremu_smog 3 года назад

    👏👏👏

  • @yongleiyan9852
    @yongleiyan9852 3 года назад

    牛逼啊兄der