Sticky scroll

Подписаться 586 тыс.

Просмотров 136 тыс.

50% 1

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

Опубликовано:

10 сен 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 44

@Dupdopy Год назад

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 =)

@davingerber Год назад

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 Год назад

Thanks for the tip, Davin!

@kjellruben Год назад

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

@SalimFromATL 3 месяца назад

Easy and simple way to make it work - awesome.

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

I loveeeeeee the way you explain

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

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!

@user-st6nz3tp9h Год назад

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

@figmatico Год назад

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

@vs.swetha 3 месяца назад

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

@SShahwali Год назад

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

@DavidRhyne 3 месяца назад

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

@Yashkurale-v9p 11 месяцев назад

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.

@bc4749 Год назад

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!

@suryakamalnd9888 4 месяца назад

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

@juliesz78 Год назад

I hope this feature will be added to Autolayout

@exequielvibar2371 15 дней назад

Hello, how can I change the background color of the header when scrolling and revert it to its default background when it returns to its original state? Thank you.

@incyphe Год назад

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

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

Good idea

@mischugo 4 месяца назад

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!

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

Thank you!

@andrewstrasser 4 месяца назад

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

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

Problem SOLVEDDDDDD.

@esosauwoghiren4985 Год назад

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 Год назад

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 Год назад

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

@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

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

thank you

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

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.

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

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

@gorshkof Год назад

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?

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

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)

@inspireIQ8 Год назад

where I get this file for practice

@dabianshyt Год назад

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 Год назад

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.

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

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

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

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

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

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.

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

Didn’t work for me

@Sha-rl5bz Год назад

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 Год назад

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

@David-xq7ef Год назад

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

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

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 9 месяцев назад

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.