Figma Scrolling Frame

I have a scrolling frame in figma (image below) and I was wondering how I would get the scroll bar in Roblox, I tried the ‘top image’ and stuff, but they appear without color and don’t scale correctly. Thanks ahead of time!

Screenshot 2023-05-11 at 9.54.52 PM

if you’re importing the images with their color, make sure the scrollbar color is set to (255, 255, 255), and that the top and bottom images are imported at a 1:1 aspect ratio.

One thing to consider is the middle image will be squashed and stretched to fit the frame, where as the top and bottom images may not always change with it, so if you import with the gradient it has now, it may not look correct at all times.

2 Likes

How do I import/export it at a 1:1 aspect ratio?

in short, if your figma image is 18 pixels wide, make sure you import a square cropped version of the top of your scrollbar that is 18x18 pixels in size. Here’s an example of how roblox does theirs, though they don’t exactly follow this rule.

Screenshot 2023-05-12 at 8.23.35 AM

Again roblox doesn’t really follow this rule which causes their scrollbars to scale differently (example: setting scrollbar width to 20, but the actual displayed size is less than that because of incorrect image size) but this should still give you a better idea of what I’m talking about.

1 Like

Thank you so much!

unneeded extra text

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.