How to Prototype AR and VR UI/UX with FIGMA and UNITY! (Tutorial)

[Music] hello my loves today we will be bringing a UI Maiden figma to Unity for extended reality now a lot of you wanted this video for a while and it's been a minute since my last video so I appreciate your patience but before I jump into figma I wanted to announce that in the past couple months I've been spending all my free time crafting a Discord server focused around XR design and if you're interested in free XR design Labs resources and creative networking this is the place for you so if you want to join in order to learn more link is in the description and as always if you liked it and if it tickles your fancy like subscribe Bell thing and let's go foreign [Music] let's go to figma let's go to the community Tab and let's type in um XR design system 1.1 1.0 and let's duplicate this now the link to this is in the description so feel free to just go there or search it up yourself whatever you want so now that we're here um I want to let you know first and foremost that this thing will change over time I just wanted to put something out as quickly as possible to get everyone started so um with no further Ado let's jump into the foundations page so here is a bunch of templates from Google Daydream so we have again we have the field of view attention areas we have the horizon line and comfort zones and we have the central vision but each one of these Concepts will likely be covered in other videos but I just wanted to call out the tools I provided you also a huge shout out to my bud Albert he crafted A rad VR design system on figma and it's helped me out a lot so thanks again buddy and that link is down below as well if anyone wants to see it now let's dive into a page I specifically made for this tutorial called figment of unity tutorial and inside of here we have a bunch of crafted UI that I created just for this tutorial so if we come down here let's see what's going on so if we come down here we have a frame of 1920x1080 and I have chosen this resolution specifically because the main headset on the market right now is the Quest 2 and this roughly is around that resolution and so some of you may be thinking Daniel I thought you said we're not designing for resolution we're designing for field of view and first and foremost you're right but we need to understand what is projecting the world around us and that's why I'm using this Frame so um how do we start designing for field of view well that's a good question so if we come in here in this Mainframe I have this visual checks area if you toggle on attention areas and if I just toggle off um this Frame right here is 30 by 30 degrees and I call this kind of like the Golden Circle of comfort and this Golden Circle um our eyes can easily move around 30 degrees in each Direction and this both reduces the amount of strain and we put on our users to look at things within our world but it also helps us understand you know where people can physically see okay now that we have everything laid out here we have a significant decision we need to make and that is how we want to export things into Unity now you could take this whole frame and Export this into unity and just use that but fundamentally it's going to be a lot harder to create depth in your scene and actually iterate on your design in unity if you do it that way the second option is we can take every one of these assets and Export them individually to Unity and then build up our frame from there but the problem with that is is that fundamentally we're not going to be able to edit these assets when we're inside of unity and I think part of Designing properly within XR is being able to play within your medium so we're gonna go with option three and option three is essential actually I'm exporting just the base elements of this panel and again I have the Avatar I have the icons I have the image and I have these three or I guess I have these six rounded rectangles so why are these rectangles white well I'll explain those in a second but right now let's just grab all of them and Export all of these at 3x pngs so why 3x well because we we want to reduce the amount of aliasing when we start building inside of unity so I'm going to export all of these at these 12 layers I'm going to go to my desktop you can do this inside of your Unity project too it's up to you I'm going to create a new folder called Tut now that we have all of these exported let's dive into Unity okay so now that I'm in unity we need to import all of these assets to start building with them so what we're going to do now is um inside of my assets folder I usually do a couple different things first and foremost I'm going to create a brand new folder by going to assets right clicking go to create and then we're going to go to folder and I'm just going to go underscore um imported and why did I put an underscore well an underscore will bring up all of the stuff that we want to the very top next to the assets so we don't have to search through them now how do I import everything now we can do a couple of different ways we can go to assets up here in the top left we can go to import new asset if we go to our desktop God that's the if you go to our desktop uh I go to the tutorial and I can just grab everything and import so as you see right here we have all of our assets and before we start building with these we need to do a couple different things the first thing we need to do is we are going to need to convert all of these into Sprites so before we do that there's a couple of things we need to install so right now I'm in unity2021.3.9 F1 if I go to window if I go to package manager and right now I'm in packages in unity registry so if I scroll all the way up right now it says 2DS we have seven packages here I'm just going to install those and this includes the Pixel Perfect the Sprite shape 2D Sprites and stuff like that awesome now that's installed we can change all of our stuff into Sprites awesome now that we have this done right now we have all of these pngs now in order for us to use these within our scene we're gonna have to convert these to Sprites so I'm just going to select all all of them by holding I'm going to click the first one hold down shift and now I have them all selected and what I'm going to do I'm going to go down here to Sprite 2D to and UI and I'm going to go all the way down and I'm going to apply it okay so the next thing I'm going to do is I'm going to grab all of these and right here it says Sprite mode I'm just going to go to single and right now the mesh type is tight and let's apply those so now that we have all these applied you can see these little play buttons and you can see exactly what's inside of there okay now that we have that done these rounded rectangles right here we're going to want to change the slicing on them and that's basically because we want to have an expandable rounded rectangle container so if I go to this first one if I go to Sprite editor I can then if you see right here we're going to cut so I'm going to bring this over and let's just say 64 right so now I'm just gonna go to you know I have 64 here 64 here 64 here 64 here right and the reason why I'm doing this is because when it starts stretching we want to retain these rounded rectangles so I'm going to hit apply and I'm going to do the rest I'm going to do the same thing for the rest of our rounded rectangle so okay now that we have all of our assets converted let's start building our panel up now in order for us to actually have 2D UI inside of unity it needs to be rendered somehow and that's why we will always need to use a canvas to do that so let's right click let's go to UI let's go to canvas now we're going to make a bunch of changes to this in order for it to actually look proper so the first thing we're going to do over here in our inspector we're going to switch from screen space overlay to World space and we're going to zero out the position now that it's zeroed out we still can't really see the size of this thing so if we zoom out as you see this thing is absolutely massive so we're gonna have to change the size of both the panel and the scale so let's start with the scale so because this panel is the size of our world to a certain extent let's switch this out to be one one thousandth of the size so zero zero one and I click this little link right here on the newer Unity to make it a little bit easier to change all of these if you're an older version you're gonna have to change all these manually so the next thing we want to do is change the size of our panel not the scale but the size so what we're going to do is we're going to look at the size of our panel which is 1096 by 784. so I'm going to do this to 1096 by 784. cool now if I hit F our panel is inside of our stairs so let's bring it out [Music] now you can position this in any way you want um we will position this with our Avatar stuff maybe in another video but right now I'm just going to get in a place where I can actually accurately see it so the first thing I want to do is I want to get a proper visual of this so I'm going to go over here I switched to this orientation and I'm just going to hit front and this is going to bring into ISO mode so right now as you see this rectangular line right here let me see if I can just make this a little bit smaller for all of us this rectangular line right here is our cannabis and nothing is being rendered in it so far so the first thing we're going to do is add a panel to the back of this but before we do that actually let's change this to you know change the name of this and I'm on my PC I'm hitting F2 and I'm going to hit and call this panel canvas and inside this panel canvas I'm going to right click I'm going to go to UI and I'm going to go to panel now right now this panel is background is this um opaque white and we can change all the attributes right here um in the inspector so um the first thing I'm going to do is I'm just going to switch my opacity this Alpha channel to 100 and then let's go back to our unity and see this color of this so I'm just going to grab this hex value which is 3E 3E 4-0 go back and I'm just going to change the color here and the first thing you'll probably notice is that there's no rounded Corners in order to make that change what we're going to do is I'm just going to minimize this here now I'm going to take the largest rounded rectangle um filled canvas I have which is this 24 dim filled I'm going to make sure our this panel is there and I'm just going to drag it from filled into background and as you see we have some rounded corners but if we look here the rounded corners of this are they're a little bit sharper so what I'm going to do is I'm going to change this pixels per unit multiplier to two if you don't see this pixels per minute multiplier it's because you did not either convert your object or you didn't slice it so make sure if you run into that issue to make sure that you slice it properly now one other thing I'm going to do is this panel right here for some reason it always faces the opposite direction I want in a lot of these things so what I'm going to do is I'm just going to change this rotation to 180 you're not going to be able to notice anything now but that's fine now let's just change this I'm gonna hit F2 I'm going to call this panel let's just say panel back awesome so the next thing we need to build is this nav bar right here so let's right click on our panel and add another panel so I go to UI panel as you see right now this is filling up our panel back and I'm just going to call this nav paneled back right now we want this to pin to the top bottom and like left of this object so before we start sizing everything up what we're going to do is we're going to go to this stretch section up here and I'm going to hold down alt shift and we're just going to click this one right here as you see it brings over all of our anchors and our pivot awesome so now that we have that done let's open this up and see what the size of this is 784 by 352 so if I change this to 3 52 252 if we zoom in it is not being masked by the master right and even has this little rounded rectangle right here so I'm first of all what I'm going to do is I'm going to change this background to none so it has that sharp edge instead of that rounded one by default and then what I'm going to do is I'm going to go to my panel back and I'm just gonna add a component and I'm typing mask dump that on there as you see it's starting to mask it properly Awesome Possum so the next thing we're going to do is going to go back to our panel back our nav panel back I should say and let's see if the Nash pedal back is the hex is 25 25 26 so I'm going to copy that going here change that change the alpha and it's starting to come along pretty nicely so now that we have that done let's start building out our panel over here so to start that let's go to um let's start with our Avatar of Tina Taylor so what I'm going to do is inside of my panel back I'm going to right click go to UI I'm going to go to Raw image and the size of this is 104 by 104 so I'm going to change this to 104 by 104. cool and let's do the same thing um to the top right there and the position y if we look right here she is 30 it should be 32 so I'm going to change this position so 30 let's just say negative 30 32. okay it's more or less what we desire now inside of this block right here we can add our Avatar if we desire so let's just do that [Music] and there she is in all her glory does it Tina Tina Taylor good old Tina Taylor okay so now that Tina Taylor is positioned at the top let's just change this to um which is called this Avatar image and maybe the next thing I want to do now is add some type to this so what I want to do it's either in the panel back or in Another Empty I can add her name which is Tina Taylor so what I'm going to do is it's in this panel back I'm just going to do this for now I'm sure there's better ways to organize this but it's fine for now I'm going to go to UI then I'm going to go to text mesh Pro and um if I call this Tina Taylor awesome now let's just I'm just gonna switch this to Center aligned and right now if we look at this right here Tina Taylor we're using um a cert we're using circular STD and we're having it at 24 by 24. so if I switch this from 36 to 24 that's kind of what we need but we also need fundamental and I'm just going to Center this out is that we need the correct type okay so what I'm going to do is I'm just going to import my fonts now you can use whatever fonts you want so instead of my imported what I'm going to do is I'm just going to drag in a folder that has my circular STD and these are all of my fonts that I want to use right now in order for us to use text mesh Pro um to have more crispr text what we're going to want to do is we're going to go to window we're going to text mesh Pro and then we're going to put font asset Creator and I'm just gonna drop this right here and then maybe even drop it down here so now that I have this font asset Creator let's just look at this real quick we're going to want if we look at Tina Taylor here we're using medium so let's just add that shall we so let's I have my medium right here and what this is going to do it's going to take this font and then create a Sprite out of every one of the characters right you can change all of these things right here from Custom size to everything if you want but we're not going to mess with that today so um so now that I've I'm going to save this as I'm going to go to imported circular STD yeah that's fine I'm just going to save that and as you see right here it created this font for us so let's go back to this text and I'm just going to drag this into the Liberty right there and then we have our type right super crisp super nice awesome now I'm going to change this type to again Avatar name awesome now what I want to do is I can either drag this up manually right or I can pin it now this is because these things are going to act together they're this is probably where I would want to create either another canvas or an empty to house this so what I'm going to do is I'm going to right click on panel back I'm gonna create an empty I'm going to call this Avatar and as you see right now the Avatar is dead set in the middle so I'm just going to drag the image on the Avatar name into that so right now if I move this it's going to move both of these which is kind of crappy right so why don't I just do this so right now I have my avatar I'm going to do exactly what I did before I'm gonna have that's pinned negative 30. right this is kind of where I wanted it and then I'm gonna drag um Tina and her name inside of there and I am going to go to my Avid my image of Tina and I'm going to change up my position to zero zero her out so now she should be pretty much Dead set there oh yeah we want negative 32. [Music] now with the name I'm gonna probably want to change this to zero and then like I we may just want to move it down manually or whatever you want to do awesome so now that we have that is this Avatar nice and centered and what we want um we can that is done now we can make this a prefab kind of like a component if we want so we can change things all like so we can manipulate this whenever we desire so if we want to if we want to turn Tina into Frank we can just do a simple image Swap and change out the type but we're not going to do that today um what we're going to do now if we look back at our canvas is let's start creating um the layout of these buttons right here right so there is no rounded rectangles on these buttons um this is just a simple 64 height button and we have type inside of them um and the color right here is one two one two one two so I'm going to copy that and I have these little Chevrons so let's start building those out and then we can start learning about prefabs in that way so what I'm going to do now is is inside of this panel back um I'm gonna set this nav panel I'm going to right click and I'm going to create button text mesh Pro cool no so the reason why I'm using a button is because it's just giving me a bunch of stuff off the bat so if we look in here in the hierarchy if I open up button it's just basically all this is is a like rectangle um with an image placed inside of it and then inside of the button there is a text message or text mesh Pro so what I want to do now inside of this button I'm just going to call this um this is called this [Music] or we can call this like nav button now what we can do is inside this nav button if I go back up here we can hold on alt shift and I'm just going to do that right and now that is going to be the size of its parent container now what's the size of this button this the size of this button is 64 as I said before and I'm so just gonna hit 64. awesome so now that I have this contained I am just getting instead of this UI Sprite right now for this button I'm just going to switch this To None okay so now we have this set we're gonna probably need to add a couple different things we need to add two icons essentially one is this house icon star searching icon and then the chevrons so let's add let's start adding those let's add um so if I right click on nav button go to UI and I'm just going to go to Raw image and this raw image is roughly 48 by 48 so I'm just going to switch that and I'm just gonna like move this over to the left and then from the left I gave it a 12. so I'm gonna I'm Gonna Change it to 12. and for this let's go back to our imported and let's find this home icon and let's dive it and dump it in and this home icon is going to We're not gonna be able to see it right now for obvious reasons so what we're going to do is we're going to make sure the button is the same size which is one two one two one two so let's change that to one two one two one two and there is our little house it's a cute little house isn't it cool now what I can do also is like I'm just going to call this like um button icon for now right and probably would want a better name for it later if you're going to use it somewhere else and I can just duplicate this and on this one um I'm just going to call this one F2 Chevron and I'm just gonna do the exact same thing by just kind of re-pin it over here and right now it is position is should be about four yes um so what we're gonna do is we're gonna change the position of that so let me see negative four awesome now let's change out this type so just type in this button this is home we need to switch out the type right now so let's go back into our circular let's just dump in our medium I'll keep my typeface what color I'm using gray 30 which is let's just get this thing kind of aligned the way we desire so if I look at this type it's fine right there for now this is fine and you know maybe we even want to switch this from centered to left but right now um this button its type is not accurate to what we have here so do you have any idea before I tell you how to change the type okay if you haven't figured it out what we're gonna do is inside of this font asset Creator we're going to add another source so right now I think we are using book so we're going to drop book in there we're going to generate our assets and then we're going to save and this should be book psdf pops up awesome let's drag let's drag that in there and there it is so now we have our button okay so this is cool but we don't want to have to recreate our button every time so if we basically look at this right here we are still missing our underline but we have three of these right so do I want to create three separate buttons that I have to change every time if I want to make a tweak probably not so what we're going to do is uh with this this nav panel let's go inside there again sorry the snap button um inside of my assets area right here let me expand that I'm going to right click I'm going to go to create folder and I'm going to call this prefabs awesome now prefabs are kind of like components in figma where you can just create Something and update it and reuse it and update it at will it's not necessarily as advanced in many ways as figma but it will do so if I look at this nav button if I drag it into prefabs now it's a prefab button right so this this little blue square is a prefab button right so if I click this little arrow right here now I'm in edit prefab mode now if I go back with this little arrow up here and I do the same thing here it's going to make it a little bit harder to see because it's just going to be guessing exactly where you are in space and right now there's no master canvas so I'm going to leave that and I'm just going to go here so it stays perfectly nice and neat and inside of here I want to add that underline so I'm going to right click I'm going to go into make sure I'm right clicking here nav button UI let's do it is just use another panel for now and again I'm just going to remove scroll all the way up remove the rounded rectangle they give us by default and then I'm going to change the stretching to like this right here and then I think the height was like two and let and what's the color of it it should be spray 30 which is fbfaf control now we're cooking with gas and change the opacity okay there we go so as you see we have this lovely little button here that we can reuse all the time now this button is around 30 or should be around 32 from Tina Taylor so what I'm going to do is I'm just going to move this up manually now if you're going to be designing this for developers you probably want to get this all exact so I'm going to hit um control D and I'm just gonna oops and I duplicated that Ctrl d and there we go we have button button button button awesome now we can dive into this button if you want and then go to button icon and I can change this if we go back to our assets I can change this to I think it was star there it is and then if we go to this other one change this to search awesome now like any good designer is that you need to keep this stuff tidy so let's just name this home nav button and we'll call this one uh star and nav button and we'll call this one okay so now okay now that I renamed them we all know exactly what's going on and the side panel is essentially complete now you may see all of these giant blue things that's um part of in our gizmos so for for today I'm just going to turn off those so I don't have to stare at those big blue things staring Us in the face okay now that we have our nav done let's focus on the middle section the main content so let me switch over to figma and see what we have here now when we did the Avatar earlier on later we added an empty to make sure that everything was connected and we can move it around and manage a little bit more um but we did that after the fact which takes a lot more time if you just think it out initially so if we look right here um what we want to do inside of this container is that we really want to have an empty or some kind of grouping that allows us to manage this a little bit easier so if we look right here um we have essentially an image text and two buttons primary and secondary so I know that we're probably going to want to create a container that will house everything but we also may want to have a container that would just house the type in the text so let's figure out how to do that so the first thing I'm going to do is inside of my panel canvas let's start with creating a container for all of this right so my here's my panel back and I'm what I'm inside my panel back what I'm going to do is I'm going to right click and I'm going to create an empty and I'm just going to call this empty I don't know um content container so let's take a look at the size of this container right now so it's at 680 by 720 so let's make that change so six it's a 680 by 7 20. awesome now um let's pin this to the right and they we have a margin of 32 around so let's change this x position to negative 32 and now we have that margin around everything and it looks pretty good so the next thing we're going to want is okay so after that what we're going to do is probably make a container for the text so let's go ahead and do that and I'm going to save it and I am going to add another container in here so Another Empty I'm just going to call this um image text container okay so now what I'm going to want to do is probably pin this to the top so shift alt click so now it is exactly at the top and you know we're probably going to want to make this stretch across as well so let's just do the top stretch as you see right here and that looks pretty good so let's go into here and let's see what we got so this container is 555 High switch the height to this to 555 so now we want to add our image okay now this is when it gets kind of weird and tricky because if we want to make this more reusable and tweak save this image later we can always keep importing different images and swapping them out but maybe we want to actually just be able to swap out images Live While We're creating something instead of having to keep on exporting new images with this rounded corner so inside of this text container what I'm going to do is I'm going to right click I'm going to go to UI and I'm going to go to panel what I want to do is um maybe I'm going to pin this again to the top and I'm going to make the width of this thing what is this the width this is 680 by 360. sorry so the width is fine and then this is 360. so this is going to be the size of our image now we want to make this have rounded corners of course so let's us let us grab this panel and let's grab our 24 dim throw it back there let's change this of course to around let's just say six awesome now inside of this panel let's right click and let's maybe just call this image container and inside of this panel let let's add a raw image so let's go to UI raw image and let's just make this like fill and then um inside of this we can grab our image and drop it in now it doesn't have rounded Corners so how do we fix that can you remember so what we what we're going to do is we have this image container that is a panel and we're just going to add a mask so as you see right here our mask is is like yeah it's pretty damn close to perfect to what we had before so now this means if we ever have another image we can always swap it out it's pretty sweet right okay okay so now we have the image container in the text container so now let's let's add the text so if I right click I go to UI I go to text mess Pro um sweet now let's see let's see how we want to pin it um so right now I have I'm pinning it from the bottom so now let's grab this text I'm gonna copy that paste in here oops and oops let's go to our text and let's actually probably want to make this you know stretch as much as possible and as you see right now um it is quite big so we're gonna probably want to reference this which is um 20. so let's grab the text again [Music] awesome [Music] and I'm just going to drag it up for now it was 20 by 24 so if we go down to line we can add the 24 and everything is fitting you know relatively nice and tidy together and now we want to change the type so I'm going to grab this text and then I'm going to go to um I think it was medium and I'm just going to drag that here well it's a little bit out of our range it's fine okay so now we have the text in the image so if I minimize this I can grab this and move it wherever I want within the scene we can pin it if I want to pin this at the bottom we can do at the bottom if you want to do it to the right we can do the right top whatever you want to do so now that's done next let's save it I've had to record this many times because of me not saving so what I want to do now is in my content container let's start adding our buttons um let's just add a UI button and let's just automatically let's just bring this um let's open this up let's do shift alt and click down the bottom right here now the button is stuck at the bottom right and I know um this is going to be probably 64 height and so if I look at the width of this it's at like 167. so that's not going to be I think 160 is fine um 160 like or 168 would be fine as well so as you can see it's just going to grow from that side and let's look at the color of that button and the color is one two one two one two so let's just add that cool and let's look at this type right here I think it's going to be medium so I'm just going to grab it and throw it in and here is the type color it's FBF a f f and I'm gonna just flip that in there now this is our primary button the rounded Corners isn't exactly what I want so it's using the default UI Sprite that they keep on shoving on us shoving in our mouths which I don't like it so maybe I'm just going to bring in this 12 dim fill button or this film rectangle into here and then I'm going to probably adjust this up to around six okay now just call this primary button and now that we have a primary button let's make sure that our type is actually 20 let's just make sure everything looks good is that 24 . so now that we have our primary button done what we're going to want to do is take this primary button and make a prefab of it so we can use it over and over again so I'm just going to drag this okay so what we're going to do now is I drag this primary down here and we can also use this primary Button as a template for our secondary so how are we going to do that well let's just duplicate this right now this primary button with Ctrl D on PC and I'm just gonna basically eyeball it so what I'm going to do now is going to change this to secondary button and I'm just going to drag this down I can create a prefab variant or another original prefab for the sake of this is just make another original prefab so now that I have my secondary button let's just open this up okay so now that we've created our secondary button prefab let's take a look of how it looks inside of here as you see we have this strong like stroke around this button as a secondary so we're going to want to recreate that and this is when we're going to be using um a different rectangle to make these buttons like especially when you start wanting strokes and stuff like that you're going to want to use something that is a little bit closer to the size of the button so we can keep the same thickness of the outline so right here I have this rounded rectangle eight dim so I'm going to grab that and I'm just gonna put into there okay so right now we have it at six I'm just going to bring this down to around let's just say three and I think that's roughly the size we desire from here and this is going to be white the same as this button so if we grab this text copy that go to my stroke and there we go so if we get out of this prefab mode there is our primary our secondary button cool now right now this thing is pretty damn close to done now you may want to start testing it out and stuff like that um and I think that's cool but um so in order to take a look at this um let me get out of this perspective let's let's go into this perspective view instead of this ISO View and I'm going to import a character to see exactly how close to where I want this right so I'm going to go to a package manager and I'm going to go into my personal project like sorry my assets and it's going to load all of my assets and I have this dude right here called banana man and um I will link him in the description if you want to use him so I'm just going to import my banana man right now so he is relatively lightweight um and if I type in here banana um I'm gonna grab my banana man and as you see this panel is a little bit too close to the ground for my banana man so I'm going to grab my panel and bring it up here to eye length cool so that's looks pretty darn close this is roughly one meter so I'm gonna bring my banana man to look like this and so he's exactly roughly one meter away let me put on my headset and show you what I got as you see okay as you can see right now I'm about a meter away and everything looks pretty good um this area right now is definitely the clear the cleanest right now and if I want to turn my head and view this information everything seems relatively comfortable but as you see right now when I point my Ray cast at things it's not actually highlighting anything I'm actually pointed at so we can fix that real quick okay so in order for this to actually work we're gonna have to add a component and this is um brought in by I believe the xri toolkit which is again in a video linked below and above and I'm going to hit add component I'm going to add look for tracked device raycaster and actually also because I'm going to sit down I'm just going to bring down my panel this panel canvas to something like this a little bit easier for me to get to and I'm just going to hide our banana man and let me hit play as you see right now my raycast is not red anymore it's white and if I highlight it's the slightest of the slight hover on all of these objects okay this is Daniel the editor speaking now this puppy is really super long so here is a preview of what you can do with some simple State adjustments that are built right into the buttons inside of unity okay let's end this bad boy sweet we did it now while this took a while the more you do it the faster you'll become I promise that said there are some tools like figma converter on the unity asset store but it's roughly 25 and if you want a much more powerful GUI for UI design there's a 125 plug-in called Nova that really rips and I can't live without it now but this besides that how did you feel about this video do you want to learn more about design theory around depth ergonomics and field of view have you used this video to build out your own xrui if so share it with the XR Discord Community we will love to talk about it critique it and if you need ideas or educational resources is the place to get it again links down below and if you like this soccer give me some love with a like subscribe and Bell thing and until next time plus mine is my loves take care [Music]

Channel: Daniel Marqusee

Views: 28,985

Keywords: ui design, ui design tutorial, ui ux design, ui ux design tutorial, vr, ar, ar vr, virtual reality, vr design tutorial, vr tutorial, ui in vr, product design in vr, vr product design, app design tutorial, 3d design tutorial, figma, unity 3d, oculus, oculus quest, ui design figma, ui, user interface, ux, user experience, design for ar vr, ux design for vr, how to design for ar vr, designing for ar vr, vr ui design, vr ui design unity, vr ui ux, daniel marqusee, XR Design, xr

Id: mW8tRQRQD74

Length: 41min 2sec (2462 seconds)

Published: Thu Dec 01 2022