Display scroll bar in prototype preview mode

There’s no visible scrollbar in Figma prototyping mode. Yesterday we’re having user testings and once again this same topic popped out. Some of the users didn’t thought that they could scroll prototype because scrollbar wasn’t visible. One of the user was using laptop’s touchpad and he wasn’t able to scroll with only using touchpad. Guiding user how to use prototype during test can harm testing situations. Atleast it’s sure that if user thought that he can’t scroll it leads to biased feedback about product.

If there’s some reason not to have scrollbar it could be atleast optional feature that designer could turn visible scrollbar on from options.

It’s not only who has came across with this weakness in Figma. Here’s old Spectrum thread about same topic but Figma hasn’t done anything for this yet and I hope this get more attention here.

34 Likes

Also having this issue with some research participants on Windows. It’s pretty impactful and we’ve had to resort to screen sharing rather than having them click through screens, which is far from ideal.

7 Likes

I also have this same issue, and it’s mostly related to Windows users. It seems that Mac users have better overall Trackpads and scrolling is easier; however that is not a fact but an observation.

I absolutely need a way to let users know that regions are scrollable beyond needing to create clues for each and every instance that something is scrollable. Just because my Mac is set to hide scrollbars until time of need doesn’t mean that prototypes should be the same way.

4 Likes

Would be great if you could have a scrollbar on a scrollable frame that is proportionate to the content that is scrollable. Adding a fake one helps with signifying the interaction, but having that feedback would be fantastic.
It would need to be customizable.

12 Likes

Hello!
When fully functional scrollbars will be available? I haven’t figured how to make them for my site project rather than make fake ones (basically making background element of scrollbar in scrollables and front element in fixed). It always stays pretty big to emulate the right behaviour of getting from start to end of scrollable area. It doesn’t “read” how many images are in the scroll list, like it does for example in yt, when it becoming smaller if the comments section is large. And creating second frame with same content but with an offset to the bottom to create smart animate isn’t really a good move, bcoz you got to be choosing between being able to scroll with the wheel and to stop wherever you want on the page or you’re like dragging between gallery elements which isn’t the desired result anyway.

Well ofc it can be just me not knowing some specific workaround or even feature, but anyway, I will be very appreciated if someone shares a better solution. It’s also strange cuz Figma canvas itself has both vbar and hbar, but you can’t prototype your own? Thanks in advance for any help!

Edit: Maybe (if there’s indeed scrollbars lack/issue and not me lol) the best solution would be an implementation of built-in interactive scrollbars feature, so it would attach to scrollable frames, so you could change it’s size, shape, color, opacity etc. ?

3 Likes

Wouldn’t it be nice (that’s a nice song from Beach Boys :P) to have scrollbars on Figma prototypes when you have a container that is scrollable? And enable disable, change style etc.

Here is the idea.

I would not talk about scrollbar in terms of usability and why it is important especially on inner containers on small devices. I will just paste some thoughts from other ppl talking about this subject…

1 Like

Just want to +1 this thread and add that it is a big issue for usability testing within a prototype. I recently tested a prototype in Figma and 2/5 people in one round had issues with scrolling. You can scroll through Figma with a mouse scroll wheel but not everyone has that, and I could tell the participants were looking for a scroll bar option. Even scrolling with the arrow keys would help. I don’t want to add custom interactive scroll bars into the prototype or do anything fancy, i just want my participants to be able to see parts of the prototype that are too long to fit above the fold like they would use a normal website.

4 Likes

Want to +1 on this. We need a scrollbar really bad!!!

6 Likes

Still no scrollbar? I had the same issue with one of my designs, using a scrollbar would be awesome for some designs, especially if we think designing with acessibility in mind.

4 Likes

It could be an option in the prototype mode. A checkbox in the Overflow Scrolling section “show scrollbar” and the chance to set colours, radius, dimensions…

4 Likes

We are also having this issue testing with Windows users who are used to using the scrollbar in order to scroll. Since we are testing remote we can’t really help them more than explain how to use their trackpad - but this is not their natural behaviour.

I don’t see why you can’t just enable the native way depending on device? Please fix this.

1 Like

I bet Figma have have long backlog but do people at Figma think that the value of this problem is so small that they can just skip it? It’s originally reported over 3 years ago so it seems that they think so. Every now and then users come and complains about lacking this feature. It’s not the most complex feature to add but it affects quite a bit to the tests as you can see. The problem is persistent and it’s going to bias user tests until you fix it.

@nikolasklein @Keeyen @Jenny_Wen @Oscar_Nilsson @shanahu @Rogie_King

same issue

I would def love to see something like this!

I’ve created fixed scrollbars but when I scroll it’s just static, not moving ofc :see_no_evil:

4 Likes

Same issue reported today by one of our researchers. The participant was using a track pad and was unable to scroll down. Having a scroll bar in the prototype mode is extremely important.

1 Like

Yep, this is a massive usability issue. Can you (Figma) not just add a “Show scroll bar” option when selecting a scroll direction? I get that if designing for mobile and apps you don’t want to have a naff scroll bar ruining your horizontal scroll (Netflix) experience but not everyone using Figma is designing apps.

Please make this simple functionality a priority and champion usability.

4 Likes

I design so many pages and frames which include huge content and need scrolling. When I turn on scrolling for a frame Figma does not offer a real-time scroll bar so I can see on the prototype how long the page scrolls. There should be a feature to connect the content within a scrolling frame to a real-time scroll bar so I can use the scroll bar as well as the mouse scroll wheel.
A solution to this could be using interactive components to create my own interactive scroll bar but the problem is that it’s not connected to the content so I need to create several pages and use Drag interaction to fake the scroll bar.

Does anyone else have this experience?

The problem
When creating prototypes for designs containing scrollable areas, we want to make sure it’s clear to our user testers or developers which areas (frames) are scrollable areas. When using “present mode”, it’s not clear which areas are scrollable since they do not display a scrollbar.

The solution
Show a scrollbar when a frame is set as scrollable in the present mode. (Just use the default OS/browser scrollbar?)

I browsed through the forum and community plugins, but as far as I know there is no easy workaround for this.

Frame 5

Additional prototype setting?
I get that this might not be wanted behaviour for Mobile app prototypes, but maybe this could be a setting in the prototype options?
Group 1

7 Likes

Great suggestion! For me, it would have to be optional / configurable, since I don’t want a scrollbar in my mobile app prototypes, but it would be great for desktop stuff.

2 Likes

+1000

Until this is resolved it will be extremely difficult for us to consistently use Figma as a prototyping tool, meaning we will have to import our designs into something like Axure and do all of our interaction design there.

2 Likes