Free Figma Course: Design a Video Game App in Figma

is centered. We can change, customize now the settings or the padding on the left and right edges of the button, which is always a good idea to give it a little bit more space so we can do something like 30 there and 30 there, okay, that's for me. like and now we have a nice button again, this is not the end of button construction, but we are just creating a little, we are creating a littleHere is a little bit of system, like what we call a style tile. We're not creating an actual website or app, we're just creating an idea of ​​what the website or app could be, so why don't we put a stroke on this? and remove the outline there or excuse the padding, we could do something like a secondary button, um, okay, that could work, we're starting to think things through.

I don't love the green used here, which I think I really want. What I do is go more from pure black to whatever deeper color is much more moody. I like that and if that's too much for you, let's go back to our radial gradient and expand the green that's inside that radial a little bit. gradient Like, that sounds cool to me, okay, um, I'm also thinking about texture because there's actually a lot of texture in the

game

, how can we implement some texture in the

game

itself or in the application?

design

itself I'm not sure we have to go out and find some textures, okay, I'll go too, let's see, let's go out here and what kind of textures are in the game, like brick textures, grainy textures, let's just write grainy texture here . and look what we have on Googs uh, I'm going to open up, yeah, a little grainy, we just give it a little grainy texture and see what happens, we get a JPEG or one of those stinking webp format images, that's fine.

We'll open it, not sponsored by any of these people or any of these places I go. I'm just looking for a grainy texture that isn't grunge, but a bit grainy, like light concrete or something. like this here's a metal texture if you don't like this part of oh we know we just want the

free

download you know you'll attribute it who is it? We're getting this in a

free

selection, there's your attribution, okay, okay. Got it, um, okay, so where did that go? In our downloads folder, let's find it and bring it. It's a giant giant texture, okay, let's do this, let's put it on everything for now and change the oh yeah, yeah, that did. it's really dark, let's do something else like lighten or overlay, it's kind of okay, so check it out, this is what I was looking for here, just a little bit of that gritty, grainy look, but I don't want it to be all that way, um , yeah, I don't want to be all over the front like Atop The all over the top, so I'm going to grab it and bring it back to the right to get a little bit of that grain that's type. cool, okay, I mean, we're kind of mood boarding, we're doing some things.

I'm going to take these buttons and put them next to each other underneath, like the Elden ring logo here, let's bring this all to the top, okay, um. I'm going to line these things up and if you were to join this broadcast a moment ago and say oh, he must have some kind of master plan for what he's doing, I don't know, this will be worked out as we go. like a brainstorming concept, let's work together, kind of a flow where we figure out some things or I'm going to put this in there and I'm actually going to go in and I need to lock the texture in the background, so I went ahead and did it.

That now I can take elements like this and stretch them a little bit, let's just put things like this here, okay, you know, other things that you can do inside, like a mood panel, it's like, do you want to start dictating what kind of let's do? let's find the clipping here do you want to start dictating what type of icons do you want to start dictating? I do not know what you want to do. um, I could bring this down and bring it in and actually bring it in. all the way to the bottom and then we'll put these images on top, which is a fun way to show it.

I think we'll kinda get them into that um and then we can bring this back, wow, let's go in real quick and turn. this back to fill um yeah and now we can do that I'm going to put that up there I like it a little bit more um what else do we need to do inside this mood panel button navigation style maybe maybe a card style , let's talk about um, let's talk about, let's talk about putting another background on top of this. It's a solid going black and it's still a little too green for me.

I want this to really be. I think it's a dark app and that green is too much. okay so I think a little bit of texture a little bit of green not too green let's go back and check our color or definitely go back and check our colors now and also when I did this 60 30 10 it's just a guide they're like they can and they should be other colors, probably in our color palette, um, so let's go to the plugins and do something like, actually, I'm going to go in and explore because there's a plugin that I really like in Adobe XD that I'm not sure if they have.

Do you have silly colors and silly accessories? Come on, come on, come on, silly colors. I love this plugin, it's so good, let's go back. uh let's go to the plugins real quick and look for silly colors, let's explore, this really sick interface will appear that allows us to find interesting things inside silly colors, so, uh huh, color palettes, uh oh, there's other things where you have to log in. color blind simulator color toner color Harmony color converter we just need the color palettes for now um let's look for dark themes okay what do we get for the dough?

That's kind of interesting, now we're buying colors here, folks, um, oh, I like that, yeah, that's nice. We were here a little bit with these greens looking for an accent color, we're just playing around, y'all put this in the background, uh, lighten the grain a little bit. David Appleby says we could go back and do that 100 um you guys could get back into the habit of joining streams where the person already has a plan and there's some sort of pre-made thing somewhere that you're looking at, not here, no, let's doing this in real time, buddy, uh, congratulations. about your work, I would like to ask you what advice you would give to those who are starting out in this area of ​​UI and want to pursue this part of UI gaming specifically, that's great, that's a great question.

