Build it in Figma: Designing a cocktail recipe mobile app [Part 4]

now it's saying it's connected I just wanted to check and make sure that all the audio levels are good before I use my mouth to say words so if y'all could just check in give me a little comment tell me you're amazing or whatever you want to say that would be awesome let me know if the music sounded good it's not deafening and then we will be starting so so shortly hey there a strict good to have yeah so anyways I just wanted to plug designer Dennis Cortez for this music also known as core do Co r di oh he has made this music and we're streaming it and it's wonderful and I love it and I think it fits works out well for this stream welcome to build it in figma I'm Roger King I'm a designer advocate at figma and I wanted to go ahead and bring you into the last episode of this build it in figmas so we're doing these in series the series are gonna be three each and this is our third one so you can always go back and look at previous videos to see how we did what we've done we've done some pretty fun stuff so anyways just to give everyone a real quick catch up and I will be really quick here's kind of our style guide now it's not like a proper style guide I'm not even sure if I know how to do a proper style guide but I got some photos that are just some good juju to look at here I've got some inspiration which is kind of like an art deco ish style we've also made a lot of really interesting things and by a lot I mean just a little because it's a pretty small app so anyways we've got this idea of a Auto layout in bulleted line we've also got this idea of a ordered list item this is going to be for like recipe steps yes we're building a cocktail recipe app and so we've got this idea of multiple steps here so it can be like one two three do this to this do that we've also got like a media item which is just a picture and then we've got this idea of like a media card something maybe we put text on it I'm not sure where we're gonna go with this design so I just kind of put this out here I've got a text input with like a little helper area on the right I just called it a slot it's hanging out on the right-hand side we've got this this button here this button component that is all a yummy-looking and has that super-fun art deco-style yes we're using gradients don't judge me we're only using a few we're using them sparingly like salt Bay just a little bit of salt the other thing that we've created is we've created some really fun icons so I try to make these have a little bit of like an art deco ish style now not all of them are gonna fit that sure some just like it look like an icon with a gradient on them but this little cocktail martini glass I love and it kind of symbolizes one of the cooler icons there I thought this one was pretty fun I made this today this is like a back icon but instead of just like a classic we'll just go ahead and click in here and delete this out instead of something like that I was like hey why don't we do something like that how fun is that we've also got the notion of an Abba nav item which has a label underneath it to make things just a bit more usable and then we've got this nav bar here so Handel asked can we have the figma file yes of course you can you never figma file I would give it to you I will put it on the figma community when we're done with this stream I'll go ahead and try to wrap it all up and make it look real nice and pretty so that so that everyone's ready but yeah of course you can have it that's the idea here and in subsequent build it and figma streams we're really going to try to do that we're gonna try to give you something that you can go in and dig in like figmas wonderful because it's all in the cloud it's a single source of truth and the same file like if I publish that file everyone will see the same file and it's wonderful because I can do something like just give you a link and boom you of the file it's all in the browser it's amazing it's highly performant I think a lot of fears about figma being in the browser is that it's not highly performant but I've been designing in it for like three and a half years and it's been amazing okay I've got this header bar for a mobile app and it's got sort of like a left icon area a left icon frame it's got a right one and then it's got a centered title you can deep these things apart later these are all things that we've created before we also have over here color styles so we've created a lot of different color styles and once again by a lot I mean just a little we've got like a primary a secondary color we've got some accent colors that accent is that gradient we have a background we have some colors and these are these colors here that we're hoping to use throughout the app I'm not sure if we really will I'm kind of settling on a little bit more minimal the idea is cocktails are these old ancient art but they're getting refreshed and the idea of the UI and the typography is old meets new so we've got this sort of like Oh more old-fashioned looking serif for a header but we've got this body font circular which is very modern and geometric so we're trying to kind of juxtapose those two things together all right so let's step into the app all right so here's where I'm at today now I created like I wanted to create this like fun vibrant color scheme I wanted to have this photo here on the login screen I've brought in a few different fields here I'm thinking that primary color might be this green but that's kind of like our actionlink color so I'm toying around with that I've got a sign-in button that's all beautiful and wonderful and looks Art Deco II Brian Smith asked what's the what's the font in the header that is way fair way finder cf wayfinder cf it's a cool one my buddy Ryan at dribbble actually told me about it and it is amazing all right so let's just kind of examine the state of where we're at so previously I was wanting this background color and I wanted to be like a little bit more old-world feeling but now this tan is starting to feel not as modern to me and so I want to update it the cool thing about this is I was experimenting in this white but now I've got like this this drink detail card I've also got this background here and the cool thing about using styles is that it's all linked to the same thing so it's essentially like a variable and once you change that variable as long as things are linked to it for instance if I click on this drink detail this room t-tail frame you can see this is on the house background it is linked I can unlink it here if I'd like to or detach it but I'd like to go ahead and edit this out I don't think I'm gonna do that tan call to this on the house background and I can just click this little edit knob and I can change this I'm gonna change it to white now the awesome thing that just happened is that everything updated now I do have an on the house white color I may use that I might just want to know to use the color white for something but I do have this notion of a background color as well and you notice that when I did update that that all of these updated everything is updated across the board let's go into the components let's double check that we didn't have any weird situations where that tan color is leaking through and it's not we can always go back to it but let's just make sure that everything is bound up to that style this one this editor's header is actually on that house white I don't want it to be bound to white I want to be bound to the background let's check that navbar okay this one's not bound at all so if for some reason I was in this app screen and I changed this background of pink you'll notice what's happening here that this will stand out and that's no good or if I change that background color back it won't work so let's just test changing at the background color once again let's just say we went to red you can see what's happening here all the backgrounds are lighting up with the bound linked color so we've got a little bit of work to do this needs to be changed to the background let's go back to the components and let's go here I think we're pretty good now and we're gonna go back into our app now one thing I wanted to share with you today is sometimes when you're in this creative mode and you know you have a lot of things to do you might have to have a reminder list or a to-do list somewhere else I really love and I've just started using it it's this new little plugin called to do if you just go on to the community go here the community and you just type in to do and you go to plugins you'll see right here simple to-do lists strangely this one doesn't say it's installed we're gonna install it again all right now let's come back to here now if I right-click and I go into plugins and I go to to do it should load up the to-do list and boom we have it now I don't know why I didn't show that it was installed there might be a bug in there somewhere but you can see that it's right here and this is my little list of to do's one thing that I like about some of the plugins is that they're utilizing this thing called a plugin relaunch API a relaunch API essentially the plug-in relaunch API essentially attaches data to your document and that way if you'd like to go ahead and add a to-do list in here and you want to share this with somebody because figma is all about with working with other people they would see something over here that says install to do essentially the plug-in real ant launch api tells your document your figma file hey there's a plugin that's used with this file and so anyone that comes into that file after now will see that go oh wow I should use this with this for instance you may see something on you may have heard this or seen this on Twitter if you type in Catan or if you type in Google figma Catan you'll see this file this figma Catan file here and I am sure I have not downloaded it but if I go to this playable in figma one let's go ahead and watch this you can see right here that this already has some information right here roll two dice so if I roll the two dice it'll go ahead and roll them so they were right here boom reroll selected dice this is using this is a plugin by tom lowry this this plugin here also uses the relaunch api so that way you know what's attached to this there's some functionality attached to this you can actually create figma games doing things like this this is really rad as well I feel like it's fun to highlight this Figment Catan file in fact I will go ahead and just go and get that for you because y'all probably want this so badly so here we go there's that figment Catan file you can get in there see what I'm talking about with that to do relaunch API thing all right now back to the cocktail up alright so I'll probably need a little bit of feedback from y'all I would love to know what you guys think all right so one idea here and I'm just kind of slapping around some stuff here one thing we could do is just try to create like a ListView like this I think the photo is really important especially if you want this to be like a real nice real nice real nice photography really nice looking cocktails they're so beautiful umm we could do a list of you like this and I just kind of want to get a vote from you all whether or not we want to do something like that or we want to do something a little bit more like this so let's just say there's like a grid view and you've got drinks like this and you can just scroll through that we also will need some kind of search as well hey Shana Len good happy end Shana is a very good friend of mine Sean was a very good friend of mine and she pulls her the streaming she's an illustrator I also want to point out and you may have seen this just kind of passing over I do want to point this out there's this brainstorming UI kit now I loved this file because this thing is absolutely packed with amazing things like I mean I just let's just scroll this down like this is one thing that I think maybe it's a little bit hard to tell about that community files that are shared is oftentimes you see something like this and you think to yourself you think to yourself like oh this is maybe just like an iPhone mock-up but it's not that it's so much more all of these assets we've got icons we've got like all kinds of things and it's just great and I was doing this today because I was just curious just poking around in here just seeing all these things these are different types of menu screens these are different types of like menus that you can add this is like a slide-out menu this is like a slide down menu potentially there's all kinds of great things but it's just absolutely absolutely packed even from a standpoint of if you are not if you are not trying to like replicate this UI style doesn't matter get in here all of these things are like very smartly laid out they're all components for instance if I go to this component and I go to the master component I'll be dumped here on this little page it's so red and this has even given me some inspiration too but maybe the cocktails could look like this so I'm just gonna snag this little fella I want to go ahead and just share with you also so you can see the magic and witness it all right so let's go to brainstorming UI here it is lots of downloads this is by an awesome figma designer named Chris Muir I'm not even gonna go for the last name because Ladd will are not too big he's got all kinds of great assets here so I would absolutely suggest coming and checking these out this brainstorming UI stuff I believe it was this one here I'll go ahead and just dump this one here for you to look at so I was looking at this today very very cool oh there we go took a second to copy the link I've got it I've got it alright so I would love for you to be able to follow along if you want to and go into that file duplicate it for yourself check it out witness the glory love it work with it okay so we went back to what are we going to do so do we do like this little listy grin thingy or do we do a big grid I actually just got like super inspired I know this is a story hey it's my up I could make it out I want to I kind of like the idea of maybe when you're taking a picture of your so I'm thinking this I'm not sure if it's true but when you're taking a picture with your iPhone and oftentimes when you're making a cocktail I doubt that you're like breaking out your computer and electric DSLR or something like this so my thought here is maybe what we do is we take inspiration from Russ mirrors file here and this story graphic and my thought with sort of the iPhone is that it could be more vertically oriented oftentimes a drink is in a taller glass and it may not be all the time sometimes those whiskey glasses are a little shorter but we're gonna go in and follow that for a little bit of style so I am going to come in here and this is the beauty of I love saying this is the beauty this is the beauty of building and figma is that we get to just you can see you floundering and and being exactly how you would be as a designer all right so we're going to keep this and just kind of see how this might look and work I'm gonna go ahead and turn on my grid here that's a control G and for all of you that may want to see those keystrokes let's just do that again control G here right just one second okay so now we have this grid on it's just a single column and it gives me an idea here now this is the stories view and this is meant to be something like this here we're not going to do that here my drinks well actually maybe we are okay so here's a couple of ways that I'm thinking about the way that we can grid this out way number one would be something a little bit like this so we expand these things out here and we just grid them out this way so let's just we're just toying around a little bit so don't judge my prettiness don't judge my grid issues okay so it could be something a little bit like this so this is one potential style we have the list style let's just keep on working with this stuff so let's take all these and just move them off we're gonna go ahead and duplicate this alright here's another thought for us little food for thought we can see that Russ Muir has made these very scalable like he's really worked with those constraints in a really cool way which I like alright so then another potential way of working with this is to do something like this now you may be thinking Raji why are you just doing this like this like they can't see that there's something over there it's a great thought I'm glad that you thought it for yourself my potential way of thinking on this is like let's just take this header here and we could potentially like I'm thinking over here I'm thinking I need some votes on this but I'm thinking let's just take a little bit of like Netflix inspiration like recent cocktails yeah and maybe those you don't even have to be within like ones that you favorite it right now we're working on it we're just working loosely so bear with me as I don't lined everything up the next thing we could say is something like whoa no my favorites and then we can break it out even further I know that sand is not a cocktail for those that are just coming in I know that's true we'll work on that the next thing that we could type in here is maybe I don't know maybe this is gonna be like a tiki tiki drinks tropical cocktail something like that all right all right so here's sort of my the ones in the running and then the fourth way that we could do this is to do something more like this and these may not extend no they didn't really extend too well and that's okay we'll just take this as inspiration just kind of get some ideas this could literally just be a feed with a search bar above it pet would come down a little bit there I'll absolutely use out of labs right now I'm actually just throwing down some ideas very quickly just to see Auto layout is pretty easy of course you can just take all three of these items throw them into Auto layout shift a will do that if they're vertically stacked it'll automatically sense that and of course if I want to use like base eight spacing at you type in sixteen and we'll space it out easily so I am going to just kind of pull the audience on this one and just see what we think would be a really good way to go about this what do we think would be the best layout for this and I think we all know but I'm gonna just wait for a second get my air conditioning working because it is overheating me in here all right so since we've had no responses let me see here for maybe my chats not coming up with YouTube hold on one second please all right there we go I love it all right I love the hecklers I love the hecklers you can definitely knock me for not using Auto layout I will be a teachable student by you as well I promise this okay so my initial thinking here is that this one is just it's I don't you've got a you have to be banking on amazing photography on this one and it feels like there's not really any way to categorize them it's just this long feed sure it feels a little bit Instagram ish but it also just doesn't seem to me like this would work out very well in the long run so yeah there's just no categorization there's no way to feel like I'm putting it into the right category so that one's out thank you all for the votes this one here is pretty interesting I like that you didn't get a lot packed into the grid view here people are saying be and I'm wondering which one be is this one here I don't like how left heavy it feels I'm just gonna be honest so I'm gonna be done with this one I think we all know what we're doing so it's really between this one of this when I like this one I'm gonna follow this little path here we'll put this one up here just to kind of just over here know just to see just to see all right I'm gonna turn off my grids somebody go ahead and control G to turn them off after it liked a strip like the last one shuttle likes the big image one the only thought I have on that is that with UGC with with user-generated content like people are are adding their own photos I just don't think that the photos are gonna be like that amazing and so you're taking up a huge screen what if they don't want to take a photo of it what if they just want the recipe like how well does this how well does this do if you don't have one so I'm kind of angling towards this one okay alright and I'm gonna go ahead and turn off those grids because I don't want that little red stripe affecting the way that I'm designing all the colors alright now it's time for Auto layout first thing we're going to do is we're going to take this feeds card thing we'll go ahead and roll with it yeah good roll with it I'm gonna take this and I can go ahead if I want to I can copy it base into components but the other thing I can do is I can just go and move it to another page so move to the page components so I'll do that when I'm ready but I want to keep it in line so I can see what's happening right here I do this a lot just to see the context of the design what I'm doing this is great it can have our avatar right there perfect let's see all right I don't know if time ago is that big of a deal so we're just going to rip this out we're gonna rip that out of that component we're gonna move this down here the other thing we're going to do is we're going to go bind this textile because that was an SF Pro and we're gonna go ahead and set it to the body text here actually we're gonna try the title test and this may not work out very well so go ahead and set it to the title text and we will break that a bit we're not gonna have it that big and we will see how well this works that say like maybe a twenty point font I think it could work let's go get a few sample cocktail names any of you have any cocktail names throw them at me but let's see old fashioned I just want to see how this copy is gonna work in here seems like it's okay we can also end up if it goes into multiple lines like that we could do something like that which i think looks pretty elegant now one thing that we're noticing all of a sudden an off the bat here is the fact that when I did that second line I just held shift enter to force the return it's going down there so what I'm gonna do here ooh a French 75 all right write some cocktails down if you have some great photography for that just sling it in the chat and I will pick that up okay so what we're gonna want to do with this card is we're going to set this to a bottom alignment so we'll go ahead and set it to left and to the bottom and the way that we can see that this works is if we start expanding this card it should do that which is great the other way that we should see that it works is if we do that shift-enter it should work and the reason it's probably not working is that we don't have at all so bottom alight let's see if this works again one last try all right we got a winner all right great work Roger thanks man that was awesome all right let's see what else Russ Mears down with this so he's added a 60% stroke on the inside that makes a lot of sense you don't know it for some reason this is gonna be all white photography or all not I'm going to add a different trick to this this is something I learned when I did the redesign of dribble and I liked the effect and I'm going to do it this little image we notice one other thing about this is when this card scales that image doesn't seem to be responding right so let's just put that at the left and the top great now let's just kind of play with it yeah all right I'm into it okay now I don't know if it's that important that the person that did this is on here but I think it could be I think it really could be I think it could be really cool because like especially if you're friending in this app you might want to be like hey I know so so they're awesome they make great drinks I want to see what they've got so let's keep it there all right now all right let's get in here all right let's go ahead and just throw in some images so I don't feel like I'm looking at sand all day and we're gonna rename this component to we're gonna call a cocktail card great and then of course these should all update over here in this left-hand side bar you see that they're updated to cocktail Carter awesome alright the other thing that we're gonna have is a problem was just test this out I'm gonna add it in a white fill this is just gonna test out for usability and I'm gonna turn off this image here now Russ Mears also done a really great thing here where he's also put a 30% black lay on top of this and that way it keeps the text usable on top of it very smart move love it but for now we're just going to turn it off and we've noticed that even with a white white photo it's not going to work this white text is not going to work on top of it so we're gonna do a few things one thing is we're going to get some more like usable photography like photography that we might actually use in the set let's go ahead and use this one this is interesting here because it's got like some white on the bottom so I'm just going to come here go to the fill copy that fill just by clicking over here I just want the fill I don't necessarily want to copy the image object I'm gonna come back here the app alright and I'm just gonna paste it in we can get rid of rust mears and sorry say bye to the sand another great trick here is if you want to adjust the crop that's a very tall image I can hold down option and double click and I can actually just go right to the crop UI okay so we can see now how badly this white text is behaving it's been a very bad boy and so we want to change that one technique of course would be to go back and turn on that 30% overlay what I don't like about this is that I just feel like I just took all the pizzazz out of the image all those beautiful colors are now just dark for the take of sake of the text now we could absolutely change this by just moving that text down here but I really like this look I like this appearance I do think that we need to potentially like tighten up that tighten up that that line right there all right so I'm going to get rid of this say bye-bye to that and instead I'm going to do a linear gradient right now on the tool there's not a way to just do a flip on that gradient but there is a way to do this so I can just kind of drag drag alright at least with this I feel like some of the pizzazz is still there at the top of the image I've got like a bunch of that color showing through and I like that quite a bit I can also adjust this to maybe not take up the full part now one thing you may notice about these gradients would dart them up it can be pretty harsh so here's a really interesting little tip for you is that if you'd go out and look for easy ingredient on the communities or in your plugins just type in using gradient it's a plugin and I hope there's gonna be an update soon it's this one here by Matt and Kushner what this does and actually I'll let it actually perfectly illustrate what it does so before you can see it's like this harsh line it's because it's a linear so it's like a ramp right imagine taking the skateboard down a ramp and then as soon as you hit the bottom it was just a straight line and you would hit that bottom in bottom out since we're all professional skateboarders and I'm sure that we know this already I didn't mean to teach too much on that but on this one it's not like a linear ramp just like a triangle it actually kind of slopes down and that's using an easing here so it's got this embezzler v' editor now let me restate that it has a Bezier curve function on it based off of what they believe is the most pleasing gradient what I'm hoping comes out is are these things here the ability to kind of pull those Bezier handles to kind of get your own feel on that but for now we'll just use it to showcase that plugin I'll go ahead and copy it for y'all and just paste your ride in all right let's get on it we've got a lot of work to do today all right so we're gonna rush through this pretty fast but we're gonna go ahead and go to plugins here and we're gonna go to ease ingredient don't mind all my plug-in mess over there but you can see that it changed the quality of that gradient and the next thing I'm gonna do is I'm gonna just rip that gradient out of there and I'm gonna create something else in here I am going to just draw a box I think I'm gonna draw box okay now this box is going to sit on top of this image here we'll go ahead and this cocktail card I'm going to change up the anatomy up a little bit instead of a 10 on the radius we're just gonna get rid of that and I'm just gonna get rid of all mention of radii there we go for now I'm just gonna go with the flat I know it's not pleasing I know it's not but right now I'm thinking this app has a lot of like hard lines like old-fashioned I'm thinking it's not all curvature I'm thinking it's an old meets new kind of an apps we've got the curvature of the fonts and I'm thinking with with regards to the cards me would just go like we did Gary and we go in the Wild West here and we just do zero border radius it's a wild thought I know but here we are making it okay so the reason that I put this linear gradient in here is for a very good reason if you actually look at the anatomy of this East gradient it's pretty friggin wild it's all over the place like I am NOT gonna be able to edit this and more moreover like what if I wanted to change this color to like a brown or a white I am going to be in designer hell so what I'm gonna do here is show off a little technique that I learned and I can just duplicate this rectangle boom right over here command D to duplicate which I wish that it would duplicate all right and what we're gonna do is we're just gonna put a solid fill on this so boom let's just get at it I'm gonna move to my local colors let's just say we wanted to have a green overlay who knows and I'm gonna group these two things together yes you're probably knowing exactly what I was gonna do I'm gonna take this linear gradient and I'm gonna set it as the mask oh that was amazing yeah so what's cool about this is now I can actually use this easing gradient without having actually having to like edit these colors just because it is transition from a transparent to a fully opaque value he now can become a mask so that's great you can do the same trick with pings looking up an image like that just put it underneath make it the mask so I'm gonna just call this the overlay and I'm not sure how good that's gonna look like what's really good with this one but we'll see the other thing that we can do with this overlay is we can actually adjust opacity values to say like oh no we only want it to be like buh we don't have to actually go into the linear gradient values for each one imagine that imagine how crazy that would get like I'm in here and I'm like okay I want to adjust each one or like even this one right I can adjust this one that's so much easier so I just don't want to mess with that east graded letter B letter B all right now we're gonna check out Russ Mears little effect here all right he's got this 60% stroke to the side I'm gonna move this to a 1/2 of a pixel because I'm feeling very very actually in fact I don't even know I'm designing a live on the fly like a wild man okay maybe we use this do we do I don't know do we use this accent mark and maybe put it at two maybe we've got like a really opinionated app that's like like it has that gradient on it or maybe there's some kind of Association to another brand color that looks cool like that alright that was all cool that was really fun but it looks really ugly and so I'm not gonna do it alright and I have some beautiful piano music playing that I am NOT vibing with right now so I'm just gonna get away from that as fast as I you mean like an alright alright this is great let's go ahead and set these up now so we've got this card we can actually create a row if we want to create a row too so we're gonna go ahead and go shift a on these just select them all they're gonna all go into a auto layout frame you can see here we're going to put 16 pixels keep everything eight or keep everything base eight because we're cool like that also we're very smart designers and that's why we do it because we know that / 2 is 4 and 4 you know it always it's never a half pixel feels great all right we're going to align these to the top all right so then the next thing we're going to do is we're gonna take this header I'm not sure if we're gonna use this let's just flip-flop to the body here and let's go to the body text we made it brown but the more I'm using that Brown I am hating it all right so what I'm going to do is I'm going to create this as a group here this will also be all the way out I'm going to shift a to make that an auto layout I'm gonna wrap it essentially so I might even make this thing a component just because I am very smart so I'm going to take this I'm gonna turn it into a component I'm gonna call this a row why not a cocktail row all right so we're gonna take this sucker we're going to bring it in and we're just gonna duplicate these things down like this yes you might be asking Raji are you going to turn those also into an auto layout yeah yeah all right so then this is gonna be your cocktails I can I don't frame name a lot but you know if that's your style cool do it I'm gonna make these uh we're gonna tow around with some values 16 pixels the problem is 16 for me here is that the gap between and I and I learned this a long time ago let's just even make this let's make this even more obvious look at this here this is what Hulu app struggles with a little bit in my opinion is the fact that each of these rows I don't know is this is this above is this is this related to these or is this related to this and the effect it gets even more dramatized when you're like this your little scrolled up that screen and you're going wait it's okay these are the no wait deep okay let's say these are tiki drinks it's just not working for me so what I'm gonna do is just make the spacing more for each one the more i krama ties that spacing and space it up further the more this this design becomes apparent by proximity that this title is related to this and i want to make sure it's usable man I don't want people to get the wrong the wrong idea here they need to get their cocktails they need to get them down all right so you've made this row the cool thing about making this a component is I can come in here now and I can go boom duplicate duplicate and look this whole thing got wider if I turn this on or turn off the clip content you can see that it's going way over there all right all right so let's see what else we can do here I'm thinking when this school is down here I've got a little bit of an issue here with my nav I want to extend it and make it a little bit taller so I'm just going to instead of just back up a bit instead of just pulling it up looks like it was made in a smart way so I don't need to worry about it all right so moving on I'd really like to build a showcase up some prototyping so I think we're gonna go ahead and start getting over there we can move these components but I don't want to move them just yet what I'd like to do is have this idea of a card boom and this little guy goes as soon as you drag it over the frame let's just put this frame on top that it kind of drags up like that right now autolayout screwing everything up if I want to keep this and I kind of simulate this going up and down without it going into the frame I can always actually hold spacebar as I'm over this and you can kind of see that it won't go into the frame which is great so this is the effect that I want I want to be able to like tap a cocktail and whoop this little sucker goes up this is not actually an iOS screen this is actually an auto layout framed auto layout frame all right so let's go ahead and just test that prototype out I wanted to teach some of that prototyping ability and this in this little fun session all right so I'm gonna try to just make this the same width as this and I can just do that by aligning the frames here and then doing this some of these things are probably responding poorly we can always work on that a bit try to make sure that we've got our grid set up right we can even take this little frame here this is actually a component but we can actually put a grid on it if we'd like to all right so I'm just gonna take this drink detail put it right up here yep my bad get that right up here that's another component sometimes I'll just put them on the left to right whatever just keep them far away far enough away from your design but I want to keep them around so that I can see them mr. Stephen just said I use a plugin called component utilities to create a master component from the selected layer that is a great idea I love that mr. Stephen if you would plug that that's awesome I find I'm always in the situation where I'm designing in the context and I don't want to lose that context I want to see the spacing and the elements around it but then I end up getting to this weird-ass place where all of a sudden I've like pulling the master out and bringing you know it's weird it's weird okay so let's just check our two news real quick and see where we're at all right so what have we done okay we did a drink card cool drink list item sure a drink detailed view it looks like we're pretty close there we could spend more time on this but I'm going to go ahead and just say this is done for now what else do we want to do Oh drink prototype transition awesome all right let's get to it all right so this should be a pretty easy one for us all if I go to the prototype tab here I can just double click on in to the object that I want and let's say it's this one here I can just drag that handle right on out to this instance and I can put a behavior on that so my behavior for this here is going to be like on tap we don't want to navigate to it what we want to do is open it in an overlay we want to slide up now we haven't designed the little handle thing on top to kind of give you the affordance to pull down but I love that pattern in iOS where you tap it it flicks up and then you can just flip down flick up flick down as opposed to the back button thing I know that you can always slide left you can always like slide back and forth but I wanted to try this out so we're going to go ahead and do something called in on tap open overlay and so it's going to open this one and what we can do is say we're gonna go ahead and do manual so if we wanted to place the overlay manually the great thing is that we can actually do this like this we can pull it up like this how far up do we want it to go we can also put a background overlay we want to dim this out a little bit because what's happening here we click this prototype line we can see that once we hit play on this thing what if this thing went up this high let's go ahead and just test this out all right so we're gonna tap that and we can see that it just opened up now we have no affordance to know that it's there we also don't know that this header is actually behind it which it is and this cocktail is over it so there's just a lot of weird issues with what I just designed there so what we can also do is put add background behind overlay and we can put it to a color now let's go ahead and we're kind of thick in this green color so let's give that a try and let's go ahead and dam it out just a bit and let's also say sure if you click outside or tap outside we can go ahead and just close when you do that so let's look at this now this is what happens here when you click this oh it kind of did this out so you can kind of see a clear delineation sure we can actually test this on the fly maybe we want to ramp that up come on back to the project app cool maybe the greens not good maybe they think I don't know maybe their people are used to like that darker or black color we can work on that later but we've got it working now now what we'd like to do is actually tell the overlay here like we want this thing to be smooth and cool so instead of an instant we'd like it to move in and could have a dissolve and it's gonna be like a fade or we're gonna say move in and we can say we want to move it in and these are great right because you can actually click them and a little previews of how they're work well this thing kind of slide over from the right or the left or will it move in from the bottom let's just go with the simple move in from the bottom we'll go back and try this out again pretty rad that's a little slow for me so I'm gonna go ahead and go down here and go to maybe like 150 let's give that a try okay that's pretty rabbin pretty rad alright so this is our first example of that what I'd like to do now is I'd like to be able to do some kind of scrolling animations on this kind of show up what that's gonna look like now I don't want the header to scroll but I do want this to scroll so let's go ahead and do that I'll bet you all know how to do that but let's just go ahead and demonstrate it so I'm gonna put in on this one favorite cocktails now I always like to work with some real looking stuff so we're gonna come back here and just grab a few like a few images for ourselves up coming here back to the app alright so on this one we'll say recent we'll add in a different image up let's come on in here alright we had a problem we actually clicked into this overlay because it was the first object in the stack and so we're gonna come back up here and mess with our master we did something wrong here so on the Overland let's just lock that layer we don't really want people to mess with that layer what we would like is to be able to get to that image so let's click here again I'm holding command and clicking in and I can see now that I've got my image perfect I'm gonna just slam that image in here you can actually see that it's stacking up here who knows what this thing would be called let's pretend as if it's a French 75 great and we can just add in a few images like that just to get an idea of what this thing is gonna look like now you can see I'm just going back and forth pretty easily now because I'm just copying those fills out this is all dummy copy this isn't stuff that we're going to use in the future but these are just an idea of what this at me look like I want to just give it a little bit of fun jazzy content to make me feel real cool about my drinks what is this one let's just call it a breakfast in mosa now we could probably come in here this happens a lot as I'm designing a system and I'm like ah I would love to be able to like have a some kind of recognition on this as to whether or not I could favorite it normally without components I would be at a bit of a loss of Ian here this is exactly what I'd be doing I'd be over here like this oh man I've got this heart okay you know I got the heart awesome I'm gonna go back to my apps maybe I'll type in assets and I put it in a heart hopefully it named it heart awesome there it is all right I'm gonna put it in here and then I'm just sort of like slamming these hearts all over the place no no no damn it we are not going to do that what we are going to do is put that heart right here I'm going to put it in the component because we want it everywhere who knows where we would put it maybe here oh we can go ahead and we can go ahead and move it in here I have my Niger mountain set to eight we could also come in here and put a layout grid on this master component so this is pretty cool right we can just come in here and say I want an 8 pixel grid I want to go ahead and maybe darken up that grate a little bit and now you can see lo and behold that grid is alive everywhere which is really really handy you can just keep those little grids stored in your components per component not all components need exactly the same grid structure for instance if I'm working on this and I have this single column 300 forty-three pixel white grid that's not gonna work for me in here maybe this makes more sense to have an eight missile grid so I'm gonna take this grid and I'm gonna turn it off but I'm not gonna delete it because I want that thing to be available in that component you can see here I've also got it turn on in my icons as well okay with the icon what I'd love to do is maybe fill it with something oh we do have I did some trickery on this icon you can see here that I did kind of us the same thing here where I've got this vector it's masking off that way I can put all kinds of weird crazy different like strokes and everything in here and this is a mask for a solid shaped thing above the only thing I forgot to do there is that I didn't get this thing ready for primetime which means I want to be able to lock the stroke but I want to keep that filled area up there so let's just go back and see what that may do for us all right so now when I select this the first thing I hit is this fill which is perfect because now I can adjust the fill of this thing I think we might just go with a simple white we may need to have some kind of a stroke around it I'm not sure but for now we'll just leave it all right you going to turn off grids because I'm getting a little confused here all right one thing I noticed is that this is not set to the upper right it's on the left top so this needs to be on the right top and we can see here that these are a resized version of it so I just need to make sure that everything responds accordingly let's just go check this out here is this on the grid let's go check out the round avatar thing boom we turn it on it's looking pretty good except for it's not good there but now it's it's good it's real good and let's check this here too let's make sure that this is lining up exactly how I would hope it do all right and we're at bottom alignment that's great now we might have to do some optical aligning year because this is technically it's got to probably be a little bit more like this in this case the grid falls off so we're just going to eyeball it here just for being quick sake all right turning off grid scan awesome here we are once again I do feel like that text is a little tight in there I might have to go in and just it just a bit but we've got this now what we're trying to do is create a scrollable list of these items and so I may have architected this wrong because I've got them all on these components but let's just see what we can do now my first attempt at this and I've never done this never done a live on stream never done in life is I'd like to be able to take these things to say that this cocktail row is actually a frame but I'm gonna take out the auto layout from it the reason for that is because I'd like to be able to manually size this frame to actually be exactly the same size as this frame here so I'm going to go ahead and manually size it there and then next what I'd like to do is I'd like to be able to see that this thing is extended past it if I want to see where it's going I can unclip the content for a second just see where it's at okay now what I would like to be able to do with this is I would like to be able to have the behavior of this cocktail row that it would horizontally scroll like I said I've never done this not in this way so I could be horribly ashamed live on string one thing that I did realize is that this cocktail row with horizontal scrolling it might actually make this also horizontally scroll so I'm not quite sure about what I'll do there but I'm gonna make an attempt at just coming here on this header and say fix the position when scrolling I have no clue what I'm gonna do but we're gonna try it alright so now we're here we forgot that this is gonna little bit of a buffer here so whoops my bad actually that's not my bad at all what we'd like to do was actually have the scroll if you put your finger there it should be able to work as well so in reality we should be able to have this thing be like this so we're gonna have to do is just adjust this component here and just bring it in by our spacing amount all right so everything's working fine here let's give this a try on prototype cross your fingers I am not even sure how this is gonna work oh my gosh so what I did there is I took a component I made in a frame in a scrolling frame with a fixed child inside of it and it's got a hand it to figma on this because that's awesome it just worked out of the box so this just works but that means that it's because this behavior is locked into the component what that means is I didn't even have to set scrollable regions up on each one of these it's just awesome I would love I would love if affordance of just having this half cutoff card is plenty good enough plenty good enough all right let's continue alright so now what we'd like to do is make this app scroll vertically let's go ahead and just duplicate this tiki drinks thing and just let it go down so duplicate it now the cool thing here about this one way to do this instead of me always going and clipping on clipping clipping on clipping to see where this to see where this content is and if actually created the content another really good hint that I got from somebody the other day is just do command Y for outlines and now you can see what's happening in there you can just toggle back and forth really fast to see what's happening alright this is perfect now if I hit go on this nothing happens I can't scroll so what I want to do here is I want to come to this parent most frame and I want to go ahead and say in the prototype panel go to vertical scrolling cool that's great but as you may think it tells us exactly look this is the beauty of computers they do exactly what you tell me to so the problem here is that all my other stuff should not be scrolling but I didn't tell it to so let's just tell it to and we learned this in the last step which is let's take this little header item and let's just go over here InDesign it's interesting that it's in the design panel I feel like there's like this relationship between the prototype panel and the design panel such that like this fixed position when scrolling it's in prototypes so it makes me think it should be in there anyways I did a little bit lost in time just remember that it's probably over here okay I'm gonna fix the position when scrolling here but also nobody wants their menu moving away from them let's also fix the position when scrolling on that now let's just not even fire up the prototype again let's just keep this thing alive this is awesome right I love that I don't ever have to like hit build or hit refresh or anything I'm just going back and forth how does it feel how does it feel do we like this when I tap that do we like it kind of alright alright let's go back here something I hated about this nav and it wasn't this one it was this one here yeah that's like a little bit deep hairline down here a little gray line get that out of there I want it I don't believe in it alright alright nice diggin on that that's pretty cool now I wasn't gonna design in this aesthetic but I did want to show something kind of interesting if you ever like that effect we're like the content to Scrolls up and it's blurring behind the menu how cool is that that's so cool that's this thing here I'm gonna go to my component and I can test this here and I can even test it on this component instance I don't need to go to the master component I can just come on here and what I want to do is just kind of detach this fill here and I want to go ahead and to change it to actually let's not even do that first let's first do the effect let's really get that effect in there so we're gonna do instead of a drop show yeah we would like a background blur now if we layer blur it just blurs that layer background blur this is very cool it's in web technology it's an iOS it's called a backdrop filter and it basically says only do the blurring thing to the things behind this thing so unfortunately we can't really test it oh yes we can I can just slide that up and we can see that it's working perfectly one thing that you might get hung up on this I've got hung up at a million times is that sometimes you might actually do this actually all all showcase it just like this you might actually draw let's say you're drawing a nav element over here and you're like awesome I love this effect I want to do a background blur and you go up here to layer and you're like well it's not blue this is what why is it not blurring it's not blurring what's wrong I always get hung up on this it's not the layer that you have to adjust the opacity it's the fill so once I adjust that fill opacity you can see that those blurs are coming alive we can test this sucker out live see if we like it let's vote with the group do we like it I don't know do we let's test it out in the prototype and in fact let's go a step further let's go here on this one detach this let's put it at 70% as well and put the layer blur our background blur effect on that boom all right obviously our blur is not enough this is completely like messing with my text a little let's bump that blur up so kind of the thinking here is that you either bump the blur up or you uh or you you either bump this blur up or you're gonna have to like make that background color more opaque so what I'm gonna do here I'm gonna just try both so we're gonna try that 28 and then on this one we're gonna try the opposite just to get a little bit of an effect here so we bump that up to like 90 so here's the difference in the effect come here now we can see that you can still kind of make it out in fact I don't like this that I can actually still read that text that's gonna be harder for people to like consume but on the bottom you can see it's just so dang blurred that that you can't see anything right it's just just sort of like muted tones so that's just a little tip if you want to do that I'm gonna go ahead and put in a solid no way I don't even want to do that I like it what I wanted to showcase it I know I know I had my time in the Sun I had my time where I did that background blur thing I did it on an app I designed it I was trendy I was I admitted I was trying to eat okay background blurs are off ores are off let's see how's it working out oh this is awesome gosh she's got my stuff with water in the face it's great okay look it's maintaining my squirrel position - what's so cool about this is that like I had to scroll like this and then I did some updates and the prototypes still live and active and a happening all right what's next here let's go back to our to-do list and see we're up we're like ride-or-die on this episode we got to finish up the stuffs and a writer died so I have to finish my to-do list today all right add to list I'm not sure what that was nav selected state let's go ahead and demonstrate that and let's demonstrate that demonstrate that with a with a prototype as well change the background did that focus - input we could definitely demonstrate that if we like them but let's go ahead and ask ourselves what does this app look like when it's got when it's got a selected state on it I don't want to do anything like super duper trendy on this like one thing is that the gold could be high lit like this could be that state whereas this one here could be more like a subdued text state something like that or that but not that I don't know if that's gonna work well enough for me I'd like this to be very obvious let's say you're making a drink you've already had a drink like you got a nice little buzz going on but like you just you need to build the note like this this interface needs to be more usable than ever when you drink it so coming on in here I had a wild idea so we're just gonna go and I love that suggestion that someone in the stream ad is like we need to build them edit in line I love that unfortunately we're going here the components page so we don't really get to see it in line and in context one way that we could do this though if you really want to try it something out an experiment is that we can just take this and detach it please everyone don't cry out in judgment I'm just detaching I promise I promise I'll never detach again oh yeah okay so one thing that I ran into with this detachment here is that I probably ran into an issue whoa right now if I draw this into here you'll see that because it's in Auto layout it's a little Trixie because it's like trying to add it as I as I come in so I'm just gonna bring this rectangle out above this thing what I want to do here is just say like what does this look like what if what if it was like a big log of gold oh yeah detaching for me is like it's like I know no because once you do that you know you're going rogue right then you're going off the off the beaten path but when it comes to experimentation I really like to be able to get free of the trappings of the component a component never ever made a good master and I I adhere to that I stick to that okay so we're gonna do is just come back in here just by that divider I'm gonna put this thing here and I'm gonna tie with this using overwrites so I'm gonna try to fill here of like that look that's a really unique that's a really unique style here what we could do here is like I've never seen a big big wash of this gradient like brick like that that's really funky all right so now we're gonna come back in here now because I have architecting these in such a funky way I'm gonna have to do this all right I don't know what do we think do we like this I don't know this crowdsource design over here do we like this okay maybe a potential other style Mona just do a different style on this it's like maybe maybe maybe maybe it's got like a background color on it okay there we go dark may we go pink you can see that I know this I the problem with this is that I want this to be really minimal and I feel like it's not at all minimal okay there's another potential style is that you can do something like that this makes my soul die like very slowly I'm gonna go ahead and admit to you all today that I actually never designed this out ahead of time that means the point of the show but I'm really okay what if this line what if this lying like this or if it was as tall as this so 76 okay we're gonna say 76 on this just gonna drag it and let it and then it got thicker it's like three or something with the one on the bottom welcome to a very professional designer you see that is very professional it Tamizh none of these things are feeling like an art deco e style Russ mirror says why don't you make a new icon just like putting it all the better the class and put it on top of mass or like it please I think that's an awesome idea the one thing I want to do is like if you went away from the UI and then you came back to it say like 15 minutes later after you're done making some drinks would you know that you're in in that area I think that transition animation could help you know that but I want to make sure that that they actually know that so uh I think I figured it out inside of my brain powers I think I figured it out what if we took this icon and I didn't actually set up my I didn't set up my resize incorrectly so you can see here as I scale it down it's not working at all one way to fix this thing would be to come into here on this icon and say the set of left top we're just gonna go Center Center or scale and probably read it most realistically it would be scale now when I come back to this you can see that it's scaling that's fine that works another way of getting past that system would be as if you hit K to go in a scale mode the scale like that well we're gonna fly with this we're gonna fly with this I do like I do love Russ mirrors ideas just like a pink like like that would be so cool if it just kind of tipped over there I don't think we're gonna have time on the stream to demonstrate that unfortunately all right so this is pretty good now one other thing I think that we need to do is find a way to like subdue these things out so let's do this let's go back into our nav and I'm just gonna bring our learnings us I'm gonna make this item just a little higher up we're in the scale mode you can see what's happening in scale mode we're gonna go back to this app we're gonna see how tall was that 62 beautiful we're gonna go to 62 now holding up chin and Wildlife drag is gonna make it so none of those contents inside scale and the most annoying way we don't want them to scale don't do that all right we're gonna line this to the bottom and what we're gonna do for this is we're just gonna turn this off so this one boom visibility's off for now so it's not in everyone by default it's only the current one and then the next thing that we're gonna do in this component is that we want to make like a subdued State what might that look like let's go figure that out just a second now I do want to show you how I've made that navbar once again we're also gonna resize this is 62 this navbar we now want to be 62 as well so we're going to bring that down I'm going to copy this component and then come here okay remember we detach that one now there is a there is a like a reattached instant thing it's like a plug in I haven't used it in quite some time but you can absolutely do that all right now we're gonna recreate this nav remember we had my drinks my drinks and we're gonna type in here we had the search let's see here the other item that we had which we threw it away oh there it is there as Explorer Oh we saved a version up there well I'm not gonna show you now because I don't need it it's all right here Oh I'll line it up and put it on the bottom we're gonna make sure we of course fix position when scrolling one thing for y'all to know if we double-click in here we can come in we can see this icon turn it on for that one now these here what we're gonna do is we're gonna set it to our subdued Texas style boom now we'll change that textile right now it's not looking too subdued but remember on these icons here we use a masking technique we're gonna set it to the same subdued text color now once we change that color as soon as you get used to this style color system in figma you'll all make sense alright that's not true subdued let's go here let's adjust that I am going like that look at us and we can always test out later whether or not that's good enough contrast let's go ahead and do more because alright that's good alright so now we've got this setup we've got this nav here and we want to create a transition to another screen now our screen time is almost up yeah sorry about that background noise I happen to also be in kovat and it's it's a it's a great it's a great thing right now with the construction in the back so sorry for that for all of you I'd like to get one more thing off the ground before we get done with this so let's demonstrate what a the nav transition may look like here so we'll go ahead and just duplicate this here all right we want to bring this one alive on tap so we want to go to the Explorer okay all right all right trying to think I just want to pack in as much education as I can here towards the end of the stream we've got this detailed view coming up I think maybe we should finesse that make that look a little bit nicer we've also got some drag interactions that we need to put in here and I feel like we're running out of time yeah mr. Stephen had a really good suggestion he said we could also leave it out of the component to tab with a smart animate like a shifting effect from one icon to another that's a really cool idea I really love that yeah one thing we could do too is this this icon here could also like animate across the screen that's really hard to do within components and auto layout all that right now is what kind of in a system but you could have it sort of pushed over here like this I think that could be really cool one thing you can do too is like have the gradient background from this and create everything is like a mask and have that gradient shift over there somebody said like maybe we could do a radial gradient here to kind of show that let's just do it probably the simplest one here that I'd like to try to explore is going to be like a shift from screen to screen and the little arrow slider is going to slide over and then at the same time this is going to fade out of this to this subdued color and then this one's going to fade in alright so the first thing we're gonna do here is we're gonna take this accent color I'd like it to be a little darker so I'm gonna go ahead and remember it's all in this style so it's gonna be great I'm gonna darken it just a bit here and then on this light and I'm also going to talk sorry about the background noise I've uncovered on everything and you can too [Music] alright so here's what we're gonna do I'm thinking I'm gonna have to like detach this it feels like it's gonna be too difficult to try to pull it off yeah I think it is so we're going to do is detach this just to just a show if we don't attach it there's gonna be some real trickery and it's not going to be it's not gonna be great it's not really fun nobody's gonna be having a good time here we're experimenting so I think right now we wouldn't have the system if we weren't experimenting so this is great all right so I kind of kind of think about I think the easiest way I would do with like an easy way to like envision this innovation would be that I would just envision the beginning and end States first so I'm going to detach everything that means I'm detaching all of these nav items as well here all of these nav items I'm just gonna trash the one and then select the frame sort of pace in the same spot there I'm also going to come on that subdued text color and I'm actually rip the brown out of it I'm not really liking the brown in there and let's go 25% all right so then the next thing I'm gonna do here is I'm going to go ahead and get this Explorer to have those gradients in it so boom we're going to go ahead and set this to that gradient and then we're just going to the beginning and the end States so we're just going to assign this to the subdued text going from one state to the other shouldn't be too difficult right okay and then the last thing that we're going to do is I'm just gonna pull this out of this nav item I don't want it to be within the frame at all and actually that may affect this one with smart animate so let's just display what it would be like in the frame so if I start just dragging over you can see what's happening that's going to the other frame what I can do is hold that space once again boom and I'm over there which is great now the good thing is is for some reason we didn't have clip content on if we had clip content on we wouldn't be able to see where it was going but hey that worked we somehow stumbled into greatness and I blame only myself for that so now I have a be getting an end state of this navigation what we can do on this is just go to prototype you can actually have this Explorer tab and rig that up to where when you click it it goes here and we can say on tap we want to go ahead and say navigate to and then we'll go ahead and say smart animate right we want these sort of transitions between the two to be automatic let's also make it a little bit longer so we can see it so let's give it a try oh we've lost a few things let's fire back up that presentation but again no one see if it works oh yeah great idea we can't go back because we didn't rig it up over here so let's just rig that handle up right here boom we're going back again the great thing about this is that figma just figured out oh cool cool you're you're going back we're gonna just inherit all this life is far behind I'm a business so look at this let's go to the Explorer boom boom alright we also reject the wrong handle why didn't anyone tell me rude all right and so we've got this here boom my drinks Explorer my drinks Explorer I think that's delightful I think it's really cool that's so great so great so I think this is gonna wrap it up for us on our strain we've got a lot of different things that we uh we experimented that we tried we had a lot of fun we got this thing working with a horrible background color I'm gonna just change that because it's going to annoy the heck out of me I can just click that prototype line if you ever think in prototype that you have to start double clicking and getting down to that object never fear just click the prototype line it'll bring you right there we're gonna go ahead and change that to a darker color or really any color I mean it will just white and blur it out a little bit unfortunately right now with this background beyond the overlay business they will not let us do a blur there so we would have to use smart animate to do something like that well look at that and that gorgeous feels better looks better yep that's great alright so we're gonna check this out we're gonna see what we did we're gonna go back here are what is the Explorer tab look like that's great Explorer would look something like this did these work he's worked they're great they're using components what a cool trick we used overlays and masking overlays it seems like I've had some drink already unfortunately no I've just had water I'm just a wild person anyway we've got this vertical scroll working I think another thing a crazy little artifact in there I think another thing that we could do here now is that we could get that favorite interaction to work anyway it's been awesome building this app we didn't quite get to the finish line but we had a lot of fun exploring and discussing techniques as we went along the way and I really appreciate everyone kind of staying on board and and checking this out with me so thanks everyone for coming in appreciate your watching and that's it for building and figma on this end next week we're going to start building in figma again and we're going to be doing something completely different thanks everyone for coming have a great great night great morning great whatever

Channel: Figma

Views: 8,083

Rating: 4.8909092 out of 5

Keywords: figma, design, ux, ui, ux design, ui design, product design, build it in figma, rogie, rogie king, app design

Id: vTtuEnPk0s4

Length: 80min 54sec (4854 seconds)

Published: Mon May 04 2020