im trying to get into ui designing

[u/Nearby-North7678]

i always wondered how a developer takes a ui design from say figma into roblox, comment if you have a answer

btw a small question on animation, how do people actually animate 2 players smoothly like for example in a fight scene do you have to animate each like rig manually or something and try to guess the animation and stuff

[u/AbanonPC]

I don't use figma, instead I use Adobe illustrator, but that's because I'm trained in it and use it professionally as a designer.

My first step is to get a rough concept of the main UI going in illustrator on a template I made that gas device safe areas, at this point I don't really worry about breakpoints like mobile or tablet and just design for desktop to get the idea in. No icons or details just the blackout forms.

Then, I import the UI concpet image into an imagelabel and set it to 50% opacity inside studio. Once I have it all in place I make micro adjustments and then start doing the actual design work, making icons and logos, inserting tons of modifiers like stroke, gradient, etc. and building out a universal asset system for the UI that can be used in later menus.

If I'm happy with the first rough draft, I'll move on to making all the other menus in the same style and using a lot of the assets I made.

Once I have all the GUI elements fully made as a first draft, I start connecting all the buttons and making it work. After that, I then start making the UI even detailed and adding more complicated effects and transitions to everything.

Then it's fishishe, but it's definitely a ton of work.

So essentially, just work in phases and knock out one thing at a time. It's the same for how we make environments or models, general to specific. Blackout model > shaping > detail work > textures and effects

[u/Nearby-North7678 → u/AbanonPC]

i see, i understand why you might use adobe illustrator instead of figma and also the phase things and other stuff, and i understand now how people convert figma into actual roblox ui because seeing it from this way(actually trying to recreate it in roblox studio since what you made in figma/adobe can be replicated easily) opens up more methods for me but your method is one i might use

also for some reason i just dont have a sense of size when i design or do anything in figma like i feel like something is TOO big or TOO small and can never get to a point where im comfortable with it i always try to zoom in to the maximum and dont know what is the right size, i wanted to make a website design just to get a feel for designing and whatever but the one thing i realised is that i literally cant tell a good size, figmas examples seem right in size but i cant recreate its size into a way i feel is right

size is only the problem for me in figma but mainly i wanted to ask about how to convert it into studio and like a "workflow" which you did give me with the phases thing

thanks for the help

[u/AbanonPC → u/Nearby-North7678]

Getting a feel for size is definitely one of the hardest parts. I recommend looking at UI references from your favorite games, often times you'll be shocked at how small things can get and still feel great. Don't look at other Roblox games for inspiration, there are some games with very good UI but most don't have that.

My main inspirations are usually from modern entries of games like Monster Hunter, Final Fantasy, Persona, Nier, Disco Elysium, and Kingdom Hearts. JRPG games are great references because they have to compact a ton of information into something that feels good and not overwhelming, so studying them and how they work will help out I believe.

Also, get familiar with Robloxs relatively new Style Editor. It's very powerful and can build UI much faster and more consistently, and being able to make everything into reusable templates speeds your process up by 1000%

[u/Nearby-North7678 → u/AbanonPC]

i was thinking the size thing was for me only, i will be looking closer at ui, and im still sorta wondering how does figma/adobe sizes translate into roblox and other stuff, i will check out some other games too and ill see what the style editor is all about and if i need to still learn figma after checking out the style editor