Figma / How to Hack a Slider with Auto-Layout

Inspired by this Figma video - • Figma in 5: Design Sys...
Follow me on Twitter for more tips! / dannysapio

Пікірлер: 38

  • @markfrain
    @markfrain2 жыл бұрын

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

  • @stevestremsterfer6038
    @stevestremsterfer60382 жыл бұрын

    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
    @nirjagauchan2 жыл бұрын

    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
    @n30604220042 жыл бұрын

    So good! Love your channel!

  • @basharatfaiz10
    @basharatfaiz102 жыл бұрын

    Awesome one Danny

  • @user-md3tk3il4k
    @user-md3tk3il4k2 жыл бұрын

    Thank you! Very helpful and smart!

  • @yashodhanxyz
    @yashodhanxyz2 жыл бұрын

    awesome, got a lot of tips from this one

  • @adelanaofficial
    @adelanaofficial2 жыл бұрын

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

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

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

  • @ibukunoluwaodukoya8936
    @ibukunoluwaodukoya89362 жыл бұрын

    Amazing, I learnt something !

  • @jenya4009
    @jenya40092 жыл бұрын

    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?

  • @baptistepons
    @baptistepons2 жыл бұрын

    Wow! Brilliant!

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

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

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

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

  • @graphinicusparashar2563
    @graphinicusparashar25632 жыл бұрын

    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
    @hortike1232 жыл бұрын

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

  • @oZenakos
    @oZenakos2 жыл бұрын

    This was very helpful thanks

  • @muhammedsultanmohiuddin816
    @muhammedsultanmohiuddin8162 жыл бұрын

    Thank you that helped a lot

  • @kss4652
    @kss46523 ай бұрын

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

  • @jindrichs
    @jindrichs2 жыл бұрын

    Thank you so much!

  • @yxyxs
    @yxyxs2 жыл бұрын

    This is awesome lol very creative

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

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

  • @khawajaansaruddin6940
    @khawajaansaruddin69408 ай бұрын

    Cool One - How are you animate for functional prototype?

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

  • @canngo123
    @canngo1232 жыл бұрын

    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
    @bombdiggity902 жыл бұрын

    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

  • @utkarshacharya5213
    @utkarshacharya521311 ай бұрын

    thanks alot

  • @BhawinJagad
    @BhawinJagad2 жыл бұрын

    Subscribed 🥳🥳🥳

  • @aremu_smog
    @aremu_smog2 жыл бұрын

    👏👏👏

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

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

  • @lidiiapavliuk

    @lidiiapavliuk

    Жыл бұрын

    Same question 😢

  • @yongleiyan9852
    @yongleiyan98522 жыл бұрын

    牛逼啊兄der