UI-Response - Preview responsive UI live (free plugin)

UI-Response

UI-Response simplifies the development of responsive UI by showing previews of how it will look in different aspect ratios and resolutions live.

Get the plugin here: https://create.roblox.com/marketplace/asset/14883462875/UIResponse


Credit to XQII46 for UI

UI-Response will enhance cross-platform developers workflows and make them more efficient. You’ll be able to make stunning UI for all devices on the first try.

How to use:

  1. Once you’ve downloaded the plugin, click on the button in the toolbar to create a new UI-Response window.
  2. Place the window in a suitable location.
  3. Click the button in the top-left corner of the window to open the dropdown and set the aspect ratio you wish to preview.
  4. Select a Screen GUI to see a preview of it in the UI-Response window.

Bugs:

If you find a bug, please report it in this thread. Make sure to check for any errors in the output console.

I hope you'll find it useful!
16 Likes

Can you show us a video of it in action?

4 Likes

Sure, here’s a quick demonstration:

3 Likes

isn’t this just “Test Device” thing on the View tab i believe?

3 Likes

I thought you’d be able to input code and see how different types of UI animations would look. Instead it’s just, well, previewing. Not sure I understand the use other than saving around 1 second of your time?

3 Likes

The title is very misleading. I thought it would run code inside and you would be able to see how it does in runtime but nope, that feature is already built in, test > device or smth like that.

2 Likes

It accomplishes the same goal except my plugin makes it instant. If you were to use the Device option you can’t see multiple aspect ratios at once and it will take like 10 seconds to check how a change you made looks for three different devices.

1 Like

If that’s what you need this plugin might be for you. I haven’t used it but it seems like it’d do the trick.

Also, the use isn’t just for saving time, which by the way can become substantial since checking how your UI looks in different aspect ratios is a slow process and something you end up doing a lot. The other purpose is to allow you to create UI while simultaneously seeing how it will look on different devices. If you create the UI in desktop mode it will look best for pc players. At the end, when you preview the UI for phones and tablets, you’ll probably just fix the glaring issues. You’re not going to completely redesign it. However, if you see a preview as you’re creating it the UI you’ll be able to choose the design that works best across all devices.

The title is not misleading. Responsive UI means UI that adjusts it’s layout to fit different screen sizes and devices. I’m sorry if you thought it meant something different.

But the “Preview responsive UI live” part is, it normally means responsiveness as in how smooth does it response to user actions, either way, it’s not a big deal. You just needed to give a good description and show how it works and whether the title is misleading or not, it’ll be clear what it actually does.

I get what responsive means, but previewing live is literally what u can do by just resizing or using the built-in test “tab” so no one could have guessed you meant the default feature.

Am I the only one that thinks this is really handy? I don’t have a big monitor so this saves a lot of time and tweaking to fit UI nicely on all devices. Thanks a lot for this!

2 Likes

Thanks! I’m really glad you like it.

1 Like

I’ll try this out once Roblox comes back online