I'm interested in that question, um, yes, yes. you want to pursue UI

design

s specifically in games. Don't know. I haven't really specialized in the games industry. But if you wanted to, I think I'm sorry to repeat it. I think it's about repetitions. I think it's about putting in the time so you know what you're creating today, what you're doing today that falls within that realm of interest, so I think if you really want to focus on those you're going to have to fill your portfolio. With things like that you're going to have to spend time learning what the industry standard is for that specific industry or industries, so it's just a lot of studying and observing and then practicing and getting reps.

That's my opinion. I don't like any of these color palettes. I would like mine better. I feel like they just aren't. None of them are dark. None of them are dark. That's bad. Alright. Colors so silly you disappointed me. You really disappointed me. okay, okay, let's stop there, maybe come back, you know, start structuring a little bit. I'm going to take this Eldon screen and put it on our wireframe, um, let's talk about a home screen, uh, and let's go. to take some notes probably here, so actually I'm going to do t for text and I'm going to drag a text box um and inside that text box we're going to increase the text size to something like I don't know 40.

It doesn't matter, it's just for taking notes. and start writing inside, okay, so let's talk about the needs of the project here, guys, um in the chat, what do you think it takes to get into this project because we're conceptualizing this together? It's not a solo effort, it's going to be a team effort from everyone, so let's figure out, you know, you know what we want to put into this. I'm thinking we definitely want to have streams. Okay, so the streams are like live streams. What more do we want to have? A glossary that would be great for people to know.

I have this idea in mind so you know, start off, maybe like an article or maybe there's a series of articles, maybe it's more like you know, yeah, like articles. or guides we'll call them guides, let's call them guides and one of those would be like an example would be like starting right um I don't know why I'm capitalizing on things this is just notes right, live streams, glossary, guides, uh, I. I want an interactive map that would be cool um uh concept 2035 says I don't even play Elder Elder ring is Elden sorry to correct you I'm really in love with the game but I know it's got a lot of hype it's got a lot of hype for sure um and uh character Interpretations as a viewer yeah as a character you know we could put that in guides I think uh characters characters yeah let's make characters uh so you can watch live streams check out a glossary see some guides interactive map um concept says it's bad okay I wasn't trying to punish you for calling to my game Elder versus Eldon okay um let's look at the to do list my friends and I have had to keep a list of things to get back to oh that's it. great idea, Stefan Murray, a to do list, a hint, like note suggestions and doing the right thing, that would be great, oh that's a great idea, it should have a section where you can invite friends to a shared space where you can share as personal. tips and things to do like Hey, we're all going to try to achieve this, open task.

Like, um, let's go to a friends to-do list, um, like, yeah, that's cool, that's a good idea, I like these, let's start with these, um and like. you guys chat more like call it open tasks for things that are in progress um open tasks okay sure let's call it open tests I'm down you guys are building this with me this is you yeah it's like a massage you guys guide me that was so horrible and cheesy um okay guys I think this is a good way to start, let's start with the project needs, we have a live streaming section, glossary and guides, an interactive map and an open task.

I think that's enough, as they are actually if If you think about it, these are the five main navigation elements, right? They are the five main navigation elements for our app, so we can start right now and just include a main navigation in our design, so this is what I do. I'm going to do I'm going to press f for frame because frames are your friends, always use a frame instead of using a rectangle or a shape because frames are much better, they're more scalable, they're, you know, more responsive and more uses. than just a rectangle and group things together, so always do that, so, okay, cool, why don't we do it real quick?

I don't think this is going to be it, but why don't we create some colors here? So I'm going to grab this real quick this color and you can see I currently have my brand colors that are showing up here do you see this right here? Let me get it out of the way to see my program alter the personal brand colors, well those are there right now because if I turn on my team libraries, I have them there, let's get them out of there, we don't need them right now, we need ring stuff from Elden, so I'm going to come in here and now I have a light space, I'm going to create this and I'm going to call it our main color, right, and you can't see what I'm doing.

I'm doing it here, uh, let's call this Main and then let's call this. boom like this and create a new one here we'll call it secondary that's a horrible naming structure they should be like primary secondary but let's do one more anyway I'm just naming all kinds of weird things can we name this uh complementary um You know, honestly, when I like UI ux design work I just call it as CTA color which is your call to action color right now when we click on nothing we just click on blank canvas what do we do right ?

We get our likes. color styles that are now built into this thing, so let's call this main like this and you know what you might want to do is organize. I don't know if you're used to organizing things within

figma

