Hey Devforum! This is my first post in the Community Tutorials area and I would highly appreciate feedback. There might be some things you might not agree with, if so, speak your mind or find a solution that best fits your needs. Enjoy the tutorial, thanks!
The Beginners Guide To All Things Game Development
Preface
Hey! We are going to cover almost every aspect of game development in ROBLOX
I am a jack of all trades so I do not possess the amount of experience you have in your field. If you are an expert in whatever field I cover, feel free to critique and offer feedback, both the community and I would appreciate it. Also, I will not cover the salary's or average pay for each field as I feel developing for the sole purpose of making money is bad which i will showcase under Topic 4. Also if you need inspiration, watch this, this was the reason i joined ROBLOX and became a developer
General
Before we get to any specific field, there are some topics I would like to touch up on.
1. Start Small
Yes, you are going to hear this alot in your development career. I knew it but I wish that my colleagues told it to me more. The harsh reality is that you are going to fail multiple times before you make anything big. Too many new developers come in with the mindset that they are going to make the next Jailbreak or Adopt Me, when I started back in 2013, I thought I was going to make GTA on ROBLOX. If you take a look at any of my games, you can see that that never became a reality. In fact, since 2013, I’ve only released 3 games of my own. I’m going to repeat it once more start small (see what i did there? 
). Projects I highly recommend to start with are
- Obbys
- Very simple tycoon using a kit
- Simple round based game.
- FPS using a gun kit
- GUI Scripting
- Shop System
These types of games are easy to make and cover most aspects of development, so you can get a taste of each field and what you would like to specialize in.
2. Its ok to use free models
Disagree with me here but I find it very acceptable to use free models, that is as a beginner of course. Some of the biggest developers on ROBLOX started off with free models e.g.
" I started by learning how to build and code in Lua on Roblox Studio by finding free models that had scripts I could modify. One of the models I found was a space gun. I saw where in the code it created the bullet, so I tried making it bigger and it looked like a dodgeball! Later, I created a map with two sides and scripted a round system where players would be teleported to the game and given dodgeballs. That’s how I started to create my first dodgeball game.(https://blog.roblox.com/2018/02/built-city-interview-alexnewtron/)
I used to call myself the professional free model editor, because I would be able to take a free model and transform it into something unrecognizable from the original model. As long as you edit the models and provide credit where its due, it is totally reasonable to use them.
3. Do not jump on the bandwagon
This is controversial one but nevertheless, I believe it needs to be said. The bandwagon in the ROBLOX development community are games like “Difficulty Chart Obby”, “Simulator”, “Clickers”, and “Champions” type of games. These type of games flood the games page and oversaturate the market, there are way too many that follow the same pattern. Click to get money, use that money to get more money, rinse and repeat. There is no reward for this. It’s mindless time killing. There truly is not any innovation in the creation of these games.
Keep in mind some of the games on here have lots of time and effort put into the development of them, I do not mean to offend you, and I am not attacking you, but merely pointing out a trend that is getting out of hand. I truly want to see original and innovative game ideas again.
Many developers start out very ambitious, with grand ideas for games, but soon discover that their idea may not become reality. Don’t let that get to you. If you are passionate about what you do, you will do great work. To quote Steve Jobs
Sometimes life hits you in the head with a brick. Don’t lose faith. I’m convinced that the only thing that kept me going was that I loved what I did. You’ve got to find what you love. And that is as true for your work as it is for your lovers. Your work is going to fill a large part of your life, and the only way to be truly satisfied is to do what you believe is great work. And the only way to do great work is to love what you do. If you haven’t found it yet, keep looking. Don’t settle. As with all matters of the heart, you’ll know when you find it. And, like any great relationship, it just gets better and better as the years roll on. So keep looking until you find it. Don’t settle.
There are many developers who create for the sole purpose of making money. It is true that sometimes these people succeed, but they are the reason simulators and clicker games invaded ROBLOX. Creating because you have a passion for it will often show as players will often have as much fun playing your experience as you have creating it. Do not let the phrase “Powering Imagination” get thrown down the hole!
This one is one i am truly passionate about. Believe it or not, I was once a well known developer and contractor. But that all crashed down and my repuation was destroyed because of one reason, mental health. I overworked myself especially for a 15 year old and I worked and treated myself like an adult, but to be honest, that was not smart, my brain wasnt and isnt set up for these things yet, and I had to get emergency mental health treatment in the middle of a commission, which in turned indirectly made me a scammer. Destroyed my reputation, but I do not regret it and would take the path I did everytime. All in all, focus on yourself before your ego and development. Even if you love what you do, its still work and does take a toll on your brain.
Graphic Designer
I am starting with this field because it is often the "easiest" to get into. It is a field that is easy to start but extremely hard to master. It is the first part of development I tried out. General
Graphic Design is a broad area of development and the topics below are the ones I feel I have enough knowledge to explain. (if you would like to contribute to a section I did not cover, send a PM to me on DevForum)
Things to know
Color Theory
Color Theory is hard to explain, but according to colormatters.com " there are three basic categories of color theory that are logical and useful : The color wheel, color harmony, and the context of how colors are used." Color Theory is what can create the mood of your game or art. Using colors like blue create a calm, sometimes sad environment, as with red can cause a game or art piece to look suspenseful or “angry”. Using colors brings life to your creations, that is often why black and white is used to represent something “old” or “lifeless”.
Color Theory, even a basic understanding of it can help in the long run. You do not want your art to look like this
You can read more about color theory here
BUT, if you are lazy (like me) take advantage of https://coolors.co/. This site is legendary, as you can easily produce color schemes without any knowledge of color theory. It even provides the HEX color codes, rgb, and HSL. You can even export into a pdf or image to use for your branding and color needs.
Render Artist
If you are planning to become a Render Artist, keep in mind that Render Artists are often highly sought after, but with so many in the market, you need to find a way to differentiate yourself from the others. Many render artists in the ROBLOX community use Blender as it is open-source and fairly easy to pick up thanks to the 2.9 update. It is extremely powerful and is not just used for rendering but also for 3D Modeling. Blender can be downloaded on https://www.blender.org/.
With rendering there are many things to utilize to create more immersive art.
HDRI
HDRI skyboxes can instantly make a render look amazing. A great site for free HDR’s is https://hdrihaven.com/
To insert an HDRI into your blender project:
Download a HDRI, I usually download 8K resolution for my computers sake, but if you have a higher end PC, then 16K should be good for you. Next open up blender and open up the shading tab.
The panel on the bottom should look like this. Click the button circled and click the “World” option.
click the background node and press X
click add and choose Environment Texture
click open and choose your .HDR file
drag the yellow circle called color and connect the node to the surface node.
click this button and see your new HDRI in action!
Icon and Logo Design
There are many Logo Designers, but not very many Icon Designers. To effectively create high-quality logos and icons, you must understand what raster (bitmap) and vector (usually SVG) graphics are, and the difference between them.
What is a Vector Image?
Before we explain what a vector image is, lets take a step back. if you know what bits are then you are probably a programmer or atleast know some computer science terms. A bitmap or raster image, is an image that is made up of bits or pixels. Thats why when it comes to icons, which dont usually feature a million different colors (i literally mean millions) unless its a gradient, are best to be made as vectors.
raster images like .png, .gif, and .jpg, are the most common formats for images. Now, whats a vector?
a vector, instead of using pixels, uses a mathmatical formula to create the image. using vectors is perfect when it comes to logos, icons and simple artwork. thats why giant companies make their logos out of vectors so they are easily scalable from a bottle to a billboard. i can size a vector image from 10x10px to 100000x1000000px it would not lose a single bit of quality.
an example of the code for an SVG
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" style="height: 512px; width: 512px;"><g class="" transform="translate(0,0)" style="">
<path d="M445.1 22.93c-3.8.11-7.9 1.81-11.5 5.98C379.2 107.6 318.8 184.7 257.3 261.4c2.3.9 4.5 1.9 6.5 3.1 4.5 2.5 8.4 5.6 11.7 9C339 197.6 401.3 121.1 455.6 40.87c4.3-9.84 1.1-13.83-3.8-16.4-1.2-.65-2.6-1.13-4.1-1.37-.8-.13-1.7-.19-2.6-.17zM63.14 46.41c7.69 13.5 16.6 26.49 2.25 47.15 10.45-10.72 22.95-21.51 42.41-1.4-4.2-10.17-17.26-17.99-6.1-33.71-17.06 8.58-25.86 0-38.56-12.04zM267.2 94.02c-7.4 11.08-18.3 14.68-32.6 10.28 14.3 4.9 21.5 14.5 17.7 31.7 8.3-15.5 18.1-21.4 29.5-17.1-6.4-6.3-17.3-7-14.6-24.88zm181.5 46.78c-4 22.5-6 45.9-43.2 50.9 22.9.8 48.1 3.7 51.7 46.2 5-15-3-37.8 25.6-41.3-28.6-10.4-30.7-29.2-34.1-55.8zm-358.92 96c2.1 24.8-8.1 41.4-37.08 45.6 29.38 3.7 44.88 15.4 45.88 35.5 5.62-13.5-.7-30.8 28.72-36.8-22.1-5.2-34.82-19.7-37.52-44.3zm155.42 39.7l-13.4 16.6c1.5.8 3 1.7 4.5 2.6 4.4 2.8 8.7 6.1 12.3 9.8l15.2-18c-2.3-2.7-5.4-5.4-8.9-7.4-3-1.7-6.3-3-9.7-3.6zM208 304.1c-.8 0-1.5 0-2 .1-1 .2-1.5.5-1.7.7l-.5.6-.6.4c-46.9 36-117.06 70.7-173.97 104.3 14.77 4.4 29.83 9.7 44.58 15.6l36.39-30.5L88.37 432c17.03 7.6 33.43 16.2 48.03 25.6l27.3-43.8-12.2 54.2c9 6.7 17 13.8 23.8 21.1 27.2-59.1 63-100.2 67.7-154.8l.1-.6.1-.6c.6-2.3-.2-5.7-3.1-10-3-4.2-7.9-8.7-13.4-12.2-5.4-3.4-11.5-5.8-15.9-6.5-1.1-.2-2-.3-2.8-.3zm111.2.2c9.7 13.1 9.9 25.8-4.7 38.3 17.6-8.2 30.3-7.2 37.8 3.6-1.7-9.4-11.1-16.8 3-30.4-14 4.8-26.1 1.2-36.1-11.5zm56.7 90.8c11.7 17.4 20 29.5 4.1 47.8 23.4-10 29.5 7 41.2 13.8-19.9-26.8-2.6-39.3 14.1-49.5-30.5 12.8-44.4-.3-59.4-12.1z" fill="#fff" fill-opacity="1" stroke="#ffffff" stroke-opacity="1" stroke-width="5">
</path></g></svg>
If you have tried using a .SVG file and found out you could not edit it, that’s because vector images require specific software to edit and use them. A great program that is open source and has no paywall is https://inkscape.org/. I use Inkscape over Illustrator because I’ve grown used to the Inkscape shortcuts and find it easier to work in.
Making a Basic Icon with Inkscape
Create a new document in Inkscape. We are going to insert a square into the document.
Since this is a square we want it proportional on all sides. 300 Width by 300 Height works (300x300)
click Align and Distribute
click these two buttons to align it in the middle of the page
click the star button and create a star, i made it 5 corners
make sure its an appropriate size, I made it 150x150px and aligned it in the middle, i also colored it white so it didnt blend with the box.
if you want it rounded, just double click the box and click and drag the circle
Now lets make it a reasonable page size.click document properties
check off checkerboard background and select units to px. I made mine 500x500px
drag a selection box around the objects in your scene and realign them to the middle of the page. Awesome we now have a SVG icon. 
We can import it into ROBLOX as a .PNG as ROBLOX does not support .SVG files. click export png image
click page as export area and click “export as” to rename your file. Finally click export. make sure to save your vector image too. open up studio and create a gui element with a imagelabel. click the image label and open up properties. in properties click “Image”
Import it and you are good to go…Unless you get the grey outlines of death. Don’t know what I’m talking about?
notice how there are grey outlines on my icon? This can be fixed with Online Javascript Editor, import your icon into there and redownload it. reimport and
woop woop, its clean again! [Thanks to quenty for this amazing info. to learn about the more technical l side of it, make sure to visit his article about it Fixing images in Roblox UI. This article is going to look how you… | by James Onnen (Quenty) | Roblox Development | Medium]
How to turn a 2D Vector into a 3D Model--Coming Soon
Tools
Some amazing tools that are either completely free or open source are:
https://www.photopea.com/ -Photopea is a free alternative to photoshop that offers the base components of photoshop and all of it can be done in your web browser.
Game Designer
Game Designer is often a title people don't understand, or take the role of "Game Designer" without actually knowing anything about it.
General
Everyone has a little bit of a game designer in them. Every person has atleast once had a really cool game concept or idea. Most of them don’t act on it, but the ones that do are the ones who usually change the industry and how we see video games as more of an art than a piece of technology. There is more to game design than most people think. Game Designers often do tons of research, concept and prototype creation and lots of writing.
Research
As a game designer, you must know your market. Who are you making a game for? Who are the people you are catering to? What makes your game stand out compared to the others? Often game designers read or create a case study. These can be complex or simple depending on how in depth you go. A very simple one would be of ROLVe Community’s Arsenal. Arsenal is a “Gun Game”. You rack up kills, every kill you get a new weapon, there is usually a cap with how many weapons you cycle through before there is a winner. In Arsenal’s case, that (I believe) is 32. Why do people come back to arsenal and why do people find my game not worth another visit? Arsenal has linear gameplay, which means there is a set end goal and all players are usually given the same set of tools, in Arsenals case. One important concept in game design is rewards. Every person plays a game for the same reason, to get something in return. That can be many different things, a fun way to kill time, monetary benefit, the pride, it comes in all shapes and sizes. For Arsenal, the reward is the in game currency and “clout”. Games like arsenal are highly competitive and that keeps players coming. They want to be the “best”, when they have over 800 wins, that comes with a sense of pride. the in game currency adds to that as it comes with wins, in which the currency can be used to buy cool items and accessories. Another game with great game design is dark souls. The game was purposely made to be extremely difficult. This daunts beginners and pros alike, what makes dark souls great is the rewards. It isn’t monetary nor item driven, but pride driven. When a player defeats a boss that they have spent the past 2 hours trying to beat, they freak out. They’re pride and ego go above the roof. they get what us gamers call an “epic gamer moment” (don’t hurt me 
) or an “OMG” moment. When a player has no reason to play your game over another, that’s when you encounter bad game design.
Writing
We are slowly reaching an era where GDD’s (Game Design Documents) are fading away. Actually, lots of ROBLOX developers don’t even know what a GDD is. A GDD is an amazing way to document key game features, art style, characters, and monetization. It is also an amazing way to show off your game idea to investors or potential publishers or external developers. Creating a GDD is great for solo developers, but is nothing but awesome for development teams. If you bring on a new person onto your team, the GDD should suffice, of course, catching them up with other tools is good too. Creating more ambitious and great user experiences is usually a team effort, which is why when you write a GDD, you often want it to be open to all parts of the development team. Every person on your team has valuable input that you may of never thought about. A great product that promotes collaborative writing and is (mostly) free is Google Docs. It is easy to share and collaborate in.
Collaboration
There are many roadblocks that come with collaborative game development. Creating a product that was not up to the standard or deadline expected is one. To be honest, I do not have enough professional experience to do this piece justice, but TechSpectrum definitely does. For a more in depth look at the collaboration piece of game design, check out his post Game Design Theory: Project Management with DevOps, Analytics and Pipelines for Successful Games and Productive Teams
Scripter
General
Scripter’s are crucial for a functional user experience. As a scripter you are in charge of programming many different systems and the general framework of the game. Scripting can often be a daunting task and some people stay away from it for that very reason. Although it can be hard, it is often extremely rewarding. Seeing a creation of yours come to life is truly a feeling you can’t get anywhere else.
DevHub
The DevHub is and will be your best friend not just for scripting but for anything roblox development related. Take for example little jimmy.
Little Jimmy has a problem, he is trying to use a script to change the meshid of his sword, but it won’t do anything.
uh oh, Jimmy is getting frustrated, fret not! as DevHub has your back.
Ah, Jimmy now knows you can not edit meshid’s with a script, but how will he solve his problem? That’s where our next hero comes in
DevForum
Yes, I’m deathly aware you are already on devforum reading this, but it’s included because i still feel it is important to use the devforum properly. Little Jimmy wants to fix his problem so he quickly googles “how to change mesh id from code roblox” he finds Is it possible to set a MeshPart to a MeshID through a script?. A very helpful DevForum member points out the same thing DevHub has documented, but he provides a solution, “SpecialMesh”. Jimmy uses it and now his script works.
woohoo! Jimmy now fixed his problem, and at the same time did not clutter the forum. Instead of asking and starting an entirely new thread for a question that’s already been answered multiple times, he simply searched it up and researched the topic. Be like Jimmy. 
Tools
https://rojo.space/ - Script in RBXlua using an external IDE
https://github.com/ - Amazing site to find and create open source software and material.
Learn Roblox - Roblox’s new tutorial based experience.
Learning
Learning how to script is often something you take on by yourself. If you are teaching yourself, its great to set up ground rules so you do not get distracted or demotivated. Starting with Topic 1 (Start Small), create something small, or a project that is extremely specific, lets say in a year from now you want to start developing a racing game. First you would experiment with ROBLOX physics and get used to them, you could make a wacky game using those physics (Rdite) or start creating very basic vehicles. Next you would learn how to script rounds so you can make rounds in your racing game. when you learn these two topics and more, you can combine your experience with those two projects into one. It may sound scary, but its actually not very difficult, almost every piece of code can be explained with this ideology. “If this, then that” we can add a “If this, then that, else do this” also. The only thing hard about programming is learning its syntax and learning how to create readable and efficient code. for example don’t pull a “YandereDev”.
doing this can create extreme lag and take more time than necessary. To understand why, think about what the computer does, it reads the code, like a language. It has to go through every line of code. For every character it goes through all those “if statements”. A more cost efficient way to do this would be to use a function. I will speak in a combination of code and English for this
First we create a function with a name of our choice, mine will be “function eyeColorChange(color)” make sure to put your function before you do any of the stuff im about to do after. you are going to want to make an if statement, “if EyeColor ~= nil then”(~= means not equal to, you can find operators here) after the then, we are going to call the function with eyeColorChange(). we can then have the function grab the color of our characters eyes, and we can use a module script to define our eye colors. Our function will then go and take the value of the eye color we chose and we can use a return to return the value and use that value to change our eye color.(this was done without testing and mostly with just the if then ideology)
Organization
Organization is crucial when it comes to creating any game. You want to make the game easy to edit for you and any other developers sake.
notice how this is messy? The GUI has multiple Frames with the same name, that is an issue when you start to script the UI, as the script cant tell which frame to edit, so it picks the one with a higher priority. This is also the case with the TextLabels. Also our replicatedstorage is messy and our workspace has tons of parts. This is where our best friend Folders come in.
Would you look at that? Our game looks much cleaner. Notice how we didn’t use a Folder in the GUI. Although we can use folders in the GUI, we shouldn’t as any GUI element hosted in a folder can’t recognize userinput. Try it out yourself and organize the games elements OrganizeMe.rbxl (129.8 KB)
Remote Events and Functions
I started to script pre-FilteringEnabled. The FE update broke many games because it was easier to script through the client than to client and server. I gave up after FE because to be honest, RemoteEvents and RemoteFunctions confused me. No matter how many times my developer buddies tried explaining it to me, i still would never get the picture. Even DevHub Confused me, so I’m going to explain how I learned.
The TurboFusion gun kit was extremely popular pre-fe because it was easy to configure and add. But after FE it broke, if you killed someone, it wouldn’t return that they actually got killed. Let’s investigate why: 
If you know nothing about client and server models, let me explain it in the easiest way possible. The client is you, that includes all the user interface, sometime particle effects and those semi-transparent parts you see in tycoons. Everything on the client is for your eyes only. To edit clients you use a LocalScript. The server is everything that every client can see, that is usually the map or live GUI changes everyone can see. Now that you understand Client-Server model, take a look at the screenshot provided. As you can see they use a local script to control the entire weapon. Nowadays that is absolute “no-no”, as that since its a localscript, all changes are only seen on the client. What use is a weapon if it does not actually inflict damage? How we solve this is to use remote events and functions. How do we use them? First what we do is insert a remote into “ReplicatedStorage”. We use ReplicatedStorage as both the client and the server can access it. Rename the Remote to whatever you’d like. This remote is going to be the magic bridge between the server and the client. As GUI’s are ClientBased, lets make a very simple gui with a button to create our brick.
heres mine:
(might have gone a little overboard 
)
Insert a LocalScript into the button. The name of your script does not matter as the only thing we will need to require by name is the remote. we are going to want to get ReplicatedStorage and find our remote with
local ReplicatedStorage = game:GetService("ReplicatedStorage")
local sendBrick = ReplicatedStorage:WaitForChild("NameOfYourRemote")
We are going to want to send to the remote when our button is clicked. First create a function, and then start that function when the mouse is clicked (functions can not be started without something to trigger it)
function makeBrick()
end
script.Parent.MouseButton1Click:Connect(makeBrick)
the text inside the () is the name of the function that we want triggered.
now inside our function we need to send a signal to our remote.
function makeBrick()
sendBrick:FireServer()
end
the client side is done, now we have to have the server create our brick. Create a regular Script into ServerScriptService. We are going to repeat what we did last time with a few changes.
local ReplicatedStorage = game:GetService("ReplicatedStorage")
local sendBrick = ReplicatedStorage:WaitForChild("SendBrick")
function makeBrick()
end
sendBrick.OnServerEvent:Connect(makeBrick)
this time instead of a mouse click when the server gets notice that the remote has been set off it triggers our function. Now to finish our script, lets make it produce a brick. our full script should look like this
local ReplicatedStorage = game:GetService("ReplicatedStorage")
local sendBrick = ReplicatedStorage:WaitForChild("SendBrick")
function makeBrick()
local newBrick = Instance.new("Part")
newBrick.Parent = game.Workspace
end
sendBrick.OnServerEvent:Connect(makeBrick)
Our gui now makes parts 
. Feel free to see the code in action and edit it to do more advanced things. RemoteEventTest.rbxl (29.0 KB)
learn more about Remotes here.
Further Study
3D Modeler
General
3D Modelers or 3D asset creators, are on the rise due to the increase of developers wanting to be involved in the UGC craze. 3D modelers create meshes that developers import into their games to be used as decoration, landscape foliage, and weapons. Developers prefer meshes over unions as unions can often take a toll on your games performance. To be honest, I am pretty abysmal at 3D modeling so I am not the one to teach you it, but I can redirect you to others who are amazing at it.
Further Study
Composer
General
Composers create the beautiful music that is showcased in multiple games. The music you use can make or break the vibe you are trying to set in your game. Imagine a game like Piggy with NCS music playing. Having OST’s in your game can show dedication and truly create an immersive experience. As a composer, you must have dedication and a good ear. Composing can often be very hard to get into and master, but in the end, it is extremely rewarding. (shameless plug, you can check out my music here Sunshine and Flamingos - Album by SAF | Spotify)
DAW
DAW’s or Digital Audio Workstations are the powerhouse behind your musical creations. Think of it as a game engine but for music production. There are many DAW’s out in the market. I am extremely biased as I am a FL Studio user. Some other great options are Cubase used by hans zimmer and Zedd, Ableton Live used by way too many to list, Bandlab that isnt too mainstream but is free to use, and MixCraft. Please for the love of god, spare yourself and do not use LMMS unless you don’t care about prettiness or efficiency.
Further Study
Building
General
Building is the process of using parts and meshes to create a greater image. Whether that be a map, or a skyscraper. There are many different style of building, but we often categorize it into two styles, Low-Poly and High-Poly. This refers to the amount of polygons in an object, when a map uses strictly low-poly assets, this would be considered a low-poly build, switch the places around and you get high-poly builds. Most often, a 3D modeler often takes the path of a builder too. The two fields interchange and have alot in common.
Further Study
User Interface Design
General
User Interface Design or UI Design, is the creation of UI elements for a product. This can be for websites, software, games, and more. One pet peeve of mine is UI that is completely made in ROBLOX Studio, well only if it isn’t executed well. I’m talking about the “UI Designers” who create things like this:
The use of colors is abused, they don’t match and there are too many fonts that don’t compliment each other.
How do I make decent UI designs?
You can use studio if you find it easier, but using external tools to prototype and create is preferable. Creating UI in programs like PhotoShop is ok, but that is purely raster image-based. If you don’t know what I’m talking about check out the “Icon and Logo Design” section to learn about vectors and bitmaps. Software like Adobe XD or Lunacy, or an increasingly popular UI design tool, one which I use Figma is preferable since it works with mostly vector images and can be rescaled to any size you need/desire. Lunacy is completely free, and both XD and Figma have a free plan along with paid ones. These programs have similar UI and functions and both have their pros and cons. If you want easy prototype creation and an amazing plug-in creation community, choose XD, if you want more advanced tools without the amount of plugins or easy prototyping, choose lunacy, however, if you want the best of both worlds with a big community of plugins and open-source file creators, and the added real-time collaboration niche similar to google docs, then Figma may be a viable choice.
Creating a simple UI design and importing into ROBLOX
I’ll be using XD for this, but Lunacy can do everything I do here. Select web 1920
We are going to create a shop GUI. Lets create a box and give it a proportional size. ill pick 800x800px. Make sure to click the lock to lock the ratio when sizing
Align it in the complete middle with these two buttons
If you read the graphic design section, you know we are going to need colors that complement each other. We are going to use Coolors for our color pallete. This is mine. Lets export it as an image for easy color picking. Drag it out the page area and it should be visible
I’m going to color my box the black I chose
Press the box and press Ctrl+D to duplicate the image. Then resize to a rectangle at the top for a title. Make sure to unlock the ratio so we can make a rectangle.
Insert a Text object, i download the Gotham font family as that is a ROBLOX supported font. It is recommended to use ROBLOX built in fonts as translators and easily localize the text.
Duplicate again, and split the box in half with it. Color one a different color and duplicate that one and make that one another color
We are going to import a SVG icon, if you are interested in making your own check out the “Icon and Logo Design” section. If you want high-quality free to use icons, this site is amazing. You only need to attribute them once compared to other sites where you have to attribute 10 different people. I’m going to import a cool sword icon.
I touched it up a little more and here we go
Now with such a simple design, we dont even need to import most of this, and we can recreate it in ROBLOX. Only things we need to import are the icons. Refer to the “Icon and Logo Design” section on how to import icons without the “grey lines of death”.
Open Studio and create a GUI object and insert a frame into that.
Size the frame to 1,0,1,0 and then resize it to the size you desire. This method is just the easiest for me to get rid of the offset property. Get rid of the ugly border by making the BorderSizePixel = 0
go back into your program and grab the HEX value of your frame.
Paste it into the HTML property
create a text button and do what we did in xd by splitting the box with it.
Make the text property none by putting a space in it
So far we are almost done. Inside your text button, add a text label and a image label
arrange them like we did in xd and your final product should look like this
the project files for xd and the game are linked here
Further Study
Conclusion
I dedicated many hours to creating this post but I really hope I can make an impact on the community and help foster a new generation of developers. To all you new game developers out there, don't give up, you are the future of game development and the metaverse. One day you are going to be the one writing a post just like this. Thank you to the ROBLOX development community for teaching me so many valuable lessons, and I can't wait for what the future has in store for us -astraran and little jimmy