Warning
- This UI contains UIStroke, a currently unavailable Instance. This will not work in live games, only when the component is released will it work in live places.
- The UI is obviously not complete at all. If you want to complete it (ie. making it similar to the macOS file design, or make it look better, please do so)
Introduction
Greetings, developers.
I’m ghidras, a UI Designer new to the developing community!
Roblox has recently introduced a brand new Instance for UIObjects, called UIStroke.
This allows you to add strokes (basically borders) to other objects, including rounded objects using UICorner.
To test out what this feature is capable of, I decided to open sourced one of my user interfaces that I was working on. It’s not complete, but that’s where you come in! You’re able to freely modify this source however you like!
Downloading
Step 1: Download the model, which you can find here: macFrame.rbxm
Step 2: Drop it into studio and configure the model
NOTICE
You can’t view the UIStroke in a normal Studio build. In order to view the UIStroke, you’ll need a modified studio build (aka Roblox Studio Mod Manager) to view UIStroke until Roblox enables it again.
ROBLOX STUDIO MOD MANAGER STEPS
Step 1: Download Roblox Studio Mod Manager via the Github: here
Step 2: Go to the Flag Editor and change the following Flags to true:
- EnableUIStroke2
- GfxGuiRefactor2
- UIStrokeShaderChanges
Step 3: Load Studio via Roblox Studio Mod Manager, and load a new place.
Step 4: Insert the rbxm to the game, and reparent to StarterGui or any other GUI location.
Screenshot of the UI:
This cannot be used in a live game, so please wait for the feature to roll out for games.
I hope you enjoy this release. If you want to suggest more GUIs for me to make, comment, but also leave thoughts on the UI i’ve released, as it helps me to make more UIs with passion.
Thanks, and goodbye.