Video Game Streaming UI Design | Figma UI Design

what's up everybody i'm jesse show walter and in this episode we're going to be building a video game live streaming mobile application we'll be using figma to do it learning some figma tips and tricks and some basic user interface design tips along the way really really excited to do it let's get started [Music] [Applause] before we go too far i want to say thank you to the sponsor of today's video and that is flexispot who have kindly given me this amazing ergonomic office chair that i'm sitting in currently this is the suteen ergonomic office chair it has lots of really good things going for it it has this 3d lumbar support built directly into the back of it super comfortable on my back has these cushioned 4d armrests that move over all over the place and they work really really well for my arms as well as this breathable mesh and the ability to adjust this chair anywhere and everywhere depth height alignment tilt all that stuff so if you're looking for a really really good office chair check out the flexi spot ergonomic office chair i'll leave a link down in the description with all that being said let's get started let's jump in to our project we have figma open and i have an artboard a basic artboard of 414 by 896 on my canvas and have just a couple of elements there as well for instance i have this uh i just have some typography and i have a an avatar there down below i have some elements like i have some text that we're going to put into a menu bar and i also have some icons that we're going to make this whole thing kind of happen so the idea is to create a streaming platform or like a streaming application where people can kind of scroll through browse their favorite games and find current live streams that are happening for them all right so with that being said let's start working on this nav bar and usually we just kind of draw a big rectangle and start slapping things into a group or a rectangle but we don't want to do that we want to start using auto layout for all this stuff so i'm going to bring these icons onto my artboard and kind of line them up i love this red color that we have going on here so we're just going to make sure that we reuse that red color so let's just kind of come in here and grab our color picker we have an active state here and we're just going to make sure that our text is lined up and then we're going to grab each one of these and just hit shift a and we're going to set the alignment to be in the center like that for each one of them shift a and then setting the alignment shift a and then boom setting the alignment with all three of those selected um we are then going to hit shift a across the entire thing and then i want uh to come in to my spacing area and just put space between this is going to allow me to stretch out my nav bar and but what i'm also going to want to do is just put a little bit of padding around this thing something like that because any auto layout inside of figma is also a frame which we're able to style so i'm going to style the frame with maybe just like a little bit of this off gray color that'll work out good for us and then i'll put just a little bit more padding now we can do special padding on the sides and doesn't have to be the same on the top and on the bottom that way we have this nice big padding there we can stretch this thing out and then everything is lined up perfectly everything's kept straight and whether this becomes an ipad application or a mobile application everything's going to work out perfectly so well maybe we just put a little bit more padding on the top and bottom and move this thing up into place that's perfect we're going to call this one our nav and we're going to lock this and keep this on top and what we also want to do is just fix position when scrolling so anything that we do underneath it it's just going to scroll uh just behind the whole thing you can see we have fixed and scrolls down below um we have this area that's scrolling we're just going to call this our header and then down below we probably want to have like some switches for like all games or active games or something like that so let's do something similar that we did down below i'm going to unlock this because i'm going to steal some some typography really really quickly and let's come up to the top and just paste this word stream it tried to paste it into our auto layout there we don't need it to be there we could put something like all games here and then we're gonna want to create um some sort of little icon so why don't we just hit uh o for oval i'm gonna drag one out i'm gonna take the fill off of it and leave the um the stroke so we have something like this going on and this that'll work let's do that um let's make this an active state or an active version okay so we're gonna bring the size of this thing down um like that copy and paste another one let's bring it inside and this time let's fill it so i think we want both the fill and the border on this guy to be that red color so let's just hit i for i picker and come down and pick out our red color that we had going on there that'll work just fine and we can come in here and make sure we take the stroke off of this one okay so that's all games i'll tell you what we're just going to group that together and then you guessed it shift a to make an auto layout out of those let's just center align everything we'll do something similar right we'll just hit 10 pixels and why don't we actually just curve the borders of these so that when we add our fill you can see it's kind of like a rounded pill style button i'm going to hit i uh for eye picker and just pick that gray color and now we have a little bit of a there's just something going on there like something fun as far as like a little pill style button let's go 30 pixels on the left and right 10 on the top and bottom and then we'll just line that up um you know to our text there we'll do another one right over here and let's do uh active and what we can do is come in here and delete this guy and just turn our outer line to kind of like an inactive gray something like that um this should say not active oh yeah uh inactive now let's just keep it as active i don't quite know maybe we had some better plans for it but we'll just do something like that okay great so we have active and this shouldn't say all games this should say active and this can say inactive there we go that makes a lot more sense and we'll just kind of tighten those up 16 pixels of alignment there let's put shift a put these into an auto layout that means we can also swap these really easily with the auto layout if we want to so that's working pretty good you can see it can also imagine like maybe we have other filters here and we could do horizontal scroll in it so we'll do something like that then next why don't we do i'm going to do let's see a frame so i'm going to hit f for frame i'm going to draw one out here now i could get real auto layout crazy so i don't want to get too crazy so i won't make every single thing in auto layout even though it's a pretty good idea i really really enjoy it so um let's come in here and just give this something like a blue background right now so we can see it and then we'll just add some border radius to it these i want these to be each one of our games and i want to do something kind of fun and three-dimensional here so first thing we're going to do is we are going to add one more element that's going to be an image and i'm going to go into all my assets that i have prepared for this and i'm going to grab one of my rocket league images and just drag that in and then what do we want to do with that image we are going to want to do a little bit of lighten maybe lighten maybe overlay there we go something like that and then just take the opacity of that image down okay i also have this really great kind of cut out png of a car so i'm going to drag this thing in and as soon as you drag it into the frame it cuts it off that's the nature of frames but you can change that nature by saying clip content we don't want to clip content we want to let things kind of fly out and be a little bit fun and a little bit three-dimensional here so let's not super big but just i like some tires and some fender kind of hanging over the side that could be kind of fun uh so let's click inside of our frame and we'll just put like a name down here so like rocket league and uh why don't we do another one underneath how about like 138 streams okay something like that that are currently active and then we'll just a little bit of context or contrast excuse me for our typography let's go um a bold there and a semi-bold this is looking pretty good and now we have a little element that we can move around duplicate do another one of these and a little bit of spacing something like that so this one could be like uh dota and this one could be let's see let's do warzone down here and then all you have to do is really just change all these little elements to what you want so if we had dota over here we want to get our dota character pop that in um and then just manipulate it so it looks the right way we also want to give each one of these kind of like a unique color i like red for dota it's a little bit more aggressive let's go like 1.5 000 streams uh for dota and then for the background there we still have rocket league why don't we put in one of our dota images it's real subtle it's not like you really care like you can really see it too much but you know it matters to those people that it matters to let's do one more let's do our war zone image here so i'm going to move this around and we got our main warzone character so we're gonna drag that into the image pane and do the same thing kind of readjust and have him kind of hang over the edge there uh warzone let me see let's make that that's like kind of military so let's do something a little bit like olive drab kind of color like that and then we have a warzone image that we'd want to drag onto the image section like that um we could do one more you know uh we could do something like i think we have an among us thing up here so let's just drag our little among us guy in there get some mobile gaming going on and shrink that down it doesn't have to be so big cool and again we're going to update this let's do something like purple for among us and a little bit of a brighter purple and then let's grab that background just toss that in and we'll do among us okay now we have lots and lots and lots of games that we could do but why don't we just take these and just repeat a bunch of them like so and then we'll group all of them together boom so now they're kind of sticking off of our artboard now i'm going to take my artboard my frame here i'm going to drag it down so we're able to scroll and see everything and then you'll see immediately when we go to prototype mode uh we're we got some vertical scrolling that's going on here and it says we need to have like our our elements need to be excuse me longer or like extend past the constraints of our artboards so why don't we just do something like this and we'll put those back in there make sure they're in the group and now you can see prototype we have no problem we should have vertical scrolling let's uh check the prototype settings and put it inside of an 11 pro max device and let's press play and see how this thing looks so far should be just just a little bit of stuff so far nothing too fancy but as we scroll right we get our navigation staying still and then we have our elements now we have to do is create a simple um landing spot for um when we our prototype when we click on one of these elements and shoot it over to like a new page we'll just do one of them just to kind of like show what we could do so this is the browse let's call this one the game page and uh here's what we're gonna do we're gonna get rid of all of almost all of these and just reuse them a little bit but we'll get rid of the majority of them and why don't we go kind of very immersive in this thing okay so we're gonna get rid of everything including we're gonna get rid of this nav because we don't need the nav right okay fun uh we also don't need this thing and i don't think we need this thing as well um and we will get anything out of here that we don't need so let's get rid of our group and just put our game element inside okay so get it out of the header it should be there for us okay great we're gonna bring these down and what do we click on we're gonna click on rocket league so let me just steal my rocket league car really quickly and uh i'm gonna go here to game and just pop that in there let's make it nice and big make a little bit of space for it okay fun and then i don't we got to give it some kind of accent right so we're missing that blue so i'm going to hit o for oval drawn oval and the fill of this thing is going to be i don't know let's just pull blue from the car we could do that and then let's add an effect something like a layer blur and when we just kind of like change this effect we're going to blur it out just like so and use a command or control left bracket i'm just going to pop it behind take the opacity of it down just a little bit and then just stretch the size of this thing out again let's blur it some more and take the opacity down just get a little fun little accent color behind our car which is kind of fun kind of cool okay um that part is done i feel like we need a little bit more let's bring the opacity of that back up and down like that okay let's name our game rocket league like that and then what do we what did we say in here we said that it had like a bunch of streams going on so let's instead uh let's just pop this right underneath and i think our our heading is inside of an auto layout so it keeps kind of messing up we don't need it to be inside of an auto layout now take that auto layout off and let's just put like top five streams right here and let's bring that red color back so we'll just bring a little bit of accent there and then i feel like we should give a little bit of a category tag here so let's just put the word sports and again i'm going to use auto layout because this is the easiest way to make buttons and tags i just grab something and hit shift a to make an auto layout my fill is gonna be that red color and then i'm just gonna kind of make a little pill button kind of thing so drag this out and make the spacing centered and now we are set i'm going to hit k for just resizing things all right and put our little tag right up above there give it a little bit of space and now we can just drop a couple of streams in there so let me get rid of this thing and let's make a streamer card alright so we should have like lots and lots of different people streaming this will just be the first one and we will get rid of the color and bring the image all the way up and i don't know why it is being so dark why is it being so dark because we still have our blending mode set in a weird way right okay so we actually maybe we do need a a little bit of a color and we'll just do black and bring the opacity down that way we can put this text on top of it and it doesn't it doesn't like look super crazy i'm gonna take my uh avatar here let's zoom in and just drag and put a name here like jennifer watson she's the one streaming this let's put jennifer's avatar over here on the left hand side um let's do another little piece of text here inside say how many people are currently watching that would be like a cool stat to see right so let's zoom in um pop it right there i don't know why it dropped it down so far down there let's get it back in there and this should be white and it should say 176 watching like that we could put some iconography stuff in there if we wanted but yeah this works for us and then let's actually drop a little bit of a tag in here that just says live that'll be really really easy um center align the text and uh let's just shrink this thing down a little bit our little live tag doesn't need to be so big we're gonna line it up with our avatar there and there's our card we have one card there and now we have to do is stretch out our artboard and make room because we're about to duplicate this thing and a couple of times now we have to do is uh come in here with our rocket league images and just shift all the images and then we can shift the avatars and do that whole thing um let's try a different image boom something like that and uh let's do this one too boom so you got something like that let's do a really quick prototype and we should be ready uh just to present this thing so let's come over to prototype mode and i'm gonna click on my rocket league i'm going to say on tap navigate over to game we don't want instance let's do simple move in it's going to move in from the left it's going to ease out and let's just try smart animating any matching layers and before we go too far let's hit p for pen tool and just make a really funky chevron here that we can turn white and increase the stroke um and then we'll be able to use that to lead back it's a really really ugly chevron but we should be able to lead it back and go the other way and see how our prototype looks so now we should be able to click slide things over and slide things back it's a little funky because it needs probably like it needs a background uh layer so instead of smart animating any of these layers let's see what happens when we take that off yeah that's a little bit smoother right so to left and to the right um and that looks good that looks good how about we just make one of them move out though the other way so that should be a little smoother oh almost there one more sorry move out the other way that way there we go move in move out a simple little gaming interface for us and you can expand on this have lots of fun with it add in some animated gifs or some lottie stuff do smart animation in between the objects and the elements but that is a simple and easy little interface design just to just to get your juices flowing your creativity flowing thanks so much for watching this tutorial and thanks so much for supporting the channel again check that link in the description to check out my flexispot ergonomic chair that i'm using and i hope you guys are having an amazing week i hope you're designing amazing things hope you're making amazing things and i hope that you're comfortable while you're designing those awesome and amazing things so take care see you later

Channel: Jesse Showalter

Views: 6,007

Keywords: jesse showalter, jesse showalter design, learn ui design, learn ux design

Id: rvcYqTBRp9o

Length: 20min 42sec (1242 seconds)

Published: Sat Jun 05 2021