Free Figma Course: Design a Video Game App in Figma

hello there YouTube and welcome to this free course all about UI and ux design inside of figma this course has been compiled from multiple live stream sessions that happen over the span of a few months where I created an Elden ring companion app I've taken out all the chaff all the excess stuff that you don't need in those live streams and compiled them into this one streamlined course that you can watch from start to finish to get an idea and follow along with me for the entire design process that means we're going to start with the very Basics which is gathering assets and resources we're going to create our mood board we're going to top color we're gonna make design decisions and ideate then we're going to move into low Fidelity wireframes and into High Fidelity designs we're going to prototype this thing bring animations and everything to life and you're gonna get an idea of the entire product design process from start to finish and by the end of it you will have a pretty cool portfolio piece to add to dribble behance or your portfolio so stay with me for the entirety of this course I hope you enjoy it and I hope you get something awesome out of it stay tuned foreign let's jump in and get some design work done shall we so I went ahead and just opened a new folder or new file excuse me in figma and I went ahead and and just like I got a couple of assets like the logo and it's just some things to like work off of a couple of images I don't really know we're probably gonna be collecting a whole bunch more but I also have a couple screenshots I took apparently of my own desktop let's get rid of that one wow um okay but also like some gameplay shots um and uh and here's the cool thing you don't have to you don't have to love this game to follow along with these streams if you don't want to because what we're really going to be doing is exploring some design Basics you know typography UI design ux design concepting ideas basic patterns that work for UI design and mobile applications if you just are getting started or maybe you have been doing UI design for a while this would be maybe fun stream to watch just put it on the background and my way of doing things might be different than your way of doing things my way is not the way but it's always interesting see other people's workflow and how they think about stuff and ask those questions in the chat we will get to them in a little bit I think the first thing to do is probably most likely to hit f for frame and drop a let's do a 13 Pro Max right in there and we'll just call this I have a oh sorry I gotta get onto my screen um I dropped that artboard in and I'm gonna name this Eldon screen no not yeah elden's green one that's just too funny that's a really bad dad joke I'm gonna do it anyways I'm gonna round the corners on my frame because that's how I like the design making them look a little bit more like an app uh so all right we got 16 pixels around 40 radius there um let's see chis Chima says how are you enjoying the game loving the game the game is so much fun I can't stop playing the game my wife and I are playing the game together right so she helps me navigate things and we have fun and it's a good old time so I am definitely enjoying the game so I'm definitely thinking we need like some sort of home screen we could do a launch screen today I don't know I feel almost feel like we should just do a little bit of a mood board right so I'm going to create another page up here uh and just call this uh mood board like that so let's just drag that up above and I'm wondering like how in depth we should go in the streaming series like uh Wolfram says this is this video sponsored by them no it's not sponsored by by Elden ring I wish that'd be awesome it's just something I happen to like and enjoy I'm currently playing so I was like what better thing to do than to mesh the thing that I'm currently in love with with the other thing that I'm always in love with which is UI design let's mesh those babies together and let's have some fun so that's all not sponsored at all just some fun content for you guys to enjoy and just uh just hanging out all right so uh should we do wireframes I'm wondering maybe maybe Let's do let's let's throw another page in there and call this wireframes okay and we'll play around a little bit all right so um uh side note this might be uh the best um thumbnail I've ever made for for a design stream I just had to throw that helmet on me okay uh let's do a mood board I'm just gonna hit f for frame and drag out like a big board like this and uh let's just grab a bunch of our assets because that's always helpful just like that bring some of these assets onto the page I'm having this problem right now where like when I try to grab things offline I just get everything in the webp format which just frustrates me Google I just want resources to throw into my mood boards you know okay I'm just gonna bring all of these pretty much all of these assets down just size them down and bring them over I'm gonna make what's called a messy mood board um and uh you know a messy mood board versus a strict mood board the idea being like one of them is just like a bunch of things like camouflaged or camouflage collaged collaged into place uh to give you like a Vibe so that's that's all I'm doing I'm just gonna Vibe these photos out right there boom boom boom got some kind of like the app or the the game itself has like like some Grim kind of tones like this I love this color palette like it's these like kind of darker colors um greens like but the game itself is just uh kind of a morose World anywhere you are so I'm thinking like it probably should be like a dark application just Naturally Speaking um so I'm just gonna hit a rectangle actually never use rectangles when you can use frames frames are your friend always use frames whenever you can let's make this 90 by 90. I'm gonna hit I for my little uh I'm gonna give it a fill first now I can hit eye for eye drop or in figma you can't you can't do the eye dropper until you've given it a little bit of a fill which is um you know that makes sense all right so I'm gonna grab these now a lot of times people ask me like okay how do you make how do you make like color palettes what's the best way to make color palettes um you know do you use a tools sometimes I use a tool sometimes I just go for it um you know so look I'm just throwing together a little bit of like some color palette stuff right now I'm going to take that piece out there's a lot of that gold color throughout gold in the game is like uh like a currency like but it's not gold they're called Rune stones or something like that doesn't matter but they have a goldish appeal to it there's gold Mist in the air when you're following certain things so I like the idea of use utilizing a little bit of this gold um and making that kind of a highlight color if we were thinking about like a 60 30 10 which is a video that I did recently where you use 60 of whatever your base color is I could see that being like our dark color for our background then 30 of our um of our secondary color which might be like this kind of dark green color which I'm not sure if I love that dark green yet and then the other 30 would be this so here's a really easy way to do this um I did it in the video but I'll do it for you real fast it's just let's make each of these uh the width of 100 and we'll make them 50 high like this okay cool now what we can do is space these out appropriately uh we need this one to be 600 right because it's 60 percent okay beautiful actually you know what we can go even smaller than this let's make each of these a width of 10. that's going to be a lot easier now this one can be a literal 60. this one can be a literal 30 and this one is stuck with the 10 right so look we have 60 30 10 that could be our color palette right and as we grab it we can extend it out no matter how wide we're still getting that ratio of 60 30 10 right so that might be a thing we do um let's see we might we might we might actually grab this whole background here and put a radial gradient on it that radial gradient is going to go from kind of like our green color on the inside and on the outside it's going to be 100 percent uh we'll do that dark color oh we're getting kind of Moody we're getting kind of vibey here aren't we I like it um yeah okay it's gonna be fun um yeah so like let's drag this thing down this is fun like this um yeah what else what what else do we need to do here maybe let's experiment so when I do uh mood boards um I do not only do I I do something called mood board a lot of times I'll do something that's called like a style tile um and David Appleby says are you gonna be using interactive components absolutely figma has interactive components for us we gotta use them uh it's a powerful feature in figma we're gonna be doing Auto layout interactive components smart animate all sorts of fun stuff um we'll and I'll show you along the way some of my favorite plugins and different things so let's do this really quickly I'm going to add a stroke around the outside of each of these just so we can kind of see them they're beautiful okay and that stroke is on the inside which means we should be able to yep line them up so that we don't get any sort of weird double Gap over them that looks beautiful I like that now we can see the color palette um and okay cool yeah kind of interesting so okay with our color palette now we can group the whole thing together we could size it back down and put it maybe over here like underneath we're just kind of creating a little bit of a layout thing here right like what could this application look like maybe like this um now what's interesting is like you know we can really quickly start setting some like some Global variables inside of our figma document we're not done yet we're not ready to do that but when the time comes I will be setting some some color variables I'll be adding these to my document colors and typography and all that kind of stuff let's do a button really quickly shall we I'm going to take some text and we don't want to do weird stylized text we probably want to keep this pretty clean because you know we want to be really clear it's a companion app it doesn't have to be really stylistic I know we're doing a lot of stylistic stuff um you know so far but let's keep the typography and everything pretty bare let's do something like Roboto or maybe uh mons let's do Montserrat and let's get out of light we'll go to regular I'll move my face out of the way here and um let's see watch stream like that could be a call to action obviously on a button we can see that happening this is about 12. let's jump it up to like 16 and we'll go like semi-bold and then I'm gonna hit we're gonna use uh um Auto layout shift a to create an auto layout right Auto layouts are frames frames are styleable so let's start styling uh our button using the auto layout so I'm going to grab a little fill in there and what do we want the fill to be oh let's say it's a let's let's just play with the call to action right and see what that could look like so let's jump this up eight pixels of corner radius there to make a little button and uh okay let's come over here to our padding and move this in place so you can see what we're doing uh Auto layout gives us this little interface where we can say like hey stack things horizontally vertically yada yada but then also we can mess with the space in between items we don't really have other items inside but if if I was to for instance open up an app like nucleo which is where I store like a lot of my icons and my icon sets we could drag in some icons it's going to take a second to load so what all right I got nucleo open uh and I don't know let's throw like uh what do we have do we have like a video icon in here uh or how about how about live yeah live oh there we go there's a there's a live streaming icon right there I like it 48 pixels great I'm gonna drag that in I'm gonna drop it right there um I'm going to size it down a little bit and I'm going to drag it into my auto layout now let's zoom in so you can kind of see what's what's cracking here and I'm gonna make it white so we can see it right as we drag things into an auto layout you see that little you can see the little uh cursor pop up saying it's going to jump into the layout right so okay we'll put it right there we'll see what happens we'll size it down a little bit okay and we'll go back to our Auto layout settings here okay so what we're saying with the auto layout settings is currently we want everything to be kind of uh pinned or or anchored to the top left or to the top or the bottom right so if we and you'll really see this happen if we kind of oversize this thing where is it sitting like all the text you can see in our button is kind of staying towards the top well why is that because we have it set like that maybe we want to be to the center right or the left or the bottom we control here but we also now control spacing between our elements okay so with that being done let's size down the side that the size down scale down the size of R and maybe we'll use the actual scale tool with K so we don't mess with the size of that icon that looks pretty good to me let's come back in everything's centered we can change customize now the settings or the padding on the left and right hand edge of the button which is always a good idea to give it a little extra room right so we can do something like 30 there and 30 there okay I like that and now we have ourselves a nice button again this isn't the end-all be all of button building but we're just creating a little bit of a we're creating a little bit of a system here right like is what we call a style tile we're not building a real website or application we are just building an idea of what the website or application could be so let's why don't put a stroke on this thing and remove the outline there or excuse me the fill 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 that's being used in here what I think I really want to do is go more from like pure black to whatever that deeper color is that's much more Moody I like that and if it's too much for you let's come back into our radial gradient and kind of expand a little bit the the green that's inside of that radial gradient I like that that looks kind of cool to me okay rad um I'm thinking about texture too because there's actually a lot of texture in the game how can we Implement a little bit of texture into the game itself or into the application of the design itself I'm not sure we might have to go out and find some textures okay um I'm gonna go too let's look go out here and what kind of textures are in the game like brick textures grainy textures let's just type grainy texture here and see what we get in in the Googs uh I'm gonna open up yeah kind of grainy let's just slap a little grainy texture on it and see what happens do we get a JPEG or we get one of those stinking webp format images that's fine we'll open it up not sponsored by any of these people or any of these places I'm going I'm just looking for grainy texture that's all just not grunge but just a little bit of grain kind of like some light concrete or something like this here's a this is metal texture if you're not into this portion of oh we know we just want the free download we you know you will attribute it who's this by we're getting this at free pick there's your attribution okay good you got it um okay so where did that go to our downloads folder let's find it and bring it in that is a giant giant texture okay uh let's do this let's put it across the whole thing for now and let's just change the oh yeah yeah that made it very dark let's do something more like lighten or overlay there's a little okay so check it out this is kind of what I was going for in here just a little bit of that grittiness and graininess but I don't want it to be all the way um yeah I don't want to be all the way across the front like Atop The across the entire top so I'm gonna grab it and just bring it to the back right so just get like a little bit of that graininess that's kind of cool all right I mean we're kind of mood boarding we're doing some things I'm gonna grab these buttons and put them side by side underneath like the Elden ring logo here let's just bring all this to the top all right um I'm gonna line these things up and if you were joining this stream just now and going like oh he must have some sort of like master plan about what he's doing I don't this is going to be uh figure it out as we go like brainstorm concept let's work together kind of stream where we we figure some things out or I'm gonna put this thing there and I'm actually gonna go in and I need to lock the texture in the background so I just went ahead and did that so now I can grab elements like these and stretch them out a bit let's just pop things like that here okay um you know other things you can do inside of like a mood board is like do you want to um start dictating what type of let's let's let's look for the crop here do you want to start dictating what type of icons you use do you want to start dictating I don't know what do you want to do um I might actually bring this down and bring this across and actually bring it down to the bottom and then we'll put these images on top that's kind of a fun way to to demonstrate I think a little bit pull them into that um and then we can actually bring this back yikes let's go in really quickly and turn this back to fill um yep and now we can do that I'm gonna put that up there I like that a little bit better um what else do we need to do inside of this mood board buttons 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 that goes to Black and it's just a little too green still for me I want this to be really I think a dark app and that green is just too much right okay so I think a little texture a little bit of green not too much green we're gonna we're gonna go back and revise our color or like definitely go back and revise our colors right and now and also when I did this 60 30 10 it's just a guideline they're like they're could and should be other colors probably in our color palette um so let's go up to plug-ins and let's do something like actually actually I'm gonna go in and browse because there's a plug-in that I really like in Adobe XD that I'm not sure if they have in do you have dopely colors dope dopely plugins go come on come on come on dopely colors I love this plug-in it's so good let's go back uh let's go to plugins really quick and find dopely colors explore it's going to bring up this really sick interface that allows us to find cool stuff inside of dopely colors all right so uh-huh color palettes uh oh there's other stuff you have to sign in color blind simulator color toner color Harmony color converter we just need the color palettes for now um let's let's look up dark themes okay what do we get for dough that's kind of interesting we are shopping colors now here folks um oh I like the yeah that's kind of we were kind of in 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 might go back and do that 100 um you guys might again you guys might be used to joining streams where the the person already has a plan and there's some sort of pre-designed thing somewhere they're looking at not here no we're gonna do this real time dude uh congratulations on your work I'd like to ask what tips you would give to those who are starting in this area of UI and want to follow this part of UI games specifically that's a great that's a great question I'm into that question um yeah if you want to pursue like UI designs specifically in games I don't know I haven't really I haven't really niched down in the game industry um but if you wanted to I think it's again sorry to repeat it I think it's about repetitions I think it's about putting in the time so you know what are you creating today what are you making today that falls within that Realm Of Interest right um so I think if you want to really focus on them you're gonna have to fill your portfolio with things that are like that you're going to have to dedicate time to learning what's the industry standard for that specific industry or Industries so it's just a lot of studying and observing and then practicing and getting in the Reps that's my opinion I don't like any of these color palettes I'd like mine better I feel like just it's they're not none of them are Dark um none of them are Dark that's bad all right so dopely colors you let me down you really let me down that's okay um all right let's stop there maybe we'll come back you know let's start wireframing a little bit I'm gonna grab this Eldon screen one and pop it into our wireframe um let's talk about like a home screen uh and we're going to take some notes probably over here so I'm gonna do actually t for text and drag out a text box um and inside of that text box we're gonna bump up the text size whoa to something like I don't know 40. it doesn't matter it's just for note taking purposes and start typing inside all right so let's talk needs of the project here folks um in the chat what do you think uh needs to go into this project because we're concepting this thing together it's not a solo Endeavor it's going to be a team effort everybody so let's figure out uh you know what you know what we want to put inside of this thing um I'm thinking definitely we want to have uh streams okay so streams uh like live streams what else we want to have um a glossary that would be cool so people know I I have this idea in my mind for you know uh getting started maybe like an article or maybe there's a series of Articles maybe it's more like you know uh 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 getting started right um I don't know why I'm capitalizing things this is just notes right live streams glossary guides uh I want an interactive map that would be cool um uh concept 2035 says I don't even play Elder Elder ring it's Elden sorry to correct you I'm really in love with the game but I I know it has a big hype it does have a big hype for sure um and uh character Renditions like a viewer yeah like character you know we could put that in guides I think uh characters characters yeah let's do characters uh so you'll be able to see live streams reference a glossary see some guides interactive map um concept says my bad it's all right I wasn't trying to chastise you for calling my game Elder versus Eldon it's fine um let's see to-do list my friends and I have had to keep a list going of things to return to oh that's a great idea Stefan Murray um a a to-do list a track like notes suggestions and to Do's right like it would be cool oh that's great idea it should have a section where you can invite friends into like a a shared space where you can share like personal tips and to Do's like Hey we're all gonna go try to accomplish this thing open task I like that um let's go a friends uh task list um I like yeah that's cool that's a good idea I like these let's start with these um and as you guys chat more it like calling 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 guide me that was so awful and cheesy um okay you guys I think this is a good a good way to start let's start with um project needs we have a live streaming section glossary and guides uh interactive map and open task I think that's enough like these are actually if we if we think about it these are the five main navigation items aren't they they're the five main navigation items for our application so we can actually start right now and just slap in a main navigation uh into our design so here's what I'm gonna do I'm going to hit f for frame because frames are your friend always use a frame versus using a rectangle or a shape because frames are way better they're more scalable they have um you know more uh uh responsiveness and more uses than just a rectangle and grouping things together so always do that so uh okay cool why don't we really quickly not that I think that these are going to be but why don't we create some some colors here so I'm going to grab this really quickly this color and uh you can see that I currently have like my brand colors that are popping in here do you do you see this right here let me get me out of the way see my show alter personal brand colors okay those are in there right now because if I turn on my team libraries I have those in there let's get those out of there we don't need those right now at all we need Elden ring stuff so I'm gonna come in here and now I have a clear space I'm going to create this one and I'm going to call this 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 this secondary that's horrible naming structure they should be like primary secondary but let's do one more anyways I'm just naming these all sorts of wonky things we can name this one uh complementary um you know I I honestly when I do like UI ux design work I just call it like the CTA color that's your call to action color right now when we click on nothing we just click on the blank canvas what do we get right we get our like our color styles that are now baked into this thing so let's call this one primary like this and you know what you might want to do is you might want to organize I don't know if you're used to organizing things inside of figma but the slash is also your friend it's the way that you do this so we could call this brand slash primary and now it drops it into a subfolder right we can call this one brand slash I'm just going to copy that really quick and put that one in there I'm going to do the same thing here brand slash look now they're all inside of brand right now in case later on let's say we wanted like some sort of system color like an error color like this and we wanted some sort of system like success color like I don't know it's like some sort of obvious green these are going to be horrible by the way don't that's not the real colors but we can now name this thing system slash error like this and let's capitalize because I like capitals and we can do this one as look now they're in system error right let's put another one right there really quickly system slash success don't worry we'll change all of these before but look now we're building out a little system of colors here this makes way more sense and what I love about this is that later on you know later on when we when we change these colors because we inevitably will we're going to call that our primary our secondary and our call to action we'll do the same thing here right like brand primary brand secondary brand call to action okay great when we do that let's make sure that our button here is using our call to action color right if we go in and we now edit look at this our call to action color which you can see here on our button and here in our color palette if we edit this let's just copy that guy right there if we added it and decide we want to do something more like purple it changes everywhere because figma is so smart so we're gonna come in here and paste that kind of corn flour yellow whatever that is back in and we are cranking things out all right look looking pretty good I dig it I'm into it all right so uh somebody says is this 60 30 10 yeah yeah well that bottom thing is 60 30 10. I'm not saying it's the end-all be all but it's definitely a good place to start accent somebody said we should call it accent color that's fine too I'm gonna call it CTA because I'm literally only going to use it for call to action tappable look at me touch me you know click this kind of like action so let's get into our wireframes we are now completely devoid of any color um and let's uh let's actually create a couple of colors uh for our wireframe shall we so a really wireframe should be a series of Grays um so I'm gonna go like dark gray uh here's like a lighter gray and here is like an in-between right okay let's do something like this okay so I'm gonna name these as well because I want to just I don't have to be that do I have to be that crazy about it I don't really right okay let's just make this dark because we know it's going to be a dark uh navigation right and I'm not even gonna like really worry too much right now even about like icons and stuff like that that's design stuff I don't want to get into High Fidelity design I just want to lay this sucker out so I'm going to hit f for frame I'm gonna put that inside and I'm going to fill it with like this lighter color right here and I like starting I like I know that I'm most likely going to default to like a an eight point like pixel grid so I'm just gonna start here and I'm gonna put a little text down below right I think we're still on Monster let's just call this what was the first uh the first thing we're gonna do live streams we'll just call it streams streams okay like this I might as well just grab both of these really quickly shift a put them into an auto layout you know what I'm about to do um and I'm I'm about to just Center everything like so that works great and we'll make sure this text is centered even and look now we have whoop we put that right there that looks great we can just duplicate this can't we duplicate this over here and shift a put those into an auto layout and now when I copy and paste boom look at that they're gonna they are going to stay like balanced perfectly 16 is a bit big let's jump down to 14. Let's jump down to 14 and go from semi bold to regular I feel like that see that feels good now here's what's crazy right like we actually we built this Auto layout and we put it inside of a frame but Auto layouts are frames why don't we just style it that's what we should be doing is filling it with that same color gray beautiful look let's get rid of this now and bring this up now all we have to do is change the padding let's add some padding to this inside of the auto layout shall we I like it okay we're going let's put it to the edge there and look at that we filled it up there beautifully now we have a bottom anchored navigation now you might have to play with this a little bit because as we start to expand and stretch this out maybe we need that to be you know a little bit like these these items to be stretched out or spaced out from each other in between that's fine but I think this is a good place to start so let's let's see what happens with this I'm going to bring my my list down I'm going to Auto height that and bring it down so we can play and pop these in right this one should be uh let's call this one guides that's more interesting let's call this one uh glossary let's call this one uh maps map let's just go map and this one can be uh I'm just going to call it tasks right we know it's called open tasks we understand right okay so when I stretch when I stretch uh like my thing out ever like my nav bar out all the elements kind of stay squished over there and we don't want that and the reason it's doing that right is we're gonna need to keep everything centered and we don't want to choose packed we want space between right what does space between do it's gonna actually space out everything it kind of mimics CSS flexbox and it spaces things out and says hey just make sure the space between is equal and then you know we'll dictate everything else that's fine but see the difference between check it out space between and packed it's going to try to pack everything in now we don't want that space between now what's cool is this thing will respond right as we stretch this out and it becomes like an iPad app uh now it's all very very seamless okay love it it's looking good I'm into it so far I'm just because I don't know why I just want these to look more like circles so we know that they're gonna be icons and we need to grab each one of these and we need to add eight pixels of spacing in between them and now what's the overall spacing 24 so check this out now when I space 16 pixels it's not spacing left and right right before it was kind of kicking out left and right now it's just doing top and bottom boom we've created a nice responsive navigation down here using our things right so where do people go oh here's the hard part that we have because one of the things we need is probably I always like to have a dashboard like an aggregation of everything so I think we need to condense um glossary and guides I think we need this one to be like home um and then or you know what yeah home and I think the home should switch over here to the left I have I have it inside of an auto layout so I can just drag them around and it keeps the spacing real nice for me which is so great so home streams guides map and tasks epic okay now here's what's not in our application you always need inside of an application somebody says the buttons feel off center but they're not I promise you they're not because Auto layout is doing the work for us um so um let's see let's see let's see uh you oh you're always gonna need like some place to access your account and we don't have that right now so we are going to have to draw a frame up here that will end up becoming an avatar um I think right so let's just round this that's an avatar okay now here might be the time maybe maybe maybe to implement a loose grid right not a I'm not going to do my eight point pixel grid quite yet but I am going to turn on my layout grid up here in figment on all I did was press Plus on that to add a layout grid see we could come in here and say let's add my eight point pixel grid but we could also come in here and say hey show me a column and I want to Center this and let's stretch the width out so I get a little bit of spacing from the left and right hand Edge perfectly like that and I'll probably just Loosely go off of that spacing look at that I didn't even mean to do that look how perfectly it's lining up almost absolutely perfect right ah it feels so good when things like that happen Okay so our Avatar is in there we're doing columns and if you ask yourself this question like uh I don't know what to use I mean there's like the grid columns rows there's responsive grids that stretch they're centered grids what's a gutter what's a I don't know I did an entire video of it you can find it on my channel where we talk about the basics of grids in interface design you should watch that um but I you know really at the end of the day there's going to be some uh some industry standards for the way that you use grids and columns and rows but then a lot of it is really dependent on you and what makes sense to you I think people over complicate the usage of grids I I think a little bit so I don't think you need to do that um I think we're just fine hey side note if you haven't already like subscribe hit the Bell notification for the stream you might want to do that because I do streams like this quite often and we're going to be continuing this series okay so uh we kind of condensed glossary and guides so why don't we actually just so we keep some structure here yeah guides and glossary I like that okay so that's all working out all right and our our Avatar is gonna go in there and all right I guess we are working out this is obviously I think this is the home screen right um so we're gonna call this held in screen Dash home this is our aggregated screen now um let's talk about some of the easier I I don't a lot of times people like to like if they're designing a website they like to design the home page first I don't like actually designing the home page first because for me the home page is a lot of customization um like you it's room for customized play right similarly on the home screen or the dashboard of your application a lot of times that's a place for like aggregation or unique you know edge cases whereas if I go to like a streams page we're going to start building out really solid interface components first right it's going to be very structured and formatted on list Pages we might call those things right list Pages um you know so I might build the live stream page first and then come back and see how that any elements and components I have designed now play into the home page or the the aggregated screen right so okay with that being said I'm going to duplicate this over here because we should have some similarities but I won't have the Avatar up there I don't think or maybe I will let's leave it and we will call this one uh streams okay and I have a option L on my keyboard setup I think everybody should in figma to just can collapse all of my artboards and you can also hit option oh or is it Control G excuse me Ctrl G to on and off your grids and your guides your layout grids and guides um so that's pretty cool uh yeah Auto layout is the way to go summer is saying so when we're talking about streams let's see let's see let's see I'm just gonna rough this out really quickly I'm gonna hit f for frame I'm gonna drag out like it's most likely a card right that has like the stream inside of it that's the easiest way to imagine this um why don't we fill this with gray of some kind I don't really care uh why don't we round these Corners we'll stop at about eight pixels rounded and then we have a choice right we can do like you know the card with all the details on top of it or we can do the card that has like an actual card underneath and here's if you're like what the heck did you just say I mean something like it's hard to see it now but let me fill it with like a very light gray and then take my grids and guides off so it's the difference between having a card that has the image of the stream inside of it and then dropping the information on top of the image or actually having a spot reserved to put like text or something inside right so that's that's definitely yeah um summer says Auto layout plus variants equal Iron Man plus Captain America yeah very very powerful for sure make them oh what did somebody David Appleby you said make them Elden ring symbols what make what Elgin ring symbols that's a great idea um I just don't know I just don't know what you mean so let's play with one like this and let's see right let's see let's see what happens with it um I have been playing if you Tommy Tommy's joining us if you're just joining uh we're doing an Elden ring companion app concept because I'm addicted to Elden ring I've been playing Elden I I done I've done been playing that game homie I'm super on it I'm in love with it it's so much fun it's honestly the hardest game I've ever played in my life but I'm having a lot of fun I'm gonna shift a and turn this into an auto layout um the problem with auto layout and I don't like this is that you can't go negative I'm pretty sure can you go negative I don't think you can um so here's like butted right up against I'm going like 10 pixels back right butt up against 10 pixels back so we can kind of Stack these like maybe this is like a somebody who's watching currently how many people are watching uh that's a common thing or we could just do you know the person's information and we'll have some sort of gradient right so let's do another fill on top of it uh to even show the gradient so let's go linear gradient something like that uh why is it so light I don't know oh 20 that's why it'll do something like that okay it's a little intense let's bring it down a little bit okay cool and then this is really dark inside for our wireframe we won't be able to see that it's going to be an avatar and you know usually when you're doing stuff like this when you're wireframing you know it's people like want to see oh there's going to be an image of some kind in here so let's put the crisscross to show that there's imagery ah I'm gonna skip that for now just because I know that you guys know get everybody out that you know all right we're gonna put images in here um and I'm just I don't want to do that right now it's a lot of time extra work um oh somebody said put you put uh Elden ring symbols in there as as my bottom navigation yeah that'd be that'd be cool um I think our home could be that couldn't it yeah like our home could be the Alden ring symbol um but the rest of them will have actual iconography that represent okay um I'm going to what were we using here we're using Montserrat regular 14. so I'm gonna grab that text I'm gonna come up here and boom I'm gonna paste it in and make sure where'd you go friend boom pop there okay so the name of a streamer um name of streamer boom let's make sure we're left-hand aligning this and uh yeah something like that and then we'll do like a little uh live chip we call these chips in UI design we're gonna put that over there and I don't think this thing is inside of our frame so let's drag that inside we have like a oh this is going to be our Avatar frame all right now we have the everything should be one almost there let's drag this guy in there as well boom it's all inside the frame we can move it around as one okay name of streamer uh the fact that they're live maybe this needs to be down here and the live chip needs to be up there possibly but we also usually have some stats like so maybe we move this let's explore right uh this over there and then this could be like 1.9 k watching um and I don't know does that go up there or does it go over here I think it could probably go over there this probably yeah this makes sense um just the distribution of information is important here uh we're about 10 pixels from every edge here this is a really big Avatar to have in there I'm gonna shrink it down a little bit uh we're 10 pixels away centering using our alignment tools this works and okay that's pretty good and I can Auto lay out the heck out of that but I'm not going to so okay so we have like a streaming card it's a little small maybe do we want to how many people are currently so this is a ux question you might have to ask right how many people are currently streaming Elden ring it's probably the most popular game right now being streamed on like twitch and YouTube I mean there's still a lot of people playing like Call of Duty and other games in fortnite whatever but when something's hot a lot of people jump on it right so there's going to be an increased amount for a while so as I think about like okay there's an increased amount right now but is it as many streams as if I was to build a general streaming platform and uh there was like rocket League being played in like hundreds of games I want you to be able to see as many games as possible right I want these things to be really small here's what I'm gonna do really quickly I'm gonna group it together I'm just gonna make sure it's fixed to the bottom left top right we're using responsive restraints here so now I can I can manipulate my card right if this is a generic streaming app and it's hundreds of games being streamed I want you to be able to see like as many as you possibly can at one time right so um you know I'm like as the smallest possible amount maybe even like maybe these are bigger right but maybe like I'm gonna do like a two up kind of thing so you can see as many games as possible but if this if this is specifically like Elden ring streams I might want you to see like more and I might want you to not focus so much because it's not about what game is being played it's about who streaming so I might want to give you a little bit more information about the streamer right okay so maybe let's let's let's go big for now not quite that big but maybe like 208 we're at 395 by 208 okay I'm gonna grab these shift a put them inside of an auto layout and my spacing is going to be 16 pixels because I'm probably going to be Google a pixel grid copy paste copy paste copy paste copy paste we have a bunch of them here right command left bracket move this to the back there and uh and we take our frame and we need to move it up so that on when we prototype we can actually scroll this thing let's prototype it really quickly and if you're like prototype this thing's a wireframe you should be oh I gotta make sure that I turn on prototype no scrolling vertical scrolling there it is now we can oh almost there except that our navigation needs to stay fixed where do we fix position right there on scrolling that's what we want so now when we press play Boom we have our our application and honestly this is what you would want to test this is what you would want to prototype and have people try to accomplish a certain thing so we're starting to build out a flow right our user enters the application that user really wants to watch streams I just beat my chest as I was talking and I went like that so they they want to watch a stream that's their thing that's they're the type of user that wants to watch streams they click on the stream bottom tab bar navigation here right and they are presented into like the streaming list page and they scroll they pick one we gotta go to the next flow where it shows them the stream so we're building out flows or work streams so to speak inside of our UI design okay uh we just did a really quick wireframe and minimal prototyping here for our streaming page which is good I you know I like we're going to call this our stream uh list and then we could immediately design the stream page um like the individual stream page stream product page you might call it um yeah that could be a thing uh I like this idea of the test let's just one more just just do one more really quickly and we'll do the stream page because we're already in this work stream right now uh and uh I love everyone's comments about the game itself it's so great so let's do this really quickly uh since we are in uh the streams tab let's just highlight that somehow you know and make it I know black or Pure White like that that let's do that um and we'll just bump this up to like bold so you can see that's you're active there okay now when you get to a stream page like a like the product page so to speak um we want people to be a little bit more immersed so this is you know basic like ux design we don't want to keep a bottom navigation there right we want them to have to back out to go to that main lobby and I want to throw something out there you really quickly when you're thinking about designing products in the digital realm you should always be thinking how this would apply to the real world okay digital products mimic Real World products digital shops mimic real world shops okay so when you walk into a store for instance you don't walk directly into one specific section like the women's clothing section usually walk into a Lobby where you can kind of generally assess what's around you a lot of times in malls there's a map to tell you so you walk generally into an area that welcomes you that's the best way to do it right and so I can see that the men's Department's there the women's Department's there perfume is there like they're where do I want to go this is our aggregation page right where we kind of shop at a glance and Window Shop at everything right once I like a specific shop or think about it like walking down the street window shopping oh that shops for that that shops for that and it's all on one street the street is our application okay this street is our application and each of our tabs here represent one of our storefronts they click on a storefront and they go into a store they click inside of it on a product in that store and they will now be zoomed in right to that individual product right so I'm walking down the street and there's a bunch of Technology stores I go into the Apple Store and I see an iPhone I pick up the iPhone I'm no longer aware of the Apple store or the stores outside I'm focused here I'm immersed on the product that's what we're doing here we're building that immersion so once they get into the product we don't want to show them the main navigation anymore we don't want to show them extraneous elements that are not pertinent to them right this moment the thing that's pertinent to them right this moment is most likely just this single product and everything that it entails right so now all of a sudden what we really care about is what we care about the stream that's it our user has said show me the stream and to show them anything else I mean eventually you can show them some other things some some suggested things perhaps but to show them other things right away that's a bad user experience we wanted to say hey here is now the stream that you clicked on it's right here right isn't that a better way to think about things so always try to think about things in a real world scenario and go yeah that wouldn't that wouldn't make sense what would make sense if I was in a real world scenario this makes a lot more sense right so okay and now and there might even be some changes right like maybe we don't need the stats up here what's pertinent now to the video that's playing are most likely controls for that video does that make sense so let's bring nucleo back out and give me a I don't know give me a play button of some sort let's jump up to like 24 pixels and and you could find like a specific style that you want to operate in here so okay yeah like just bring this play play button in here you know and and um we'll pop that right there and we will hit k for scale and bring that in and it's probably going to be Auto playing right when you come in but now like the most important thing for the video is the video itself and being able to control the video that's become me as a user my primary function and or desire is to play this video I already told you I want to play this video you know how I clicked on it over here on the left hand side it should just play right we've even we've even fast tracked this idea right in Tick Tock when you open up the application it doesn't even ask you if you want to play it doesn't even onboard you it just starts showing you content right that's why Tick Tock blew up so quickly was because it did away with that old stupid onboarding process of thank you for downloading the application here's five swipeable screens that explain to you the application do you want to sign up for the application and I I spent all this time not getting the thing that I downloaded the application to do which is view content in Tick Tock you download the app open it up and it just starts playing this is why Netflix and other streaming services they have mastered the autoplay feature right or roll over the preview just start playing the preview right it like the difference here's a great example here's a use case scenario in Netflix if I'm scrolling down or any of the other massive streaming services and I hover over a video it starts autoplaying in the Microsoft gaming store right you get sent to a gaming page or a movie page it does not start autoplaying one of those is a good work is a good experience like most likely if I'm stopping for at least two or three seconds on a video I want more information about it so on hover or on hold or pause over something just give me what I most likely want which is a preview some more information the ability to add it to a list or play it right now done see how easy that interaction is versus oh I've hovered over it I've stopped I'll click on it oh it sent me to a product page okay I gotta scroll down three times and press play to watch a preview okay I gotta back out of that preview okay now I'm gonna add it to my list do you see how many steps is saved by the idea the solution of autoplay this is what digital product designers do sorry that was like a massive rant I'm just really passionate about like thinking about things the right way okay this by the way is atrocious it's horrible I don't like it but let's bring the information of our streamer down we don't need it to be any longer on the video let's bring this up and we're just gonna start Auto playing this most likely so this is this play button is irrelevant um again our stat let's bring that down like let's make that doesn't have to be up there anymore this can be over here let's line these things up because the video is the primary thing that we want right um that's what we really really want so we could do that and then give me give me an arrow right give me an arrow here okay I'm gonna take this Arrow I'm gonna pop it right there and I'm going to bring it into place and I'm going to make it white and we know that our user now knows that they've been given the exact thing that they were hoping to find obviously but now they if the next thing that they want to find is how do I get the heck out of this video it's very very obvious top left but we don't put it at the bottom because that's a primary action right so we don't need to give them a primary action it's more of a secondary action it's tucked away in the right spot okay cool uh you know I'm pressing Ctrl G to turn my grids on and off look I have lined these up inappropriately okay we need to make sure we're kind of staying on our grid all right and all that's looking good okay great um this thing is GI massive we don't need it to be like that let's scale it down like so fine okay and there's probably some other controls we can talk about that we are just wireframing right now what goes on underneath it I don't know maybe um a description or some stats or there's got to be some other called action that we can think of right that needs to happen down here uh but for now let's stop there let's stop up let's do one more thing let's add a let's add a call to action actually this go text here and we'll we'll put a button um and what what should be what should be our call to action what could people do inside of I mean obviously we want them to chat there should be some sort of live chat feature um inside of the live streams but we also want them maybe like tip the Creator um subscribe to this channel these are all good like call to action it's like a primary enjoy the stream and then boom add a little something um start a stream of your own there's lots of ideas um Logan's Hall says what's the name of the icons app that you use I use an app called nucleo but I've in the past I've used another one called icon jar um I think they're both free to download I'm pretty sure um so definitely okay yeah that's great so uh I don't know I don't know what the call to action is going to be so let's just put one down here like uh tip this streamer this is most likely Gonna Change I hate this um but why don't we actually go to our mood board that was my giant face in there and come back and we will Boop like this let's bring our ooh never ever put color inside of your wireframes unless you immediately want your clients or stakeholders to go but it's yellow I don't like yellow well we're not talking about the yellow right now we're talking about we're talking about the structure and layout and content don't talk to me about yellow right now okay so tip uh this streamer okay and let's get rid of that let's make it just a black button we'll make it stand out let's bring nucleo back up and uh give me a money icon of some sort oh this is a jovial little money icon or we've got this little hand right there that's a sweet little one okay let's grab that I love this feature in figma by the way called selection colors where like when you have watch if we have a second one and we change it to red and now I'm selecting like multiple items it'll tell me the colors of everything selected so if I'm like oh yeah make the red one you know purple and make the black one white like it's just such a smart stinking feature good job figma you know me you know what I need all right so look we pop that into the auto layout uh it's kind of chunky I'm not loving how chunky that that thing is but that's okay uh let's just grab this and we'll stretch it out give it some space and then bam just like that we've made a call to action that call to action is really really thin uh I don't you know it's top and bottom it needs a little bit more like 16 top 16 bottom and let's do really quick we'll do math right inside this little box I want the left and the right spacing to be more like eight times four 32 that's better let's go eight times four that's 32 Okay so we've dictated the spacing yeah that button looks a lot more tappable looks a lot better I think and then you know what I'm gonna do just just because I feel like we're coming close to the end of our stream for the day we've been on for a little bit I'm literally just gonna throw the word chat in here because that's a that's a lot to design right uh Community chat or stream uh chat so a lot of I will do this sometimes I'll like I'll throw like a box together and just be like all right that that'll get designed later um so for instance like boom I would make like stream chat there and then this one would be like uh on this one be like stream uh information like that stream chat can go underneath it we could stretch this thing out like that pink like that all right cool so we have a little bit of the start of our application let's grab all these and just tidy them up get some equal spacing so it doesn't look so gross and we'll space that out there looking good let's just run a little bit of a prototype there um and let's ban the person in the chat with the gross name uh boom you are blocked for your grossness thanks for sharing um yep I will block you if you're gross on my streams um so don't appreciate it okay let's run a little prototype here this would be fun um I like it let's go to our prototype Persona over here in side of figma and let's grab our streams node and I'm going to drag it over and say on click I want you to navigate to uh the screen list let's rename this one really quickly screen uh stream uh product okay or we call it like detail probably that's better I like that better okay so we have one prototype that's going and what is it doing I don't want it to go instantly let's just push right let's do a simple uh push it'll push to the left we get that little preview right there like that okay and then yeah might as well smart animate any matching layers like that a lot okay and then we'll do this one and when you click on actually let's make the second one just for fun drag that over and we can push over that way as well um and then when we go this way we go back we want to push the other way and when we click home here you guessed it will push the other way okay now we can send this off let's call this uh streaming that's we'll name the that flow the streaming flow we're here on our desktop or on our our desktop on our our home screen look at how amazing this home screen is it's so good but we can click on streams and it slides the content over we can scroll because we have that vertical scroll on and we can see oh this is the one to click on or I could go back to home and look I even like that it's it is kind of like actively uh um smart animating the elements so let's just go back really quickly so we can and and highlight the other one what do we do we made this like from regular to semi-bold and we turned this to be white so it's just it's just Auto animating those elements now look at that back and forth just simple simple simple I don't love the treatment that I did here it's it's making it go from like it's changing the weight of the text and so you're gonna see a little bit of movement in the navigation I don't love that but whatever so okay cool we can click back and forth between the two we can click on a stream it pushes over beautiful okay rad go back and we have a little bit of a prototype that's already being built look at that let's skip this for now because uh we need to go back and rewire frame I think a little bit of this um of this like actual stream page because I'm not I don't love where we left off here I mean I definitely think this is probably looking all right um there's probably nothing really wrong here I don't we probably don't need this it's probably just gonna auto play and there'll be some controls on it and we can keep live up here if we want to um but it might be nice to get a little bit more information also I don't agree with this main call to action um being tip the streamer that could be like a cool sub thing but I don't I don't think it needs to be like the main thing right I actually think once you jump into a stream I don't know about you but when I watch streams on chat or streams on Twitch I just want to start chatting you know like engaging uh with my streamer of choice so that's probably what we want to do a little bit um so oh yeah okay so Cody says my I don't even know my own twitch Channel my Twitter Channel or my handle on Twitch is I am Jessie Show just like it is on Instagram that's right thank you for reminding me of my own information that I don't know so we're gonna zoom out here just a little bit and let's uh let's bring this information down because I don't think I think we could do a little bit more with this section right here um and we might actually oh yeah I was gonna say maybe we'll start doing some visual design stuff but let's keep it with the wireframing thing for now let's make a chip out of this um if you don't know what chip is a chip is a basic term in UI world for some sort of little tag type interface element we call them chips um you can call them tag call whatever you want it's fine by me I don't really care but we're gonna create a chip when and the easiest way to do that honestly is just to hit shift a and do auto layout inside of figma because figma's amazing like that so um with that done why don't we add a fill so we can kind of see it we'll just do a little black Chip like this and we're getting some basic padding on our chip right so hold on where where where's our where's where's our chip sweet Mama we zoomed all sorts of weird wonky ways let's go back and get into our chip here and now let's zoom in so you can actually see what I'm doing okay so um I'm zoomed way way far in and really what I'm doing is I'm messing with the auto layout which we don't need to but really the padding I can do all around padding which let's start with eight top and bottom and then we'll come in here and just make sure that our text always stays centered and we will do eight I don't know I'm gonna go eight times four do the math right there boom that's a little bit big so let's go eight times three twenty four I could have done that math in my head but I just wanted to show you that you could do math inside of figma right there in the property panels um so let's zoom out a little bit so we can kind of see and get a little context we probably let's round the corners notice I'm keeping everything divisible by eight that's just if I it I might depart from the eight pixel grid system I might right but when I'm starting a project I'm always just going to like go right to it as my like my go-to because I know for a fact that it makes a ton of sense um and it's going to be very helpful in the future this is really really massive so I'm going to hit K oh not K actually let's go back and we're going to rework the pattern we'll go four there and let's drop the Top padding or the side padding down to like 16. yeah 16 and 4 I think is better right if you're expecting to join the stream and it's like a really nice like Fast straight now we're figuring things out as we go I think for me um I like streams where I watch people think in real time so I don't want you to see some sort of polished fake version I want you to I want you to see the real deal this is this is the real deal me figuring things out I'm gonna look up a little Eldon Ring image I'm gonna break my own rule um of of you know like wireframing always with just like boxes and and never ever with uh like imagery but I just like it's such a pretty game I want to look at it is the thing so I'm just going to take a quick snapshot I've been a lot more lately I don't know if it's because I'm using this new Brave browser but I'm getting a lot more uh like web MP or whatever format that is that really frustrates me it's not a jpeg so I really hate that so I'm going to drag this in and pop it right there let's turn our uh let's turn yeah let's turn that gradient off at the top I don't think we need that right now um yeah somebody said Cody said keeping spacing divisible by a single number helps with developing the app too it absolutely does uh that's creating you know a system before you've even really created a system you're thinking in a system and later on when you start defining an actual system there's some foundational elements right there's some there's some Rhyme or Reason to it before you ever really get into making those hardcore decisions webp is really common now because it's much better for page load speed I know it's better for page load speed but it frustrates me because I just want to pull an image out and have it as a JPEG so now I have to take stupid screenshots snapshot images that's fine I'm just complaining I'm complaining about something that doesn't matter so let's drop down drop that corner radius down to four I think that looks a little bit better also I like eight because uh you know it's just very divisible by lots of things so let's take this live chip down to two this looks really good to me it's two I mean 12 sorry yikes I can't talk today I did a live stream this morning already on Instagram and did an Instagram live uh with the founder of spline which is a 3D tool that was super fun Alejandro great guy um and uh we talked about like the future of 3D and all that kind of stuff so um I don't stream all I don't do IG lives as much as I'd like to but well I think I might start doing some more because it's pretty fun okay let's do something here like uh we'll do the word like trending uh number uh 10 or something like that okay that's not how you spell the word trending well I really do wish that auto like spell spell check would be automatically integrated into figma like it is an XD um because I'm horrible at spelling and grammar I wish it would just fix it for me so let's do some text options here um we'll zoom in so you can see what I'm talking about um let's do alignment left obvi gotta do that let's do capitalizing that thing and then we'll hide this and we'll do some simple character spacing just to make it pop a little bit I'm gonna do it to like six percent um and then let's bring this this is not as important so let's bring it way down like trending 10 or 10 pixels there and I'm even going to bring a little bit of the opacity down so you know it's just it's a fun little thing that shows that we're trending and um but I don't want it to be like the Highlight what I actually want to be the highlight is probably how many people are watching we got this thing we should have a title because a lot of times streamers uh they name the name of their stream obviously like what's this one called like I'm watching a lot of uh Dr disrespect as he streams Elden ring and he does Super um like a cynical like uh like titles for your streams like super easy uh and of course they all like do it uppercase don't they they always do a number case but we won't do that because it looks so awful let's do it super easy dungeons in Elden ring uh and we'll do like that like uh watch me uh decimate bosses or something like that all right they always got something crazy like that let's do uh Auto height text so we'll pop this back in like this we're using monster and this is not the final obviously like text uh like style that we're gonna use but let's just uh we'll add a little bit of weight to show you know that maybe it's like a little bit a little bit more emphasis here on the title of this thing and I think we still need more information so let's make some space here we got time we got space we can play right um so yeah uh somebody said they've been loving the brave browser I like it too I like it's it feels just like Google Chrome except I know that nobody's tracking me so that's nice um I like to not be sold a bunch of stuff and block a bunch of AD trackers so that's why I use Brave browser not sponsored just like it pretty cool um okay let's do uh you know what maybe I don't like the watching thing up here maybe let's let's ditch that for a second let's pull it off our artboard or offer our frame really quickly what if I did it down here what if I did a similar thing over here what are we talking about here we're 17 pixels from the left that's really weird let's go 16. thank you and 16 from the right right anchor that text maybe this does need to be like 1.9 k that could be interesting I don't think we need any other details here um I think this works you know we're talking about content here this is not a stream about content this is a stream about design so what are we thinking um here's the thing I I think I want to do something kind of interesting I don't want to just like throw the name of the streamer up there and also when we think about like call to actions right we have to think about like I I think I want people to immediately engage in the chat I'm making the decision as the stakeholder aka the designer here on this concept but I also I want people to have secondary and tertiary actions this is how we we have to think right when we're designing like what is the primary watch the stream engage in the chat that's the primary okay so then what is secondary secondary might be subscribing to the streamer's channel um tipping the streamer you know favoriting some I don't know some something like that and then the tertiary possibilities like might be going to their account um you know Finding other streams buy that streamer so we have to think in clear primary secondary tertiary kind of actions for the users that's what I'm trying to do right now I'm thinking let's card this shall we um yeah yeah let's do you know what let's move this up and out of the way really quick let's let's do this let's go streamer information we'll get rid of this because we're about to bring these things down boom right here and paste and also can I just say something this is a really weird little side uh like issue that I have but in figma the paste options just make a lot of sense right like okay for instance I X this out I click on an area and I paste it pastes it near the area I'm clicking in Adobe XD and some other ones other design programs like sketch you you just paste it it's going to put it wherever the heck it wants and that frustrates me right like just put it where I told you to put it that's all I'm saying okay so I'm gonna make a gray box here this is going to be a spot where we put our streamer's information obviously let's bump up is this in a is this in a it should be shift a auto layout that boom get rid of the group who needs a group when you have Auto layout boom make that much bigger uh grab the actual Auto layout uh like frame there because frames are Auto layout or Auto layouts or frames excuse me and then we'll just Center it name of the streamer goes there let's just put one that we know like doctor practice respect okay like we'll put him there uh we'll find a ridiculous picture of him or something and then we probably there's certain stats you probably need like there's gonna be a lot of people gaming I'm just like moving this down to be like 36 by 36 because that's a nice easy number to work with um you know there should be some sort of stat down here and then there should be here we have a little a spot for like call to actions over here so let's do another ellipse let's do it like this okay we're I don't know if this is final but we're gonna see um put those 16 pixels away from each other let's put like two options here okay and then I don't know we'll grab this capitalized text again like down below let's put something like paste it right there oh that's pasting it inside of the auto layout I don't want that I wanted it here put it and you know where it actually should go this is gonna be really weird but it should go inside of this thing so that it's centered so let's put this here I'll grab these two Air elements shift a auto layout make it go vertical okay so now we have Auto layouts inside of Auto layouts that's okay right because we're organizing these Auto layouts I want this to be butt up against each other now here's this is a really interesting like point of conversation okay um I am butting up the bounding boxes I don't know if you can see the bounding boxes of these two pieces of text um the text itself is not actually butted up next to each other it's the bounding boxes in the design tool this is something actually called the soft grid versus the hard grid um the soft grid being the bounding boxes of whatever design tool okay the hard grid is going to be okay like oh I need this text to be 8 pixels 16 pixels away from the Baseline of the previous piece of text right so if we were let's just do a piece of text here to demonstrate okay let's let's talk hard grid versus soft grid right this is the soft grid because they're just kind of the bounding boxes are butting up next to each other this would actually be the hard grid right and we would say one two three four five six seven eight that's the hard grid see how it's different than the soft grid and it's the reason I'm bringing this up is because it's kind of team or development uh um choice right which one are they more comfortable with I've worked with large and small organizations and companies and some of them just prefer you to use the design tool will make it work we'll figure it out and some go are saying like hey we would like a firm Baseline grid and we'd like to work off of a very very hard grid so everything you know doesn't matter what your bounding boxes and your design tool are what matters is the actual hard grid of the Baseline so just a fun little interesting thing okay uh let's uh let's bring this down to let's keep it at 14 but jump it up to semi bold so we get a little bit of contrast there between those two things these things are massive let's take away the stroke off of these and just for you know I don't know for wireframing purposes we'll bring those down and just make them white okay now I'm going to take these items and we should actually shift a put it in an auto layout you guessed it we're going to balance this and then look at this watch this these things are in their own like kind of I don't know what do you say it's in its own like their own like groups or own Auto let's put them in an auto layout Center it right we should get okay what we need to do is come in here to this one and say not hug contents but fill container and now we should keep everything pushed over to the right okay now let's watch this let's get rid of the background there because we don't need it and let's just it's all inside of One auto layout let's fill that auto layout and just style it and then we'll add padding see why Auto layouts are the best thing in the world um okay cool that worked great oh it's grouped for some reason we don't want that pink get it out of the group now we can actually edit the auto layout right and it's responsive by its very nature which is radical okay we can round the corners one two three four oh my gosh this is looking great and I love it okay um stream information do we need stream information then at that point or should we just go all chat stream information all chat I don't know we'll see uh this looks pretty cool I like this actually um we need some icons inside of these thing so I'm just going to open up nucleo which is where I'm kind of I don't know I'm I'm holding all of my icons right now storing all of them I used to use icon jar uh that one was okay I don't know why I don't know I just switched I don't even have a reason why I switched I just switched um to nucleo it's not like I don't think it's any better I think I just found some cool packs that I liked and they worked better in here so uh let's do I don't know find me a heart a basic heart cool yeah basic bring that in um we're shopping in all the only 24 pixels and we're doing you can either do filled or outline let's just do all outlines to really simplify it and then we'll do another one let's do uh oh let's do user and it would be nice if I could get an icon that has a plus already attached to it oh look look look look we might find it here yes beautiful okay let's grab this this will be like our subscribe icon right okay so I'm gonna x that out I'm gonna come in here and it's probably oh it worked it worked it worked it worked okay cool no that worked perfectly let's try that again X the other one out click on there pop it right in oh my gosh look at that and just flop it around I'm selecting the element and then command bracket we could switch the positioning of them hello that works great um let's do we have a plug-in uh UI faces let's see UI faces has not worked for me recently but let's just grab select any shape uh no that shape right there that's the one we want that it can't fill can it not fill a um a frame um interesting it needs a shape ah that is crazy man okay let's find an image of doctor disrespect just because this respect if you're like who is the doctor disrespect he's a ridiculous character that's that's Doctor disrespect he's crazy um yep that's the guy uh let's let's take this image and we'll just get a perfect uh Avatar of him love it we're done we got what we need uh can we fill it with an image yes we can image and make it this one make it so number two okay we've done it we've done the thing so all right so we got some information in there one thing I think also needs to probably be in here is some sort of um no I was gonna say Prestige like ranking like um yeah like like a check mark like a Twitter check mark right okay so let's let's do a Twitter check mark in here of some kind uh I'm gonna go up to shapes and give me a polygon let's try polygon whoa oh we popped it in here that's fine um how many sides to our polygon let's fill it with a darker color really quickly okay and we're gonna want to oh yeah change the amount of sides on our polygon can we can we make this like more convex we can't we should be able to grab these edges no no no no no no no no no no no no no no what figma what are you doing to me no no no that's not what I want uh we want not a polygon we want a star that's I think that's what we want a star with multiple sides so let's get in here and hit our star gotta remember these things okay let's do a star with lots of sides like this ah there's our controls that's what I was looking for to make a little badgie badge let's round can we make them a little cuter can we round the corners yeah I love playing with like the custom shapes inside of oh gosh maybe I don't want a cure keep it spiky maybe and just like there we go let's do something like that that works bring the side the whole thing down here grab these two together shift a put it in a horizontal layout hello so mini Auto layouts inside of Auto layouts it's making your head spin okay um I like that okay um let's turn let's grab that and just make it black with the rest of the things we have there we need a check mark open up nucleos and we could make our own in like two seconds but we're stubborn so we're gonna do yeah let's do a check mark like Twitter check mark style uh x that out pop right in there and oh we got a scale because if we don't it has a border and it's going to try to respect that border size so let's make our selection white oh my gosh yep we'll put it right in the center there exit out are we inside of the frame take those two group it together and now we shouldn't have to worry so much there we go so now it's one group it's one grouped element inside of the um Auto layout so it'll all stay together now right oh my gosh it's so good what's really cool about this is now this is it should be a pretty responsive like element right um we can just stretch this out to an iPad out to desktop if we wanted to do something like that these are really massive so I'm going to bring these down just a little bit yeah that's a little bit better I like it a little bit better let's go 16 pixel spacing away from each other so they have like really good tappable points otherwise we start getting what's called like a fat thumbs issue right when element tappable elements are too close together I try to tap one oops I tap the other that's a bad user experience so we want to make sure that things are tappable and nice and if I tap over here on Dr disrespect I go to his profile if I tap here I follow if I tap here I like him or something I don't know different action we'll figure those out you know this is not the only way we could have done this we could have done it a much more minimal way but I don't know I kind of liked the way that we did do it um let's do this we need a way to now let's get that stream information is all this stuff up here isn't it let's space this out a little bit I like that a little bit more let's take these two elements shift a put them together um we're going to not do packed but space apart that's the thing that keeps them spaced the way that we like them and we'll take the whole thing go 16 pixels from the top we're working off the soft grid today uh let's do 16 there and boom one two three four we're 16 there see everything's nice and tidy spaced lovely I think this text needs to be a little bit bigger but if you want to we could be real spicy and grab all three of these things shift a put them inside of a auto layout and boom now when I increase the size of this text from 16 to I don't know something that makes more sense maybe like 20 um and space this out like so boom there's the title there's the top of our streaming application um okay uh let's move into chat now um that's interesting it's interesting to think about chat like what's the right way to like transition into chat I tell you what we're gonna have to do regardless is we're gonna have to create some sort of like chat Avatar type deal so let's get rid of this placeholder for our chat and let's dive in and create it's gonna be kind of similar to this we might be able to borrow our streamer kind of setup here and I'm going to press command V oh we don't need it inside we need it here because this is where our chat is going to start taking place okay um let's it's not going to be doctor disrespect chatting in his own thing so let's go back and to a solid and let's fill it with a something like this all right and I don't think we should have any sort of tag on this so let's get rid of that um and we I think we should just do this is gonna be kind of interesting actually um because you should have like your avatar I think the Avatar should be a little bit smaller though don't you um let's grab the internal elements of this and almost kind of like disassemble everything boom we'll pull it out uh trending we don't need that let's start let's start over a little bit shall we okay cool um I'm gonna take this and it's not it shouldn't be as big as the streamer's name it just should not so let's take that out of the frame as well let's start from scratch I might be making life harder for myself but the Avatar doesn't need to be as big either and we pop those over the left and this could be like I don't know who's in the chat right now um uh Adam Moulton is Adam underscore Moulton okay you're gonna be chatting and enjoying uh the stream from Doctor disrespect now what we need to do is it's this is going to be kind of hard to maintain I I'm starting to like maybe think but uh we need to create a little bit of a pattern here um and we could maybe use like semicolon or yeah like colon excuse me after it and then these do not need to be semi-bold they could be regular yeah regular and what are these 12 12 is good still legible but there's gonna be a lot of chat so we want to keep it pretty small and then what we could do is we can kind of fake the funk here a little bit um I'm gonna do auto height or Auto width text and do something like small right like uh like um this is so fun while they're watching okay um so we could color this which I think we might do because the colors might represent different things for our stream right you could color this like that um I think one thing we need to do is probably go all lower case and let's tighten up what's the character spacing on this can we just tighten this up a little bit it seems to be really really wide especially for chat um negative one pixel would be a little bit better and there you go you have the start to like uh like a single line of chat let's do another line of chat here that's pretty close so let's go eight pixels away um these can kind of stretch out just a little bit more oh yeah like that okay that works good but what do we do if it's a double line okay so like amazing uh I have been playing this game for okay and then you have to have your next line which so let's move the next line down take it back boom like this we're kind of like we're kind of manually creating because um it's hard to space these down unless we do like here's the text or the name and then we can just do like Auto height text that's maybe this is a more extendable like way to do this so we'll just try this version as well I'm sampling different styles right uh let's grab this try it out boom I've been playing this game amazing I've been playing this game for so long and have not been able to beat this boss how did you get that Shield I don't know it seems like something you would say inside of a stream right um so line height is a little tight on this so let's fix that just a little bit we're gonna move it up to about 20. um okay that looks pretty good and you know there would probably be lots of emojis uh amazing can we put emojis in I'm gonna open up a little plugin that I have installed on my computer called rocket Boom and Rocket allows you to um type in a colon and then start typing and it'll give you uh like emojis that you can enter in like that boom okay amazing but looks like it's not working inside of figma doesn't work inside of figma what body miyad just joined is this mobile app design yes it is it's mobile app design um so uh welcome to the parte we are just designing a fake streaming platform uh or a fake companion app for the game Elden ring because I love that game so uh let's see and you know what let's make our life really really easy here before we go too far I'm gonna hit uh e for oh excuse me oh for oval I thought it was e for uh the E for ellipse but that might be a different program there let me open up UI faces again see if we can get a face inside of there can we will it APL API fail to provide avatars try modifying the filters what are you doing to me give me that happiness sure apply oh okay we just had to have somebody and have a few things selected okay so I guess here's like the question let's grab these two things together shift a put them in an auto layout Center some things and then uh I don't know maybe we just group these things together or something right um or maybe drag this thing all the way across like that and then can we put this in another layout boom no because it's gonna try to shove it oh how do we solve this while keeping the auto layout spiciness um I think I know how I'm gonna add an invisible rectangle that goes out to the spacing where I want it to be spaced okay and I'm going to grab the both these shift a put in a horizontal like this uh make this thing Invisible by bringing the transparency down oh I just cheated and I feel okay about it uh oh oh can I get back a hold of it yes I can boom like this sort of space it out and now maybe maybe it's like okay let's just do this one because it's a little bit easier to extend um yeah let's do this one okay and every time we do this we have to kind of recalculate our little spacing element here so let's just kick it back in like so okay that works good so look because now we can create like the longest chat ever and it all extends so we don't have to worry about it could be a single line because it could be a double line that all works great and I don't think I need this anymore and we might be able to go from regular to semi-bold yeah yeah that looks way better let's get rid of these I don't like those I like these okay I don't know what this is leftover Auto layout that was just chilling okay um and what's really cool is right uh let's do eight away from each other they could be one-liners like um I have been playing I have been loving this game right this could be a new user who else is in our chat right now let's do uh Modi miyad okay uh Modi miyad you are also chatting uh or playing in our little concept app today uh cool okay fun um we can grab all of these things shift a put them in an auto layout now they're evenly spaced eight pixels away from each other using Auto layout and what's great is when I grab these command C command V I can just paste multiple versions of these in here together boom like that and then I wonder do we have uh do we have a Content like lorem ipsum plugin in here if so can I grab all of these not that just the names let's go plug-in shopping really quickly do it I think we have content real so how many plugins I have is this crazy content real don't do me wrong open up oh my gosh it won't open content real hello why are you messing with me uh open man when a plugin doesn't open that just breaks my heart okay there it is okay uh full name first last do we have uh uh screen name for uh whatever that's fine we'll just do full names I'm gonna grab all these pink pink and pink and I'm going to Boom change all the names Ah that's super nice let's grab all these and do some lorem ipsum and it should all if we've done our job right all Auto uh expand right lorem ipsum short oh everything Auto expanded that felt so good okay let's grab all of these avatars here and we will use UI faces uno mas one more time uh UI faces give me some of this and this and I don't care there you know give me some diversity a little bit that'd be great okay yeah that works fine okay we'll bring this whole thing back in it's all in a frame it's an auto layout frame pop it over there on the left hand side lining it up why don't we grab uh boy we need to switch some colors here so we're just kind of alternating colors because you see that a lot in stream I actually don't know what that means in the streaming platforms why different names are different colors it might be like membership tier or level or something like that uh let's do a blue one there and heck let's do another orange one down here that's fine uh the spacing is really like intense so we need to space it out a little bit more why is it not Oh weird Oh weird Okay boom boom X those out aha I think for some reason it got uh it's it's going into the internal Auto layout so let's command L uh can we paste them inside boom okay that's I was getting us some weird behavior of things going inside of Auto layouts here and taking up too much space so we just need to pop them out in the layers panel and then they're spaced perfectly okay that I think that looks pretty good we might be able to re-mess with the spacing uh yes let's go with that I'm gonna break my rule and just go to 10 because I think that just needs a little bit more space out is pretty much the bomb.com so you should be doing everything in Auto layout okay um I like this I think like we didn't need this thing anymore this is pretty pretty chill pretty good um and uh what you know what we do need though uh maybe like a dis like what if somebody types a description for their for their stream um I think that that should probably let's have a section in here shall we okay uh we're gonna do one more thing boom boom uh let's go like this is that in there is that space correctly no let's put it back inside this Auto layout beautiful okay let's do this it's called chat uh we'll bring the size of this down we're going to create like a table row cell kind of like an element here that um that is gonna take up like a row people can open and close like the description that'll have like links and all sorts of stuff inside of it and then maybe actually instead of doing it inside the auto layout oh yikes uh maybe we'll pop it in right here and pop it down okay so maybe we'll create a style actually of like collapsible accordions um and maybe the chat is one of them maybe you could hide the chat away maybe it's too busy for you and you just want to watch the stream and not see the chat maybe so let's do um uh description description I can't spell okay um and I'm gonna do shift a right to create the uh the thing there and this is kind of a unique situation right I've created the auto layout but it's immediately padding everything equally around the side I don't want that so I'm going to Center everything and I'm going to customize the spacing here um so that it butts all the way up against the left hand Edge I'm going to take this down to zero okay and this is the start to creating our table row cell right so description boom and I probably need to have let me give me an arrow give me a Chevron or something Chevron standard Chevron down I'm singing little songs about Chevrons I've lost my mind okay pop this here like so good um and let's you know we could Auto lay out the heck out of this thing but let's just keep it for now like this and boom will tilt that up and we'll group it together right all right all right all right all right and maybe we will drag this whole group and we will put it in the uh oh come on baby um X you out of there pop you in there command C and command V paste another one in there which will represent our chit chat okay so this one will be chat like this and the only difference is this one will be down showing that we currently have it open and this is a little confusing like the up down thing so let's just go though we can't do that right because Chevron arrows usually lead they push to a new screen so let's keep it up we're doing kind of like an accordion thing here and then the chat is tied here this is a proximity issue right basic UI design 101 okay like uh proximity is important how close things are to one another dictate relationship right so if this chat is all the way down here does it actually relate to this this chat inside there not really right but if it's kind of further up it all of a sudden there's relationship that we're defining if it's too close it just looks like it's oh it's like crowding the space right uh but I'm using the software there and just bringing it up popping it into place and we have um we have that going good we want everything just to line up perfectly this is great um and here's one thing we do want also is I'm going to grab all of these uh inside of my um inside of my auto layouts and I don't want them to be fixed with I want them to actually extend so we want to say oh not fix width why is that not working this is going to be an auto layout issue okay let's see let's see hug contents no fill container right okay that fills container not fixed with group here what are we doing why is it in a group it shouldn't be in a group pull it up out of the group that's better not fixed width but fill container and come on baby what are you doing what are you doing to me this thing not hug contents but fill container so everything should be filling container and I don't know why it is not okay this can be fixed with that's fine we'll come back we'll figure it out that's fine okay for now this is a much better streaming thing here um if you want to chat though that's a problem because we haven't put any sort of chat box in here have we so uh that's going to require a solution so let's let's try to fix that right now I think probably one of the easiest things to do is take a rectangle and I I know I said never draw rectangles unless it truly is nothing more than a shape like what I'm about to do so I'm going to do a linear gradient going from white to white and one side is 100 and the other is um the other side is zero percent but I have those mixed so let's just rearrange this gradient so that that's on the bottom that's on the top and you can't really see what I'm doing so let me zoom in a little bit we've created a gradient at the bottom let's just drag it up it's not doing quite what we need to do so let's drag this up just a little bit and drag this up as well so now we're getting kind of like a nice fade uh from the bottom up and that's where we're going to put our chat box right in there right um let's do a uh a frame oh actually let's do some text here um we'll just put uh the word message uh dot dot let's do that and um let's do like a chat but let's make a chat button shall we okay I'm gonna do that so actually I really like this style let's just reuse this style and rule of thumb you start reusing Styles like quite a bit that means a component is in the near future for this bad boy so we're gonna Center align these things um and let's swap this let's go to nucleo again and let's look for a message uh button uh let's use the little paper airplane that that works fine um I'm gonna grab this Frame oh my gosh let's zoom in so I can see what I'm doing here and I'm gonna exit out from there pop it into there try to pop it one level too deep into the actual other icon frame I'm going to hit k for scale I'm going to scale this thing down where right it this is this is very bad spacing four button right like we we need some clarity and and a little bit of breathing room around anything so okay so we have a little message thing right there let's grab both of these things shift a right center them like so and then say not packed but space between this allows me to stretch out uh this element and then we're gonna need to fill it and style it really quickly so let's fill it I don't know let's fill it with like a darker color just so we can see it and let's add a little bit of padding because padding is important let's do eight pixels of padding and we'll do eight pixels of rounding but we're doing four for pretty much everything else so there we go we have a little bit of a chat box all we have to do is try to woof woof it is trying to like enter it into our Auto layout everywhere that we put any and everywhere that we put it it's trying to pop it into place so let's get it lined up where we need it to be think like this and then let's see if we can bring it down without getting it too involved with the auto layout no we don't want that okay good beautiful Center align it bring our gradient up a little bit more and we have a little bit of a chat platform this is a little tight to the left and right hand Edge so let's double it to be 16 on the left and right hand Edge I think that works really really well um and we have a pretty consistent UI that we're building so far right um we're not using a lot of uh like we're not doing rounded like pill Styles we're not doing harsh crisp Corners we've created kind of a four pixel rounded style we've created a style for buttons actually already um they are kind of like rounded tappable points like this so those are pretty big same thing um these are really representing the icons there so that's fine but now if we press play we can kind of travel back and forth between our prototype um and we can see the different elements we'd be able to tap down the description um and close our chat if we want to I think with a um with a streaming app you're probably going to be concerned about uh the portrait view as well right okay so let's let's try this real quick let's do another copy of this same thing so we'll have all the same elements but we're just going to hit this fun fancy little button up here that goes change from portrait to landscape let's see what happens when we do it okay okay okay okay okay okay okay okay okay okay let's move all this stuff before we do that we know there's gonna be some work to do right so let's move all this stuff off real quick think and change that okay now the thing about a streaming like app is uh all this other stuff starts to really take like a back seat doesn't it um oh man let's do this one more time we need some we need some space here let's move this out of the way let's landscape that one more time um it really becomes if I'm turning my my device landscape it means I'm really hyper focused on watching right now um and so all the other call to actions now become incredibly minimal it's actually back to that conversation we were having about primary secondary tertiary here's an interesting thought right like an interesting principle is the user without tapping something but simply by making a decision and turning their device sideways has made a choice they've made an active choice to say what has now become Prime primary to them and so in our designs we not only need to think about what's currently on the screen and how to organize that information but how does a user react how does a user interact with the device that our design is built to interact with right so as a user is Right turning their device they mean something else by it right we could learn more about this through user testing and user studies but generally speaking that's what tends to happen Okay so they've turned the device and we need to figure out how to solve for that that action that they have committed so I I'm gonna go out on a limb and say they probably want to watch really badly right um whoa let's move our live thing all the way over here and then I actually don't I'm not really aware of how um like streaming stuff looks um you know like when it's in landscape mode maybe I need to do open up Twitch right now and just see or maybe we just try some stuff let's try some stuff let's try some stuff and do it wrong and then and then we'll do some research let's make some horrible off the cusp assumptions and then we'll come back and we'll figure it out from there okay uh okay what do we have here we have all of that streaming information right um I don't need at this point the title I think that becomes hyper secondary um I don't need uh maybe I need this information let's let's copy this and paste it inside okay maybe I need this information I don't know what does this look like do we keep it all the way like anchored across the bottom that's very intrusive though maybe we do all of that but we hide the background oh [Music] okay um and you know what maybe we went real immersive so maybe we don't actually need the back button because you don't get that unless you're in portrait mode we're making a little Ed a little executive decision here let's change the color to this text so that we can see it real clearly okay I kind of inverted it um we don't need any of this other stuff let's get rid of that look at how look at how good we're doing right now okay um do you still need the ability to chat yes probably you need to see it at least right um let's move the message box in all of its Glory out of the way we'll have to figure out how to integrate that through some sort of interactive experience I mean most likely also like we have this streamer's information up here but most of the time when people are streaming they have these complex like overlays that are you know like it's for them in their game right so they're like anchored like this somehow in the bottom right hand corner and they're streaming away and they have other overlays like up here like on the chat so we might just want to Let's reuse this gradient really quickly and instead of black let's make both sides white what do we do okay what do we do to get the chat in there we're gonna figure it out right now friends we're gonna do this together if you have thoughts throw them in our chat here of this live stream push that behind there really minimize that and up in goes my well before we go too far uh let's take all this text and invert it to go white oh gosh how nice was that um and all of these I think oh no okay hold on one second I'm selecting the wrong thing let's bring our entire chat interface back out here again let's undo everything we did hold on hold on I have a plan I have a plan I promise there is a plan before we get too far let's grab everything do you have you ever used this this is actually pretty important inside of figma when you select an a group of elements it's going to give you the selection colors like everything that's selected inside of there and you can just change you can grab what you're currently working with like white that's these white boxes right if we want to turn them red all of a sudden we can how time saving is that holy cow that's amazing right okay so let's just grab this and pop it down to zero we don't need to see them and then we can grab anything that's black and now make the text white oh my gosh thank you figma let's do this okay um we want to keep it pretty minimal like out of the way right out of like out of the way of gameplay so maybe this is what we do Center It Center it is this ugly is this horrible you tell me um those are like maybe like on this platform you're specifically streaming to this platform and we tone down yeah maybe something like that I'm not opposed to this I don't love this but I'm not saying it's the worst thing that's ever happened um maybe we have to shrink all of our text now this is why I could get I wish I could get these uh fill the container I wish I get this Auto layout like parent child deal to work uh I want you to shrink when I shrink that's what I want fill container then you have to go into each individual one pink pink the names and the text names and the text and I want all those to not fixed with no stop telling me that uh fix with no fill container fill container I think maybe it was these titles the names that were like stopping me in my auto layout from uh getting the shrinking nature that's what I'm really trying to do um let's get all these out pop them back in shift a they're in a new deal here hug the contents each of our individuals are not fixed with they are I know I'm gonna mess with this for a little bit longer and then I'm straight giving up because I'm tired of messing with it okay no stretch out you weirdo uh okay I give up that's fine uh we're we're we've given up so let us just tuck this back in and see if this is is this does this work I don't know let's take this really small chat and put up at the top because that I feel like that moddy's chat is right there um because we we do still need a spot for chat box right so maybe we're gonna like let's get rid of this for now let's make some really bad assumptions and and force something in here okay um chat box is bottom right I'm not liking this you guys I'm not loving this at all um I'm really actually hating it quite a bit so that's a problem so this is a five yeah just let it let it be known if you've never designed something it's gonna come with challenges because you're not used to what makes most sense right I have to do a little bit of research and figure this out folks so don't feel bad don't don't don't get down on yourself if you don't quite understand how something is supposed to work you probably need to not do it live on the stream for the very first time ever that's probably what you need to do um okay let's move this messaging box over to the left hand side and move the chat oh you stinker okay you listen to me you do what I tell you to do stupid chat box all right um maybe we yeah maybe do something like this okay um maybe do something like that and then this is where like I wish I could get these things to extend perfectly because if this could extend boy now we have something now we have something right we can reposition the size of the chat box and Italia this is where that other chat style would really like be nice uh I'll tell you what I'm gonna do everyone's gonna laugh at me out there on the stream I'm gonna rework the chat boxes real quick because I think now I have a reason like possibly to like rethink how the chat boxes were structured right because they're not they're not flowing well are you tracking with me or you'll see in a second let's get rid of the spacing thing that we had now it seems like what would be right no don't you do that don't you do that to me uh where am I where do I still have Auto layout stuff Get Out Auto layout I did away with you this is where now it makes sense to have text on the same line right okay and then you could like this we'd have to fake it because we can't create these like like staggered kind of text boxes without doing something like that so this this there's now some little bit of like this makes a little bit more sense I'm like panicking because it's not really okay something like that boom so you just you see what I'm saying though right like this now makes a little bit more sense to read re-figure these things out let me just pop this right here and we'll elongate this okay look now we have a chat right um yeah that looks kind of like good and I can just imagine this chat like rolling up and then like kind of fading um and then we need ooh you know what we need you know we need you know what we need um to turn the opacity of this up so you can see it a little bit more and I think you also need to get rid of or mess with the opacity of your chat box over here right something like that it's going to be something like that um where you're able to chat over here and it doesn't interfere with like your like gaming interface because again the biggest thing is being able to see it but we are going to need really quickly uh expand and collapse type of interfa uh icon expand collapse give me expand collapse what am I looking for looking for this kind of thing um yeah I'm looking for yeah this little icon right here that's a great one you know and I'm looking to make it white and somehow this would be like on the screen and it would make this whole chat interface go uh way we group that whole thing together and you can imagine like clicking on it and this goes down like that and it brings the chat back up into view something like that you know what I'm saying you tracking with what I'm saying okay anyways that's the thought there's a oh wait oh gosh I just had another thought okay so there's another way where you could do this where instead of going like hyper full screen like this with the image we kind of bring that up and yeah and we kind of utilize a little bit more of this okay watch this um let's make the entire screen more like this color okay okay look at this uh let's bring this down let's make a chat bar here look at what we're doing here um bring it all the way over bring these controls on top who's liking this more who's Like Jesse you figured this out bro um and then we can maybe even keep this same chat style and then we just have chat kind of cruising where did it go um over here we gotta do that same hack that we did before right where we uh make this go away and we make the black text white and again I wish that this worked let's get a few less of these and we will see if we can get this to work can we condense these and everything change yes yes girl here we go yes that's what we wanted we want to be able to condense all of these little chat things and everything condenses inside like that now we're talking look chat baby and then uh you could take that same idea right um and you can put boom a chat icon like over here this is a bad I feel like a bad chat icon um but it's it's that same idea right like where we could do this and you could like just close the chat and open the chat full screen um actually maybe I kind of like that better I feel like that's a little bit better I feel like it's a little bit better I could be wrong let's make this let's bring the darkness of this back up I'm gonna hit I um and let's make it the same color as the chat so it feels like look like all this is like interface stuff and this is the stream that you should be watching the only thing that I think it needs probably because we do need to have like some sort of designator in between is probably just like a line let's create a line and let's do a lighter version of this black boom and let's just pop this right there you know what I mean um that's not perfectly placed but now at least you can see where like your chat box ends and where like the rest of the chat is actually like happening I like this a lot more um let's do that let's go with that okay cool okay let's do a little bit of layout here for our I'm guessing like this is going to be kind of like our all-encompassing dashboard type thing that's what we want so let's do a little bit of work on that um I think we probably we have our bottom navigation down here and we this this is an aggregate view so we want to be able to see lots of different streams sort them out by streamer um what's going on right now maybe categories like games well that's because it's all about Elden ring so maybe top categories or like top clips or something like that since it's narrowed down to one game it's gonna make it very very easy right okay cool so um let's do something like the this I think we're probably going to need some sort of little we might need like a secondary navigation thing up here like a hamburger menu um we could we could grab one really quick I'm just going to open up nucleo which is like where I store my icons and let's see if we can find one you could probably create a hamburger menu faster than it takes for me to search for One in nucleo because it's like three lines but let's just let's just what's what do we have here for menu oh great we have some really boring menus so let's just go up to like 24 pixels any style is fine yeah okay here we go great we found a hamburger navigation wow wow super easy stuff okay but let's notice that we're 16 pixels from the left there 16 pixels from the left here okay I like it so far so good um you know one thing we can start doing I'm gonna break my own rules here probably pretty soon I'm gonna start meshing the worlds of wireframing and designing together just for the sake of this stream right because I can't have the stream go on one hour at a time for the next year we're gonna have to kind of speed through it a little bit more and try to get a little bit more done that's all I'm saying so okay but for now let's let's keep cruising uh what's nice though is I can come over and grab any textiles that I might have had here and bring them in so this is Montserrat semi bold 20. let's do something like um oh yeah about something it's not multiple streams it's Eldon ring um um uh let's just do something like a call to add or like a value proposition like the best Elden ring content I don't know it's that's probably not what we want to say but let's just bump this up and make it a little bit bigger we never want it's either a widow or an orphan when you have one piece of like one word hanging on on a line I forget which one is which or a widow is at the top by itself and an orphan's down at the bottom I forget I can never ever remember let's drop down to like uh 34 pixels and we're we're not even we're not even really trying to yet like build out a typographic scale and all that fun stuff we're just trying to that's definitely not how you spell Eldon we're just trying to lay some stuff on the page right now okay so um let's move that up a little bit doesn't need to be so far away and you know I think a probably a good thing to do would be to create some little tabs or tabs or filters or some people might call these uh not tiles um but we're gonna do something here like all okay let's bring the size of this down um the chips that's the word I'm looking for boy I'm having a morning time brain fart here let's go chips we'll bring this down to like 18. we'll keep it at semi-bold and then with this selectable click shift a let's give this a fill right we're gonna make it kind of gray for now and let's let's make it a pill style thing and to do that we have rounded the corners oh let's zoom in and see if we don't break all of the things in the world so you can see what I'm working on okay all right so what we want to do is we want to keep it centered using our Auto layout and we want to add some padding right so let's add some custom padding here where we do like 20 pixels on the left and the right and then well let's I'll tell you let's stick to the 8 pixel grid here let's do eight times three there we go 24. bam okay if you didn't know you could do math in there now you know you can do math okay so I've created my first kind of like chip that we need we're gonna make sure all these things are being lined up on the left-hand Edge beautiful and I'm going to command C command V create another one I'm going to grab both of them and shift a put them into an auto layout with eight pixels of space in between it's not a vertical Auto layout it's a horizontal one and we're going to drip them off the canvas so the user knows that they can scroll through them so let's just add and maybe they're a little bit big still so let's go uh we should go down to like 16 and 16 look at that we're keeping things divisible by eight which I love okay so let's do um like I don't know posts uh let's make a bunch of these in here that we can work on okay so Po and see how if I just copy and paste inside of an auto layout in figma they just add to the layout perfectly spaced the whole thing is nice okay so all post uh streams these would be like popular things uh that people might be like looking for hashtag uh no let's do hashtag uh bosses anything that anybody who has like there we go anything that somebody has tagged within their stream would be great like how about hashtag dungeons uh let's do hashtag um armor you know something like that let's lead these over so we can see and actually if we want to really quickly the best way to do this is let's add a little bit of padding onto it um maybe something like eight pixels of padding that looks great we could bring that up into place and then we want to uh we want to make this like well we're going to do that later but dungeons armor what else um let's go I don't know hashtag we're we're talking a lot about like this certain streamer Dr disrespect let's say he's like like uh big talking points right now like online and another one could be um um you know runes which is a term in the Game Boy I'm just we're just nerding out right now are we love it okay let's make sure we grab this whole thing move our requirements out of the way and drag this in it kind of it got all wonky um by dragging it outside of the artboard and figma it's not any longer contained in the frame we need to do one thing really quickly we need to take the padding off of the left hand Edge so everything's lining up really crisply here but we still have that eight pixels of padding everywhere else and then what we want to do is when we're in Prototype we want to grab this element here and say no scrolling yeah we want horizontal scrolling look now when we put let's rename this home or dashboard this is our dashboard flow Dash b-o-a-r-d great we can press play on it we should get immediate like horizontal scrolling for our little chips which we do not why why don't we aha I know why because this thing needs to be shortened right okay we create the container in which it's prototyping so now we should get yes we can grab and drag beautiful okay and it even gets a little bit of that natural kind of like bounce that's happening in there love it okay awesome now if you want a little bit of space and you're like oh it's I don't like how close watch when I drag over it's sitting really close to the edge and I don't like that maybe you want just a little bit more space it's really easy just command C command V make another one and bring the opacity of that final one where's the opacity boom down to zero it's like a phantom item or Phantom element now when you scroll over you get you get a lot more space there right and you can you can just make that a little filler one right so like instead of it saying runes we could uh grab the whole thing drag it over and we'll just uh will fill it like with nothing basically right let's bring the opacity of it back down to oh no whoops sorry boom that one's ruins this one needs to not say runes it needs to say nothing that's your little hidden bub sitting over there right okay and beautiful perfect bringing it back into place just a little bit of organization perfect okay see now look when we come we don't get too much space over here but we get a little bit and it actually landed perfectly this is like a really basic a really important but basic premise of creating off Canvas OR horizontally scrollable content on mobile which is always leaving some sort of hint that it's there when you see half of something overlapping it's become a common pattern to tell the user hey this is scrollable stuff here right so now the user knows that they can scroll okay great um beautiful let's do one more thing I'm going to take all of them except for our little hidden one I'm just gonna copy them and put them in there unamas one more time now we have a really long scroll which is fun we'll probably come back in here eventually and replace those with components that are colored the right way and have all the right Vibe and everything like that but until then let's just leave these wireframed as they are currently okay great uh I'm gonna do a little bit of space here maybe 24 pixels of space and then let's go 24 I'm going in uh things that are divisible by 848 from the top cool we're about 24 from the bottom are from the the chips that are there let's put a new now we're going to do aggregated categories right so let's do live now and this is we're not creating our typographic scale but we do need to consider headlines sub headlines all that kind of stuff right okay so this I just dropped this down to like 22 we'll probably fix that we'll work on it a little bit okay live now and then we're gonna create kind of you know we're kind of like reusing some of this live element stuff that's here and some of the elements are like this Live card thing here and maybe like some other little elements that we've created so for instance I'm definitely going to reuse this thing I really like this bar uh so I'm going to reuse that thing maybe um what else what else what else yeah I mean we kind of have a lot of the stuff we need let's bring it over reusing is always always important right like once you create something stick with it that way uh there's just more consistency it's a learnability and a usability issue in ux I'm thinking about ux right now I'm thinking hey once somebody has seen it one time they should see the same thing right it reduces pardon me the cognitive load of what the user is actually experiencing it makes it easy for them to understand what's going on in your interface very very important stuff back where we're at we pulled some elements here and really what we're thinking is we're going to turn this somehow I didn't even really have to pull this but we need to create some cards right to represent the stream and then pop the some information on top of it so let's just uh let's get rid of this and if we did responsive resizing right our little live tab should stay anchored to the top right we did not do it right and hopefully it does not uh scale or do anything Milwaukee no it does it perfectly just like we want Okay cool so let's call this thing card love it and we'll bring it into our design and yeah that's right we're going to turn it into a little card here okay so I'm just going to pull this stuff closer because we might have to work on that um first off this this is in the mood for some rounded corners for sure that looks a little bit nicer we have the image we're definitely going to need the gradient on top of it because we're about to put some we're about to put some stuff uh on it Boop like that and good going from the bottom of the top we're gonna put some text over it I don't think we actually need our little live Chiclet what I actually think we need is the information about the streamer and then who is currently watching how many people yada yada yada all that kind of fun stuff okay so I know I have an image in there and you should never put an image in there yada yada yada but that's what I'm currently doing okay let's take this trending thing off I also don't think we need uh yeah we'll keep the little tag thing there and we could actually bring down the size of that so that could be good um cool that could fit right there yeah I think we need to get rid of the little verified symbol here it's like excess information this becomes a game of like hey what do we need to take away what's the type of information that needs to be experienced seen understood whatever at this point like at this current time right from the outside right it's kind of like the outset we haven't clicked into that that stream or that stream page on a card as small as this I need to give you level one basic info if you go to our streaming page right where we have a list of streams I need to show you a little bit more and then when you get into the stream I need to show you all the pertinent information right A lot of times we fail in our designs by crowding the interface by overloading information where information should not be yet does that make sense okay and the again the real world way to think about this is standing outside of a house I see that it is a house once I enter into the house I see all the furniture that's used to decorate that room right but if I was to a bring all the furniture outside and put it in front so you could see all the furniture I have in my house that doesn't make any sense likewise it wouldn't make sense to enter into the house and have all the furniture from around the house be in one room right we place things in certain rooms and hopefully we tie it all together interior design wise to make sense of everything that's what we're kind of doing here with information with design and with style okay okay that was a kind of a weird analogy of the house but I did my best here we go let's add uh some more information here I think we might need something like um can we just come in yes I'm gonna hit uh option L to um get rid of it just collapses all of the like the layers that I'm working on I'm gonna pop nope I don't want it in there let's just pop it right there beautiful okay in figma it really does matter like where you what you have clicked in your layers panel and when you press paste the command V paste because it will paste it in context of wherever you have kind of selected all right let's just drop this down and it was 10 is pretty small let's try 12. let's drop it down from semi bold to like maybe medium and let's go something like 55 point 0.2 k let's put the word watching uh we'll do lowercase like this okay it could probably be a little smaller I don't recommend things being any smaller than 12 usually 10 might work if we're doing a little chip like this okay so now that we're here shift a I turn it into an auto layout and let's just give it some sort of like background color um I'm just going to give it a black background color for now because we're not worrying about that I'm turning into a pill a pill style right and this is going to be kind of hard to see so I don't really I don't have a color in mind um but let's fill it with like a color for now like something that's kind of streamery like Mountain dewy like that's a little bad let's go into more the blue color I like that that could kind of work we don't need it to be fully electric you know but Okay cool so let's address the padding I'll put this in the center eight pixels on each side there um and I like that style that we had of 16 pixels each side on the left and right okay so creating a little Chiclet I was wrong this could jump back up to semi-bold so you can see it we do need Clarity okay um that's really really big so let's drop man sometimes it's just about eyeballing things and seeing like oh man certainly wrong about that let's go yeah a little tighter right okay great and the contrast there is really bad so maybe this is where we flip it and we do something like you know something like that that could work I don't know um and maybe what's really happening is my card probably needs to be a little bit bigger and then we don't have to worry so much about the text right the text could jump up to 12 because right now it's not really legible I hate this color FYI these um it just has really bad contrast like maybe we did something like purple would be a little bit more fun is that going to be our brand color wait what do we do for mood boards here let's go back oh that's right we have this kind of golden yellow this corn flower yellow kind of thing that was happening interesting yeah that might work the contrast there is okay it's just okay all right so let's take some more of this text boom we're gonna pop it down below what other kind of information um maybe like it would be kind of fun is like um a small description of what area there what are they trying to accomplish like maybe this this is like a smaller kind of spot where the streamer puts what they're trying to accomplish and we'll probably bring the opacity of it down so it's not super intense like let's do like 82 and we'll say um you know conquering massive bosses and finding great runes I don't know something like that okay we'll put it on auto height text that way we can put it like so um we are are we man we are about 12 pixels away from The Edge on all these things that's okay we like that but that means we need to bring it back too all right cool um okay and let's put some little ellipse that's like a little three dot that lets you know there's more that's fine I like that I think that's good for a card um I don't mind that at all I do think we probably need some more interesting um you know uh Elden ring imagery uh okay so let's go to images let's do we have anything cool yeah let's do oh that's a cool shot let's just take that um I shouldn't be worrying about I absolutely should not be worried it's hot dog on webp images all right we're just taking a screenshot of it instead whoop just like that cool um love that and let's put that in where the image was much cooler all right we won't worry like really a lot about imagery but I just want something else to like keep my visual interest to pique my interest okay now the question is to drop shadow or not to drop shadow I think not to drop shadow because here's the the differential we need to make right now are we doing a dark interface I think so right I think we kind of decided that here when we did like brand primary and then we had brand secondary and then we had the call to action color so why don't we just apply that right now really quickly shall we let's go brand primary it's gonna be a dark interface yes it is yes it is um and that means the rest of our stuff needs to be light so let's just do we're starting to build a little bit of a dark interface I like that if you're not used to building dark interfaces you're going to stay with me because this might work or not work I like it it's kind of like this really dark green I wish I could get it dog on it just like a little bit darker it's like maybe a little bit less on the green side and a little bit more on the black side so this is like this tinge so I'm gonna call this new color um I'm gonna add a new color I'm gonna put a dark background because that's still a version of the color right it's just a little bit more on the dark side which I think is important okay um cool cool work we're cruising we're cruising right now so here's the heart it's still not dark enough for me do you see that okay let's go in here and edit a little bit man we need to we need to edit even a little bit more and neutralize it we don't want to be black right we don't want to be blue we want it to be down here in this dark green yes okay that's much darker it's much better I'm much more into it okay uh some people are saying hi from India hello right back to you uh Abraham says how are you I'm doing great thanks for joining me on the stream today um uh how long have I been doing this project I've been working on it for a couple weeks and only on stream so there's been no you know no work going on in the background uh so that I'm you know cheating or anything it's all Happening Here on the start I want you to see the imperfection of it all okay one thing I'm going to do is I'm going to add a general overlay okay to the whole thing just give me a little bit better contrast here on yep here on on the card okay um and oh boy oh boy oh boy uh you can see it's kind of not really popping uh that's popping a little bit more we got rid of the gradient at the bottom right because you have text at the top and the bottom and instead I think we need to just bring anything we need to bring the text uh opacity all the way up let's try adding a little drop shot I don't usually do this but let's make it really subtle like down at 15. I think that adds just let's zoom in so you can see I think that adds just a little bit of clarity right if we watch you just take it off put it back on there's just the slightest bit of Clarity there as we can see it okay so now we have this card we need to make sure that it is all together so let's make sure our tag is inside the card beautiful let's space it out 16 pixels I love it uh shift a put them both in an auto layout like we don't need this thing anymore and then let's just add a few more in there we're going to do the same thing go to the Prototype tab say horizontal scrolling but make sure that the size of the frame right is like crimped like all the way up to the artboard that when we go back now whoop and it's going to update for us let's go update we get some scroll and we get scrolling here we get scrolling here beautiful it's gonna start coming together and it's really awkward to see like the Grays I think um of these like chips so we'll come back we'll fix those in a second but let's make like some streamer cards now because I think that's important how the these should be about 16px like the content from the headline because we want to start creating some sort of vertical Rhythm right okay so here's what I'm going to do I'm gonna go 24 from the top and whatever the next content is is going to be 16 pixels again right let's just uh let's steal this because I'm thinking these cards down here these like streamer cards right let's do like pop Euler streamers oh my gosh my spelling my typing today Str streamers popular streamers whatever cards go down here should probably mimic a certain like a similar style that of the chips that are happening above so what is that style let's look at it um I'm gonna actually fill it with white and then bring that white opacity down a little bit we're gonna have to experiment and play here a little bit we are going to lose some of the rounded corners and just round it something like 16 pixels and these cards are going to be much bigger I think maybe we should try filling it with black I don't know um I feel like that's wrong oh that's kind of interesting 10 pixel or ten percent on the color and then we do something like that right okay so it's actually it's allowing the color from behind it to pop through um and we'll probably let's release this from an auto layout oh watch out now okay we want to release it for me how do we release it from the auto layout we would go like this and remove auto layout shift option A should remove it now it's just a frame that I can move things around in that's what we like and I tell you what we're going to come back up and we're going to grab this stuff here it won't and boom I like you all this information oh where are you home screen there you go okay and we're in the frame we're popping things in just like that and it's centered that kind of kind of works except let's change this same style different content to something like nine uh 7.2 million followers okay this is where the auto layout might actually come back into play right okay shift a auto layout that boom love it okay move it over here uh shift hey it's already in an auto layout we fill it what do we have going on here we had the fill down at like 10 and now we're just gonna do it with padding and we're gonna do around those Corners we've recreated it using Auto layout oh and now look no matter what happens it's always in the middle ah it looks so good I like that okay the padding's a bit much right so let's bring the padding down something like 24. I like that a little bit better and yeah let's just keep it like this here you know what we could our let's make a little Ed a little executive decision we'll pop that in there right there we're using our little call to action color as like something really important right okay um and then look we're gonna collapse our layers command C command V paste another one of these it's 16 pixels away look at that shift a put it in another one oh copy and put a bunch of them out there you know the routine come in here to prototype and make sure that Scrolls horizontal beautiful oh but but we need to bring the size of the frame back okay look now when we go preview we should be able to slide those slide these and slide that it's all looking really good the only problem I'm having now is a little bit too close here aren't I I need to be 16 pixels from my sub headline it's kind of coming together kind of digging it you know that's probably good let's stop for now and let's fix these things up um to kind of match because these have like a 10 percent uh 10 white background right okay so let's make this white at 10 percent yikers and then we need to bring the that thing up I think that works and then we need to have like a selected and a deselected state so let's just really quickly I'm going to turn these things into components and then we'll go from there okay um yeah so this has the fill not the overarching thing has ten percent so I think this one is going to need to pump back up to a hundred percent and we're gonna need to fill it with our call to action color now again if we don't like our call to action color we're getting bad contrast here here's another opportunity which side note really quickly before we go too much further I need to fix the padding on these bad boys because they are a bugging me let's go to 12 I don't like leaving my 8 pixel niceness but I think this needs to this needs to go to 12. I need a little bit more Breathing Room a little bit of Elbow Room there I just did like the Funky Chicken Dance as I did album that's fine I don't mind uh okay so let's really quickly hear um I'm gonna grab both of these and inside of figma I'm gonna drop this down I'm gonna say create a component set oh where did it go though there you are okay let's actually pull that out put that there and we have property one um and let's and I don't know let's let's cover this really quickly because creating property sets and fig or variance inside of figma is important let's rename this component to um what do we call these we call these not tiles not Chiclets um pit not pills um I can't remember I sometimes I just blank I'm gonna I'm gonna call it a chiclet right now but we're probably gonna update that because it's not a chiclet okay and then um and then let's come in really quickly and we are gonna name and here's how you name the properties and things inside uh chips thank you not Chiclet chips okay chip there we go thank you brain fart here we go uh we're gonna rename the property the property is going to be State okay and then we'll call the first one active like that okay beautiful we'll come in here and do the same thing State uh and we'll call this one inactive let's I hope that we uh named the right things we did not so this one needs to be active and this one needs to be the inactive one beautiful okay so now you'll notice as I click on these I have states that have been created I have active I have inactive I can rename them there right so I've named I've created the property myself and if you need to create another property okay you can come in and you could either do it in the control panel or you do here you just do a comma and then you do the new one right we could have made this uh like a toggle switch also if did you know that inside of figma so instead of doing like State we could have put like um I don't know let's let's make a variation here like long uh equals true right um I think that's how you do it let's try that boom like that then we would come down here and do the same thing long equals false okay now when we zoom out and go over and see oh how do we make the toggle switches I forget that's not right false or true there is a way to make one though and I forget how to make the toggle switches inside is it Boolean it's like making a Boolean value if anybody remembers out there let me know because I totally forget um is it inside of parentheses nope um I don't know I forget but let's so let's just delete it there is a way to do it but I for get it on off um I don't think that's the way to do it but anyways there is a way to do it I'll try to find it I'll post it on social media recent soon okay so with that being said we can come over to our assets panel and we can drag in oh not into it but there instead just like that let's do another one here and then let's change it to our inactive State beautiful love that um love it okay but let's just make sure they're the same you know all like that okay and then we can name them here and it should be recursive bosses right so what I mean by recursive is if we go from active to inactive it it keeps the text that's inside which I'll tell you some other design programs do not do but I love that figma does that for us okay so with that being said and come back over to layers and let's get rid of all of these other except for our little hidden chip I'll just name that and I'll keep that there we want our little hidden chip to stay okay we like our hidden chip but let's keep our the rest of them and we'll just we'll make a bunch of them there and now it's looking a little bit more like an intentional interface okay we come here that looks nicer doesn't it I like it it's a dark interface it's not fully black right um but it is working I think and we might have to come back and make oh my goodness let's go back back to our current interface and we can drag these drag those and we can drag those now let's answer the question of contrast shall we um on off zero or none interesting that could be it I forget how to do it but we're talking about like the little figma toggle switches for properties we'll have to figure that out um let's discuss our color do we love our color does it need to change it might need to so to do that I'm gonna this is I this is what I like right I like exploring now let's keep this um let's explore that that call to action color by clicking here and we can kind of experiment doesn't need to get darker so that there's better contrast I'll tell you one thing that's frustrating me is my chip my active chip is using it but it is not responding why isn't it responding oh it should respond right if it's rooted there um but okay I'll tell you what maybe maybe maybe we need to have a similar chip style for all of these let's drop these this these chip style text sizes down 16 to 14 and then we'll use the same chip inside shall we let's do it okay I'm gonna come in here and don't like this so I'm going to pop that in there yikes let's get this out of the frame Booyah get rid of the other one okay good all right awesome now we can do that same text in there like 55.2 k watching and it's a little bit bigger um which I think I feel like I'm fine with you know it's not bad to have different sizes of of like chips but I do like the consistency where did this is our first card here let's get rid of the rest of these cards and blink like that and put a couple more back in there now we're using the chips now I'm almost positive I'm almost positive if we go to change our call to action color it should change everywhere like that see that okay cool okay so let's grab this really quickly uh our color and let's experiment with a darker version of the color right there's a little bit more contrast there for sure um or maybe we just needed like a different color all together right maybe we needed it to be like that right that's bad contrast that's better contrast that's great contrast although it's dull right so maybe what we need to do is go really bright contrast with something like this and then instead change the text inside for the active one to be black look at that that's much better now we've deviated from our color plant a little bit on on the mood board that's okay right um and and maybe maybe you know you guys are talking about it out there maybe you're right maybe we maybe we don't need to change the color but maybe we did just need to go to the black so let's go here and we'll edit it pop the old color in you're right the black could work too but I do really like I do really like this color I'm just gonna I'm gonna deviate I tell you I really like this color a lot um okay coming in here there's zero contrast on this little fella because we need to turn that black so you can see it so it punches it's just it's a little bit more streamery isn't it I think so okay the green is working for me people are saying I know isn't it I think it's good okay let's come up here really quickly uh this is a frame I don't know if that works so let's just do oh for ellipse really quickly and come up I'm going to open up my my fast kind of like menu here command forward slash and then I'm going to look up uh UI faces let's just fill this with an avatar rat quick I don't care where it comes from any of these ones is fine give me an avatar definitely more streamery somebody said yeah I think so too okay so uh here's our streamer or excuse me here's our users uh Avatar this one is 39 by 39 that was a weird size let's go 42 by 42 we'll keep some a little bit sensical like interface sizes here okay uh let's 20 out of the way there and 20 back it kind of disappears what do you need you probably need a little bit of a white stroke around it I think like that and then you know what else you need what if you have like notifications or something like that you probably also need another little oval here using our call to action color pink now we have a little notification that gets a white stroke of its own I love it I love it okay it looks a lot better okay let's make sure that this is lining up with our nav or our nav menu here which I think needs to be just a little bit bigger and now we can re-line it up love it okay cool group This Together group that whole thing together it is now one ah this definitely looks more streamery right okay um James says I know a lot of streamers and they would like this I'm glad I'm glad that I'm glad to hear you say that okay um and I think that our little our little elements there are working for us let's I forget what we did in there one time it was like uh dungeon uh yeah let's go uh I know this is a popular one roon farming that's where people cheat not cheat but they're finding places to kind of cheese and get like a bunch of runes that maybe maybe they wouldn't find anywhere else that's a funny one okay let's bring the opacity of that text down just a little bit and this has really really bad legibility I'm going to be really hard on myself here and say what on Earth we need to go from regular to maybe like medium there and nine is really small but let's try it let's see what it looks like here okay I'm gonna look in the app I think it looks a lot better like this I really do this is starting to come together a little bit and let's just do one more thing um let's go your Elden ring companion I actually don't mind it being like a piece of text online by itself if we can do something intentional uh or why not just add the word ass put that there easy peasy um I'll tell you let's change the color of this to your Eldon ring companion app and we'll take the whole thing and move up from semi-bold to bold oh we're looking really streamery now aren't we okay we're like a bit wonky so I'm gonna grab all of these elements and bring them up to be 24 pixels from the top I think that looks a little bit better and we still have room for like something else down here or we could space out more or we could make our cards like a little bit bigger let's end today by uh by figuring out what the bottom navigation might look like I'm just gonna do this so you can see like some content uh that might I don't I don't actually actually you know we could do uh I'm gonna group these together this headline and this content headline and content um and we kind of have consistent spacing 24 pixels right so I'm just going to shift a put these into an auto layout and I'm gonna do another one like so I'm gonna grab that whole Auto layout and make sure it's behind we should still be able to yes in our Auto layout we can grab things and move yes beautiful perfect now our Auto layout can actually shrink to something like that and we can say in Prototype hey if you can't see everything you can't get to everything do do a little vertical scrolling right um but that's messing up our top section which we need to bring into that auto layout I think let's just bring all these elements uh into that auto layout like so and do they need to go to the top they sure do like that pink and let's restructure a little bit good we're just messing things up a whole bunch we like it okay now should be able to scroll wonderful you can scroll any of these sections but what's not in the lay Auto layout is this bottom anchored navigation which is staying fixed uh fixed position on scroll right okay cool so we could put some sort of new headline here like uh uh favorite clips I'll just put Clips here like that I like it and then we need to figure out now what this bottom anchored nav looks like notice that in figma in the left hand side it says it gives you distinction here if we zoom out and look at it again says these things are fixed and these things scroll I can't see it when I do it like this sorry here we go look it says here's your nav that is fixed and then here is your content right it it's going to scroll I like that I just love how figma does that I think it's amazing this is not a figma sponsored stream I just like figma they're a big I'm a big fan of the figma okay here we go linear and then we're almost done here let's fill the bottom with black and the top with black but then the bottom goes like that and up just like so beautiful okay we're gonna make that a lot bigger I think the container for this needs to get bigger and all of our elements inside I think need to stay rooted and anchored down to the bottom that means we can grow oh you didn't do what I told you to do um maybe everything needs a state that's weird dude no I messed it up space between yep here we go there we go now we can grow it it looks a lot better come into linear what color will it be I think that's more the dark color of our interface and then yeah and then it needs to come up yep just like so okay but bring the opacity of it down at the top and I think make it even bigger we want things to kind of disappear there a little bit don't we yeah yeah that looks good um and then we could add let's like for our active state I'm I'm assuming this is our active State let's just take the color the selection color really quickly and fill it like that okay we're gonna fix that put icons in there and stuff like that but this is the end for us today we probably need to lift and Elevate this bottom navigation a little bit more but for the most part I think this works I think it's a good start to our streaming app it does if you notice has a little bit of this off kind of green color and then we're kind of accenting it with a streamer green I think it's a little bit more bold and in your face I think this works good notifications we're using kind of that 60 30 10 rule that I did a video on recently so if you don't know about that go check it out we can still kick over to streams and then uh we'll update that obviously of course but we can kick over to streams and then choose a stream stream and we'll be able to go back but now we've done a little bit of design work I have actually kind of renamed my layers I know this is going to be kind of a boring topic but I think it's worth kind of just checking out really quick I make these big headlines here that annotate work streams right this is going to be everything that has to do with the streams page everything that has to do with the dashboard and then I'm I kind of label those over in my layers panel and then I pop like these just a bunch of dashes in there so they kind of look like separating lines actually in between um my all of like the different sections I'm working on that's just something I do it's something I've gotten used to doing okay so um we I think we let's just do a little UI design here and start to solidify because I'm actually going to take this and I'm going to move it all so I'm going to right click after I've select them move them all to the design page because they are past the wireframing phase aren't they and we'll get rid of this and we are we are fully into the design phase now something else we should do is let's create a another page really quickly and let's call this page uh system like that and that's where we're actually going to take our chip because this is like kind of the first component that we've created and let's actually move that over to our system page beautiful and just like that okay great so now we have kind of organized our design we're starting to uh um oh the volume is low people are saying man I hope not um I'm so sorry about that let's just check real quick nah it's pretty high that's I just checked it it sounds pretty good to me uh but I will pull the microphone a little closer and speak a little clearer and in hopes that that helps you all right so we have this little uh like the first the beginning of our design system let's go back over to our design is there anything else that we had that could become some kind of element absolutely right like this little thing right here it was so we might actually just do like a little bit of rebuilding of uh sorry rocket I uh it's let me know if anybody else agrees with rocket that it is too quiet but I and I will try to fix it but right now I have my sound like quality pretty nice on my setup so um okay so for instance like this little chip right these are called chips um I guess it's kind of the same thing as this so what I kind of want to do is I'm going to grab this card of ours and I'm gonna come over I'm gonna paste it in here because I might want to turn our cards into reusable components right um okay so that's what we're gonna try to do so first thing that I would need to do is I'm going to come into my assets I'm going to grab my chip and I'm going to drag it in here and let's just change the text inside of it see we made one chip that has multiple purposes I like that it was about seven away that's kind of a weird spacing so let's do 10 let's do eight because we like things divisible by eight okay so far so good um let's see let's see let's see and let's make sure that our responsive resizing is pinned to the bottom just like that now our card again should be pretty responsive okay um oh there's not a whole lot else to do we could I suppose uh we could do something with our Avatar here which is 26 we have a bunch of avatars being used in our design right we have them here we have them up here and we have them in our cards so the card version is pretty small these are uh 36. so I think 36 or 42 are both divisible by eight so I think we should actually just do an avatar that's kind of built out as 32. so with that said I'm gonna drag out an oval now this one is actually a frame and this one is a shape now the reason you might choose to do a shape over a frame right is because you might want to use a plug-in like UI faces and be able to just fill it really quickly and it can only fill shapes so that's just kind of a little thing to think of or keep in mind I'm gonna put a stroke on this it's a one pixel stroke and then I'm gonna make a component out of it right we're just going to call this Avatar so Avatar just like so okay and then I don't like to capitalize any of my my components that I'm making so let's do Avatar here now you could if you wanted to you could make variations with different sizes I don't think you need to do that I think you can literally pull out an instance of this and you should be able to just size it down no problem right so this one in here is about 26. we just want to do something like 8 times 3 is 24. oh I tell you what one thing we have to do is make sure that we just lock the constraints of it so 8 times 3 is 24 not 26 26 is not divisible by eight so we want to keep things really really divisible okay beautiful um now we have some I believe we have some typography Styles if we don't it's probably time to start dictating some typography Styles right uh Artemis Faye says do I ever use a soft eight grid which we will talk about we're going to do question answer time that's going to be the first question that I answered because that's a great question um this is 12 pixels semi-bold Monserrat let's turn this into a textile shall we we'll just call this um we'll call this let's start for now we'll call this body slash small okay um and we're gonna call this one which is 14. we'll call it body slash large okay uh body slash large that's the largest that you would want the body copy to be maybe I don't know we'll see this one is 14 and so let's just make sure we're using large and it keeps its color which is really really nice okay so now we have some textiles built into our our thingamajig there um okay pretty cool now what we can do is take this whole card and turn it into a component named card and if we want to we can start organizing these into artboards a little bit okay it's because we have our card built and it is a component it's reusable it's ready to go so we're gonna go back into our design here and Artemis says thank you that was incredibly helpful now I'm so glad I'm so glad that that was helpful now we do have some uh grids turned on and I always forget what the hotkey is for turning and on and off our layout grids it should be Ctrl G right there Ctrl G will turn them on and off and you can see I have a pixel grid I have a column grid laid out right I'm not really adhering to them right now but I will in a little bit so first I'm going to grab my assets I'm going to drag a new card in this is our component I love it okay let's go back to our layers you can see we have lots of cards in our layers list but now we have an instance of our component what we want to do is go one two three four and we want to get rid of all of the other ones that were in there that were not instances why do we want to do that we want to do that because if later on I decide excuse me let's go to our system I really want to move this thing over here then all the sudden it's moved in all of my cards everywhere throughout my design isn't that better isn't that better it really is okay so let's go back to our design everything's looking good now and now with instances in your design tool XD does this sketch does this figma does this you should be able to override the instance and add something to it so for instance I'm going to grab like a I said for instance when it comes to this instance that's horrific okay um never ever say that again in the same sentence now we can drag other images inside right so I can say hey I want to fill this image with that or fill this card but this one beautiful and if you're like how do I get to those other cards I'm going to grab my artboard I'm going to turn off clip content and look that's why frames are beautiful that's why frames are not just artboards frames are containing elements that we can control any way that we want to right so we've said now hey in this Frame just for a minute right please turn off the clipping that naturally happens on frames and contains everything inside of it I want to see everything drip over the edge it's so easy it's so good when you do that so I'm just dragging images that I have of the game on here so we can see beautiful okay I like that let's go in and let's also fix some of the content but before we do that oh see this is where it gets really good right we can come in here probably let's paste another one of our cards really quickly and why don't we just really quickly hide this chip that's on our our thing right because we don't need that anymore and let's resize it to be more of this size uh like that we have that represents a clip of a stream right so now we're taking one UI element and we're just we're just kind of modifying it a little bit to serve multiple purposes that's what we want okay so I like them being a little bit smaller like this um where do we put it I'm going to X right here beautiful I'm gonna go into the frame in my layers panel bam I've popped a nice new card now I think I did my cards a little bit taller but actually I think I like this shorter size here you know because we're kind of creating stylistically we have a vibe that we're creating right rounded Corner cards for a lot of things right and then we also have like pill style buttons chips and tags so everything's a little bit soft a little bit rounded but we're reusing those Styles all over here we're using them in our like streamer cards in our stream cards and then in our live stream cards I know that's like a lot of the same terminology but it's different I promise you but what's really cool is now we can do the same thing we just pop pop and let's get rid of all of the static versions and we are in business okay now again we just come in and replace some of the imagery real quick because these are like Clips so let's pop some clip content inside there beautiful um this game has like a lot of um like similar colors you know when you're like playing with it can feel a little bit dreary kind of toned that's okay we're just gonna pop those in all right that looks really good now let's use a couple of plugins here to update content quickly like for instance we notice um that on all of these cards right they're using the same image we don't want that so we're gonna grab all of the images here boom that are represented and those there as well beautiful I'm going to hit command forward slash to open up my fast kind of picker inside a figma I'll hit UI faces and let's just apply avatars to all of those and it should go almost there while it's going I'm gonna take a sip of my coffee because oh there it is it replaced all my avatars beautiful Okay so we've updated the avatars now what we need to do is update the names right so okay we've already updated the names there let's come into our cards kind of update these names again open up my fast picker I'm going to do another plugin called content real and I'm just going to pick these full names first and last and it gives me a list of full names I just apply all boom it just applied them everywhere throughout my thing and you can create your own content list in there so maybe it's like gamer tags or usernames or whatever you could do all that as well now everything is looking pretty good why don't we clip the content back in really quick press play and let's see what we get here on our prototype so far so good Artemis face said uh design puns that's a new one for me okay good all right awesome so look now we can back and forth looking pretty good here these cards are made out of reusable components right um beautiful right these cards are soon to be reusable components and these little Clips cards are also reusable components all right okay love it everything's looking really good right now let's finish up and build a few more things into our design system and the reason we we like to build things into our design system like this as we're going is because it's going to make the next step where we build our stream list page and a bunch of other interfaces really easy we've already established colors that we have here right we're starting to establish text we're starting to establish UI patterns like and we just reuse reuse reuse over and over and over that's the idea right so it starts to build momentum and then man you are Off to the Races so let's do the same thing here with this thing love this really quickly I like this text right we need to bring this into our textiles we're going to call this a headline slash sub headline something like that uh or maybe it's just sub headline slash uh small right okay good so we've done sub headline slash small boom boom oh hold on hold on hold on we need to go plus here there we go sub headline slash small beautiful okay so now we're just making sure that all of those other ones are using our new sub headline small and let's do headline like this we're going to create a new style here go headline slash large okay now I'm not going to get into how you style how you format that's a whole design system stream I'm just doing it really really Loosely right now but for the most part it's looking pretty good we're using Styles consistently through everything I think um which is nice and this is 14. so let's go back into our system and just make sure that we're using stuff here for everything it should be the same type Styles or or font styles for everything if we can that way if we change it in one place we change it everywhere that's constantly the general idea okay so I'm gonna grab one of my little mini cards here come back into my design system and let's uh just paste it right here what do we need to do we obviously need to replace the Avatar with our Avatar okay boom boom just like so haha let's put it on that side love it keeping it 42 by 42 love that okay uh this is 14 so we gotta change the type style to be 14. this one is nine golly that is small but let's just say let's just say we'll go with it I don't love it I think I'm breaking my my uh my rules here but let's go caption slash small and that's what we'll title that thing and really quickly I'm gonna drag one of these out here I'm going to turn it into a component and what are we going to call this component we're going to call this component uh check mark okay check mark and let's drag an instance of that check mark in there instead of that so again now we can change this one time it'll change everywhere let's name this layer um uh user card like that and then we'll turn it into a component and it should be it's using Auto layout so the whole thing should be pretty extendable so we should be able to come back in here now assets bring our card onto the screen here let's just try really quickly command X sometimes it's hard to get into multiple frames so I'm just clicking in in my layers panel here on the left and then popping it in there now you can hold down command and use left or right bracket to move things around in Auto layout see how it moved around there like that perfectly we love that and then copy do a bunch of those get rid of the static ones and then we just have to do that process again one more time where we unclip the content and we'll put some new avatars inside of here beautiful like this uh what was it UI faces apply those avatars like so pretty good and then do the same thing with content reel we will grab all of these names and we'll say content real give me the full names apply all beautiful and because it's Auto layout do you see how it changed the size of the cart it just Auto expanded amazing that means like if Teresa's web is for some reason in there two times it expands the card out oh my gosh it's so extendable thank you figma for doing that for us okay boom we're gonna clip everything back again and I hit uh option L just to collapse all my layers in figma dude we have a prototype now that is built out of 100 completely reusable components so far reusable color styles reusable textiles reusable cards and components and the whole thing flows really really nice um let's see I think the last thing we need to do before we start applying all of these Styles is I think we need to fix our navigation at the bottom and we just need to create a consistent uh on off type deal to our yeah yeah we need to create a review usable or some reusable navigation items here I think okay so let's unlock our nav that we have over here you can notice that I have I have the nav staying fixed on scroll and everything else Scrolls right so but let's unlock that really quickly so that we can actually get to our navigation here all right the question becomes do we make a component out an interactive component out of the entire nav bar or or do we um yeah I think we probably do I was gonna say do we do them individually and then just put them down there I think we just do the whole thing right I'm going to copy this nav I'm going to go to system really quickly and let's paste it in here there's our navigation and I'll tell you it's inside this whole thing has the fill on it which I don't mind I think that's fine actually let's just keep it like so the first thing we need to do is call this nav icon and we need to pull one of those out like so and we need to do a second version and we need to make everything in there white right where's White at hello I need a new I need a break and go can't believe I don't have white as part of my design system so let's just come in here and make sure that we add uh you know um so I don't know I'm like mumbling here um but I guess it's system and now let's call it brand uh b-r-a-n-d it slash when I do the slashes it kind of files it away for me let's just do brand white uh like this that's fine okay so okay we're gonna grab both of them see what I'm doing here I'm gonna grab both of them and I'm gonna instead of turning it into a component I'm gonna say hey give me create a component set that immediately creates my um my variance for me right so this one's going to be called default uh let's actually call this one active and this one is going to be called inactive like so okay so now we have two of those beautiful we should be able to um yeah we should be able to now recreate our navigation using our nav items like this okay um so let's just see if I put that in there see how it's spacing it out because on our on our Auto layout that we have here it's actually using this awesome feature called space between which is constantly just spacing things out that way our navigation can be this wide or this narrow and it's going to try to space it out perfectly for us let's get rid of home it'll space it out nicely that's our active one let's do another one here and let's make it inactive and let's retitle this streams and let's see [Music] you know what's interesting oh do we might need to get into like a really a really interesting um yeah we might need to get into a really interesting thing here where we do icons first so let's do this okay uh I'm gonna go I'm gonna build an icon set and then all of those are going to be the same icons um here you have your home icon and let's just open up all these frames really quickly because we look we have the to do icon the treasure map icon the document icon the video icon and I'm gonna paste all of those here see that okay so you have all of those icons I'm going to rename them really quickly to Icon Dash home and icon Dash I'm gonna grab the rest of those so icon Dash uh stream I'm just going to name all these icon Dash to start with in my layers panel icon Dash guide love that icon Dash map and icon Dash okay I'm going to grab all of them I'm gonna do the same thing they should all be the same size which is very important here okay all of them are the same size so when I put them in they're going to be Flawless I'm going to create a component set I'm going to call this icons and see I named all of them icon slash when it organized all of them it it dropped the icon out of there and just renamed each one of them so that's their property right beautiful so now what we need to do inside of here is when you come into our assets and we need to drag an icon in here instead like that aha now we're talking okay and now we can give it whoa whoa whoa whoa whoa here the selection color is going to be the CTA beautiful like that okay so we should be able to now shouldn't we inactive property we should be able to come in and select yes just like that so double click inside and we can now swap what the icon is home we want streams there okay look so we can get rid of this and we need another one called guides okay so this one's gonna say guides and the icon that we use is going to be guide beautiful let's get rid of that and we are gonna do um map here and we are going to switch that to map so we can get rid of that so we're just rebuilding this reusable kind of like um bottom navigation here tasks here and select the icon and switch it to task okay now we can get rid of tasks and we have a beautiful navigation that's built out of icons and then we have turn them into nav icons okay and now we're taking those and we're embedding them into our nav which we will turn into a component like so I think let's see let's see if we've done this the right way it should be done the right way okay so let's just press okay nav like that okay beautiful um and then we can have variants of this nav I believe we should be able to right so let's create our first variant of the nav we'll hit variant here and and we probably could have done this an easier way but I just want to show you like how you can use interactive components how you can do nested components so on and so forth so this next one is going to be called streams and what are we going to do we're gonna make this one active and make this one inactive beautiful okay and let's make another variant so boom Another variant here and active on guides inactive here and the whole thing is going to be called this time guys I know this is a little bit of the tedious work but once we're done doing this it's gonna really oh hello come back to me come back to me inactive active why aren't you doing that that time that's okay figured out we somehow we overrode it that's okay so let's fix that one more or two more and actually let's just stop there for now let's stop there we'll take away that variant because this is all we need for now we can keep adding variants later but now we should be able to come into our layers back to our design actually grab our asset drag this out okay get rid of this guy and we're going to drag this not messing with our Auto layouts there we're going to put it at the bottom and we want to of course fixed position when scrolling so we're going to hit that now it's fixed it stays exactly where it needs to stay and we can create uh it like for instance let's say over here we have our next screen and we don't know what this is going to be this is going to be like our stream list our list page all we'd have to do is come in here and say hey take me to streams okay and we've switched we've switched the component there right at the bottom so as soon as we switch over we'll see the the change that's one way to do it you can also create the interactive component on the flip side instead in the system so anytime you click on one it flops over you could do that as well that's a that's a thing you can do this is now actually it is the start of our of our our streams page or our list page uh so we'll put stream list right there and that was the last of the reusable components that we really needed to do let's come back to wireframes here and let's see how we had like what we were trying to work on there so let's bring this whole thing over I'm going to X this actually copy this and for some reason I renamed the page there I didn't mean to do that but let's come back in and just paste this over here we're working on a new work stream and it's going to be the streams page just like so so I have the wire frame off to the side and we'll pull all these in so we can kind of work on them together okay so what do we have um you know we had these UI cards great we have this like top kind of like area here so we're going to call this top nav let's just copy and paste that in um and it was spaced 32 from the top and it should have been about 15 pixels or so from the side that's fine so 32 from the top boom boom like that and let's just make sure it's centered beautiful okay so it's gonna look really similar and then why don't we just grab one of our cards and come in here and paste it in and we can do a little bit of editing now right so let's kind of move it over to the side again we have a reusable component how big do we say this or how high how tall 208 pixels so this is about 216. that's good that it doesn't have to be dead on we can be a little bit playful with it and this may be where we create a variant of our card right because we have different like the elements in different spots so that's fine let's come back to our system and let's create a variant of our card uh where we just hit variant and what is this variant I think it was let's just move a few things out of the way and make our bounding box a little bit bigger because I think the first thing we want to do is naturally let's just make this card a little wider and uh let's go back to our design and see we had like some sort of live tag top left the watch count there and then no description but it said just the name and that whole lock up um down there like bottom bottom left instead okay so just so I can remember it I'm just going to grab one of these and bring it over into my system really quick I'm gonna paste it right here so I can look at it because that's what we're trying to recreate right okay so in this one we can we can hide this command shift H to hide it this can go up to the top right this can come down to the bottom and we need to have some sort of live tags so what's more important here uh let's do inactive for our watch count and let's come over and do active here and we'll put the word live okay this may or may not be like the right visual like look for this and we might have to come in and fix this a little bit totally can but that's let's call variant number two let's just call it variant number two we have default variant two um this is probably more stream card specific that's okay but we just need to make sure these are responsibly sized the right way so like hey we want this to be pinned to the top left this we want to be to the top right and now this piece we want to be to the bottom left now we can take our card and instead let's give me variant two Goods all right so it's just like a little bit of a mix-up mashup of that first card uh looks really good okay great um now let's duplicate and have another one what are these about 16 pixels away from each other obviously because 8 times 2 is 16. we're going to grab both of them shift a put them in an auto layout and we're going to just copy paste copy paste copy paste a bunch of them all the way down all right and let's fill each one of these cards with some other gameplay footage well we're just dragging those in here again we're going to grab this thing unclip the content so we can actually grab each one of these drag them in drag them in and maybe we want to stagger some of this uh more interesting colors and content here so okay that works good I'm going to come back here and re-clip the content and now we can do our first kind of prototype look at that look how quick quick it was to make that next piece because we had created our components and everything right okay this is really really good we definitely have to fix these little uh like how many people watching chips and turn we have to figure out like a better version of that for sure absolutely so I know that um but let's uh let's right now just do our quick prototype back and forth between the two right um so I'm gonna come up to prototype and I'm gonna say uh let's see stream streams hey when you click streams hey take me over here on tap um I want to navigate to uh Eldon screen stream list uh apparently I have two of those so let's just get rid of that one real quick because I don't like to see two I like to see the one beautiful okay instantly no no let's push let's push this way beautiful it's gonna push ease out I like that and then let's go back the other way and but we don't want to push that way we want to push the other way okay with that said we should be able to press play we should be able to push push push push just like that okay now one thing I'm not loving is I would love it if these top areas this top navigation area right here and the bottom nav would stay right um and not move in between and that's something we'll have to figure out how to do uh one thing I think we need to do is I really do like this pattern maybe these chips and this title and I think I want to re-implement that over here on my stream list so I'm just zooming in here I'm gonna hit command L to collapse all of my uh yeah option else excuse me option L to collapse all of my layers over there in the left hand layer panel I'm going to move this list down and I'm just going to come in pick the screen and pop these in here now let's give them a little bit of context did you notice that depending on where you copy and paste things right it's gonna it's gonna put things in different spots so we're 24 pixels from the top or from that top nav and then 16 pixels away from the edge so let's just go off that we'll pop this in here and we should be 24 pixels from the top and we should be 16 away from the edge following yep and let's do a similar 24 pixel now what we need to do is change this so uh find a uh let's just put here live find find a live stream okay like that and take this in and I think this title can actually Flex all the way over we'll bring these back up let's just find that 24 pixels of spacing or not find let's do watch watch a live stream okay something like that it just brings a little bit of consistency across um yeah just across like the application where we have similar kind of Vibes going on so these might change um and maybe these are you know the the chips that we use here to kind of like filter down maybe those kind of change a little bit right so instead of saying dungeon this could be um you know uh battles uh or something like that this one that's and this one could be something else like uh like uh uh tips and tricks or something like that I don't know so they just got some different stuff going on in there we always have the side navigation which we're gonna have to figure out what to do what to do with the side navigation um but let's take what we've done here now and start to implement a little bit right let's Implement over here um I I like to do it this way I like to um move from right like take what's already existing and duplicate the the artboards over in this case we're not going to have these elements and we're also not going to have any of this stuff at the top right because when you go into a product screen when you go into something that's focusing now on a product a stream you are now immersing the user right whereas back here we want the user to be able to quote unquote portal in and out to select where they need to go and they need to have some sort of global context of where they're at that's why we give them in ux design a global navigation top navigations titles to let them know where where they're at but as soon as they actually dive into a product boom we're gonna rip all this stuff out no longer do they have Global navigation they need contextual control do you see that so we go for from Global navigation to contextual control right that way the user is immersed there's actually some tricky things you could do here some people will even keep some sort of status bar out on these Global screens right time battery the stuff that comes native to the device and some people when you dive into immersive experiences will actually remove the status bar intentionally take it away I think it's actually kind of a No-No not supposed to but some people do why it's kind of a dark pattern so that the user doesn't know how much time they can't check the clock be like I've been watching this stream for like 30 minutes right instead what they do is they say don't worry about the time just keep watching the content keep engaging stay with us right it's a little bit sneaky but it kind of helps the user immerse themselves in the content at hand alright so let's do this let's take our little chip and our arrow and let's basically we're gonna mimic what we have going on here in this top navigation and my watch is trying to talk to me be quiet Siri we are designing and we don't need you right now okay here we go I'm gonna grab these items and what we want to do is not only kind of match the spacing here this is kind of like 15 pixels from the side that's weird it should be 16. on each side shouldn't it it should okay so it should be 16 and what size is our uh menu icon it says 28 it should be 28 by 28 and this one is not really 28 by 28 so let's constrain the size of our icon and let's move it up to 28 by 28 okay um all right now we have an icon that is a similar size right now we don't need to do that for our um for our live tag let's use the red we might go to our our um brand color or our contrasting color here but let's group these things together and we'll move them up into place well let's just do this how far did it need to be 32 from the top okay so let's just make it 32 from the top all right now we have similar stuff going on but we also get this beautiful live streaming video right that should be behind it like that now real quick let's get this old stuff out of there we don't need it and I'm going to do something a little intentional here I'm going to leave you know I kind of locked in my wireframe the controls and the photo were actually part of the same group I just grouped them together but in my actual design I'm going to keep these things separate because I might want to do who knows you might want some sort of scroll interaction you might want something like that okay the question becomes something I didn't think through is how do we expand this where are the play controls where are the expansion controls to go full screen are we only doing it like on tilt or on twist um boy that's a good question I think we probably need some sort of expand control so I'm going to open up uh a an icon program that I use called nucleo to kind of house and store all of my icons and we're gonna go hunting here a little bit and find an icon if it will ever load and while I was gonna say while it's loading let's do something else but let's not let's just keep cruising we'll find something and let's search for uh expand do we have anything for expand haha this is what we're looking for we like this um like yeah let's go here this is kind of like Zoom this is full screen let's just pull this full screen icon in here and see what that looks like shall we all right we'll grab this let's take the selection color move it to White so it pops a little bit and let's put it right down here at the bottom now uh oh yeah that's 16 there and let's match it we'll just do 16 from the bottom hand Edge there I feel like that's nice I feel like that could work for now we'll leave that there for now I'm gonna collapse my layers over there option L I'm gonna move in here and start moving these items into place now what we need to do is we need to think about we need to think about all this stuff going in and it's all just it's basically gonna get you know inverted like all the colors and everything so we have our chat here why don't we just move our chat in okay I'm gonna pop it there move it at 16 pixels on the left hand Edge and the right hand Edge then I'm going to take the black I'm going to turn it to Red really quickly stay with me stay with me I'm going to take the white I'm going to move it to uh our color because this is kind of like a spacing thing now the reason I did that is because as soon as I move everything to Black then when you try to move text back look it gets kind of messed up this little selection color panel down here is super helpful in figma it allows me to just grab colors and then move everything in one smack boom just like that we changed everything we flopped everything over okay I'm going to move this down and make a little bit of space I'm going to move this in line it up 16 and 16. I'm liking it and uh boil boil boy boy this one we might actually grab the text and just like so uh selection colors let's move to White let's move them all to White and we will use transparency you know on a dark interface this light text actually this regular text is not really it's not really slapping the way that I want it to you know what I'm saying so I'm gonna jump it up to medium and then I'm going to bring the opacity of this text down to give it the contrast that I need so there's lots of different ways to bring contrast to um connected elements or like elements on a page text in this case there's lots of ways to bring contrast you can bring it through size you can bring it through style you can bring it through weight you can bring it through font selection you bring it through color we chose here to bring it through color AKA opacity just downgrading that opacity a little bit okay so that's what we're doing there now we had kind of a style already set up and I want to honor that style let's just bring our home screen over here really quickly you see this color right here what is this color it's really just a white down at 10 right so we're going to take this sucker right here and we're going to move it to White and drop it down to 10 percent and now we get that same style that we had Over Yonder okay now what do we have here body large and captions small we want the same thing here let's not let's let's reuse similar Styles if we can uh body large and we'll grab this piece here and we'll go to our textiles and say caption small that's what we want okay now I think we probably need to do the same thing I'm very upset with myself that this little card right here is not obeying the other rules that we have so what I'm going to do is right click on this component because we already created a component out of it right and I really want to uh go to the main component that's in our system right now okay here's the issue I'm having it was the same issue we had before uh I think I need to bring the opacity of this down a little bit down to like 50 percent to bring that contrast all right is this live Tatiana ass this is live Tatiana if it's not then I just said your name through a recording that's really weird so you know stay with us because it's the live stream all right so we brought the contrast down to to that let's go back to our design see how much better it looks hey y'all this is a good reminder why you should always work on things in multiple stages you should work on your design go away from it come back look at it again work on it some more go away come back look at it again I want to do a quick shout out there to all my Freelancers or even if you're working in-house somewhere for a company this is why there are deadlines for the design when a deadline is set for you as a designer let's say you have two weeks to come up with this design we're working on you need to set up internal deadlines for yourself knowing that you need to work on the design step away from it come back with fresh eyes get some revision get some other eyeballs on it you have to set up your own internal deadlines so for me I'd work on this for like a day or two I might send it to somebody to get some a look at it and I'll work on something else for another day I'll come back to this I'll look at it and go what the heck was I thinking not giving contrast to this text gotta fix that and now the the design improves so it's a good idea to step away from your work come back set those internal personal deadlines so that you can meet your external deadlines all right they got people in the chat who are saying absolutely gross things I'm blocking this user from the chat go away we're all done with you don't ever come back here and speak of those gross things inside of my chat again gosh do I have to do I have to handle people like that don't come on here and talk about weird gross things we're talking about UI design today folks get over it all right here we go we're moving on so we have fixed a little bit of the contrast issue we had on those cards I don't mind this because this has good contrast between the screen and this headline and uh we probably have the same thing down there okay so we're looking good we're looking good um we got this regular and again it's not slapping the way that we want it to so we're gonna Pump It Up to be something more like medium love that okay and what do we got going on here we got 16 pixels at the edge but our text boxes need to take up the full space of that 16 pixels you track them with me because um otherwise it's weird right we have we have down over here on the left hand side our avatars are giving us 16 pixels on the left-hand Edge but our text was not it was getting kind of shortchanged so we want to make sure that we just pump that out do you notice how I'm using um I'm using Auto layout and it is just automatically kind of like changing our layout of all the things that are inside of the auto layout underneath it as we do it all the spacing is just changing perfectly it's doing what it's supposed to do because Auto layout is legit it's the stuff you need in your life okay so if you're not using Auto layout as much as you can get on it yeah that looks much much better we're liking that much better um here's the problem that I'm having I pulled all this over now I don't have a wireframe reference but that's okay we're going to grab these items and we're going to make them white you guessed it white and you guessed it we're gonna do that same contrast trick here we bring this down to 50 just to get that contrast that looks so much better we're liking it so much better already also you know what I'd really like a lot better is if my little tag guy my little shapey here was our call to action color that pops a little bit more and then we can bring this to be kind of like a dark background color come on now we're talking that pops a little bit more I'm liking all this stuff these things need to go away so what we're going to do here to fix these icons is let's actually grab these will make the the outline of these white because these are kind of like wireframe icon placeholders we don't want that right let's go primary and pop it in there it's a little darker look they stand out a little bit they pop a little bit more and you know what we need to do we need to think about um click States active States the arrows don't have contrast I know uh fog falgen says the arrows don't have contrast I know because we haven't gotten there yet right we're not we're not I'm not leaving these black on black that would be the worst design decision that I've made in a really long time if I was to these should definitely let's just fix them right now because people are like what is he doing yeah these were going to 100 be white they were going to pop a little bit more right absolutely hundo percento okay let's figure out what's inside here did I have like a did I have some sort of uh I didn't was there no I had no stroke I had no bottom kind of like stroke to this guy I really should have um I'll tell you what let's just draw a line inside of here because there should be a separator inside of this bad boy and it should be white and we should bring the opacity of it down 50 if you're asking yourself like okay how is he making decisions on what gets what opacity there's actually two things I'm kind of thinking of in the back of my mind um number one when I think of opacity um I'm thinking of contrast and I'm thinking of um um which which things have primary or like or really should be getting primary eyeballs on them or primary access to people's like thoughts thought process so things that are important need to stand out contrast wise things that are less important need to drop back so separating elements Design Elements things that are not content usually should take the back seat and in this case we're using contrast to do that and transparency to do that but number two a little bit more specifically and targeted to this design when you're doing dark interfaces you're really talking about layers and levels of Darkness right and the darker something is the further it is in the background the lighter something is the more in the foreground it's considered the reason we think this or the reason we do this is because think of a dark room if there's a fully dark room and a flashlight that thing tends to be what we focus on the most if there's a bright flashlight that is the brightest flashlight you've ever seen in your life and a candle flickering in the corner that kind of it's the candle's there but it's secondary it's light it's probably casting light on other areas in the room and that's the casted light is less important than the candle but the candle is less important than the flashlight and the flashlight is way more important than the rest of the darkness do you see what I'm doing here so the difference between light and dark and dark interfaces starts to show importance or or what is primary and what hat what is secondary Tatiana's uh complementing my room thank you this is my office and workspace and I love it so much alright so we're doing pretty good here and even this line for me is a little bit too much so I'm going to drag this down to be something more like 20 because I don't want it to stick out and the idea here is that we've opened up chat we are currently chatting um and uh if we wanted to we could kind of whoop we could retract this like an accordion and pull that thing up so this is looking all right again are we doing the thing here where yeah we need to go caption small but our captions small really really really we need to maybe edit this because caption small it is on medium it's looking fine okay good caption small is looking good um thank you Jean Garcia says love the thought process explanations all right that's awesome that's the whole point of these live streams is for you to see how I think not that the way that I think is perfect and the best but it's just the way that I think about things I find it helpful to see how other people think about things and so I just figured it'd be helpful to you if you like the way that I kind of share my thought process and teach make sure you like subscribe to the channel hit the Bell notification icon so you know when more videos like this one come out hey let's jump in and let's do our chat box at the bottom it's very important but first let's bring that we have this idea of doing kind of a gradient overlay but this gradient overlay shouldn't go from white to less white it should go from black to a less transparent version of black that way when we put our watch out we're gonna bring a copy of this over and now that's one thing you do have to worry about a little bit is when you're working with auto layout things are going to try to jump into Auto layout land and we don't we don't always want that right 18 16 let's come over let's expand this so we're 16 on both sides we're gonna put our little chat box at the bottom and now here comes the question does our chat box need to stand out more now that we have a dark interface does the chat box need to pop a little bit more I think it does actually okay so here's what we're gonna do let's just get these things out of the way so we can concentrate now a little bit whoa and let's bring this over and I'm I'm going to bring my other screens to the left and right of it because I want I need a little bit of context what have we already done what other Solutions are there I tell you I was like I gotta pick some sort of color why would I pick a new color when I already have white brought down to 10 right so let's do white and let's try it down to 10 okay now it is still popping but the problem I have is that you can see things behind it so I have actually a plug-in installed on my computer called color snapper color Snapper is going to allow me to just anywhere on my computer in the browser wherever grab a color and what now what I need to do is I actually need to mimic do I have it turned on color Snapper too okay I'm gonna hit the hotkey and I get this little selector all right it's telling me what this color is and let me just draw it a rectangle so you can see this is the color technically speaking of our opaque kind of uh um like drop down white this is white at 10 with our all of our colors and everything behind it so we're gonna cheat and use that color so that we don't get this see-through Vibe here this is a little bit of a hack it's a little bit of a cheat I don't you know I'd like to stick to uh whatever principle we're using as much as possible but this one it does it without that that's that see-through kind of deal going on right there okay so this works and we're not going to do that in a lot of places we're just gonna do in a few places we're gonna move this to medium so the message thing pops a little bit more um as far as our weight but again this is inactive right so we need to bring this thing down so that the possibility for you to chat the placeholder text is not overwhelming it's not competing with the actual chat Inside the Box do we see that very very important okay cool uh we got to do a similar treatment that we did up here with our uh whatchamacallits with our um uh with our icons so but let's do this one a little bit differently shall we we're going to grab our color our fill color let's go primary and this is this needs to be a call to action so instead of doing white we're going to use our ah watch out we need the actual line items the shapes here and we're going to make those our call to action color okay because we do want that to pop a little bit it's an actionable button that's always actionable does that make sense okay whereas will we do we also need to do is we need to create probably some components out of these so let's grab both of these really quickly and just turn these into multiple components let's do that multiple components um great and this component um I think really quickly we need to don't move that out there let's grab both of these components and move them out here really quickly okay and then let's work on uh oh you know what we want to do we want to bring our Master out and bring both of these into our thing okay and we're going to group those together and we want these to um we messed up our Auto layout structure that we had going on there so let's group these two together like so we'll bring them in and then which ones are mastered these two are our masters let's pop those out okay we should be lined up and go down okay so now what we can do is uh we can actually right click on these and say move to our system page let's go to our system page let's do a little bit of system work here where did they go They're way over in la la land let's bring them over because we want we need to create a variant of both of these don't we I think so so let's create um a properties oh this is a new update by figma we can create a new property inside of our um our component here instead of going immediately to variant we can create a new property what do we want we want an instant swap a Boolean which is a true or false statement or do we want text and that's just defining almost like like creating like an input field in WordPress or custom field it's like what do you want this to be um I want it to be let's do Boolean okay and let's come over and see we want this to say uh active true or false currently it's false let's create the property oh good good good good good go remind me later get out of here this is fun I like what I like what uh I like what figma's doing here okay let's zoom in a little bit more so we can still play with this one okay so now we have active we need to create oh how do we create a new property now interesting create a component property we do need to create a variant of this bad boy right and maybe they switch that adding to the variant is up here now okay so we're adding a variant beautiful okay so look we've added our variant let's come down here and let's change our color The Fill color to be wow my gosh like yikers okay so the stroke needs to be in the center there and what we actually need to do also is we need to fill this puppy so I'm going to create uh I'm Gonna Fill it also and fill it with our CTA color okay now we're just playing because I haven't played with these new things here uh inside of figma but we don't we want this one has property one default variant two let's undo that how do we get to where we need it to be property one should have been you know what I'm gonna do the old school way we'll come over here and we'll fix this where it says uh active I have to do a little studying there uh active and let's put true uh false excuse me f-a-l-s-e and we should get a Boolean there okay now we're gonna do variant two active but we're naming things over in our layers panel here and we're gonna put true okay so boom false and true all right we should be able to come over to our assets really quickly grab this drag the instance in and say do we want true or false boom okay so now we have a working component we should be able to come back to our design if you're watching you're like what the heck did you just do we're creating components those components have variance the variants are filled with different properties to switch around inside of those variants then after we've created that component that has the variance and those built with properties we're going to insert an instance which is what's already in here and we can dictate and say that's not how you spell the word false but we can say hey we want to be true okay so now we have you know we're able to just toggle things on and off it's one component that has multiple variants I did somebody says You misspelled false I know I'm really really sorry let's go back and fix it I'm horrible at spelling f-a-l-s-e I was trying to move too fast beautiful okay we spelled it correctly now okay so this is coming together a little bit I think that we do we want to add something maybe a little bit custom here because my fear is that our chat box is kind of it's kind of dying a little bit right it's not it's not you know we want to stand out a little bit not too much I'm going to put a stroke on this thing I'm gonna make it white um I'm going to fill it let's do something fancy really quick linear gradient okay I'm gonna go from one corner to another like this and then I'm going to bring the entire thing down and that's a really big one so let's go 0.5 for the stroke and now it just kind of stands out a little bit if you don't like the direction of that gradient that's cool you can change it you do you I'm gonna do me um we want it to be just a little bit yeah something like that it's kind of cool and I'll tell you I'm not I'm not digging this button it's the call to action button it's not popping the way that it should right okay so we need to change that by coming here and saying change you to be the CTA color and let's change you to be let's go maybe try to go back to white or we'll go to the primary color so that it popsy now that you can't ignore the chat but what we're saying here is hey user we want you to know that this is a live stream that you're currently watching and we have some information for you here here's the chat start chatting start chatting start chatting this is what we want in a live streaming application I would imagine that what you really want is engagement right and engagement equates to chat so we're thinking about what's the always as a user experience designer what's the primary thing that we want users to be doing right for instance right now while I'm talking the primary thing I want you to be doing is liking subscribing hit the Bell notification that's why I put it up there I don't put it as a secondary thing I put it as a primary thing right same way in our user experience designs we have to decide what is primary what is secondary what is tertiary and how do we organize that information very very important okay Tatiana is saying you're confused ask a question let me know why you're confused I would love to help you out okay so let's get rid of some more people who are block report yep get rid of you hide the user on this channel go away stop spamming my live streams we're talking about UI design not other things okay um Sam Segal says thanks for these streams I find them fascinating I learn a lot I'm so glad that means a lot to me that you're learning a lot from these live streams I'm learning a lot from these live streams nobody ever has it all together hey I tell you what I kind of like I kind of like her streaming Pages it's not bad dude um it you know it probably needs a little work it could always get better let's be honest right but you know for the most part it's doing its thing it's doing what it's supposed to do so I like it I'm into it um we could do a little bit interaction here but I think we might end the day by putting everything back where it belongs here's the dashboard here is the stream list here's the actual stream page okay and now let's do a little bit of our prototyping uh let's go uh over to the Prototype tab I'm gonna grab this one here and on click we're gonna move over so on tap on click whatever you want to call it I want you to navigate to um let's see navigate to Eldon screen oh why is it still called stream list let's call this Eldon screen uh detail let's call this the detail page okay so boom let's go back to it we're going to the detail page is there an animation is it instant actually they've changed figma changed our interaction page a little bit uh that's okay let's just do a very easy push and we'll push over like that 300 seconds um we can try smart animating any matching layers I doubt there's going to be any matching layers but let's go back the other way if we click on the Arrow we should be able to on tap navigate to we want to push the other way now we could do something interesting here let's try grabbing the entire screen can we do on drag can't will that work and and push us back I don't know let's try I've actually I don't know if I've done that for a little bit so now let's move back and test our prototype a little bit we can swing over a little bit we can hit stream it goes active we get some options here we got to fix this for some reason we don't have anything blocking our top view like we do down here on our bottom view but we click here we go into our stream we click back let's try again and if we drag over oh we get the drag gesture baby that's what's up drag it back and we get some weird matching stuff here so we're gonna fix that really quickly before we go because that I'm not I'm not happy with what's going on in our dashboard experience when things scroll I see they're scrolling up with it and for some reason here these are fixed in place why are they fixed in place let's go back over to streams and scroll they should scroll too and I think it's probably because they're not in the auto layout I think everything over here was in the auto layout that is the difference that we had here right so let's go back to the design really quickly we don't want to fix position we want it to be in uh inside so let's just drag this inside the frame boom everything lines up let's put it I think it was 24 pixels from the top one two three four now it should all scroll together I believe and we need this thing to be inside as well we need our top nav to be inside our frame that should be in there as well and the whole thing is 32 pixels from the top we're letting Auto layout just take care of the spacing for us this should have fixed our issue now everything is going to slide okay that's looking more like the way we had it here on our home screen now we have it on our stream screen click over here and we need to be able to we we do need to be able to scroll through our chat though that's one thing why don't we figure out oh hello let's figure out how to do that before we go too much further um because this whole section needs to scroll without without interacting anywhere else and the easiest way to do that is actually just come in a prototype and we could need to put it into a vertical scroll like so but it's giving us a little warning here and the warning says oh yeah yeah no scrolling really quickly it needs to be inside of a group I think so why don't we group this really quickly and then we will say hey take this thing and vertically scroll and this thing here needs to say fix position when scrolling is that the right way to do it no it's not oh man I think I've stumped myself I don't know how to make this thing scroll 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 can you make 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 I do I do okay so this aha I know what it is okay so our group I remember it took a second we need to take the group that it's held in and we need to collapse the group right so it has to have a parent container and the content needs to drip outside of that container so that it can scroll are you tracking with me otherwise it's like where do you want me to scroll how can I scroll the container set so set a master container around it and the content drips outside of it and it will scroll around in that parent container I believe let's see if I'm right you know we should be able to say to our stuff vertical scrolling it should work and we're scrolling inside okay great now we have to do is take that group and we want to clip this and you know what I I know what we need to do it can't be inside of a group it has to actually be inside of a frame this is the power of frames y'all so I'm going to hit f for frame okay I'm going to draw a frame onto my page here let's say right there and this is going to be I'm going to title it chat box okay I'm gonna collapse the rest of my stuff let's find and here's all the chat stuff I'm gonna bring my I'm going to drop if you can see what I'm doing here I'm gonna grab all of my chat stuff that's inside of here put it inside the frame called chat box and now that frame can clip the content and this stuff should be scrolling inside do you see what we just did we brought we've made the Prototype come to life look at that okay so now you can see we have scroll control inside of this Frame and this Frame only and scroll up and down and it looks so beautimous we've done it this is just note to self if you don't know how to do something just stick with it figure it out I know someone says well done I probably should already knew how to do that but hey it was fun anyways it was fun to figure out so you know we can have some real fun and just take all the elements inside of here copy and paste so we have a ton of chat inside of it that's going to let us really scroll through a lot a lot a lot of chat beautiful okay and the more you put in there the more you can scroll love it okay so now chat's working the next step would then be to take this whole thing connect it with our chat accordion and on tap we'd want to we want to move that chat up we could probably do that actually pretty quickly by just doing a second you can turn the whole thing into a component if you want to create like a complex interactive component let's just do it really quick R forward to artboard so you can see okay um so we're gonna say when we tap this thing here we want our Arrow we're gonna have our Arrow flip to show that it's closed again and then we are going to take our chat and oh yeah yeah we just need to make sure that our chat is actually behind all of this stuff and do our chat boxes these groups do they have a background to them that's what we need to know is does it have a background to it um you know what we probably need to do is cross this whole thing we need to put a fill in the background and we need to choose that not primary or that dark background color go okay we'll do the same thing here we'll fill it and we will create this dark background color right here and then we'll grab everything it should be behind and we should be able to just root condense it up and now we'll do our prototype are you ready so we'll say we'll come in here really quickly and we will say hey when you uh tap this accordion bar everything is going to we want to Auto animate this thing right not push we want to Smart animate it up beautiful that should collapse it uh just like so and we'll sure 300 milliseconds that's fine and we come back and hit it again jump to the whole thing we'll just go back the other way it should smart animate back let's see does it work we should be able to collapse our chat and expand our chat just like so we can scroll our chat collapse it expand it oh my gosh we're doing live streaming stuff and some Billy B said scroll Patrol well that's it that's the free course about designing a mobile app inside of figma if you stayed the course and actually watched this whole thing good for you I'm so excited leave a comment down below and let me know what you thought about it do you want more content like this where you can watch a lot of the design process all in one place let me know I'd love to make more content like this for you if you haven't already make sure you leave a thumbs up subscribe the channel I do lots of videos about design and development and the full process just like this one so maybe stick around by hitting that Bell notification icon if you have any thoughts questions or concerns leave those down in the comments but I hope you're having an amazing week I hope you're designing amazing things making amazing things and walking through the full process to make amazing portfolio pieces we'll see you in the next one

Channel: Jesse Showalter

Views: 172,095

Keywords: jesse showalter, jesse showalter design, learn ui design, learn ux design, figma tutorial, figma tutorial for beginners, figma auto layout, figma prototype tutorial, free figma ux design ui essentials, free figma templates, free figma tutorial, figma course for beginners, figma course free, figma for beginners, figma basics, ui design, ux design, figma tutorial for beginners in hindi, figma ui design tutorial, start with figma, figma tutorial app design

Id: 84ZRDm3CEeI

Length: 235min 1sec (14101 seconds)

Published: Wed Mar 01 2023