, but the slash is your friend too, it's the way you do this, so we could call this mark main slash and now it puts it in a subfolder. We can call this slash mark. I'm going to copy that real quick and put that one in. there I'm going to do the same thing here mark bar look now they're all inside the mark right now in case later on we say we want some type of system color as an error color like this and we want some type of system as color of success like I don't know, it's like kind of obvious green, these are going to be horrible, by the way, right?

Those are not the actual colors, but now we can name this as system error bar like this and capitalize it. because I like capital letters and we can do this like look, now they are in a system error, right, let's put anotherwarning here and the warning says oh yeah, yeah, don't scroll too fast, you have to be in a group. I guess then why not? We don't group this very quickly and then we'll say, "Hey, take this and scroll vertically" and this here needs to say "fix position when scrolling" is that the correct way to do it no, it's not "oh man, I think I left myself perplexed".

I don't know how to get this thing to move and that's something I might need to go back and figure out. Let's see, let's see, let's see, let's see, can you do an auto layout scroll? I know how to do this in Adobe XD super. easy um I just forget how to do it in

figma

sometimes I do it I do it right so this aha I know what's good so our group I remember it took a second we need to take the group it's in and we need to collapse the group correctly, for it has to have a parent container and the content should drip out of that container so it can be scrolled.

Are you tracking with me? Otherwise it's like where do you want me to go? How can I navigate the set of containers? so set up a master container around it and the content will drip out of it and scroll into that master container. I guess let's see if I'm right. We should be able to tell our things that vertical scrolling should work and We're scrolling in, okay, great, now what we need to do is take that group and we want to crop this and you know what we need to do, it can't be within a group, it has to be within a framework. this is the power of frames, so I'm going to press f for frame, okay, I'm going to draw a frame on my page here, let's say right there, and this is going to be, I'm going to give it a title, chat. box, okay, I'm going to collapse the rest of my stuff, let's search and here's all the chat stuff.

I'm going to bring my I'm going to leave it, if you can see what I'm doing here, I'm going to grab all my The chat things that are inside here, put them inside the frame called chat box and now that frame can clip the content and these Things should move inward. See what we just did? We have made the Prototype come to life. Check it out. Okay, now you can see that we have scroll control inside this frame and only in this frame, and we scroll up and down and it looks so beautiful that we have done it.

This is just a personal note if you don't know how to do something. go ahead figure it out I know someone says well done you should probably already know how to do it but hey anyway it was fun it was fun to figure it out so you know we can have a lot of fun and just take all the elements inside Here copy and paste so that we have a lot of chat inside that will allow us to scroll through a lot, a lot, a lot of chat, beautiful, okay, and the more you put in there, the more you can scroll, I love it, okay, so now the chat. working, the next step would be to take all of this, connect it to our chat accordion and by tapping, we would want to move that chat up, we could probably do that pretty quickly, just by doing a second, you can turn the whole thing into a component, if you want create a complex interactive component, let's do it real quick R, forward to the artboard so you can see, okay, so we're going to say that when we touch this thing here we want our Arrow.

We'll have our Arrow flipped over to show that it's closed again and then we're going to grab our chat and oh yeah, yeah, we just need to make sure that our chat is actually behind all of this and make our chat boxes that these groups have. a fund for them, that's what we need to know is if it has a fund. um, you know, what we probably need to do is we probably need to cross all of this, we need to fill the background and we need to choose not to be primary or that dark background color goes well, we're going to do the same thing here, we're going to fill it in and we're going to create this dark background color here. same and then we'll take everything that should be behind it and we should be able to just condense it by root. up and now we will make our prototype, are you ready?

So we're going to say we're going to come in here real quick and say hey, when you hit this accordion bar, everything is going to want to automatically animate this thing, right? Push, we want to animate it smart, beautiful, that should collapse it, uh, like this, and we'll be sure that 300 milliseconds is fine, and we go back and push it again. Skip to everything, we'll just go back in the other direction. smart animation back, let's see if that works, we should be able to collapse our chat and expand it so we can scroll, collapse it, expand it, oh my gosh, we're doing live streaming stuff and some Billy B said, scroll, Patrol, okay.

That's it, that's the free

course

on designing a mobile app within Figma. If you followed the

course

and saw all this, it's good for you. I'm so excited, leave a comment below and let me know what you thought. more content like this where you can see much of the design process all in one place, let me know. I would love to create more content like this for you, if you haven't already make sure to leave a like, subscribe to the channel. I make a lot of

video

s on design and development and the whole process like this one, so maybe stick with the Bell notification icon if you have any questions or concerns, leave them in the comments, but I hope you're having an amazing week.

I hope you're designing awesome things, doing awesome things, and following the entire process to create awesome portfolio pieces. See you next time