UI Scaling Issue

[DoctorBurn]

Hello!
I recently made a gui in Adobe XD, and I’m having some issues after importing it.
Here are some screenshots:

UI in Adobe XD

My plan is to make the Filled bar tweened to the amount of HP/Stat the player has, but when it comes to resizing it in Roblox, I get this:

UI in Roblox

How can I go about making a better fitting scaling option for this?
Please, Please, don’t link this topic:

UI Design Starter Guide

In this guide I will be showing you some good practices for graphical user interface (GUI) design, as well as how to make GUIs in Roblox. Ultimately what you should do is up to you; I might have good advice, but there will always be exceptions. Design is a flexible discipline. Feel free to mess around or do things that are “wrong”. Just remember that you want to provide a good experience for your players, and a confusing or annoying UI will not help you in that goal. I have reached the maximum…

I have already looked into it, and it is too complex for me, and I don’t know how to scale this properly. Thanks for your help!

[FlashFlame_Roblox (LocalPlayer)]

I had the same problem too when making that. But I found this post which is really helpful to non-square shaped bar.

Rounded Loading Bar

Sure! Here’s my Explorer setup: [image] Here’s the Base ImageLabel, just set up as you usually would: [image] You can position and size it however you like. Nothing crazy about the image settings either: [image] Inside that, I have a frame called Clipping: [image] It’s just an invisible frame with ClipsDescendants enabled, and it’s sized to match the current progress. For example, if the current progress is 25%, the size of that frame will be {0.25, 0}, {1, 0}, where the 0.25 represent…

[shibariyu (lyoo)]

I have no clue if that’s possible on Adobe XD, but that’s personally what I do on photoshop. I first “merge” the layer’s styles if there are any, and merge layers if needed. Then, I copy the layer, and I click “open new file” and it should automatically fill the size with the image I copied. I usually write the sizes down in a notepad. The, I just export the layer as an image file. On Studio, I create an ImageLabel, change the size in offset (because it’s pixels) with what I wrote down earlier and upload the image to it.

[DoctorBurn]

So how would I change the size from adobe/ps to roblox’s size

[shibariyu (lyoo)]

Basically, when you have a layer/image copied in your clipboard, and open a new file on PS, it should automatically fill the resolution of it. Just write it somewhere (i write it on an notepad). Since it’s in pixels, you just have to use offset to scale it. If you dislike offset, you can put the offset values first and convert them to scale with that ui scale plugin. (btw this pic isnt from me, its from google cus im not on my pc atm)

[DoctorBurn]

But one value always stays the same, as the other moves depending on the value, as that causes it to stretch, maybe i’m misinterpreting it though. If I had a 100x100 Pixel Image, How would I change it to level with roblox’s studs? I feel like I’m going about this wrong

[shibariyu (lyoo)]

Oh, I’m not 100% sure of how to help in that case, apologies. But if you have a 100x100 pixel image, I would just put offset X 100 and offset Y 100. If you want to use scale without stretching it, I’d use thet UI scale plugin and I’d add an UIAspectRatioConstraint.