Figma / How to Hack a Slider with Auto-Layout

Поделиться
HTML-код
  • Опубликовано: 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

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

    So good! Love your channel!

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

    Awesome one Danny

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

    awesome, got a lot of tips from this one

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

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

  • @user-md3tk3il4k
    @user-md3tk3il4k 2 года назад

    Thank you! Very helpful and smart!

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

    Amazing, I learnt something !

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

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

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

  • @user-dv4sk6ge1m
    @user-dv4sk6ge1m Год назад +1

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

  • @ndutasamwa9114
    @ndutasamwa9114 Год назад +2

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

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

    Wow! Brilliant!

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

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

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

    This was very helpful thanks

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

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

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

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

    This is awesome lol very creative

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

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

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

    Thank you that helped a lot

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

    Thank you so much!

  • @yamilafritzler9607
    @yamilafritzler9607 Месяц назад

    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?

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

    Cool One - How are you animate for functional prototype?

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

    thanks alot

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

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

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

    Subscribed 🥳🥳🥳

  • @MyntillaeNashMyntifreshDesigns

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

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

    👏👏👏

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

    牛逼啊兄der