Display scroll bar in prototype preview mode

Oh this is an old topic 😲 +1

We really need this

Wow this issue has been open for 3 years.
I’m fairly new to Figma but ran into this today when building a scrolling frame. There is no indication that the frame is scrolling or scrollable, so yeah. Scrollbars. We need them.

Thank you, but this script did not work, are you sure, this is the correct syntax? Could you also append a screenshot of how it will look like?

Yes, it works. It simply displays the scrollbar that would be visible if Figma didn’t hide it. It looks exactly like any other scrollbar in your browser.

I was going to put the full script here, but this forum thinks I’m mentioning someone and blocked it.

Thank you 🙂 I retyped your screenshot, but it still just does nothing. This is intended to show a scrollbar in the final clickable prototype in preview mode?

Also when I add these classes manually I see no effect on Chrome on Windows.

Clickable prototype is not HTML. Apparently they made it using Canvas - so it works as if they simply sent you JPG/PNG files.

So it’s a complete disaster UX/UI-wise. Simply don’t use it and click around in design/dev mode.

Oh no…but this is what this thread is all about. I can’t do usability tests in design/dev mode since there are e.g. no Hover Effects etc.

⭐ WE NEED MORE VOTES ON THIS TOPIC: Please post it on social media, share it with your friends or send it to Figma as a feature request since otherwise they wouldn’t even notice…

—> Why?

When is it going to be able?

Needed, bump.

It’s amazing to me that software meant to mock up UIs for the sake of testing refuses to emulate the real world (i.e. scroll bars AT LEAST show up when scrolling…) - what is the point of not having this or not having it as an option? I have to specifically design the height of a list box so it cuts off one of the items to show that it is scrollable, and even still, some users ask if it is scrollable before they do it. Discoverability… not to mention, to my surprise, many users I design for (I design for enterprise so there are less than 20 users and I know them all personally) will actually click and drag the scroll bar instead of using their mouse wheel.

I think it’s really frustrating when these tech companies think they are being innovative by designing for mobile (and only mobile, cough material cough) and assume that everyone using the web has the latest hardware (a scroll wheel or touchpad) as their primary and preferred method of navigating around a page.

Considering this is a feature that has been requested for years now, by many users it seems, it makes me wonder if Figma is the right tool to be using. At least with Axure I can program in my own scrollbar. Though, I don’t have to, because the scroll bars emulate the real world since it is rendered/previewed in whatever browser I want… once again, one tool is good for one thing, and another tool is good for another. Yet for some reason, one company has yet to incorporate both interaction flexibility AND style/variable management into the same product. Maybe one day…

Still waiting for this.

Bumping this

New keynote and still no native scroll bar 🙁

Scrollbar is just another thing on the list of the things Figma dev team should be focusing on instead of introducing another half-baked feature that nobody asked for.

It’s frustrating honestly.

Why is this still not possible? This is crucial for usability tests…

Not just for testing older people that only navigate with a scrollbar as the initiator of this post seems to imply - it is an indicator to see that there is a scrollable area for all desktop devices (but please add the option to just show it when hovering a scrollable area, as it is common these days).

please add this function

+1 to this

just started usability studies with a Figma prototype for the first time and most of my participants are not realising that they can scroll.

Hi everyone,

I’m pretty new to Figma and, like many of you, encountered an issue I couldn’t find a solution for in the YouTube tutorials I watched. After experimenting a bit, I discovered a method to imitate a scroll bar, even though it doesn’t have any actual functionality.

What I did was create a scroll bar inside the scrolling frame. The long bar scrolls with the parent frame, while the thumb remains fixed in place.

Hope this help someone.
FYI I’m using a Mac, and don’t know too much about Windows.

I have once again hit a wall with prototyping… I need a scrolling div within a page that itself scrolls, which is technically possible, but not with a visible scrollbar. It really needs a visible scrollbar to indicate that it can scroll.

I don’t (and never will) have the bandwidth to build native UI elements like that myself, nor do I want to figure out how to integrate and troubleshoot a custom scrollbar component built by someone in the community. I would love to be able to do all my design and prototyping in Figma, but we really still can’t move off of Axure because of this. Please we need native support for scrollbars!

Here’s a user testing “workaround”. I’ve found what works for me is just putting a static fake scrollbar in the mockup. In almost all cases, my participants have scrolled naturally when seeing the fake scroll bar and didn’t question why the position indicator was not matching the scroll position.

Bumping this too, it’s a must for user testing.

Just bumping this once more! Its a must.