Sticky scroll

Поделиться
HTML-код
  • Опубликовано: 24 апр 2023
  • Figma released the sticky scroll feature as part of our Spring 2023 Little Big Updates. In this video, I’ll walk you through how to set up sticky scrolling on your prototypes! You can check out all of our Little Big Updates released here: • Little Big Updates are...
    Figma is free to use. Sign up here: bit.ly/3msp0OV
    ____________________________________________________
    Find us on ⬇️
    Twitter: / figma
    Instagram: / figma
    LinkedIn: / figma
    ____________________________________________________
    #Figma #Config #FigJam #Tutorial #NothingGreatIsMadeAlone #design #tips #DesignSystems
  • НаукаНаука

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

  • @Dupdopy
    @Dupdopy Год назад +76

    Waited for the "sticky" feature for so long only to find out that it does not work in Auto Layout. Absolute bummer. There must be a way to develop this further and make it usable in all situations, including Auto Layout. Please, Figma =)

  • @kjellruben
    @kjellruben Год назад +5

    Love these videos where you show what you might have trouble with as well! Makes it faster and easier to learn!

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

    Omg - very very good video! Love how some things did not work out - and you found a way around them. I have looked for this before and not found it - a big thank you!

  • @equinoxway
    @equinoxway 3 месяца назад

    I loveeeeeee the way you explain

  • @vs.swetha
    @vs.swetha 8 часов назад

    thanks for these tutorial.i did a stick sidebar with responsive scrolling main
    page in figma

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

    This is a great feature! Now we should to learn about it to create amazing prototypes! Thanks Figma team!

  • @davingerber
    @davingerber Год назад +10

    Awesome feature! If anyone else was confused when she said "physically grouped", she means in the layers panel. The headers you want sticky need to be next to each other above the content. Thanks for these video tips!

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

      Thanks for the tip, Davin!

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

    This is helpful ❤
    Is there a way to create sticy/ paralllax effect when top layer going up making visible fixed on bottom footer (just example)

  • @user-xd2rg4jw8x
    @user-xd2rg4jw8x 7 месяцев назад +3

    After changing position to Scroll with parent, I tried changing overflow to vertical, but as I am changing it, I am getting an error symbol.

  • @user-st6nz3tp9h
    @user-st6nz3tp9h 10 месяцев назад +2

    It's funny how Figma invested so many resources in the new 'advance' prototyping with variables, but still can make the sticky animation work for auto layout.
    They lady in the video admitted that she had to come up with all the hacks described in this video to make this work

  • @michaelschultze3595
    @michaelschultze3595 28 дней назад

    It's always nice to see a feature explained using a simple example. But never provide the videos for the complex layouts. Unfortunately, a lot of things don't work 🙈 Thanky anyway!

  • @SShahwali
    @SShahwali Год назад +6

    Hats off to this amazing feature. It would be great if the list was in auto layout :(
    Because the list content keeps changing that will make it a bit difficult

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

    Thank you!

  • @bc4749
    @bc4749 11 месяцев назад +4

    What if I don't want the element to be forever sticky? Is there a sticky scoll 'pause'? meaning it will just pause/pin on few scrolls and then it will scroll together with the parent after. Cheers!

  • @Sticky-CTA
    @Sticky-CTA 6 месяцев назад

    Good idea

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

    thank you

  • @dannytimm2012
    @dannytimm2012 6 месяцев назад

    Can you do this a different way? Cmd drag the frame with Autolayout? Then object layering?

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

    I've been working as a product designer who is educated in Media Design from 2009 till 2019, I switched fully to being a product manager after that, and I STILL see why I always hated prototyping in Figma, and just opened After Effects for all my prototypes lol

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

    where I get this file for practice

  • @juliesz78
    @juliesz78 10 месяцев назад +1

    I hope this feature will be added to Autolayout

  • @incyphe
    @incyphe Год назад +3

    Implementation is still a bit hacky because it's trying to work within the existing layer order behavior.

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

    I need to get sticky more than one element. There is a gap between them. For instance, how to get sticky all those elements but all in a row one after another?

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

    I've been working on several client prototypes to come to this conclusion.
    Y'all confirminging the sticky scroll isn't compatible to autolayout is... disappointing.
    @Figma is a major pain point bc it's a hastle to create multiple screens and makes sure it's consistent with each other if I make minor screen changes.

  • @ozgu8354
    @ozgu8354 8 месяцев назад +1

    Choose your side: auto-layout or sticky scroll 🤦‍♀

  • @andrewstrasser
    @andrewstrasser 18 дней назад

    is there away to scroll to something inside of a variant?

  • @akinbuletioluwalashe4392
    @akinbuletioluwalashe4392 2 месяца назад

    Problem SOLVEDDDDDD.

  • @suryakamalnd9888
    @suryakamalnd9888 9 дней назад

    How to make it so that these text fields are dynamic and update to the point I set in python?

  • @dabianshyt
    @dabianshyt 11 месяцев назад

    can i ask why when I set vertical scroll, can I pull down more than what I have as content on the page? (exposing a large white area above my screen), not too sure what is causing it, spend hours.

    • @ramenpiece
      @ramenpiece 10 месяцев назад +1

      if you try to enable scrolling for grouped layers, it will do that and dragging left/right also cause white spaces--> you have to ungroup the grouped layers, right-click the layers, and use 'Frame selection'. Then your prototype scrolling should work as intended.

  • @esosauwoghiren4985
    @esosauwoghiren4985 11 месяцев назад +1

    I've been trying to work this thing out but when I make the body frame "vertically scrollable" it gives the error icon. I've followed the example frame by frame yet it still gives me the same issue. Please, I could really use an assist.

    • @scottishwildcat
      @scottishwildcat 10 месяцев назад +1

      What does the message beside the error icon say? That will tell you what the problem is. (Usually, it means that the content you're trying to scroll is shorter than the frame you want it to scroll within, so there's nothing to scroll.)

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

      @@scottishwildcat Tbh, I still don't know what didn't make work with that frame but I've been able to get it working. Thank you!

  • @uxdesigneraw4558
    @uxdesigneraw4558 6 месяцев назад

    This is really quite a bummer... Hopefully it gets fixed soon with Auto-Layout and multiple sticky elements without having to "hack" half your work.

  • @Sha-rl5bz
    @Sha-rl5bz 9 месяцев назад +1

    Very disappointed this doesn't work with auto-layout. Design is iterative so there will be need to go back and forth, autolayout makes designing easier and smoother. To have to remove autolayout and remake a whole frame every time you want a simple sticky scroll for a prototype breaks the work flow. I hope figma can fix this.

    • @Sha-rl5bz
      @Sha-rl5bz 9 месяцев назад

      Not to mention you have to do it for multiple pages. This is ridiculous.

  • @saroman_valar
    @saroman_valar 5 месяцев назад

    Im trying to make 2 separated scrolling on one page and Figma keeps fuking me up the ass.m sometimes the tool gets frustrating

  • @okiemuteolayinka7820
    @okiemuteolayinka7820 3 месяца назад

    Didn’t work for me

  • @DavidRhyne
    @DavidRhyne 6 дней назад +1

    Yeah if this doesn't work with Auto Layout it's pretty much useless. Why did they build it this way??

  • @David-xq7ef
    @David-xq7ef 8 месяцев назад

    So we can't sticky ? that really sucks. We have to find a cheat... seriously

  • @user-hv3uh3hv1e
    @user-hv3uh3hv1e 8 месяцев назад

    yeah this is trash. Your team has built in a work around for something that should be here from day 1. The fact that this doesn't work with auto layout is ridiculous as well

  • @funkfreeze
    @funkfreeze 6 месяцев назад

    No autolayout?! Jesus. Your prototyping tools are such a time sink it's unreal. It cost's my company's clients a lot to have us research workarounds for basic stuff like this. We need to spend more time on design, not prototyping. Frustrating.