I have created a very lengthy UI Importing Tutorial for you guys that goes over almost everything. It is up to 3 hours long and covers the basics of every GUI object in Roblox Studio.
Some info about myself— I am a UI designer on the platform, working for some of the most awaited upcoming games on Roblox, and I own the biggest UI server (6K+ members) on Discord.
I decided to give back to the community and make tutorials off of my own skillset, and this is a stem from that production.
The Best, Free UI Plugin
I have also provided a FREE plugin that I created for the community to help with importing in the video- called Kekui (kek-oo-wee).
What’s included in the Importing Tutorial?
-
1. Preparation & Exporting: Introduction to Kekui plugin, file formatting rules (PNG vs JPG, 1024px limit), saving practices, specific export guides for Photoshop, Figma, Affinity, and Photopea, Roblox uploading and the Device Emulator.
-
2. Core UI Objects: Setting up primary GUIs (Screen, Billboard, Surface), understanding hierarchy, and using basic elements like Frames, Text/Image Labels, Buttons, CanvasGroups, and Viewport/Scrolling Frames.
-
3. Modifiers & Layouts: Understanding UI modifiers (Corner, Stroke, Padding, Scale, Gradient, AspectRatioConstraints) and organizing elements using UI Layout tools (List, Grid, Page, Table).
-
4. Advanced Techniques: Implementing greyscaling, understanding hitboxes, applying constraints properly, creating scrolling fades, fixing imported bars, using 9-Slice, and building circular bars.
-
5. Complete Workflows: Practical application including general Kekui UI work, using Kekui’s “Ultra Scale,” and walkthroughs for exporting and importing a complete “Anime UI.”
Need help?
You can ping expert UI designers for help in our UI Discord Server.
Link: https://www.discord.com/invite/ugen
Have fun designing! 
