[PLUGIN] UI Designer Pro

[pvvxt (koda)]

Acquire Designer Pro

Designer Pro will be receiving continuous free updates and bug fixes for its entire lifetime.

Until now, plugins for designers had often required users to buy multiple different plugins to have a full-feature experience, or had overly high price points that didn’t match the quality of the product. UI Designer Pro will be the solution to this problem. Created by an actual UI designer with experience on the platform, this plugin aims to deliver powerful and high quality solutions to the problems designers face in studio.

( Design inspiration and credits to [Zack - Roblox] Zac1kio, and his creation [Blob. Lite] ).

---

Core Features & Technical Overview

1. Visual Layout Order Editor

• Overview: Provides an interactive node-based interface to evaluate and modify the LayoutOrder of UI elements directly, eliminating the need to manually alter properties in the properties window.
  
  
  
  

2. Scale ↔ Offset Conversion Engine

• Overview: Converts UI Size and Position coordinates between Relative (Scale) and Absolute (Offset) values. This utility also supports complex conversions for secondary elements like UIStroke (thickness) and UICorner (radius).
  
  

3. Boundary Alignment & Offset Tools

• Overview: Snaps selected UI elements directly to parent container boundaries while allowing for the application of precise, pixel-level offsets.
  
  

4. Automated Aspect Ratio Calculator

• Overview: Evaluates the real-time physical proportions of selected UI elements and dynamically updates UIAspectRatioConstraint values to maintain modified aspect ratio constraints during edit time.
  
  
  
  

5. Bounding Frame Generator

• Overview: Takes the absolute bounds (size and position) of multiple selected UI objects to generate and wrap them in a correctly proportioned container frame.
• Demonstration: Video Demo
  
  
  
  

6. Global Default Property Manager

• Overview: Allows developers to predefine custom property profiles that are automatically assigned to newly instantiated GUI elements. Supports all GUI instance classes, including Frame, ImageLabel, UIShadow, TextButton etc, this feature will dynamically update with roblox as the api is modified, meaning this feature will always remain up-to-date.
  
  
  
  

7. Anchor Point & Position Modifier

• Overview: Allows customization of AnchorPoint corresponding with Position coordinates, applying anchor point changes without modifying the position.
  
  

8. Adaptive Theme System

• Overview: Features a customizable styling engine to match your interface preferences and integrate with Roblox Studio’s light and dark themes.
  
  

9. Absolute Dimension Preservation (Maintain Size)

• Overview: Retains the exact absolute size (pixels) of a GUI object when reparenting it to a container that utilizes scale coordinates, preventing unintended resizing.
  
  

10. Equidistant Offsetting

• Overview: Configures and applies uniform offsets to instances from their parent containers using either scale or pixel-based calculations.
  
  

11. Custom Viewport Handles

• Overview: Replaces default studio handles with specialized manipulation handles inside the workspace viewport for manual scaling and rotation.
  
  
  
  
  
  
  

12. Precision Nudge Tool

• Overview: Enables discrete incremental shifts of selected UI instances using keyboard shortcuts, based on user-defined step sizes (Pixels).
  
  

13. Zoom & Pan

• Overview: Isolates and magnifies selected GUI elements to enable higher-precision detailing and alignment within the viewport.
• Demonstration: Video Demo
  
  
  
  

14. Asset Manager

• Overview: A localized database within the plugin to organize, store, and reference assets such as audio files, decals, and images across multiple projects.
• Demonstration: Video Demo
  
  
  
  

15. Device Viewer

• Overview: Gives the user the ability to hotswap between different device views, such as mobile, desktop, vr & more.
  
  

---

Roadmap (Planned Features)

Figma Importer

• Overview: This Roblox Studio is bundled with a figma-plugin, this will allow the user to convert their figma designs into usable roblox instances, you can use this figma plugin for free, but it won’t be of any use unless paired with the roblox studio plugin, as our conversion process is internally different and is not cross-compatible with other importers.
  
  
  
  
  

On-screen macros

• Overview: This feature will be integrated into the existing viewport handles, what it will introduce is a button to open a list of quick-actions to allow the user to manage their ui right in the viewport, without having to jump back into the plugin widget window to do a certain action.

---

Support & Maintenance

Regular maintenance updates, optimizations, and bug fixes are deployed weekly.

• Reporting & Feedback: For bug reports, performance issues, or feature requests, please submit them via Discord at: oapa.
• Update Schedule: Maintenance patches and updates are regularly pushed on Fridays at 6:00 PM Eastern Standard Time (EST).

[ruinedcenturies (taze)]

AI but cool nonetheless, nice stuff
However I feel if you were actually a UI designer you wouldn’t vibecode a UI design

[pvvxt (koda)]

AI wasn’t used to make the entirety of the plugin, it was used in key scenarios where the logic of the features were too complex for me to code myself, but the main reason I did utilize claude is to get this launched to the public without any major bugs and as quickly as I could, as this tooling was only originally made for my own personal use, I just felt like it was a good enough tool to share and as I invested more money into it to get it launched, I figured it’s only fair to make it paid, I hope this doesn’t drive people away as my intentions were only positive in the creation of this when I did utilize claude.

Though I’m glad you think the plugin seems cool! Thank you for your feedback, if you have any suggestions let me know.

P.S. I know that using AI is like the black plague to the developer community because of how it manages to error and mess up code in certain ways, though I have tested and gone through and personally verified the code to be working, I would never prompt claude like a vibe-coder and not test the product before launching it.

[ruinedcenturies (taze)]

big respect man, bit odd to release paid but i’d understand if you went through and made everything yourself

glws tho

[pvvxt (koda)]

The reason behind me making the plugin paid is due to the amount of my own money I had invested into it to get it launched, I would have made this plugin free had it not been this way, and the main reason this plugin will continue to be paid even after I break even is due to the upcoming Figma Importer feature, which has been a pain to develop, I have to make a figma plugin on top of the existing roblox studio plugin then build a conversion engine so that I can translate figma designs into usable roblox instances, this is a major development hurdle for me and I believe it’s fair to make such a useful feature that was also a pain to create a one time payment, most of the existing figma importers tend to break or have less features than the one I have planned.

Though I do plan to release a free version with less features than it currently has in the future, this way developers can utilize some useful functionality of the plugin without having to invest into it, as a token of good faith to the developer community.