How to Make UI in Figma and Use In Unreal Engine 5

hey everyone it's Gabby and lately I've been asked quite a bit how to bring over figma assets into unreal and I've done this a couple times but all the videos turned out really boring so hopefully I can get past this one pretty quick um but yeah I'm gonna be using this menu that I made for Apex and I'm going to be replacing this button for pngs that I've created inside of figma and I'm going to show you how I like to make them export them through and bring them into unreal now before I get started I wanted to say that in here there are times where using pngs over creating them by hand inside of the details panel sometimes a PNG is going to be more efficient than this so if we look at this image right here these three images of these character icons this is going to be something that you are going to want to use pngs for and they can flip through depending on the actions that you give them but when it comes to buttons you can use pngs and sometimes that works out really well but sometimes if they're pretty basic like this they have a border they have a little bit of an opacity and a text on the inside it may just be easier for you to make it in engine and a quick example of that is you make this menu you send it off to your art director they play through it they say it looks really great but this button right here they want the tint so if I go and play they want this tint to be purple when you hover over it now if this was a PNG you'd have to go back into figma create that hover State you have to edit it make it purple export it back out bring it in and apply it to the image right here inside of hovered but if you make it inside of unreal you can just select the tint you can go to purple assign it go back in and there we go the button's purple so before you run and make everything pngs just assess your UI and see can it be made easily inside of the engine and if not um then go ahead and go to figma so let's say you want to make these buttons we want them to be pngs because it's just going to be too difficult to manipulate the style inside of details um so okay let's go inside of figma so I'm going to grab a square now unreal has a few States let's go over them real quick I'm going to hold shift close style and then open style back up and that's just going to collapse everything we have normal hovered and pressed those are three states that we're going to create you can create disabled and the rest of these are for a little more complex tasks but right now we're just going to handle these three so because we have three states we're working with we're going to create three boxes inside of figma okay now in our button we had a corner roll on the w and z axis so let's go and create some Corner rolls we're going to select all three so we can do this at the same time go up here select this little bracket looking thing and let's set these to a 30 each and the width of these are a kind of a weird number so let's round those out to a thousand and the height of these are an odd number and let's round that out to 200. um let's do these Corner rolls at 45. and let's bring this down to 150. okay these look a little more like our shape that we have now in our image we have a tint that is white and we have lowered the opacity and we have an outline stroke so let's go ahead and lower that fill down to about 20 percent and we're going to create a stroke and the stroke is going to be maybe 10. and we're going to make it white kind of looks right okay so remember our task our director said they wanted hovered in purple so let's first go ahead and label all these buttons so this rectangle one is going to be called normal this one is going to be called hovered and this one is pressed you want to make sure you label these and let's actually grab them all and select this create component and that's just going to create the component for you that's just creating your States and figma so then when you come back to figma later and you're doing maybe mock-ups in here it'll be a little more um organized so back to our normal button now in here we did have a one but that can be handled through text and it will manipulate correctly when this uh vertical box changes in size so we're not going to stamp a one actually inside of our image we're going to leave that outside the button okay so that doesn't stay but remember our task this needs to be purple so let's go make it purple um let's see the belt right there and pressed just so it can look different let's increase the opacity here to 70 percent all right almost looking like LSU colors so we're going to select all of these and Export them out and you can see down here it says export three layers and we're going to do it in PNG now if you were to select component and pressed export you're exporting the component 1 which is going to be exported as a PNG um you don't want it like that you want to export them individually so you can use them as such so let's go ahead and Export these I'm going to go to desktop and just throw them in there okay I'm going to find them they're right here I'm going to open up my content drawer and I'm going to grab these and grab that one okay now so I don't get confused inside of here this one can be deleted this one can be deleted these are just old ones that I have that I don't need that are just going to um confuse me okay so we have pressed normal and then we still need to bring in our covered maybe I accidentally deleted that one okay so right now the button has no image and we're manipulating the color and the outline settings inside of details so I'm going to drop the width of the outline setting to zero because we don't need outlines and I also am going to draw as an image and we're going to call normal Square was it this one let's see let me check the name real quick possibly no it was this one okay great and the tint right now is set to 15 we want to make sure we set that to a hundred and now let's go back in here and let's open up our hovered state and we want to grab hovered right here we're going to set our tint to White because we don't want any color interfering with the image and we're going to set our Alpha to 100. make sure it shows bright and we want to make sure our outline is set to zero and we want to draw as an image and then in pressed we are going to do the same thing grab that image we just put in here make sure our tint is up in white and to 100 and we draw as an image now if I'm correct this should work like these buttons that I've made it should work the same way so let's go ahead and give it a try and there we go and when I press it works out and see so if I needed to make changes in this one I would make changes inside of details and if I made changes here I would go through figma and make the changes and bring them in and repeat that same process so that is how I would bring in figma images personally into unreal it's an easy Pipeline and if you have any questions or you have any suggestions on how to change up that pipeline just let me know I'm open to all suggestions and thank you for watching bye

Channel: Gabrielle Snow

Views: 16,141

Keywords: unreal engine, unreal engine 5, game dev, game development, game tutorials, gaming, game art, tutorial, blueprints, figma, atomic desing, design tutorial, how to, how to make games, how to make a game in unreal, how to use unreal, how to go from figma to unreal, figma design, ui, game ui, ui designer, game artist, video game design, learning, ui technical design, ui tech art, technical design, tech art, art and design, design, how to use figma, for beginners

Id: dXAnUNhFMuI

Length: 9min 56sec (596 seconds)

Published: Mon Aug 28 2023