– created by –
This tutorial will not get into UI programming, only designing it, prototyping it and finally importing it into Roblox and showing developers how you want it.
Hello! Are you looking into getting into UI? This topic will go over the tools, strategies and everything you’ll need to begin creating UI.
If you don’t have any knowledge of Roblox Studio and/or Figma, you’ll have to learn about those before following this guide.
Step 1 is to simply sketch out the UI. If you’re a perfectionist, I’d recommend using software with limitations (like MS paint). If not, you can use whatever software you want but don’t overdetail the UI, this is just the sketch. Here’s an example of a good sketch, created in the beloved MS Paint.
The arrows signify motion, showing how everything will come in.
The “wait” text signifies that there will be a delay of 0.3 in the middle of all of these animations.
I decided to have a unique “Featured Gamepass” part, showcasing a neat gamepass in a big header for the shop to fill in the empty space.
Once your sketch is finished, we can get started on making a more detailed version using Figma.
Before you use Figma, you’ll need some sweet colors and icons.
For icons, I and many others use:
KenneyNL - Kenney has a LOT of icons and game assets that are completely free to use. NOTE: If you’re using Kenney assets, you need to follow the rules about using them.
Icons8 - Icons8 is a website with many icons in different design languages. Languages include Material, iOS, Material Design, Fluent and many more. NOTE: If you’re using their icons, you need to follow the rules about using them.
For colors, I and many others use:
Grabient - Grabient is a website with amazing looking gradients which you can simply copy and paste into Studio or Figma.
Coolors Coolors has a palette creator which you can refresh by pressing space.
Once you find a color you want, hover over the color, click on the lock icon and press it to keep it whenever you press
space again.
Now, it’s figma time.
Again, if you don’t understand Figma, please try and learn it before following the rest of this tutorial. This isn’t a figma tutorial.
Let’s make a layout so that we can know where things go and where to align them.
The reason we don’t want to make everything detailed yet is because we have to align everything without other positions interfearing with the button positions. (for example, we don’t want the close button to interfear with the “shop” text).
TIP: Depending on which UI you’re doing, experiment with rounded edges on frames and buttons.
Now, unleash the colors.
TIP: Depending on the scenario, make sure to not always use a dark theme. Occasionally use light theme, like for cartoony UI or UI that is meant to be playful.
With our colors, we can add some images and icons. You don’t have to use icons from the sites I’ve linked, but for this case I’m going to create my own vector icons. You can most likely find icons similar to my own custom ones on Kenney or Icons8.
I decided to replace the gamepass icon with a ticket and the cosmetics icon with a star. I realized my initial concepts were too complicated and wouldn’t fit the minimalistic theme we’re going for. I also decided to add more to the layout, adding a title container, description container and a green buy button for the gravity coil. I also ditched the idea of a Roblox screenshot as the header. I changed a few colors too.
Now, we’ll start adding some text. Make sure to align the text as well!
After adding some text, you’ll realize that the UI no longer looks empty. You might’ve noticed that I changed some more colors and the Cosmetics icon. UI is all about trial and error. Keep experimenting until you’re happy with what you have!
The last part of Figma prototyping is to add finishing touches like gradients, rounded corners, glow effects and more!
For this design, I decided to add a glow effect to the “Go VIP!” button and add a drop shadow to the whole frame. I also added some gradients to the “Go VIP!” button, the background and the “Featured Gamepass”. Here’s the finished Figma result!
If you’re unsure how to make a cool glow like the one on the VIP button, here’s a quick tutorial!
Once you have your Figma prototype out of the way, you can begin importing it into Roblox.
This step is a little time consuming but it’s also the easier part of all of this.
The way we’ll do this is by exporting all the images and copying the colors and gradients that we used.
First off, let’s get the images out of the way. In Figma, you can select an image, go to the properties of it and press “Export”.
After you click this, you should have a list of options like this:
If you want a higher quality image, click on the dropdown that says “PNG” on it by default and select SVG. However, you will need a vector editing software to edit the SVG.
TIP: To allow recoloring of an image inside of Roblox, change the colors of your images to white. This way, you can use the Color3 value of the image to change the color to whatever you want.
Once all your settings look fine, click on the big “Export” button!
Repeat this process for every image from the prototype.
Whenever all of your images finish exporting, open up Studio and open up an empty baseplate. In this baseplate, insert a ScreenGui into the StarterGui
Inside of this ScreenGui, insert a frame and change the size to whatever floats your boat. This frame will be the background that we made in Figma.
Before anything, set the anchor point to 0.5,0.5 on the frame.
Copy the colors of the background frame from Figma and put them into Studio.
If you used a gradient in Figma, put a UIGradient inside of the background frame in Studio. If you used rounded corners, put a UICorner inside of the background frame in Studio.
Change the size of the background in Studio to what the size is in Figma.
(the W stands for Width and H stands for Height in Figma.)
Once you have the background, insert some ImageButtons inside of it.
Then, align the buttons just like how they look in Figma.
TIP: When aligning these buttons, don’t use the UI editor, use the properties tab. It takes longer but it’s more efficient. View why the UI editor is very problematic here.
Now, insert the images into Studio. For the images, get the PNGs you downloaded (SVG files don’t work in Studio, you have to convert them into high res PNG files.) and upload them using asset manager or the library. Put the image IDs in the ImageLabels in Studio and once again, position them to where they are in Figma.
Now we’ll put the text into studio. Roblox Studio doesn’t support uploading font files, so you’ll have to work with the default fonts. A list of all the fonts Studio has can be found here
For this tutorial, I went with the Monsterrat font in Figma, so I’ll go with the Gotham font family in Roblox because they look similar. To insert the text, simply make new TextLabels, change the properties of them and position them to how they are in Figma. Once again, don’t use the Roblox UI editor for this, use the properties tab.
And finally, use an AutoScale plugin on every UI Element and then your UI is finished!
Remember, this tutorial is only about UI design, not UI programming.
Do you have any suggestions? Did this tutorial help out? Let me know in the comments below! I’m excited to hear what you have to say!
Thanks for reading! Leave a like if this helps you out!
