Design 101 Crash Course: Learn UX/UI Design, Figma (6 HOURS!) | Zero To Mastery

foreign have you been bouncing between design tutorials and disappointed by what you're finding yeah I don't blame you but I'm glad you landed here because I can assure you that those days are over you just landed on the best damn design crash course you're gonna find on YouTube bold statement I know so let me explain reason number one you're getting to learn from Daniel shafano who has been a product designer for almost 10 years and has led design for major VC backed companies reason number two this crash course it doesn't just scratch the surface it covers some of the key skills and topics that you need to know to become a professional designer topics like how to use figma from scratch sketching user flows site Maps wireframes plus expert tips tricks and advice that you can only get from someone that has years of experience in the industry reason number three most people are paying for the content that you're about to watch this crash course is part of Daniel's complete web and mobile design boot camp course which is actually one of the highest rated design courses online and has been taken by over a hundred thousand students his boot camp takes people from complete beginners to getting hired as full-time designers so if you like this crash course and want to keep diving deeper then we highly recommend checking that out it's worth every penny and more but that's enough chit chat for me let me hand it over to Dan so you can see exactly what I'm talking about enjoy thank you guess what you have just found your first client and this guy his name is Bruno he has a huge idea they're going to create a new product to take on Amazon you see shopping on Amazon isn't the best I mean sure you can find lots of stuff but the whole experience design there's room for improvement and Bruno that works at Keiko Corp one of the fastest growing tech companies in the world well he wants to take on Amazon and build their own shopping experience and they found you as a designer to lead the charge to design their product their mobile and web presence to take on Amazon now this is the first part of any design project that you may have it's this idea of meeting the client you meet someone that needs your expertise but you're taking this course because you're starting from scratch or you already have some knowledge and you want to improve upon it now because everyone has different skill levels with this course we're going to assume you have already met the client and you're starting to work right away just like we have with Bruno at the end of the course we have some extra bits for you to show you how you may find and get your first clients but we also want to start with the actual practical designer things to get started on the course because I know you're getting excited to learn so the first step that we're going to take is to learn the skills and have that dream portfolio by the end of this course so we're going to start designing the product that Bruno wants and eventually have a finished design system and portfolio so that when we come back to this idea of meeting a client you already have the portfolio and the skill set needed to start looking for your first clients whether it's on a freelance website or just an existing client hooray but here's a quick thing to get you started when meeting a client the whole thing is about solving their problems when you meet a client can you solve their problems are you the person that can take what they say and wow them are you the expert that they have been looking for all along you see people want somebody that makes their life easier not harder by the way you might be wondering something why are we saying product designer here isn't this a web and mobile designer course well yeah it is but the idea of design and designing as we're going to find out throughout the course isn't necessarily just about the web or just about MOBA our technology is constantly evolving there's new platforms coming out all the time and a designer should be flexible sure we can just learn web development but then what happens if we want to build a mobile app or a VR app or any sort of product that can be on any platform so we want to describe this course as a product designer because you can design on any platform for any product so although we might use web design mobile design product design as a term in the end we want to build the skill set so that you can design for any platform that are out there right now and also future platforms so our job as designers is to understand the need of the client and create designs that they themselves aren't able to do now Bruno wants to build this massive shopping experience online that can take on Amazon so how are we going to do that well let's dive in and let's start exploring the world of design the processes and how we might go about designing a beautiful product foreign has two paths for you to take depending on your situation so what are these two paths well one is to just follow along we're going to show you step by step how to go from start to finish from sketching to having ideas to final full-fledged interactions animations and final designs for the product if you want you can follow along customize however you want so that by the end you have an entire design system that you can use on future projects as well as a product that you can put on your portfolio and wow your employers the other path that you can take with this course is that you already have a client or you have a product that you want to create maybe you're an entrepreneur the way this course is structured is that we show you the exact steps a designer would take from the very beginning to the end so by following along the step you can actually Implement your own Design Systems your own designs your own product if you already have something we wanted to create this course so that in the future when you get different clients you can keep coming back to these sections and follow the steps all along so that you have a professional full-fledged system that takes you from zero all the way to Mastery to wowing your clients so decide on these two paths whether you want to just follow along and customize the product that we're going to build or you already have something that you wanted to work on and follow along the steps and create your own product I'm excited to see what you end up with at the end of the course let's get started so designing websites and apps I mean sounds pretty easy right everybody can do it well not really because when you first think about design most people don't consider all the things that go into designing a beautiful product because when we talk about design there's actually four key elements to designing and specifically for web and mobile designers the first part is graphic design this is the idea of using colors color theory layout typography sketching using fonts imagery it's the idea of telling a story to convey a specific feeling or to Target a specific audience graphic design is all about the visuals but just knowing graphic design isn't enough but the next part is this idea of user experience or ux because to be a good web and mobile designer you need to study user experience and user interface design so what is that it's the Art and Science of Designing products that provide users with the best possible experience how can you make a user move through your product in an enjoyable way in an Easy Flow it's all about understanding your customer again don't worry because we're going to dive deep into these topics throughout the course the next part is conversion focused or goal conversion as a designer you need to know how to design a product that drives the results that your clients want for example Bruno hired you because he wants to be successful with his product so you need to design something that increases this conversions conversions meaning that a user takes a desired action so your job is to motivate the visitors of your mobile app or a web app to take that desired action maybe sign out for a mailing list or buy a product and there's a science to go conversion and then finally we've talked about this but it's this idea of platform development whether it's on mobile or web although some designers limit their work and don't focus on web development or mobile app development having at least a basic knowledge of how the platform you're designing for works for example HTML and CSS on the web can be a really important skill and a really boosting skill to be a top designer which is why we've included in this course now these are the four main things that you need to learn and we're going to learn to be a top designer throughout all of these and something that we keep mentioning is this idea that you'll also need to be good at client and project management but we'll get to that later in the course now throughout the course we're going to use all modern tools that top designers are using right now but we're also going to link to some resources that you can use to help along your journey now we've already checked out the zero to mastery.io resources page where we have a bunch of resources that you can use but here are some of my favorite ones that I recommend you check out the first one is goodui.org and this is great for that goal conversion that I was talking about it actually tells you how you can improve your conversion on your designs by showing you a b tests so for example Amazon discovers that showing structured product detail is better so it actually shows you which design or which layout is better so they have a ton of these that they constantly post so you can learn about good patterns good UI practices that you can use for your website the next one is awards.com and this is great to get design Inspirations and you can even search for Inspirations like different colors or different topics and get ideas for designs that you may want to use another one for inspiration is this one right here and this again shows off other people's portfolio but can also be used as your inspiration now if you ever want to use icons in your products well I personally like using flat icon but if you're looking for a free version there's also things like the non-project that give you beautiful icons that you can use if you want images for your product something like unsplash.com is also great to use now this is just scratching the surface there's a ton of resources that you can use but the key is to remember we have a lot of resources online as designers to develop our ideas so don't get too intimidated you don't always have to start from scratch so as a designer you can expect three things or three types of work environments one is a freelancer you're Your Own Boss you have your own clients it involves a little bit more Management on your time but again you're Your Own Boss another scenario might be you're working at an agency an agency is a company that has a bunch of designers and developers and they look for clients for you and those clients talk through the agency so that you don't have to go looking for clients and the agency just assigns you different projects which is a great way for you to gain experience of working on different types of projects and then finally the last type of work you'll see is working what we call in-house we're working for an actual company working for a product and you're the designer or a lead designer for a specific company as you can see the world of a designer is vast there's lots to learn but there's also lots of opportunities which is why you're taking this course so enough jabber it's time for us to get started moving forward Daniel's gonna show you the step-by-step process that we're going to take on this course but also for all your future projects remember the flow of the course is simple we start with a client and then we end with a portfolio for you to use on future projects plus the system in place for you to use moving forward for all future projects all right let's get started foreign hey peeps it's Aldo here again I know you're dying to immerse yourself in the world of design but before that I have a quick announcement to make for the entirety of this crash course my challenge to you and quite frankly the key to you actually succeeding is to grab the information you're learning and apply it to your own designs at the very least try and modify the projects we're working on and make it your own in some way you see design is all about creativity so there is no right or wrong well there are rules and guidelines to help you but you know what I mean all I'm saying is don't be scared to put your own twists on anything you learn with Dan and feel free to pause the video to practice what you're learning okay enough for me let me hand it back over to Dan enjoy hello and welcome back we're going to be talking about sketching today in this lesson and sketching is really interesting I mean there's so many different ways we can use sketching for user experience design one thing I really like to do is use it just for idea generation and you know we're gonna learn about that we're going to learn about the process we're going to learn about sketching different types of flows and some tips in between so let's Jump Right In we're going to start with an intro to sketching so sketching is a two-step process it's very important to remember designers consider their options and then proceed to work out those details that first step is called idea generation and what we want to do here is we want to approach a new product and generate as many ideas as we can it isn't uncommon for us to be missing certain ideas or elements or details but I mean it's just about getting ideas out there quickly doesn't matter it isn't really focusing on the detail just at this moment generally as many approaches and then decide on which one is the most efficient for the task you're trying to solve for the next step is adding detail and refinement so step by step you work on refining those sketches and then adding more detail it's okay to kill some of your ideas here and that's the point so don't really get bogged down by all the messy sketches or the lack of detail just keep on going and refining and it'll come over time now let's jump right into how we actually take a look at that process and we go from idea Generation all the way to refinement now that first step is generating ideas like we just spoke about now these are the initial sketches you basically create and they have lower level details they have no colors usually maybe some colors to uh signify key parts of the sketch but the goal here is to draw a lot of basic sketches you'll notice here that there's just like a square an arrow some text I mean at this point like I said just generating as many options as you possibly can don't get bogged down by those details from here we're going to start really kind of refining and start adding some details and we can start making some sketch like wireframes and you'll notice that your promising sketches start to lead to more detailed View and it may not have all the details still and that's totally fine but it will have a lot of the key details and you want to refine those from those sketches that you had over here so you'll notice that like we start adding a little more elements and different types of UI elements up here and down here buttons different types of inputs this is when we're starting to think a little bit more about interaction now it will feature a lot more detail flows as well so we'll get into this soon don't worry about that the next step so when I'm getting into visual design and start thinking much more about these wireframes in much more detail I'm actually going to refine a lot of sketches and start to pull out certain elements that I think are really needed so like I'll start to realize that as I start building out these kind of components I'm going to need like buttons I'm going to need different inputs I'm going to need to account for different types of content and that's really going to help us in the future when we're thinking about the different types of requirements that we need that is the basic process from going from ideas all the way to components next we're going to be talking about entire sketching process welcome back we're going to talk about the sketching process in a little bit more detail there's a couple different steps and steps within those steps that I want to talk about and touch upon so that when you start sketching you're just ready that first step is be prepared always be prepared you know prepare your tools beforehand lots of papers pens markers pencils whatever works for you even if it's like a tablet we also want to think about what our goals are you can think about what you're trying to solve for maybe it's a certain flow maybe it's a certain interaction but that should always be the center of your attention we're also going to think about our audience this is really important if it's for yourself I mean go crazy be as messy as you want I mean you don't really need to annotate anything as long as you understand your own process but if it's for somebody like a client or a stakeholder or your teammates I mean you need to clean them up a bit so maybe add a bit more detail and explain your thought process so you don't waste time trying to explain it while you're presenting it to them remember always time box yourself this is like one of the best pieces of advice I ever got in my career is to time box anything time box your sketching presentations keep yourself under a timeline because it'll help you focus on sketching for your goal and it'll put a little pressure on you to just throw out those ideas not get bogged down by those details like we talked about earlier so don't worry about them being messy just time box yourself and I promise you you'll just produce a bunch step two now what you want to do here is just start just go draw a frame for your device is it a browser is it a desktop window in this case right here we have a little mobile frame so it just needs to be a frame it's just going to help you kind of guide your sketch a bit the next step is to think about the bigger picture and more basic elements elements that are much more redundant that you'll see they'll really help you kind of frame your sketches whether it's a footer it's a header think about those elements that you're going to be seeing a lot of and then from there move on to some of the more detailed elements in the more detailed interactions you know have fun start sketching those interactions keep them very simple at this stage all you need is one or two shapes you know squares circles rectangles that can make up any sketch you'll notice here that they're just using rectangles we have circles we have lines they get their point across pretty well now this is really important this is one of my messy sketches so I want you to just annotate and document your sketches the worst thing is looking back and not understanding what you sketched before you're going to be creating messy sketches and sometimes you may not understand what you drew the day before or the week before whenever you revisit them so the thing you need to do is just be as detailed as you can but just quickly point out some certain reasoning or proposed interactions like over here I have some titles I have some just some text explaining what the interaction is it just really helps give a little more context to what you're drawing now what I need you to do is just keep going find the sketches you like and start building Alternatives from that don't just stop organize the ones that you think have the potential and keep on going and what's going to really help you do that is by sharing them share those sketches bring them to your product team to discuss I mean if you're working beside them just tap them on the shoulder set a meeting time just get everyone in a room just talk about certain things that you've been working on whether it's an interaction whether it's an overall flow I like uploading my sketches into figma sometimes and I share that document with the team and people can comment I also just bring printouts or Originals so if I'm sketching on paper I'm just bringing my paper there or if I'm sketching within like a tablet or something I'm bringing that print out what I'm doing is I'm just talking to everyone it doesn't matter developers product managers QA everyone has valuable Insight that you should really tap into and after you get some feedback you can start building off of those sketches a bit more this is an ongoing process for every type of feature that you're going to design the last step is refining so how do you clarify your sketches so you have some sketches indicating some sort of flow or interaction and you want to clean them up a bit or think through them a bit more but they're a bit messy and unorganized and that's okay so what do you do add titles you really want to add titles for all your sketches they really help you understand which screens are relevant and without thinking too much about it this is so useful if you have a bunch of sketches like we see here and yes annotate again I know I mentioned this before but here it is again annotations are like little notes right beside elements that explain its purpose they also really help clarify certain things that are just too hard to draw so it's really great so I mean like over here you can see that there's a bunch of different annotations in regards to the sketch and these different UI elements but we also can use numbers try numbering your sketches it can really help Define where certain sketches within a flow or interaction it helps speed up discussions and it really helps others to try and make sense of where something fits in within your sketches it also helps others to point out certain numbers when they're giving you some feedback so they could just say hey Daniel screen three I love it we're going to keep that the same and it really helps you gather that feedback as well if you're taking notes definitely use arrows arrows help to indicate a transition so we can see here that if somebody interacts with this element something else is going to happen and may push them in two different directions even though I don't necessarily understand this flow I do know that something's happening here that's going to push them into different directions and that's with no context whatsoever you can only imagine what somebody with contacts could see and the level of detail and context you can give them so remember use arrows that can really help indicate where there's a page transition or even an interaction transition and lastly if you're feeling a little Brave you can start drawing some gestures for certain interactions these are a bit hard and there's a bunch of different ways you can kind of do this you can like try to use like little circles you can use arrows to indicate them but what I usually do is I sketch really quickly and I'm not really worried about like refining like these gesture sketches what I'll do is I'll just go right over to the developer that I'm working with or developers and have a conversation I mean I run it by them and try to explain this in person maybe even sketch on a whiteboard and so they cannot really understand my intention and I can get some insight into what they think about the interaction these are the different types of things you can do when you're thinking about the actual sketching process next we're going to jump into actually sketching some ux flows foreign sketching some ux flows you can tell that I'm on a tablet here um because I just want to demonstrate how we can sketch those flows without using paper a lot of people like to use tablets and I'm using an application called Concepts it's a free application you can pay for some additional features but I'm not paying right now and you know I can just like draw I can export this as a JPEG and send it to myself if I need it and that's all we really need for sketching so I totally recommend if you want to go to digital route you can even do it in figma and yeah so I mean you can just grab your pen you can even change the size of it if you want to get a little more thick there if you double tap with two fingers you'll just go back this is your eraser so for the sake of this video I'm Gonna Keep it pretty I think that's good also you can select different types of pens so what we'll do is right now we're using the regular pen there's the fixed with pen that's something that I rather use just for actually drawing the wireframes so let's bring that down I think that's uh it's a little too thick okay perfect now we're ready to go here we're going to be focusing on a user's experience through certain Journeys both big and small before we even jump into those types of Journeys just want to give you a little understanding of what I'm not asking myself every time I approach something like this step one I want to understand what I need to draw so I got to figure out exactly what I'm thinking of sketching do I want to sketch a large Journey or am I thinking about a small interaction step two is defining some sort of starting point you can start at the beginning of a journey or in the middle or at the end you choose what you think is best typically I like to start thinking about the most difficult or riskiest parts of the product first some people actually like to start at the end and work their way backwards to figure out how users get to a certain point like I said it's whatever works for you step three decide your next steps after you define that first starting point within your flow you need to know where to go well that is up to you and you need to ask yourself some important questions which way this step lead our users where do you want them to go what does a user need to do to get there in the end when I'm thinking about alternate scenarios or alternate flows that I'm trying to sketch I think about all the different questions in terms of alternative ways that a person can go through a certain route so what options do they have what happens if the user closes the app at this point where will they resume so these are the types of questions I'm always asking myself every time I approach a sketch so let's start with our very first sketch we're going to talk about mapping overall flow think about a user's Journey Through the product that's like from point A all the way to point B we want to understand when they come in and when they leave and what that experience is like it's like creating some sort of customer journey and here we can really outline different types of pain points when they're feeling happy through this journey when they're feeling sad and you know pick out different types of opportunities where we can really improve that experience for them and also understand where exactly we can Branch out and focus on different types of flows let's start sketching a general Journey it doesn't need to be neat it needs to be just a little like you need to be able to understand it we're going to start sketching a flow here the first one I'm thinking about is mapping the overall Journey for our client habitual so if I think about step one I'm just gonna put one I'm gonna draw a frame and we're not really focusing on UI elements here or anything like that I just want to think about what the user is possibly seeing um what screens they maybe they possibly are going to and what they're expecting so when they come to our application you know they may see a welcome screen and like some sort of button maybe it's an onboarding process we can figure that out later but now like we've kind of established that step two let's create another frame you know maybe the user when they come here they're thinking about searching right away they want to find a product that's why they would use something like habitual so what I'm going to do is I'm going to just draw like maybe home screen that looks like a cue this just that still looks like a cube that's fine we're gonna just draw like some boxes okay so they come to this home screen and what they're going to do is they're going to search for a product and the next step is that they're going to actually find that product so they find their product and they go and research those details and from here after they've done that they're interested in actually purchasing it but right now you'll notice that this is a very happy flow this is like what we really want our users to do every single time they come into our product and that's not always the case so they'll probably see like a cart with a little X maybe there's like a checkout button there are details of whatever they're purchasing whatever product they want to buy if we move that over okay A little messy but that's okay I mean we're getting a general sense of what this journey is looking like and they get some sort of confirmation that the package has shipped you know that you bought it and it's right out the door and then I don't think the journey really ends there we need to think about what happens after it's shipped in this scenario it's delivered and the user is happy so this is what our whole flow starts to look like user comes in and is welcomed by us they search for a product they find that product and review it add it to their cart and check it out the package ships and it is delivered to them and everyone is happy now that always doesn't happen and this is where I'm asking myself well you know we asked ourselves the question of what the goal was the goal was to sketch the whole journey we thought about what steps come next but we didn't really think of alternate scenarios so what happens if like they can't find their product there's a scenario there if they can't find their product maybe they have to go through some category searches so they start searching based off of categories or they start maybe reading reviews there's different things that we need to always take into account not very rarely and this is an assumption and we always try to validate our assumption but my assumption is that very rarely that everyone goes to the same exact flow maybe they want to read reviews so we're starting to think about all the different types of scenarios that a user may experience in their Journey you know maybe over here they're happy so we can give them a good onboarding experience and over here when they're searching you know maybe they're a little confused and maybe this is a great way to implement a really easy search experience that makes them happy oops so maybe we can really capitalize on that opportunity when you really need to think about who our users are and what they really want to experience when they're moving through our app so that's how you map an overall flow using sketching and if you wanted to like I said before you can just export this bring it into figma clean it up a bit and start thinking about it there if you want to but that's how you map an overall flow welcome back and we're going to jump right into sketching more flows this time we're going to focus on screen flows now here you should really focus on a user's actions through a specific flow it could be a small sequence a sequence of screens or it could be a journey that branches so let's think about our client again this could be a user who actually searches for a product so let's get in there so I'm just gonna just title this I mean it's really hard to kind of draw on this tablet but I'm not going to really title everything we can just say like search zoom out and what we're going to do is we're going to just draw a frame here perfect once again not really worrying about the details here but we're going to just focus on how does a user complete this flow properly how do they achieve their goal of finding a product what I'm going to do is I think you know they'll come to the home page and they may access our search bar you know there may be a navigation I'm not sure what those navigation items are just yet but this is what the makeup of the page is thus far after they interact with that the next sequence is a user sees results so pardon my messiness but that's okay so they'll see some results and over here we'll have some images I know that there's going to be some sort of content here and this is going to really help me start building some sort of requirements that I need to account for when I'm designing elements so like I know that there's these cards that have an image they have some text I'm not sure what that text is it could be a product name it could be a combination of that plus Price Plus other elements but I do know that when they do click over here in this area we're going to move over step three would probably be something like a product description so we'll just write item so I mean you don't need to copy exactly what I'm doing I really urge you to think outside the box take some time to just sketch out I mean you can use a tablet whatever really works for you the item description I'm starting to really think about some of the content that's going there it could be like the a name let's get in there and start writing a little bit of content price could be over here there could be like options to change color I'm not sure exactly but there's some text and then maybe there's like a button sticky to the bottom that says like add to cart just double tap with two fingers in concept and you'll be able to actually just go back so if I go like this double tap perfect Next Step these click that button they've added that to their cart step four actually you know what if they add that to the card They found the item they'll probably just go to the car and you know well in the flow right here I think we can actually start thinking about alternate scenarios so they've added their item to a cart perfect and maybe there's a checkout button over there another interesting thing is we start thinking about different things like hierarchy so if navigation sticky to the bottom maybe we start using that for primary buttons and start sticking other things to the top which are a little bit more harder to access on mobile just different things we're starting to think about in terms of like page hierarchy it's really going to help us influence like ways we start building site maps and actually start building that page hierarchy let's think about different alternate flow what we know here is that we made the assumption that they're going to come in and they're going to click that search bar but there's other ways to actually find a product and this is where we can start thinking about other ways to make this process a little bit easier so we'll label this one and we'll just call this home but what happens if we really think about like placing products strategically there products for our user so we do know that the application that we are building is for a personalized shopping experience like a really personalized shopping experience based off of their habits based off of their interests and we could really push items at the front and really hope that these users will go down that funnel instead of actually just searching we want to make this experience much more enjoyable and more catered to them so we could really like take advantage of that so we'll start thinking about you know maybe there are images here of products that they could like or products based off of their interests products that maybe they're in their wish list and are on sale so we start thinking about these different types of scenarios it looks like enough I just fixed that so if they do come to the home screen they could actually tap on one of these products here and if they do the next step in their flow would be to actually go for the item description page that we actually built over here so we start thinking about all those different scenarios and look at that we already kind of came up with a little user flow and an optional user flow we should always think about more than one scenario when we're building something like this because there always is more than one scenario and one route to get to a certain page or reach a certain goal this is really going to help influence our page hierarchies like I mentioned before in sitemaps that's what you draw screen flows foreign Concepts on my iPad and we're going to be sketching navigation schemes now navigation schemes really help you figure out which options your users can choose the directions they can move in and various parts of your product it helps to Define your navigation and the hierarchies within I always do this at the beginning and it really helps influence my user flows later and my site Maps basically this is the structure of your product slope what I like to do is let's just title this quickly so number three is a different type of flow and we're going to call it structure I like to call it structure there we go okay so number three now what we're trying to do here is we're really trying to think about navigation schemes we're trying to think about that that structure of our product uh sometimes I start thinking about the different types of screens that we actually do need the one screen I know we need and that we've actually had sketched a couple times with our home screen that's that main screen that somebody comes to so when I think about the home screen I'm thinking about like maybe like a welcome message on top maybe there's like a profile image just different things like that I mentioned certain things like having like product images at the top so we can start thinking about that a bit more and what that could look like and what that experience can feel like maybe there's some deals at the bottom but I do know that there is some sort of home page so we can kind of like create a little icon here now when I think about a user moving through this app maybe they have a saved page as well you know sometimes we don't want to buy a product right away or we're waiting for a sale and we just save it to some sort of wish list or something like that so let's have a saved page I think that's a really smart way while we're allowing users to keep track of their products so maybe there's some text there we have some sort of persistent UI or navigation at the bottom and over here it could be something really simple like just a list of products that they have with some details maybe there's a call to action here that you know added to your cart and buy it right away maybe this is synced to some sort of notification like when a product goes on sale but we can start thinking about like okay we we have a home page and maybe we have like a saved page as well I do know one thing we do need for sure it not is a cart and we need to make that much more prominent because if a user adds something to a cart we want that to be right at the bottom or right in a place where a user can see it and click it easily and notice that maybe there's a notification there so let's create like a little card screen and now I'm starting to think more about that hierarchy I mentioned it a little bit in the last video but maybe there's a button at the bottom and if you notice like we've had a persistent bottom navigation over here and over here and what we've done is we kind of Switched that up a bit at the bottom here now we have a button that links them to like the checkout process and it'll allow them to easily tap that especially on mobile and especially using that kind of design pattern we're allowing them to click easily and then putting the option to go backwards up top which is a little bit more harder but if a user is going to cart my assumption at least is that they want to check out you know review their products check out quickly so we want to make that experience really quick so we have several navigation pieces over here you know cart could live in here as well let's draw a little cart that's going to have to work okay so now we know some basic navigation pieces that we like now we can start thinking about like our home screen a little bit more so look if we redraw it here see about making your sketches messy I mean it doesn't really matter about the details or too much both start to kind of come naturally later on if I start thinking about where these different things lead I can start thinking about the structure of our whole product so I know that there's a home page and that's the first layer this is layer one but on layer 2 I can actually go straight to a product page so I know that's on Layer Two and from there I can go into checkout so I start thinking about different ways I can prioritize certain tasks that are really important to a user and really important to our business goals okay there's our cart but now we start thinking about that we can also start thinking about well what happens after this scenario you know a user has gone through the checkout process and you get that nice happy screen and their item has shipped well don't you often keep track of your orders I know I do but we can test that assumption later maybe there's a different Navigation piece you know we talked about a profile a little profile button at the top and you know maybe that leads to like a user settings page or like your current orders but doesn't seem like that is prioritizing maybe that should be prioritized so maybe we could create an order screen so if we go back up maybe there is an order screen and let's draw that up just quickly right here we can start thinking about maybe you can search your existing orders I'm not sure if that's a feature we would build right away but we want to build like that most the minimum viable product the pieces the features that users really want right away so if we think about what you would see on an order screen you'd probably see your products that you ordered their details and maybe the status there's multiple statuses that we need to think about and this is what I mean when we're talking about the different requirements that just naturally surface when we start thinking about different components on a pitch right here this could be a product that has been shipped and there's like a map with a Tracker that's like pulsing you can start thinking about things like motion a bit like maybe over here this is a delivered one so we could start thinking that you know we haven't maybe a fourth navigation piece I would argue that you know your search is a part of your navigation because it's a very prominent feature for a product like this being able to search and find products is so important so from here what I would naturally do is I would start kind of you know sketching a little bit more screens thinking about how these different screens link together I would actually start building some sort of like mini site map so I know that home is like my ground zero and from home if I move over I get items the product description I can get to what else can I get to I can get to like a category possibly so let's write that in um and you know there's other things like Okay so this product is about personalization maybe there's like a an interesting portion about like interest maybe that's front and center on something like product like this so maybe there's like I don't know a component around interest so I start thinking about these types of navigation trees we can also think about saved as well like we created a save page so if I make a little box here for a saved and I go down I can start thinking about where saved actually leads I know I have products I can go to an item description page and that obviously can lead to the cart this isn't an entirely complex product but it's a lot of different ways you can find certain pages from Saved I could probably go directly to a checkout that would be awesome especially if something comes up as like on sale or like yeah like a flash sale that would prompt a lot of people to probably just bite the bullet and buy what's in their wish list maybe we have um other items that are relevant to them and whatever's in their wish list maybe if they have something in relation to like shoes maybe there's another pair of shoes that we can kind of push to them and hopefully they'll choose those pairs it really depends so we can start thinking about this navigation tree which will definitely affect how we build out our site Maps so that's how you can take an approach at sketching navigation schemes it's really easy way to just kind of get that over view of your application I mean we just kind of scratched the surface over here but I urge you to kind of go back you know you don't necessarily need to copy exactly what I did here so like I said before use what you think is best whether that's like paper do it digitally refine them ask questions constantly never stop asking questions because you'll find different routes like we did and that's navigation schemes hey and welcome back we are going to be talking about sketching screen States now I love sketching screen States um this focuses on drawing the entire screen or different interactions an example is a user comes to a search page clicks on a search bar and overlay pops up they type get suggested searches you know you get the point we start thinking about those little micro interactions as well that's the fun part too I spend a lot of my time actually drawing these so let's go back to our client let's think about something that we can work on I kind of gave a little example about searching for a product I think that's a good way to kind of start let's think about our home screen just a little bit more so let's just title that and what I'm going to do is well you'll notice that I'm not really writing any annotations because they're kind of illegible but since we're doing this together you know get out your sketch pad keep on going you know what I'm drawing and we don't really need them in this case so if I start to think about this in a little bit more detail I start to think about well what are the kind of like the different types of features and different types of elements that this page should have you know we talked about a profile image we have a search here as well and we can start thinking about well you know we created a saved page how does a user save an item so we have our item here maybe it's a little heart on each image I don't know I kind of like that you know I start to think about different things like the user can see in relation to that image that type of content that's really important so if we zoom in I start thinking about like the product name start thinking about like maybe there's the price Maybe there's a some product information if that's useful I'm not sure is there a button can users click this whole section is it like a card that's really going to be up to you and what you think is best for users typically I don't like placing like little buttons over here and just limiting a user because like on mobile you know you want to tap larger surface areas you got to make your buttons much larger too in this case I probably will use like a card I'm not sure just yet but something to start thinking about so this probably like this interaction when I'm thinking about it maybe it's a carousel so when the user kind of swipes left what will happen is this will go there and we'll kind of start getting images that go left to right which is pretty cool so those will go left to right but let's think a little bit more about this home screen I mentioned like thinking about interest we can start thinking about like ways that fits into the app maybe there's like a interest title and like a c all thing where they can go find more interests or maybe edit their current interest maybe they'll see items in relation to certain categories and they can click on them and put them into a different funnel so I'm starting to think a little bit more detail in terms of like what's on the page what I need to account for when I'm building a product and that's really helpful especially with screen States so we did talk about search so what happens if you actually click this search over here let's draw a statement when somebody clicks a search I'm thinking like an overlay will pop up what does that interaction look like so let's just start Ground Zero number one we'll just name it overlay maybe an overlay Pops from top to bottom there's a little x with the search we're on mobile so we have to remember that you know there's a keyboard here it's a lot of rectangles we also need to remember that these keyboards have some sort of large button that could be used as like an enter so that's an alternate way for them to select something so if they're writing something in there if they're typing something in there we need to start thinking about what happens so once they start typing will stay in the same screen everything up here will stay the same but now we'll start getting some type ahead result here let's zoom in so we can write a little bit more neatly so if I start typing in something like book we're going to change our pan weight just a little bit more and we can bold it and say something like books for eight plus and that's a great way just to kind of like make the user's life a little bit easier maybe they're looking for a bookshelf so we can do the same there where we just bring that down and it'll be like shelf it'll just finish off the rest so it's just kind of Auto suggesting Auto completing for them so we start thinking about those types of elements that we're going to need obviously this kind of stays persistent and we'll start thinking about what happens then maybe it's like a 1.1 but the next step is that they would go straight to search results now what do search results look like maybe there's like a back button maybe we got our search at the top whatever we wrote maybe we got some information about the amount of results I don't know maybe there's a filter out up here this draw a little filter icon not the best but you know it works and they get the results here now here we start thinking about well what do they see what can they interact with I know that they could be if we split these up maybe they seem more like cards like before so they can tap the whole thing and go straight into like a product page that we've been sketching a bunch lately but you know there's probably a couple other things that we can pull out here maybe we have that heart and users can go straight to our saved page whatever that may look like I started off with understanding that I'm going to be creating an interaction for this certain flow searching for some sort of product and I asked myself the question well what comes next and now I'm asking the question of well what alternate scenarios are there so there's a couple different scenarios here users can from here we have different flows users can go see a product users can save their products to a saved page you just also can enter a new search it can go all the way back and users could even filter users could also kind of like just abandon the search if they want to maybe we have a persistent like navigation at the bottom so there's so many different scenarios like what happens with filters maybe it's like another overlay it comes down from the top nice little animation and you know I'm starting to think about these animations a little bit more these micro interactions because if I leave them all the way to the end of the project you know they're not going to look good they're going to look amateur and you should really incorporate motion early on they really help a lot with different types of things like feedback and understanding the state of a screen and we're going to do a whole lesson on motion later but it's great to just start thinking about it right now so this is like our filters we're just gonna call it fill and now I can start thinking about the content here I mean now we're branching out and that's totally fine sometimes I don't Branch out sometimes I just kind of stop here and I start refining this kind of flow but it's pretty cool to start thinking about all the different types of things that you're going to need to account for like the different types of UI elements different types of content so if I think about filtering for a product like this if there's a title maybe people are going to want to filter for something like price so that may be an option you know maybe it's by customer review or maybe it's by like newest items maybe there's another section where it's by review solely by review so we can start thinking about what we're going to need to actually implement moving forward it's going to really help us in the future and this is why we actually just kind of sketch and you know just do it quickly so take some time to really go through that like I said don't get bogged down by the details like you could tell that we just went through it really quickly and we learned a lot about what possibly could be in our application we created a bunch of screens and we have really good like jumping off point but now we can take these use them for like user flows use them for site maps and even start building wireframes like ASAP the whole point of sketching is to just be lean be agile and don't get bogged down by the details ignore things like dribble or where you see like really high definition like sketches just go for it Jump Right In and that's it for sketching screen States so we're back again in Concepts and we're just gonna go through some quick tips just to kind of wrap everything up in terms of sketching so let's just give ourselves a little title here you know I'm going to repeat a couple of things that I've been talking about but I really want you all to understand how important they actually are number one is don't worry about being messy go Jump Right In ask yourself those questions and just keep going like you saw I created a home screen pretty quickly and I started understanding that you know maybe we do need these elements here they're going to probably be useful and I start learning about what content I can actually get from just like a quick sketch like that and from there we can actually go in and start refining that a bit more you know add icons figuring out maybe that's an avatar figuring out what type of information goes in here like we found out that we needed a heart and maybe we need a price tag most definitely need a price tag but this is the kind of stuff that it's just a natural progression and you don't worry about drawing something like this because eventually it's going to get to something even better to the product that we eventually built don't worry about being messy like I said be lean agile sketch quickly and save yourself some time instead of worrying about the detail the next tip is you know it takes a little practice but only a little you know think about it as building blocks all you need are some squares rectangles you know maybe circles and you can build a fairly decent UI like we've done before like our cart screen is you know just just an X whatever text we have there we have a square some lines another Square to us we understand what we're building here we can refine that if we're going to present it to teammates we got a fairly good understanding of what we need to build a screen like this don't worry about it too much if you want to have a little bit of practice like you can go and open an app that you love or a website that you love and you know try just sketching that out just using some shapes or like some basic type and eventually you'll just develop your own type of system for sketching and there really is no wrong or right way to do it it's just whatever is going to work for you next tip keep your sketches safe buy yourself a folder please I mean if you're doing it digitally that's that's great too because like services like this will allow you to like export it in jpeg or whatever file format it doesn't really matter for sketches like this if you're using paper store it in a folder scan it right away take a picture please because I can't count how many times I've lost sketches that I really needed or I really liked it sometimes you lose details just remember keep them safe always be prepared keep a sketch pad near you a pencil a pen with you on my desk at home I always have my Sketchbook it's a dotted line Sketchbook so it's really easy for drawing wireframes and stuff like that so keep something with you if you like to draw digitally like on an iPad or if you have a tablet that you draw on like a Wacom tablet keep that by your side because you know you never know when an idea is going to come you just never know when you need to sketch keep it by your side another thing I like to do is I like to hang my sketches up so like say if I have some sort of like board beside me or a wall I just like to hang up my sketches for some inspiration and then I just write additional notes if I'm working from home I have my whiteboard that I hang up and it serves as a daily reminder just so I can like see what I've been thinking about I can maybe scrap some ideas I can maybe take this new idea that I have and or this old idea I have and you know maybe something else comes from it because I've taken some time to just take some breathing room you know just put it up for yourself and if you're working with teams they help us well because other people can kind of get into it and they can start to provide some valuable Insight you want to keep people on your team participating so that's the best thing I've always found is just put your sketches up share them and that leads me to like my next tip over here my next step is to kind of communicate just please communicate don't hide these gems that you're making and I call them gems because like every product starts from something like this you know that may not seem true but that's what really is the skeleton of your product they'll always start from like a messy sketch so share them with people because this is a collaborative process share them with your team talk to every teammate it doesn't matter they'll always provide valuable insights we talked a little bit about like a certain feature over here where there was going to be a carousel it will just quickly draw it again and if a user swiped left the new image would come in and if I were to develop a feature like this or build a feature like this first person I would talk to would be a developer and I would like to understand you know is this feasible for our timeline what's the best way to do it and you can have those conversations early on next thing I like to do is I mentioned it briefly about like putting your sketches up but some people like to get a big whiteboard and sketch on a whiteboard and that's totally fine too I love sketching on whiteboards now it's very collaborative it's easy to involve team members in this discussion and you know when you're just drawing screens everyone can kind of just come in point certain things out because it's marker nobody really gets tied to the details everyone's thinking about like the overall flow you have so much space sometimes you'll be surprised at how fast you can actually fill that up with your whole team and what I also like to do is I like to pin my sketches there as well so maybe they have some sort of relation to a certain screen it's a good jumping off point for yourself so you can kind of go back to your desk or wherever you're working and start thinking about different things that could relate and one of the last tips I have and I do this fairly often sometimes I'll grab a sketch so if I have our search experience like so it's easy to you know it's easy to just sketch these out but sometimes you don't necessarily get like a feel for the product you know that's natural it's because it's on paper or it's just static and sometimes you want to understand like how does that feel when a user actually collects this so what you could do is you can export like individual frames any which way you want to do it like you can export this whole thing here in Concepts this whole canvas and you can kind of duplicate it and crop it to crop out each individual frame and you can bring it into figma and Link it together in a prototype and Bam you have like something super simple and it'll give you a little bit more context on how it will actually work in the digital product so sometimes I'll do that or I'll scan in a sketch and that will really help me to figure that out if things actually work if while I'm tapping it on a mobile screen it'll also give me a sense on you know these elements need to be bigger than I thought maybe it's not going to work here so like on the home screen we thought about things like the little hearts but you know maybe we'll realize that that's not really feasible for our user to Tap maybe it is for larger images on a mobile screen but maybe if we're thinking about smaller ones maybe we leave that out there because it's a little confusing and a user may go to tap that and then actually tap into the image when they didn't want to where do they go they go to like that product description page that we've been talking so much about all these different tips are going to really help you create a much better user experience it's going to help you like drive that communication throughout the whole team create that collaborative process at the end of the day it's going to make you a better designer it's going to make your users happy so follow these tips follow that process we talked about earlier in the lesson and you're well on your way to sketching some amazing interactions and different types of flows [Music] hey everyone and welcome back so we're going to be learning about inspiration and inspiration is a pretty tough topic because I always get the question of like how do you stay inspired where do you find your inspiration and things like that I mean it is a tough question to answer and you know we're going to get right into that I often get the question how do I stay inspired and you know it's easy to go to a site and find like a mobile design and you know you may get excited about that but I mean that just kind of burns out eventually and you don't know where to go from there it's tough to stay inspired and this is what we're going to learn right now so it's not a secret that being creative like you can get drained of ideas you know it could be like you're working at work and you're on a single project and it's just like it's draining the life out of you and that does happen and it's hard to stay inspired in moments like that so creativity is kind of like a muscle and you know if you don't use it you kind of lose it I mean well not entirely but it may get weaker you must constantly stimulate your creativity so that whenever you're asked for like a great idea you like you're just ready and you're on the ball that's the goal this doesn't mean that like you're hanging out on like dribble or behance or any site like that and looking at pretty screenshots there's a couple things that I do and a couple things that my co-workers do a lot of so you want to learn let's jump in number one this main kind of scene obvious but I mean talk to the people you know your peers I mean having engaging conversations with the super smart people you work with is going to be amazing if you're not doing this you should some of the most inspiring conversations I have had have been with my peers over lunch or coffee or a walk sometimes these chats end up with you maybe helping out with the design challenge of some sort or just understanding what they're going through it may make you think about your problem a little differently or may inspire you to do something differently so definitely talk to your peers because they are where you are they are smart like you and they have a lot to talk about and they have a lot to share so tap into their brains next is study others this is another big one so I kind of lied a bit when I said that you know you you should be studying your peers and what your peers are doing at all times I mean it could be on dribble or something like that but it's important to study their work and break down their solution to discover how they thought about it it's not just about looking at what the solution is but it's also about dissecting it understanding what their solution was for what the problem was I like building little collections of these solutions that I can always pull from as inspiration so if I'm thinking about like a certain design pattern like social login or something like that I may have like just a collection of screenshots on how people solve that that I really like I think you should collect examples of great techniques don't copy but learn from them so that it can inspire better solutions for the products you build the next one is you should surround yourself with great design try thinking about how you can surround yourself with that inspiration you know it could be your home it could be a desk like this you know it could be digitally if you have like a dribble collection or something like that I know I keep on going back to dribble keeping inspiration around you allows you to pull from whatever you need to it also serves as a great reminder for what you want to achieve I also find that even making like your workspace just very comfortable and very much attuned to how you are as a person could really help just your workflow in general like a desk like this is really nice and you know it may not suit all of us I have a really nice desk at home and I really love just sitting there and working there you know there's some plants on the desk there's some lights just to have less strain on my eyes it's just like more comfortable workplace and it's really Zen for me and I also have some paintings that I really love hung up around here so surround yourself with great design surround yourself with things that inspire you I think this one's kind of it speaks for itself you know you should really educate yourself and stay educated reading books is huge I love to read I love to read on a variety of different topics I mean not just design I like to learn about product management and how to like increase my workflow and increase like team velocity and stuff like that so stay educated on a variety of topics remember to always try and learn it's huge read books about your discipline read books about other discipline read articles you don't need to be an expert in terms of the different types of disciplines that you're reading about but you should want to learn about like things like development or like facilitation or user patterns or marketing this really helps you contribute thoughtful ideas whenever you discuss those types of topics and sometimes it's good to have that extra context so that you can approach it from your design or mindset so if there's a problem with like marketing maybe you know a couple different things about marketing you can approach it differently it always helps me to read up about development and really lean on my peers who are developers to understand how things are built so when I approach my design I know that certain things are not feasible I know certain things that can be achieved so I really try to learn about different disciplines and it has made me a much better designer a more well-rounded designer and the most important thing is knowledge is definitely power so this is probably the best thing you can do is just stay educated on a variety of topics sometimes you have to take some time to design for yourself you know it can be exhausting designing for a client and sometimes it can get demoralizing at some points you know you may be stuck on a project for six months I know people that have been stuck on projects sometimes for a year and it really depends on what type of company you're working for but it may happen and at that point you know you could be like I said on a project for months and have total lack of inspiration you may feel like your work or your ideas aren't inspiring you or anyone else and you should probably think about ways that you can design for yourself it can be anything it could be an app it could be like painting I sometimes like to paint on my spare time especially with my children so I mean stuff like that just really takes the load off your shoulders it allows you to kind of express some of your creativity and get back get inspired to also design now this one is another great one I don't do this personally I have a lot of co-workers that love to travel and one thing they say is like you know travel exposes you to new culture it could be like different people it could be different experiences and by immersing yourself in an area away from your home you kind of push yourself out of your comfort zone and it kind of opens your eyes to new possibilities so you know travel the world if you can I know a lot of remote workers that love to travel and work elsewhere so that's definitely a possibility and I've heard great things and the next one I like to do I do this all the time it's so easy to just stick around at your desk and try to come up with ideas but you know scientifically 2014 study by Stanford University found that walking boosted your creativity and sometimes you just need to leave your office and go for a nice walk you know you don't know who you may see you don't know what you may encounter I often like to chat with co-workers on a quick walk I like to go grab a coffee or something like that and just get a breath of fresh air and then come back to a problem from having a tough time so these are the different things that I do and my co-workers have done and they have been proven to work I feel inspired all the time just because of my surroundings personally and like I love taking my walks I love talking to my peers and I'm just staying educated on a variety of different topics take these tips with you and do your best to stay inspired thank you hey everyone and welcome back so we're going to talk about how I find inspiration online now we went already went over how we can stay inspired and generally that's where I get most of my inspiration you know talking to peers walking around studying other people's work you know staying knowledgeable about different topics that's what really keeps me inspired by I also think that a key to your product design process in this is what I find absolutely necessary is to have a constant source of online inspiration so there's several sites that I like to visit these are some of them the main one I like to visit is dribble so here's dribble uh it's a great place I'm sure many of you know it already but I love it just because I can just make a bunch of collections of different types of like design patterns that I really love also searching on here is really easy and this is probably one of the best places to go and get ideas for your designs I mean not because there's so many people posting cool things but you know it's a great way to study your peers you can discover some of the world's top designers and creatives and you can also get an inspiration from a wide range of disciplines like anything from animation branding illustrations product design web design print I mean there's so many different things on here there's always a project you can learn from and what makes it great is that it's a place where people can post their content and get feedback I mean feedback doesn't happen very often on a lot of these posts but it's just a great way to get a lot of different type of inspiration some people even like showcasing their portfolio for potential clients or Studios and because of this like final pieces that are uploaded are like of the highest quality I generally love to catalog different things like I mentioned before and this is what I generally do and this is how I use it so I like to sometimes just browse all I'm a big fan of like different things I guess like an example would be like if I just typed typography some people are doing some really interesting stuff that may inspire me like just seeing something like this print collateral and looking at all these different shapes and the way their position and even the way like the text is bolded and laid out something like that could inspire me for like website hero page or something like that so like anything you can grab inspiration from and I feel like a lot of people get really hooked up or held up on trying to find just the right solution that they can kind of mimic don't do that I mean that's one way to kind of stunt your creativity so what I like to do is like if I'm going to search for something like navigation or mobile navigation I like to see all these different types of like options so like if I go into this this is pretty cool just the way they have these little kind of micro interactions and animations so I may just like save that and I have a bunch of different like collections so you can see I have a collection for calculators or Carousel forms color there's like CRM tools that I like to look at I may say this under mobile navigation and I can just create a collection really quickly so this is really cool and there you go it's saved you can even like it if you want and you can start typing and you know some people like to give their feedback or just ask uh questions it's a really great place so this is what we typically do like I would grab this I would save it I would type in like mobile navigation and start creating a collection of different ways people have done this if I'm trying to solve for a similar problem that I'm stuck on now I may not be stuck on this per se but I may get inspired by something like just how they have done these smooth animations like in this example I just showed you so I may really like this just the subtlety of it and I may want to implement something similar for my product and the easy way to get there is to cover over your profile and go to like my collections over here and you can see like I have like even a test I have a bunch of different options here so I have mobile navigation right there and I'll just you know kind of go through them I may like copy them or like make notes about this mobile navigation if I edit it and add a description to it so that's how I typically use dribble I mean like I said before you can get uh inspiration from like any type of discipline like even if it's branding like just seeing like maybe like just the way that they've Incorporated a background here seems very interesting and how sharp like in terms of contrast there is between uh color and shade you know don't limit yourself just by trying to find the right solution for what you're trying to do you know look elsewhere another thing I like to use is Pinterest this is a whole lot of library of visual content I mean you can get inspiration for everything here but there is a lot of noise I think the best way to get inspiration from something like Pinterest is to do what I've just done here you know just have a very like targeted search so I've chose mobile design and yeah there are a lot of different options here and what you can do is you can just kind of save it I have like a keto family meal plan little kind of uh collection over here and you can like save those collections for yourself or those boards they're called in Pinterest I mean one thing you can also do like is create a bunch of different boards about different types of design patterns that you love so that's one way to use Pinterest I also like to just like use Pinterest just to look at different things I mean it could even be like Interiors it could be anything like design related even if that's interior design like I said don't limit yourself just to like finding the right solution so what I typically do is I like to just kind of go into one and I'll like I'll save it to a certain board so like I'll click save and it'll go into that board it went into the wrong one but you can kind of change that you can pick basically a bunch of different boards you can even make a new one on the go so that's definitely an easy way to keep track of a bunch of inspiration there's also a plug-in that allows you to actually like save different types of uh content so if we go back to dribble so here's my Pinterest extension and what you can do is like if I focus on here I have it pop up over here that I can I want to save it to somewhere even if you're on a different site you can save things to your Pinterest board the easy way to use Pinterest and collect inspiration over time the next one I like to use I don't use this very much but I mean one thing I really love about behance is that the quality is really good here and you know there's a lot of explanation behind some of the work this is another interesting place to find a bunch of different types of inspiration whether it be like graphic design you know all different types of design I often use this kind of like a long side dribble but not as much as dribble a good thing to note is that big businesses will spend a bunch of money advertising job roles here with hopes of attracting like top talent so since there are big brands on the lookout you can expect to find lots of work you know there's a lot of great ideas and lots of creativity so if I go here and I search like mobile like I can already see there's a bunch of different like options and one thing that's really great about it that's way better than dribble dribble just kind of gives you a like a snapshot of a design over here like a lot of people like to upload like so much content in regards to the actual app like you often only see like just a snippet that looks really good but you kind of are left in the dark about how the rest of the application pans out and if it's good at all so this is what like a lot of the different types of like kind of things you'll see on the hands like a lot of different types of gallery image like images like this that'll break down like the challenge or customer development I like this stuff way more than the pretty screenshots because I'm really interested in like how they solve the problem and how they got to the solution so some people will often post things like that I like to see how people even lay out like or Define their style guides so this is really cool like see a more in-depth animations which look really really smooth I like to see different types of things like they have a transactions over here they have card settings just like how the bank cards will look it just gives you a lot more versatility on how you want to like view those projects and what you're looking for like if you're looking for a quick solution for like a design pattern then you know maybe dribble maybe one of the better sites to look at or patterns which we'll get into next but this was really great to get overview of certain projects you know there may not be as many but a lot of the projects on here are just top notch so another thing I really like to use is patterns so one thing you need to know is that patterns isn't free entirely this is essentially like a focus on mobile design patterns and there's some great mobile app designs here and you'll get screenshots of like in-depth UI elements you can even search just based off of UI Elements which is really cool and like I said before it's paid so it kind of limits the amount that you can see sometimes what you can see is enough but I mean if you're really looking into solving for different design patterns and you don't mind paying for premium then I think this is a really great resource so like if we take a look on the side here we have like different categories which is really cool like if I'm going to look for cards I see how different people have handled cards and I'll only get to see just a little bit I think it'll stop me like right now so it's not a lot but I mean it's not necessarily like everything is super pretty like in terms of like the dribble effect but you get to really see some actual solutions that have been implemented which I value I think a bit more what else do we have here like I love to see different things like you know lists is another cool thing like how people handle different lists so I mean this is really great for just finding individual like UI elements and stuff like that I love using patterns uh I have a paid account through my company so that really helps and yeah this is how I solve a lot of like different types of like individual problems or like problems that are kind of more secluded and more focused in a certain area so like if an example would be how do I handle like privacy or pop over so I have privacy here and there isn't many options but uh it's very interesting like you know they have a verify your identity option so I may think about that when I'm implementing something like that uh if I think about like popovers I think like you know maybe like the an overlay can come from the top it can come from the side so I see a bunch of different implementations of that and the last site I kind of use I like the site especially for websites is Awards so this is another great option for web-based design they have an award system like you can see that over here and you know it displays exceptional designers and they have expert judges and a pretty strict evaluation process and you'll notice a lot of the latest web Trends are over here so we can search up something like banking and here you can search by websites you can search by like elements so if we go to load all results let me just click that if we yeah if we go there we can see a bunch of different websites based off of what we searched for and what's really great is like I searched up something like banking which you would assume would be really like rigid and you know strict in terms of like their design and their design principles but you see a bunch of different like takes on what banking could look like I mean not all these things are necessarily banking related but there's a lot of inspiration here so like we could just click over here and we have a small banking business and this is Lone Star National Bank it's a really great site I can see just a bit of the hero if we click into that we'll go to the actual website and be able to actually experience that experience so this is obviously a little bit different than what we saw but you know maybe they've had a design update and maybe for the better for the worse but it gives you good context as well into like the solution you know going back to pretty screenshots and not necessarily knowing if certain things have been implemented these have pretty much all been implemented and you can see how that actually functions when you go to that website and try those different like interactions or you know explore navigation schemes and stuff like that so these are basically the top ways I get my online inspiration I mean I mentioned before that I get a lot of my inspiration by just staying inspired in general and like staying knowledgeable in different topics whether that be like design Trends whether that be like development Trends and everything like that so I think it's really important that you kind of catalog some actual visual design inspiration online as well and these are some resources that you can definitely use so if you want to categorize everything from all different sites you know Pinterest is probably best to have like one source of Truth in terms of a board but if you want to stick to certain sites like you know a dribble you can like save collections there and uh have it all in one place over there so this is what I use and you know go out there have fun don't copy people but just try and stay inspired online and surround yourself by online inspiration so that way when people come to you for ideas you're kind of on the ball you understand a bunch of different design patterns and you just have general knowledge of what are the latest trends so go out there and have fun hey again just a quick heads up that in the comment section Dan will be introducing an extremely valuable tool named figma it's quickly become the go-to tool for designers and it's a must learn if you're new to the design industry whether you're looking to get hired or even just working on your own designs now you may have used figma in the past or this may be your first time just in case it is your first time we have included some helpful guides to help get your account set up down in the description below now you do have to create an account but it's completely free at least for what we will be doing we've also included some links for accessing and duplicating course figma resources just in case you get stuck but that's all for now let me hand it back over to Dan enjoy hey everyone this is the figma website I want everyone to understand what figma actually is so figma is free there are some paid plans and I'll get into that but figma is free it allows you to create amazing uis allows you to collaborate with your team really easily and allows you to prototype and get feedback and it's an easy handoff for developers let's jump right in so I can show you so this is their website now some of you may be using the web browser to log in and that this you're going to sign up here and log in here but you know if you're really interested in using something like fig Jam which is one of the other figma products you can use fig Jam here as well it'll allow you to easily brainstorm it's a really great tool but one of the great things about figma is the ability to just bring your ideas to life whether that's just creating iterating and repeating that whole process figma allows you to create some really beautiful designs I think one of the other great things is the collaboration aspect as you can see just in this little illustration over here you know you have two people working together you can see comments it's great for getting feedback if you're a design system nerd like myself I know this may not make sense to some of you but Design Systems are really powerful they allow you to create components they allow you to you know use those components everywhere and there are some different distinctions between how you can use components within figma and I'll get into that but components are really powerful it really is great to work with developers on how to use these components what they look like what their different states are it's really great and the last part is developers can easily come in here and understand what exactly makes up one of your designs whether it's like a UI element that they're clicking on they want to know maybe position they want to know like if there's like a border radius they can get all this CSS from figma as well so figma is a great tool that'll allow you to work with your entire team whether it's strategy design and even development another great thing about figma is that they have a bunch of resources I'm going to get into what is the community but you can get files and templates plugins and widgets it's amazing it'll really help speed up your workflow and share some of your designs even with the community it's a really great place hey everyone we're going to talk about pricing and just the plans in general that figma offers now figma offers three different plans most of you are going to be totally fine in the free starter plan now there are some limitations some of those limitations are that you can only use one project with three files that's a bit limited but some of you may not mind so I wouldn't worry too much about that I would just try figma o and then maybe move to professional if you want something that's a bit more expensive now some of the things that you can do in the professional account is that you can use these components I was talking about earlier and use them across a bunch of different files now if you do create components and you like using Design Systems or design libraries you won't be able to use them outside of their local files if you're in a starter plan which is limiting to some some won't care as much because they may not be using components a lot but if you plan to then the figma professional plan is going to be the plan for you that is one of the biggest differences that I personally noticed from one plan to the other so I would recommend start off with the free account go from there if you do like it the professional account is way worth it if you need the projects if you need those files if you need to be able to use design libraries across multiple projects and files so just a heads up that is the biggest difference now one of the other things is you can come over here into the website where I'm currently at and you can just see and compare them really easily so I'm going to post this link as a resource for everyone who's interested it's it's super super helpful if you're looking to distinguish you know line item by line item what the differences are when you do want to sign up you're going to be able to come in here and just click sign up you can use like a Google password or a Google account and do it like that you can actually just sign up with your email but you're going to sign up right through here and it's going to ask you a bunch of questions about which plan you want to be a part of Etc and you'll be pushed right in to the actual website foreign I want to talk about where you can get the figma downloads so I know many of you may have signed up already some of you haven't that's totally fine so don't worry about that now you can sign up on the website and you can use the web browser as your way of using figma and that works perfectly fine because the actual desktop experience doesn't very much some people just have a preference I'm one of those people that use it both on my PC I use it on my MacBook and that's how I prefer to use figma I like that dedicated space without the noise of a browser but if you want to use the browser go right ahead you don't need to really worry about the figma download section here now you can access this on the website by just clicking on products going down to downloads and this is where it'll be now you can find the desktop app here for both Mac OS and windows you can also find the mobile app for Android and iOS so the mobile app is really great if you're on on the go you want to take a look at design files you want to answer some comments you want to you know take a look at a prototype that's what the mobile app is really good at if you want the desktop app for that you know dedicated experience this is where you're going to come so I'll make these links easily available for everyone hey everyone and welcome back I wanted to go through the figma UI and more specifically just the structure of the dashboard area over here now where we currently are is where you're going to land when you first open figma every single time now you'll have the navigation bar up here you can search you can see your accounts that you have connected you can connect more than one account so it's really easy to switch you can access the community as well if you're working on multiple teams or if you shared a file that has comments on it notifications will show up over here if you want to access more things about your account you can do that here even has a nice nice link to get the desktop app you can add your account here if you have multiple accounts like I mentioned before you switch them on this side so I do that really often I have multiple accounts and I love switching between them between my work and my personal so that is the navigation bar then you have the sidebar now your sidebar is made up of a bunch of different things you have your recents where you're going to be accessing all the files that are available to you based off of what you recently opened you have your drafts now these are where all your files are going to live now if you don't have a professional plan majority of your files are going to live right here and that's fine I would just name them properly and and find a convention that works for you to create a little bit of structure because if you do have a professional plan you'll have the ability to add a bunch of projects and a bunch of files within those projects unfortunately that's a bit limiting right now to the starter plan a great thing about figma and I'll get back to this file I just opened is you can have favorite files so if I go back to my recents up here you'll see that I've starred a couple of files now three files and they'll all show up here so if you're working on a file or there's a file that you constantly like refer to that's a great way to just find it in one spot all this functionality is also within the desktop app now these are the files so you can click them like I did before and open up a new tab or you can right click them and you can you know see all the different options available to you whether you want to share it you can copy a link you can like remove it from your favorites you can duplicate it Etc you can even start a new design file right from your drafts or your recents or import a file like some of the resources we have so that is the easiest way to do that over here and that is your figma dashboard [Music] hey everyone we're going to talk a bit more about files now files can be a little tricky to just understand quickly I mean maybe not so tricky this is where you're going to do all your designing but using the resources available in the course is basically one of those things that are really going to help you be successful at the end of the course so I'm going to talk about how to use those files and just how to access them so you can see here if you've accessed the link that was given to you by the course this is what will happen you'll be pushed right into this link and you'll see oh ask to edit don't click that that's just not what you're going to do here the easiest way to actually get here and get this file is to go and click this little arrow we're going to duplicate that file we're going to click the arrow and we're going to duplicate the file to our drafts and just like that a new tab is made a new file is made and if we go back we can see that this is the new file it's our recent this is still one that is the original this is my file that I'm sharing with everyone and now you can use this file as well so this layer is locked I believe but you can go ahead and move it around and start editing this actual file so that's how you're going to duplicate files if you've downloaded the resources or if you have another file that you want to bring in here you're going to click the import file and what you're going to do is you're going to take the figma file like that bring it right in and it has been imported and we can click it and it's going to open up that new tab and here you'll be able to edit it as well so that is how you bring in files you can duplicate them import them if you want to create new design files all you have to do is just click this new design file right here this big button so you click that it's going to open up a new file and it's going to bring you right inside and here you can click whether you want to name it something so I have my new design file and now you are on the canvas this is the canvas area and that is how you basically use design files in figma hey everyone I want to talk about tools so what we're going to do here is we're just going to create our new design file so I'm going to click that button it's going to pop open that new tab I'm just going to call this one test for now now I'm going to show you a bit about figma and all the different things you have have going on over here so over here we just have the tabs so these give you like a quick overview of what you have open you can have multiple tabs open up here is the toolbar so let's start from the left this is going to be your menu and your menu is going to have a lot of different interesting things in here you're going to be able to see quick actions so if you like using quick actions you can click that and say I'm going to search for plugins so I can go and search plugins in the community really great way to see what you have available to you can also see different types of settings for like your file the ability to edit View I would say the majority of these you may not be touching you may touch them once and then just leave it I think one of the biggest things that is really helpful here is going into the help and account and going to keyboard shortcuts which is going to pop open a shortcut tab right at the bottom based off of your system that you're using it'll help you think about well how do I access something like you know the pen tool and you know how do I make uh select all for for MacBooks for a Mac OS it's going to be command a versus control a so I mean you're going to be able to get all that information right within the app which is super helpful so I'm just going to close that right now so that's the menu this is where you're gonna access your tools so we have our basic tools up here we have move and your scale tool we have your frame tool now I'm going to go into these a bit deeper later but these are where you're going to get your frame tool frames are where you're gonna draw essentially your canvas you're gonna draw things on the frame it's like the canvas or your artboard whatever you would like to call it but in figma they're called frames so we have our frame and slicing tool frame is probably the most important than we have our shapes and this is where you can come in and make some great shapes if you're making logos if you're just using shapes for just interest on your like web page or whether it's like a mobile app or something this is where you'll come to use your shapes and they have these shortcuts on the right so you have your rectangle you have your line Arrow ellipse polygon star and you can place your image here as well this is your pen tool which is really helpful if you're making custom shapes I love the pen tool we have the text tool this is really helpful if you need to write something text tool is going to be your friend so that's the text tool and we have the hand tool for moving things around really helpful for moving around selections and not clicking into them and then we have the common tool so one great thing figma does is they have like this onboarding tutorial system so when you sign in for the first time they're going to run you through everything you'll also see certain things for new tools and whatnot so that is really helpful so I'm just going to close that so we have our comments you can just leave a comment when you click on that tool so I have a comment here I'm gonna describe hey great work and then press enter and that comment is stored and you can move comments around it's really great and you can keep track of them over here then you have things like contextual tools so let's say I have a rectangle I'm going to make a copy of that rectangle using command C you can use Ctrl C if you're on Windows and then command or control V and then I have that copy so you can see that over here in the layers panel so if I have you know two different rectangles I can see my contextual tools so over here you have components this is a little Advanced so I'm not going to really talk about components too much right now we have masking masking essentially allows you to create shapes and hide different aspects of other shapes so you can use the masking tool there and we also have Boolean tools as well so I'm going to actually select both of these and you have these Boolean operations so you can like create a union subtract so if I'm gonna do that I'm just going to subtract and it's taking a chunk out so a lot of cool things up there in the contextual tools aside from that you do have like the file settings over here whether you want to see like the version history you want to publish components you want to rename it you want to move it to a new project or another project deleted or favor the file you can do that all within here this is where you can access the project it was in so ours was in drafts and I clicked drafts I'm going to go back so that's what I clicked over there and over here on the right side you have somebody here share and view settings you'll see the different people that are in this file when they're in here in this little Avatar bubbles you'll be able to click the share button and get into all the nitty-gritty ways to share whether that's with you know anyone with a link can view this is how you're going to get your files you're going to get them as viewable files like I said you can also just invite people manually you can let them edit and that is how you just grab the link you could also play prototypes so if I were to make a frame I'm going to press F to make that frame so if I have a little iPhone 13 Mini I'm going to just put that there and just drag one of my text layers on here and I'm just gonna place that there for now so this is just my design I know it's great and if I press play it's going to open up that prototyping tab for us and you'll be able to see your prototype you can link together prototypes and they'll show up there so that is essentially how you would play a prototype if you want to get into the zoom and view settings you can do that here as well you can customize what you see and you can customize basically how you see it you'll see like all the shortcuts here for zooming in and out and how to access some of these view options and that is the toolbar hey everyone I want to talk about now the left sidebar so you'll see that I'm not in my test file anymore this is what it looked like before it was kind of a mess so I think it's probably best that we look at a real file that you know has a bit more structure to it so you can understand what the left side by looks like so I'm just going to pop this out we are going to talk about this area the left sidebar so the left sidebar is where you're going to find layers there's different types of layers here you can find frames there's groups there's components right here this is a frame so what a frame looks like and this is an auto layout frame these are this different types of shapes so this is a line shape which is a horizontal rule that's going to write across you can see it highlighted you have groups or different types of layers so if I were to make this a component really quickly that's what a component would look like or a master component if I make a copy of it that's what an instance of a master component would look like so I'm just going to back pedal over here so we don't get too deep in the weeds there but essentially there's so many different types of layers you can have shapes images gifs I mean they're all they all show up differently here just based off of their icon and this is where you're going to find them and you'll see some of them are even nested so this is the header area and within the header area I have like the navigation for this design and within the navigation I have like the main navigation which are these different options over here and if I click this little arrow I can see all those different options and essentially you know you can Nest different types and that's how figma Works they allow you to Nest frames within frames or shapes within groups it makes it really easy for you to understand and where things are and kind of take the approach like a developer as to how to structure some of your content like within containers and so on so that's how nesting works and the easiest way to do that is I'm just going to take a rectangle so I'm just going to click the rectangle tool I'm going to take a rectangle and over here we see my special rectangle I can take that and put that within my header area so you can just drag them into wherever you would like and you know they will show up accordingly so I'm just going to quickly delete that by pressing my delete key or you can press your backspace key and that is how you get rid of a layer so you can easily right click on the layer and see all the different options you have for it you can even do that over here if you'd like you can right click on a certain layer and get those same options by doing that here you can drag them reorder them you can even delete them by pressing backspace or delete the delete key while you're selecting them so that's essentially it for how to like kind of use them within the sidebar but you can also double click and I can name this to like cool logo instead so now that one's renamed so really really great here that that's just like easy way to rename files I love naming all the different aspects of like my file just so it's nice and clear for me to come back to it even share with others so they understand with what they're looking at when I see things that are like frame 1204 it gets really messy like that's what it comes up as and if you just make new copies like it's just they mean nothing they just mean frame one frame two frame three and it's really hard to follow that so I'm just going to delete that really quickly okay so that's how you rename layers Nest layers you can also lock them which I find really helpful sometimes you want to work on something and you don't want like just in this instance let's say we don't want to touch the navigation so I'll right click over here you can also see the little lock you can hide it but you can even lock it so once you lock it you can't really oops I'm going to lock the header yeah you can't move the header anymore so that's really great if you're working with like layers that are over top one another you can easily hide it too if you just don't want to see it at the moment or lock it so different options there you can also do that by right clicking and going to the bottom these are the shortcuts shift command L on Mac OS and shift command h on Mac OS and that is how you lock and unlock layers there's also another aspect so of this sidebar so right now I showed you layers now there's assets you can come in here and you know create components so an example is if I take this logo or this button is actually probably a way better example so if I take this button and I'm just going to drag a copy by holding option on my Mac but if I just take this button and turn it into a component it shows up in my local components and then I can drag them from there and now I have a responsive button that I can use anywhere and figma will just throw that little tutorial up there really helpful for us but that is how you would use your assets panel and you can use components for from other libraries other projects other people can just share libraries with you that they can control but maybe you'd want the components in there to reuse but this is a great way to use reusable components remember if you're on a starter plan you won't be able to use components that extensively you will only be able to make components within your file like I just did and use them so I can make this a component oops I'm going to grab the logo here that we made or that I made we're going to make this later but I'm going to grab this logo over here and I'm going to turn it into a component and now that logo is there so you can use your local components but you won't be able to access components beyond that unfortunately and that is the assets panel the last thing I did want to talk about though is the pages so you'll go back to your layers and you can see over here you're on the landing page or I'm on the landing page you can see all the different types of pages here by just clicking this little drop down and I can add a new page and it's going to create a new canvas for me over here but if I go back here I have that canvas if I go back here I have my cover canvas so you can move through all these different pages as you see fit and you can create new pages remember there is a limitation to the starter plan I believe it's only three pages within a file which isn't too bad to be honest many people won't really exceed that and some of these files already have a bunch of pages and you'll be fine using those files because I've given them to you but you won't be able to create new pages from that so just keep that in mind and yeah and you can just delete pages you can copy a link to a specific page you can rename them in the same way you rename layers you can do that all over here and you can duplicate Pages as well like I just did and that is the left sidebar hey everyone and welcome back let's Jump Right In because we're going to talk about the right sidebar now the right sidebar is really where you're going to do a lot of your work so let's Jump Right In so I'm just going to click on this Frame over here I'm going to close this so your frame is going to have well our frame over here that I'm you know the landing page frame that's housing all of this content is going to have a bunch of different things on the side here you'll notice that this is your like alignment and distribution up here so example is I can take say these three things I'm just moving really quickly here just for the sake of the demonstration but I can take these three things and select them all and then you can tidy them up by just you know moving them to the top or making them all come to the middle you can space them out separately by clicking this over here so distribute like horizontally the same way and yeah you can align them easily so that's where you're going to get your alignment and distribution you can also see your frame size or just the size and orientation of your your layer so I have the X the y That's Where It's positioned I also have the width of the frame I have the height of the frame I have the angle you know you can turn things if you want so I just threw a 90 over here I'm just gonna go back command Z or control Z depending on what system you're on you can even set a border radius up here so you can see that the Border radius has smooth that corner and that is basically all for your frame size your orientation you have your position on the canvas the X and Y values up here you have your Dimensions which is the width and the height another interesting thing that I want to talk about is a constraints so we have sometimes you'll have like your uh just your resizing options over here so this one's set to fill and you can hug like hug the content you see how that kind of like messes up the frame a bit we'll get into this in much more detail but this is where it's located you can fix the height of this so it's a set height you can clip your content so if I were to go like this you can see that that content's not showing anymore because it's set to clip so you can hide content beyond the frame that's where all that is going to be and another interesting thing is your constraints well actually let's go back here so if I select my hero frame constraints are going to show up here because constraints can only show up within a regular frame I'll get into that later but this is what constraints look like so left and right and top and bottom are for your vertical and your horizontal constraints so if I move the landing page like this it's going to shrink with it if I move it like this it's going to shrink with that as well so those are your constraints if you have an auto layout frame these are where your auto layout details are going to be so we'll get into that later as well you have the ability to create layout grids if you're into creating grids so you can create grids if you want you have your layer properties whether it's set to like pass through or darken kind of like Photoshop a bit and then the ability to set your fill so if I press just that plus button I can create new fills in here I can also select this fill it's all it's turned off by default but I can select it and you know color it any which way I want now I can remove it you have stroke you can set a stroke you see a stroke just showed up on the outside which is like a border so you have all your selection colors you have effects and then the effects you can select like drop shadow inner Shadow this is basically your bread and butter you can even export your screen from here as well as like PNG you can do it as PDF SVG and jpeg so lots of options for you there you'll notice that text has its own as well so text has its own properties and you can really dig deep into those properties the other part of this tab so you have design now you have prototype and prototype's really great and this is how you would you know create flows together if I have two screens and I link them together in some way like if I click on that screen it goes to the next I've created a prototype and then I can access it by clicking plus I can also see a bunch of different things I can choose the interaction so whether it's on click or whether it's on hover or while I'm pressing and once I've chosen the interaction I can you know choose the destination where is it going to so just one frame to the next and then you can choose the animation you can go move in you can choose smart animate and it'll give you some like cool bouncy effects that you can use so lots of cool things that you can play with over here another thing is you can define a lot of things like devices that you may see whether it's like a 11 13 Pro and you can customize that all here as well so that's what you'll do your prototyping stuff inspect is really great for developers to come in so if I wanted to just jump right here and go to my button whoops zooming in so if I'm going to look at my button over here I can easily see all the properties for that button I can see its height I can see it's border radius I can see the padding involved in that button I can see all the actual CSS codes spit out over here this is where her developers will really find it easy to find the elements that you've created and turn that design into code and that is the right sidebar [Music] hey everyone I want to jump right into frame so frames are very important for creating UI in figma so this is where the frame tool is you could easily create a frame by pressing F so if I just press F I've already have the tool selected over here I want to just point this out really quickly because when you do create a frame you're going to see the ability to create a frame based off of a phone size or a tablet size they even have desktop sizes so you can create the frame based off of that you can also just draw it on the board on the canvas area so I can just draw a large frame like that and it's automatically going to say frame one I'm going to just go back really quickly but if I select like say the phone it's going to automatically create that frame it also create the name for the frame it will name the frame based off of the type of device and you can also you know select that frame name and and rename it any which way you like so frames are really great for creating content or putting your content inside so how do you use frames so if I have my frame selected I can see all the properties associated with this Frame I can see you know it's fill I can you know add a different fill if I want to I can see like it's positioning I can see its size basically this is the majority of the stuff that you're gonna basically see with a frame now to create a frame you can do a couple different things so say if I have a couple of different items so I'm going to create some squares so I'm going to take the rectangle tool or I'm going to just press r and I'm going to hold down shift while I'm dragging to make a square I'm going to make a copy by pressing option so I have two squares here let's make them blue squares so we have two blue squares here now you can take two items and actually select them and group them as a frame the easiest way to do that is either click one and hold shift and click the other and you can do this until you decide not to do it and select a bunch or you can just drag over and you would select command option and G that is for Mac OS you can also do the same with Ctrl alt G on windows so that's how you group a frame and that's the easiest way for that now if I wanted to take this Frame away I'm just going to just press shift command G which is actually the same or similar command to which is on Windows which is shift Ctrl G so I've selected that now the frame has disappeared so I like to you know put frames within frames just as containers to hold my content and you're going to see how I do that later thank you okay so you may be wondering you have frames which are really important then you have groups and they may seem really similar so if I take two items here I'm going to hold down shift and do it I'm just going to press Ctrl G on windows so I'm just going to create a group you can also select whether you want that to be a frame up here you can toggle between the two now there's a couple different use cases for groups versus frames frames are really great for I mean a lot of things I personally like to use groups for shapes whether that's like a logo because when you do select a group and you scale it all the content basically retains that like dimension of the group so it's going to shrink within every single way it's going to scale with it and that's really helpful for things like logos or little like little elements that you have on the screen so that's really helpful for that now if I were to do that with a frame you're going to notice that this is different see the frame acts like a box and you can have the same desired effect that a group has with a frame but it's going to basically be a little bit harder you're going to have to select the items within and adjust their constraints accordingly so over here I have the box and I'm going to have to set it to maybe left and right and top and bottom that means that when the frame moves left and right it's going to move with it so let's look at the difference between this one versus this one so I'm going to make this one red so it's just easier to know which one has the constraint set so this one has a constraint set the blue one and I'm just gonna you know move it around you see how that kind of takes on the same same type of movement as the larger frame whereas the red one is just kind of sticking there because right now it's set to left and top so if I were to move the left side or the top it's going to stick so groups are really great for basically you want when you want to retain like the size of the larger group that those items are a part of so I like to use them for shapes and things like the logos and those types of vectors now if I want to ungroup that's really easy you just miss a shift command G basically the same thing as ungrouping a frame and for Windows that is shift Ctrl G so command G or Ctrl G shift command G if Ctrl G and that is how you create and remove groups hey everyone I want to talk about both basic shapes and Boolean operations because these are some pretty cool things that you can do in figma so let's Jump Right In so up here in the article bar we're going to have our shapes and we can basically see all our shapes we'll see our rectangle our line Arrow ellipse polygon star and their Associated shortcuts on the left hand side so an example is for rectangle if I just press R I have it selected and I can draw a rectangle a rectangle basically will be able to create both rectangles and squares now if I select l I have the line tool and I can make horizontal lines like that or I could make some vertical lines let me just select L again I'm holding shift because if I hold shift I can create squares that are actual squares instead of like rectangles if I hold shift here I can basically create lines that are very straight and not on the angle so if I want a vertical rule like that or a vertical rule like that I'll hold shift to do that so I'm just going to select those and turn them into white rules because I'm using the dark mode in figma and we have arrows so that's shift l so you can just draw an arrow like this turn that into the a white arrow and you can set the settings here whether that's like a triangular Arrow you can set like the back whether it's like a little circle you can set the stroke so you can create arrows also within figma which is really helpful you can also create ellipses in circles so I'm going to press o and O is going to allow me to do that so that you can create ovals so you can both create ovals and if you hold shift you'll be able to create circles and these can be used as they are or manipulated to create custom shapes with curved lines so you can create like pie charts like that you know some pretty cool stuff I'm just going to go back you'll see this little dot pop up this Arc and then you can create like your pie chart as you see fit so really cool I create like a little Pac-Man there but really cool feature that figma has released here and we have the polygon polygon does not have a shortcut so we're just going to select that now the polygon tool allows you to draw an enclosed shape that is made up of any number of straight lines so I'm just going to draw in the default one right now is the triangle but I can adjust the radius I can also adjust the count to make like hexagons and and so on and and octagons and and yeah so I mean you can really create some pretty cool shapes just with the polygon tool and then we have these star tool which is really cool as well and it kind of functions very much like the polygon tool so if I take this I can you know make it a little more chunkier I can make the radius a little more softer and then I can increase the count or decrease the count so lots of cool different shapes that can come out of both the polygon and the star tool now if you're really into you know creating unique or complex shapes you can build your own Vector networks using figma's pen tool and that's over here right beside the shapes drop down so if I select that or you know if I select p I can create these little lines and connect them to create some cool things you can give that a fill I can also go back and adjust like the curves if I want to so if you're really into doing stuff like that the pen tool is your friend and let's talk about Boolean operations so we have the union tool so I'm going to actually start fresh here just lower I'm going to press o and get the ellipse holding down shift and I'm going to make another one so now I have both of these layers so as you can tell this one's over this one and if I want to make like a moon I can select both and here I have my Boolean operations I can merge them together so that's your union so I have these two circles actually let me just like grab a square as well like we can make some pretty unique things so I have my Square here or my rectangle and I'm going to just pick a new color for it oops so there's my new color and I'm going to select both and go to Boolean operation so the union selection so what this does is it combines the shapes into like a group so it doesn't matter what's overlapping what it will essentially just become like a group like this you're going to basically take the color from the overlapping uh shape in this instance now I'm going to undo that and let's look at the next one we have subtract now subtract is basically the opposite of Union it removes the area of a shape or set of shapes from the shape on the bottom only the bottom layer is solid and the rest are subtracted from it so let's see so we have like a half circle here now the next one is the intersect selection now this one's actually really interesting because the intersect creates a group where the shape consists only of the overlapping parts of the layers so do you see how only this is going to show up when I select that intersect selection and the last one is exclude that's right here and exclude is essentially the opposite of intersect it exclude only shows the areas of its sub-layers that do not overlap and that is how you use shapes and Boolean operations thank you hey everyone welcome back we are going to talk about images within figma so we are going to use a ton of images I mean it's just the way it is whether it's for like product images whether it's just for like landing page images I mean there's so many reasons why we are going to use images and I'm not going to get into that because I think you all know now the ways we can add images to our file it varies I personally like using plugins and I'll explain what plugins are after but the ways to add images the two main ways that I personally like to do it is through copy and pasting I mean and then there's drag and drop then there's the Third Way which is essentially importing the image through the file browser so I'm going to show you the easiest way to do it an example is say you're in another file so I'm in this file and I see this image that I really like I can just copy it by pressing command C or control C and then going back to my other Tab and then pasting it with command V or control V and that image is going to show up here now you can also access that file on your desktop and you can drag it right into the canvas and that's going to be totally fine as well you can do this with everything frames you can do it with like groups anything from one file to the other you can basically do that so as you can tell I just pasted the whole frame in here so I'm just going to delete these I'm actually going to use the other way to get one of the pictures I want in here so if I use the rectangle tool and go down to place image you'll see the shortcut and you'll see that you can just click this button and it's going to prompt you to select the image that you want so I'm just going to go into my figma images and then I'm going to my large image.png and I'm going to place all you can just click on the canvas as well and it's going to place that so that's how you get a picture into your file through importing it now you can edit your picture in so many different ways let's take a look over here to our design tab on the right sidebar now you can scale it so if I want to adjust it you'll notice that the image is actually like it's fine it's just kind of filling the the container this is kind of acting like a frame in a way it's pretty interesting and that's why I like using pictures like this in figma so you can you know just size it like that you can also hold shift in size and it's all going to size as well so if you want to retain that original ratio of the image that you had you can also just adjust things like the radius you can adjust like if it's rotated here you can even do that here by just like spinning it you see this little angled cursor I have now now I can just take it for a spin so that's really easy and the other things that I really like about images is like the settings right here within the fill so you can choose right now it's set to fill and that's why it's moving like this but if I said that to fit it's going to fit basically whether it's the fitting it horizontally or vertically see it's fitting the top and the bottom but if I shrink it or make it more skinnier it's going to keep the original ratio of the image and it's gonna you know just fit the width and then you have crop so you can crop it any which way you want now the problem with crop though is like when you go to move it in different ways now it's you know it's not going to keep the same aspect ratio for the actual image and then you're going to skew it so I'm just going to go back so we have crop and we also have tile so if your image doesn't you know span I don't really use tile at all probably could be useful for patterns I personally use fill a lot and sometimes crop depending on the image especially with like landing pages so that's how you can adjust some of the you know different types of cropping and positioning you can also set different things like you know the exposure if you really want to get into some like editing the contrast saturation I know I'm making this look really bad but I'm just showing you all the different things you can do with a image you know it's Shadows that's horrible so I'm just gonna reverse all of that there we go you can also set the the blend mode over here and you know you have multiply darken so if you want to do a little bit of like you know Photoshop kind of-esque uh stuff you can do that as well with some of the layers the other great thing that I really love about figma is that you know you can actually come here into the fill and adjust and add like if I want to add say a gradient I can do that I can just add a new layer go up here set it to like solid you know set to a hundred percent and then you can start playing around with like how that kind of looks like oops I'm gonna go back and yeah you can make like your own gradients if you want so here I can just make like a white gradient that slowly goes into light up here so that's that's another thing you can do with some of these uh figma fills over here which is really really interesting and that is how you use images in figma hey everyone welcome back we are going to talk about how to get started with text now text is really easy to use first thing I'm just going to do to make it easier for everyone to see is I'm going to press F and create a frame I'm just going to use one of the frames over here so we have our frame now we have our text tool and now you can just press T to get that tool and you'll be already equipped with it so if I zoom in here I'm going to go right in so what I'm using you'll notice how I can zoom in pretty easy because I'm using the command plus over here the shortcut you know you use what is best for you that's how I like to just quickly zoom in and out I love using the shortcuts and the easiest way to create a text layer is just by pressing down so I've already you know there is the layer it's showing up in my left side and if I say hello welcome Melanie maybe this is like the intro text to an app so I've created the text layer one thing we're going to do is we're going to jump right into here this is what is available for you now these are the properties for a text layer so we've learned how to create a text layer now we can resize text layers but the problem is you know it's a little hard to resize text layers so they don't necessarily shrink but the content will go to the next line if you drag it below you know that may get things messed up and the easiest way to reset once you've done something like this is to either press one of these so you can set auto with which would mean that it's just going to go based off of the width of the content or you can set an auto height but it's going to basically cut it at a fixed width so now I've created this with it can still build below like like you're noticing right now but it's not like totally uncontrolled when it comes to like how we were initially resizing it so that's how you resize so I'm just going to keep it like this for now right here where it's just like totally automatic and let's take a look at some of the text properties so I have my font I have the font weight so I'm going to use like a bold on this one oh maybe a little too bold I'm gonna use semi bold and we have our font size so I'm going to set that to like 48 whoa too huge let's get down to 24. okay we have the spacing between letters so if I set that to like four percent you see how the letters basically are more spread apart so I'm going to undo that because I think they're fine right now we can set also the line height I like to go based off of percentages so I like to go to say like 115 for headings maybe 125 to 150 for body copy I'm gonna make a copy below this just so you all can see what I'm doing here and I'm gonna actually you know use some filler text so I'm going to use a plug-in really quickly so I can grab some of that text and I'm gonna give it like four sentences so you can see now it's been filled with four sentences it's really long so I'm gonna have to shrink that text oops Let's uh do that again sizing to 14 and I'm going to zoom out so I can grab it and bring it in so there's my text now I'm going to bring it to 150 percent so the spacing between the lines is better and set it to regular now we also have paragraph spacing I've already talked about some of the resizing options here you can make them the center aligned this is just alignment right align left aligned you can have an example as if I've set the height fixed you can adjust where the text aligns there another interesting thing is you can go even into more details by pressing that more icon and you can set the resizing in here oops you can also you know make it Justified for an alignment you can have underline strikethroughs you can have paragraph spacing an indents and list Styles yes figma now supports list Styles which is great you can also specify the case style so really great for like things like subheadings so that is what is available to you when it comes to the properties for text now I have two text layers here pretty cool and that didn't take us long and you'll be just zipping through all of this really quickly once you get your handle on text because text is one of the big types of UI elements that we're going to use a lot of now I'm just gonna just quickly demonstrate list items so if you do have a list item I'm just going to go to the very front of my list item and Jen just Dash into space and it's automatically going to create a list item for me so you can create a bunch of them I'm just copy and pasting them and you can set what type of list item they are whether they're a number list or a bulleted list so figma also allows you to adjust the fill of text as well so you can do that all over here in this little fill panel and that is how you use text in figma hey everyone welcome back we're going to be talking about constraints now constraints are really important if you're using regular frames and I'll get into that right now so let's jump right in so I'm going to press F to get my frame and I'm just going to pick any frame I'm just going to pick this one over here so now that we have our frame in place what we're going to do is we're going to place some items in there now I'm just going to press R to get a rectangle I'm going to place one rectangle here and I'm going to place another rectangle below it now I have two rectangles so constraints tell figma how layers should respond when you resize the frames so let's take a look here if I'm going to resize my frame you notice that the layer beneath doesn't actually move now this really helps you control how designs look across different screen sizes and devices so there's two types of constraints you have horizontal constraints and vertical constraints constraints are located over here on the right sidebar so these are horizontal and these are vertical constraints you'll notice that it says left and this one says top that means that when I move the left side you're going to move with it and if I move the top side they're going to move with it as well now I want to set it to left and right and I'll leave that one at top now let's see what happens to this rectangle when I resize the frame you'll notice that now it shrinks and grows so that's pretty awesome you can even do it in this way as well so I'm going to leave that when I left and I'm going to do top and bottom for the vertical constraints you'll notice that now it shrinks up and down you can even do things such as let's move this one just a little bit lower for vertical constraints you can do Center so that means it's just going to stay kind of in place watch so it centers itself you can do this even for horizontal constraints as well you can do scale this is really great if you want something to grow so notice how that rectangle is going to grow in height and in width as you grow the frame pretty cool right you can apply constraints to any layer within a frame it's not possible to apply constraints to layers outside of a frame so if we now have this layer I'm going to just create a copy so I'm going to do command or control C and go click outside the frame and I'm going to press command V and Ctrl V would be for Windows and I'll just drag that right outside the frame so you notice how it doesn't have the constraints on the side like it did within the regular frame that's because it's not within a frame you can only apply constraints within a frame or layers within an auto load frame so layers within an auto layout frame and layers outside of a regular frame will have constraints only regular frames will have constraints sometimes though you do want to resize the frame with resizing the items Within and the way to do that is to ignore the constraints and the shortcut to hold is command for Mac and control for Windows so let's take a look so if I'm going to resize this again this is set to scale I'm just going to leave it so you'll notice that okay now I don't want to do anything I'm just going to hold command and I can do at any point see I'm holding command now and it'll be controlled for Windows users now the items within are not moving let me just move this one out of the frame there but as soon as I start to let go of that shortcut things start to scale again and that is how you use constraints Within figma hey everyone and welcome back we are going to get into how to use Auto layout so Auto layout is a feature that is essentially part of regular frame so let's Jump Right In I'm going to press f to get my framed list and then I'm going to just you know select the first one just for the sake of our demonstration so I'm going to rename this and to rename it quickly you can press command r or control R and I am just going to call this my auto layout frame and I'm just going to shrink it just a bit and I'm going to create another frame below it and I'm just going to call this my regular frame so everyone can see the difference now Auto layout frames are really great if you want to have like responsiveness a part of it if you want to essentially make sure that like you can build some nice lists it's really great for even you know creating like buttons that are responsive so I'm just going to get into a quick demonstration so I'm going to create a rectangle her Square doesn't matter I'm going to place it inside both of these frames now when we look at the regular frame you know everything is as we learned before about frames but now let's turn this into an auto layout frame over here so I'm going to click that frame and if you go over to the properties panels over on the right on the right sidebar in the design panel you'll notice Auto layout if you click that little plus button now it is in an auto layout frame I'll get into what all this means in a quick second but this allows you to adjust padding and between items and the padding between of that is horizontal and vertical so if I were to say add another item like let me add another rectangle you can just copy and paste it you notice how the whole frame grows and if I add more the frame keeps on growing and you can even adjust how that Frame Works the direction if you wanted to go vertical or horizontal and there are many more details there you can even Nest Auto layout frames within frames so I'm just going to move this one down and like here if you press command C and command V or control C control V it doesn't adjust the frame so Auto layout frames are really great for responsiveness let's Jump Right In so we have another frame that I want to create so I'm going to just create two frames of two so one and two and then another frame so I'm going to select these ones I'm going to hold down shift and I'm going to right click and if we go down we can see that we can turn it into an auto layout so we can add Auto layout that is another frame so and you can see it here it is applied as well and I'm going to do the same over here right click and it's shift a as the shortcut as you notice over here this allows me to Nest frames within frames this is really powerful for layouts we'll be using this in certain demonstrations as well but if I now say change the direction we're not going to have 4 vertically we're going to have those two frames stack on to one another and you can see how they're nested below so we have our two rectangles up top and two rectangles at the bottom and you can make some pretty cool grids and you can even Nest another frame within this Frame if you'd want it to and the easiest way to add new items you can you know copy and paste you can also duplicate which is command D or control D which will duplicate what your last action so I'm just going to go back with the command Z and you could also reorder the object so I'm just going to change the color here really quickly if I use my arrow keys I can order the object within a frame and even the frame within the other frame so you can reorder things really quickly just using your arrow keys or you can click and drag oops just be careful not to drag it outside the frame and if I really wanted to just you know if I wanted to hide them or delete them I can do that as well so I can hide them like that or I can just delete it and it's gone and that is how you use Auto layout frames in the most basic sense [Music] hey everyone welcome back I wanted to get a little bit more into the details of using Auto layout within figma so Arlo is like I said a great tool for creating some responsive designs but there's a lot of different things that we need to learn about in order to use it effectively so I'm going to create another frame so here's my nice frame here and we're just going to call this our Auto layout frame perfect now I'm going to take another rectangle and just place inside my frame now I'm going to go to auto layer over here on the right sidebar and now I've created an auto layout frame I'm going to just duplicate another rectangle within this Frame so that way we have two rectangles to work with actually let's just do three as well so I pressed command D you can even use Ctrl D so let's Jump Right In so Auto load frames are really good I mean you can create buttons that grow or Shrink as you edit the text label you can build lists that adapt as items are added removed or hidden you can combine Auto layout frames to build complete interfaces So Think Like Cards you have like a card portion with like the button that's in there you have text in another frame mind you the button is probably its own Auto layout frame and then you have the image that's a frame as well so you can build these complete interfaces just with nesting all these Auto layout frames now let's talk about the different properties within an auto layout frame so selecting my frame I'm just going to go to the right here you can select the direction this is the direction you can do a horizontal or vertical and Direction describes the way the auto layout frame will actually flow so I'm just choosing vertical for now you can choose the spacing between items which is over here so this is 10 pixels I can choose say 24. that's perfect now adjusting the spacing between using canvas controls or spacing fields in the right sidebar now you can do it this way manually like that or you can just go over there now padding is another very important part the padding is going to be your horizontal padding which you see over here and your vertical padding and you can adjust that by either dragging it I'm just going to select 24. you can even do that manually by using the canvas now the padding is essentially the empty white space between the boundary of an auto layout frame and the frame's child objects so think of frames as like a parent and these are little children within them so like I mentioned you can set padding uniformly which is like selecting 24 and 24 here which will oops not that much that's too big and you can also go into the nitty-gritty details and just select bottom padding to be 12 and left padding to be a or something like that it really depends on your use case here now the other thing that I haven't mentioned is alignment now you need to choose how to align child objects within an auto layout frame both the direction of the auto layout frame and the distribution will determine what alignment options you have available so with that being said I had a couple of different objects like this and I'm going to change the direction like that you can see this is where you can choose the alignment if I want them to be centered align to the bottom you know to the middle this is the middle this is the middle bottom bottom right you can choose all these different types of directions if I wanted to say make one wider then you'll start seeing the differences here foreign so that is how alignment Works distribution is another key part that's hidden in this little menu the advanced layout settings so let's get into it once you set the alignment rules for your child objects in a frame choose how those objects will then be distributed within that frame so right now they're packed and that means that they're packed based off of the spacing between the items if I were to select space between now they're going to just spread out so let's take a look on what that looks like so I'm just going to make this a little smaller now if I extend this like that you'll notice that the padding is just automatically spacing itself out now that is because it's set to space between that's how distribution essentially works you notice that the frame now doesn't go back and that's because it is not set to hug contents let's talk a bit now about resizing this is resizing up here now one of the most powerful functions of Auto layout is its ability to control the dimensions of the objects in an auto layout frame so there's different types of ways you can resize you can make it fixed hug and fill so let's take a look over here this is set to fixed that means it has a fixed width of 218 pixels I'm going to fill the container that means it's going to fill all the way across and this is amazing if you want to create frames that are responsive look at the top layer in comparison to the two bottom layers those rectangles are set to fixed but say I want my frame just to hug the width of the content Within now it's hugging the maximum width these are still set to fixed now this one is still set to fill you can have one say set to fix like this and then these ones set to fill as well so that is how resizing works it's really powerful now you can still apply constraints to the auto layout frame itself if it's nested within a regular frame the constraints section and resizing options will appear allowing you to really set those options if you need to so let's take a look here so you'll notice if I select this my constraints don't show up because it's in an auto layout frame again my constraints are not here but I'm going to create a new frame if I take this in throw it inside this Frame by just dragging it over and I'm going to set a stroke so we can see where it is I'm going to center it now my constraints are showing up here you can set this to anything you'd like so the problem is left and right isn't showing up here that's because it's set to hugging content so if I say set it to fixed width and leave the hugging up here that's fine for now now is available and I'm actually going to select all of these items and you can do that quickly by pressing shift and holding them or Ctrl a or command a and I'm going to set them all to fill container and now we're going to see how responsive this gets so you can still build responsive interfaces even with regular frames combined with auto layout frames this is a really great way to show how you can build some really great interfaces and that's how you use Auto layout frames hey everyone I wanted to teach you all what the figma community is now the great part about the design Community is we love to share files we love to share what we're doing and making those resources easily available to one another is a big part of the figma community now how do you find files well that's really easy so you can go into this little section right when you log in and I'm going to go to the community and here you'll be able to find so many different things you can just explore based off what is you know the most recent you know based off of what the award winners are I mean this is currently what I'm looking at trending files there are so many different things based off of different types of categories even figma produces its own types of files for you to use this is where you're going to find plugins files and everything in between let's Jump Right In so the reason why you would come here is because you would like to maybe reuse something now the easiest way to do that is just to basically search or you can go ahead and take a look at what's been trending let's take a look so say I wanted to grab one of these you know one of these files all I would do is I would click on the file so this is an interesting one this is an auto layout one and then you'd be brought to this listing page or file page here you can take a look and move around with the file to see if it's something you'd like which is a great feature because sometimes you don't want to download things that you don't want you're not necessarily downloading them but you'll be duplicating the file you can heart the file up here you can even see what discussion is happening below you can share it you can read more about it sometimes certain files that you're duplicating or certain plugins that are here will have a lot of information about where else you can read up about it if it's you know something that's really complex or if you'd like to learn a little bit more about the person who created it now to get this file what I'm going to do is I'm going to hit duplicate and what it's going to do is it's going to open that file for me and what it's done is actually made a duplicate in my drafts so if I go back to the home icon and go back and I look at my drafts I can now see that right there I'm in there right now you can see my little Avatar and now I have full control over this entire file and that is how you access free resources through the figma community foreign [Music] hey guys welcome back we're going to be talking about plugins so I have this nice little card here that I had signed using some Auto layout you can see that we have some nested containers in here now the only thing that's missing actually there's a couple of things missing here I don't have a nice image and I don't have potty copy body copy here and title copy so I really don't know what to say this is just going to be a placeholder But ultimately I need some stuff to fill in my card no you may be wondering like what does this have to do with plugins well the good thing is figma offers plugins and those plugins are created by the community ultimately they're going to help you increase your workflow so they're not gonna make you think about the unimportant things like which image needs to go here and what type of copy do I need to think about here you can think about all that important stuff afterwards and you could just worry about designing so plugins are essentially these third-party scripts or types of applications that extend the functionality that figma has to offer you can use these plugins to customize your experience or create more efficient workflows in figma and that goes the same for fig jam2 so I'm going to do is I'm going to go home and I'm going to go to the Community page over here you can search specifically by the category of plugins or you can search your community now I'm going to just do a text search and I know what type of plugin I want for imagery I'm just going to search up unsplash now this is a really great plugin and I suggest everyone gets it as well now here we go I'm gonna go to the plugins tab up here and here it is I'm going to install it so when you find the plugin that you want you can either go to the page or you can go to that list page that we were just on and once again you can read all the content here you can go to the actual website any comments version history all that important information is going to be here and then you just click that little install button which I've done and now it's telling me that okay it's installed now you may be thinking what do I do now well the good news is you don't have to do much all you have to do is go back to your file give it a right click and then you'll notice I have unsplash here and I have alarm ipsum plug-in you may be wondering what that is so let's use that one first so what I'm going to do here is I am going to click onto my text file sorry my text layer go into my plugins and go to lorem ipsum now this specific plugin this is what it looks like so I don't want to close it after generating the text and I don't really want to begin with lorem ipsum this is going to give me some placeholder text so I just want two words okay and there's just a title it allows me to just fill up my card with easy easy placeholder stuff so I'm going to use around three paragraph oh not paragraph sorry three sentences that would be way too long okay and I'm just going to resize that to fill the container and oops there we go so I'm just going to close that plugin and I'm going to go over to here and space that out that's the line height at 150 percent and there we go now we have some placeholder text now let's use our other plugin so we don't really have to select anything for our other plugin just yet at least we're going to go into our plugins and I'm going to select unsplash here it is perfect I love this plugin this is one of my favorite ones it gives me really great imagery without having to worry too much so I'm going to go into my search and I'm just going to find something abstract let's see so it's going to give me a bunch of different options here and that is when I'm going to select my rectangle so this is a rectangle layer you can use a frame layer But ultimately what we're going to do is when you select this layer and select an image that you like let's first find something that we like hmm there are a lot of different options here I think I'm going to go with let's go with this okay so I'm going to select it and what it's going to do is it's going to appear in the fills panel so it's going to keep the rectangle but now I can just remove this other fill because I don't need it and just keep this one here and there you go now you can close this if I didn't want to put it in here I can just select that image that I want and it's just going to appear in my canvas and then I can do whatever I'd like to it place that inside let me close this plugin I can place it inside my card so you can do it that way too still an image layer but yeah that is how you use the unsplash plugin and the lorem ipsum plugin remember try to use the plugins are going to work for you they're going to be really great for making you create some more efficient workflows in figma foreign welcome back I want to get into something else that is really important now if you're going to be working on a design team or working with Engineers or developers working with project managers you'll often be sharing your prototypes and your designs now you may be wondering well how do I share well it's that big blue button right in the right corner now a couple things about this when I do click this I have a couple of different options here well several options you can actually put in their email here you can enter that email and you can select what type of you know permission they have whether that's editing or viewing so that's that's really great if you know their email or you can specify that nobody can essentially access this file even if there is a link you need to be invited to this file or you can say anyone with a link can view now when you're on a professional account versus a starter account you're going to have a couple of little differences here these starter accounts not going to allow you to have that option to allow them to edit just yet you're going to need to either invite them by email or once they show up in this list you can specify their permission but you can't have another person editing your file then all you need to really do and this is what I often do when I'm interfacing with my design team and I'm telling more Junior designers okay this is what this needs to look like or this is what I did I want some feedback or I left some feedback on your file here's a link so I'll just copy that link and you'll notice that little toast come up and you just paste that link to them and that's essentially how you share a file now the real great thing is when people are in your file you'll see their little Avatar pop up besides yours so that's my avatar right now so you'll see there's pop-up but they can make comments and all you need to do to make a comment is to go to the toolbar and click this button this little icon here or you can see that little shortcut is C so I can leave a comment there and say whoa cool image and you can do a couple things when you're making a comment you can comment directly onto a layer over here or a frame and these will be attached to that frame you can comment on a prototype you can also mention people with using the ah sign so I just mentioned myself you can also add emojis and there's my comment so I'm just going to press V because that's going to bring me back to my move tool so I'm going to press V now when you move this the common is attached if the comment were off the frame it wouldn't attach let's go back to our comments so if I click that column icon again this is where I'm going to manage my comments on the right side I can you know sort them and filter them by all comments mentions and replies we also have the ability to hide comments we also have the ability to sort them here you can sort them by specific things pages and or threads and whatever is resolved I'll get into that in a second but this is where you're going to see all your comments you can delete them here you can copy a link directly to that comment you can also resolve that comment by clicking this little icon with a check box you can do that here as well you can dock it to the side so that way you can move around and it's not over your design you can copy a link here and delete the thread you can also just close the comment but this is how you would resolve a comment so once it's resolved it's gone you can however go back into your sort and show the resolved comments so I have one from even three days ago that's over here that shows up so that's basically how you use comment in figma and you should get notifications if somebody either mentions you or if there's a comment on your file and you can adjust those notification preferences as well but that is how you comment in figma hey everyone and welcome back we are in our resource right here that is available to you all and essentially what we are going to do today is we are going to create an awesome landing page now I have it ready for you all and it's in that resource but we're gonna do it side by side piece by piece together we're going to learn a bunch of different things we're going to learn how to use text layers properly within a design we're going to learn how to use imagery we're going to create some shapes we're also going to use things like frames groups and constraints we'll also use Auto layout frames for General layout and UI element creation and what you're going to need is the resource file you're going to need a couple of different plugins I'll show those to you right now you're going to need the lorem ipsum plugin which I will provide for you so this is what it looks like I'll provide a link for you and you will need the unsplash plugin which I will provide for you as well and that is all so let's Jump Right In and start creating this landing page hey everyone and welcome back and now I want to talk about logos so this is a landing page that I created for a consultancy pretty quick in terms of you know just the execution in general and and the logo is a pretty quick logo as well so I'm just going to take that logo here so let's take a look so how did I create this logo you'll notice a couple things here we have a bunch of different items so we have shapes here we have triangle shapes uh we have a circle we have a square and then they are grouped in a group and you can tell the difference between a group and a frame in two ways a frame looks like this traditional frame that's the layer what it looks like and a group looks like this you can also look up here whether it's a frame or a group so I'm going to show you how I did that so I'm just going to work just above here and you can work with me too so what I'm going to do is I'm going to go into my toolbar and select a rectangle and I'm going to hold down shift while I create that rectangle and there we go I have a square now I want that color you can do a couple things here you can either select manually through here or if you see a color on the page you can just press I and get the Color Picker then I can select whatever color I want so I'm going to select the red and I'm just going to leave it like that the next tool I'm going to grab is the ellipse tool instead of going to the toolbar this time I'm going to press o and I'm going to hold down shift 2 to create a perfect circle and the Color Picker I'm going to select I and select a circle and then I'm going back for the triangle so the triangle is going to be under the polygon tool and same thing I'm going to hold down the shift key now I have my triangle and I'm going to make it yellow so I have three different shapes here I'm gonna make this one a little bit bigger because it does give you a little bit of extra space here now you may be wondering okay we have some shapes now what do we do so you can rotate them this is what I did I actually rotated them like this this one I mean I Circle you don't really need to rotate and I'm going to rotate like that and there we go I'm actually going to just leave them like this and I'm going to select them all then I'm going to go up here into my alignment tools I'm going to align them together like that and then I'm going to rename my layers just because I am oops I spelled triangle wrong circle is the second one you can see what type of shape they are as well here let's there we go and this one is going to be square I'm going to select them all and I am going to group them so that's going to be Ctrl G or command G or you can right click and go here into the menu while selecting all of them and select group selection so now I have my group there so let's take a look I'm just going to rename it logo and there you go that's all it really takes to create a group and a logo so you could go ahead and you can do a bunch of different things here you can either leave it at that or if you're feeling a bit ambitious you can you can try and create something a little bit more original than using basic shapes say I wanted to make a circle and then underneath that Circle I wanted to create another Circle I know I'm moving a little quick here so you can overlap shapes you can even select both of them and go into your Boolean operations and I can say subtract and now I have a pretty cool shape here foreign how you can just make some pretty unique shapes by using basic shapes essentially but I'm going to delete that one for now so this is our logo and what I'm going to do is I am going to just create another large frame because we're going to create it side by side and I'm going to show you how to do that so we're just going to put that here just so we know that it is available to us so we have that landing page ready and we can put it side by side and now we have our logo asset so we're just going to move that over here and there you go hey everyone welcome back I want to talk about something really cool now and that is auto layout buttons so let's Jump Right In I'm just gonna copy this right here let's copy that and just drag it same thing here okay so now I have two buttons these are both Auto layout buttons and we're going to create them together so a lot of people like to create buttons with rectangles in the back and I personally don't like that so you'll see somebody go like basically they'll grab you know just the text layer and then they'll take rectangle and do this and I'm just going to move it to the back here so that they'll do something like this and then they'll maybe put in a frame and then they'll have to deal with constraints and you know things not working properly because then you have like a couple different things you have to worry about you'll have to worry about maybe the constraints of the resizing of the actual frame and also that of the rectangle within so this is a No-No let's let's avoid that so what I'm going to do is I'm going to actually keep that text layer and I'm going to remove the rectangle I'm going to take this text layer and I'm going to group it again so remember if you need the shortcut just right click and you'll see it over here so I framed it already using the shortcut I'm going to call this my button and then I'm going to Auto layup now because I'm selecting this button frame right here I'm going to press I and grab this color you'll notice that it didn't pop up that's because it's hidden so don't be scared if that happens here I can now adjust padding and I can also set like fixed Heights I like to set fixed Heights on my content when it's like a button that's not going to reach like a second line so I'll just bring that height to 48 pixels and then I'm going to start building it with auto layout so we have that selected the direction doesn't matter here neither does the spacing between the items because we don't have an icon in there so it's not really going to matter here we can actually start to the horizontal spacing the padding and I'm just going to select something like 32. and I'm going to make sure that this is aligned in the middle that's really nice and I'm not going to worry about the vertical padding because I don't really need it I set a fixed height on this as you can see up here and you don't really need to worry about that the other thing is the Border radius you can adjust that over here I'm going to set it to four let's see what that looks like that looks really nice so there's a couple things you can do with buttons here you can either set them to a fixed width like this so if you want really long buttons or you can set it to hug the contents and hugging the contents means that it's going to essentially be hugging the width of whatever is within plus the padding so you'll see the paddings over here is that 32 pixels now you may want to make a bunch of different buttons I like to have a couple different variations so I'm going to do is I'm going to duplicate this one by clicking in pressing command D I'm just going to drag it below and I'm going to make this version so what I'm going to do here is I'm going to bring down the text to let's say 14. I want this to be a transparent button like this so what I would do here is I would remove the fill and set a stroke so I'm going to press the little plus button on the stroke and from here I can click on this color click the Color Picker and then take that same blue same thing for the fill now one thing you may be wondering is oh my goodness this is a little bit of a large button so we can just shrink that down say 32 I think is fine and then we can adjust the padding accordingly and now we have a primary and a secondary button and that is how you make some quick buttons using Auto layout all right hey everyone and welcome back so the next part of this tutorial we're gonna jump right into the navigation so let's click in here so I have it set up as a header that's what I've named it and you can tell it's an auto layout frame just by its icon I've actually nested a couple things within so I have the navigation and then I have a horizontal rule that rule is that long horizontal line that goes across I'm going to teach you how to build this navigation so we've already built a couple pieces of it we've built the secondary button and we've built the logo now let's work on the text so I'm going to just work just above so you can see them both together and we're going to group them into a frame so let's jump right in so I'm gonna just select the text icon with my shortcut and I am going to start typing some options here so I have home and now I'm going to duplicate it about four times oops there we go there we go and there we go so I have a belt so I'm going to type about I have our work services and careers now when you're working on navigation items they all have different states they all just they all just look the same so what I'm going to do is I'm going to select them all and use the Color Picker and this is going to change the color for every single one of them I like this color I used so I'm going to do that you can also change the textiles so let's take a look at that so I'm going to have two different states here for now you'll probably have three you'll probably have something like an active State and a hover State and a default State this looks like a default State and we should probably have some sort of hover state I'm not going to really get into that right now I'm just going to show what the active state is and the default State and I'm just going to select regular for the default State and now because we're going to be on the home page I'm just going to select this one to be semi-bold and we're going to steal that color again I'm gonna find it down here in my document colors and that's essentially how we can start creating our navigation items I'm going to select them all again but this time I'm going to rename them all together I'm going to press command R and it'll be control R for Windows users over here is where we have the batch renaming modal and you can either you know put their current name in That's the sign for the current name some people like to have like them all named the same and then maybe some sort of variation afterwards it says like V1 or V2 or something like that it's totally up to you but I'm going to rename them all to nav item and the reason I'm doing this is just so I know exactly what they are and the next thing I'm going to do is since these are all essentially hugging their content you can tell that from over here they're at Auto with I'm going to select them all and I'm going to group them into a frame and I'm going to rename that frame by pressing command R and I'm going to just call it navigation items and then I'm turning it into an auto layout frame pretty sure you guessed that by now and you can select the spacing I'm going to select I think 32 pixels is fine you don't really need to select the alignment they're all essentially the same here but they're going to be spaced out horizontally in that direction and I'm not worried about anything else I just want this to you know be responsive if I need to add another navigation item or like remove one like it's all going to work together so now I have my navigation item here now what I'm going to do is I'm going to start bringing this into the frame I'm going to take this button as well because we're going to complete our navigation I'm going to take this logo group now I think the local group is fine we can either move it or I'm actually going to keep it at that same size I like having a group here because I can essentially you know manipulate it and the contents within the shapes are gonna take that form as well so what I'm going to do here is I'm going to take all of these select them all while holding shift and grip them into a frame you may be thinking my goodness frame after frame after frame and I promise you it is so worth it because you are going to create some really beautiful designs and you're going to have really clean files looking like this now this is a regular frame now we're going to turn it into an auto layout frame again we're not going to worry too much about like the actual width but I'm gonna actually make it span all the way to the edge now I want it so that all the content is based across from each other away from each other and not packed in so what that means is I want this on the left side I want this on the far right side and I want this content to be centered in the middle so let's do that so I'm going to go into my Advanced options here right now it's set to 64 pixels and instead of spacing mode at pact I'm going to select space between and there we go the only thing here is now we just need to ensure that the width is fine the the padding around the sides here so I'm going to select let's do 30. um actually let's do maybe 56 pixels there we go so now we have 56 pixels for the spacing and I think that works perfectly now the last part is we need to get a horizontal rule like here now to do that I'm going to go into my shapes and you can press L as well now I have my line tool and I'm going to hold down shift while I click and drag and it's only going to let me go into 45 degree increments in terms of the angle but I'm just gonna I'm gonna hold it like this and make it straight right now it's black and we don't want that color we want something a little bit lighter something like that works perfectly well and I'm going to rename it and there we go and I'm sure you've guessed it about now we are going to group this into a frame again so I'm just going to use a shortcut here and there we go so we have a frame I'm going to call it header like I did in the previous file or a frame that I'm showing you over here and I'm going to make that an auto layout frame and the things that we need to do here is we need to adjust the spacing now I think 24 pixels is sufficient here that's kind of what it looks like there not that we're trying to match it pixel by pixel and you'll notice one thing the rule is out of place it's doesn't go all the way so we're going to have to resize it and the easiest way to do that and make it responsive is to go up here so I'm going to fill that container and now we have it spanning the entire width so let's take a look here it's making me select okay so now you'll notice one thing the line moves the horizontal rule but the navigation doesn't and that's because we need to set it to fill the container if you select hug contents it's going to hug the contents and it's not it's going to be packed instead of actually having the space between so don't do that perfect now we've created our navigation oops see it's it's trying to make me set the horizontal pad in there the last thing I do is just give it a top padding of 24 pixels and then I can place it up here and there we go we have a pretty cool navigation hey everyone and welcome back we are gonna Now work on some of the text elements here and we're going to start grouping this with some of our UI elements like our button so let's get right into it now the easiest way to do this is to just press the text layer so t and then you'll want to Define what your heading looks like so sometimes I'll like just write headline or header or title or something like that and I'll grab you know a large font size then I'll look for the font I want in this case we're using Merryweather I'm just going to use a regular and I'm going to grab the color by pressing I there we go now you can use the text I used or you can go ahead and use one of your plugins like Laura mipsum I'm going to use lorem ipsum for this particular tutorial but I'm going to select this layer because lorem ipsum won't work unless you select layer so I'm going to select layer and I'm going to just write one sentence there we go we have our sentence perfect that's great so that looks okay now what I'm going to do is I'm just going to duplicate this and drag it down and I'm going to find something more along the lines of some nice subtle body copy so I am going to grab that color right away and I definitely urge you all to you know experiment a bit see what you like oops that's Source any sorts Source Sans Pro I like that one like I said yeah do you think is you know gonna be best for your content not everything is going to be perfect maybe you don't want some body copy here and I mean that's totally fine 18 pixels maybe okay and I think that's fine and once again I'm going to grab the plugin and I want three sentences great so I have that perfect and I am just going to increase the line height now this is essentially where we are now now what we're gonna do is we basically have this and I'm actually gonna just step away from there for now so we have some copy here and you may be wondering well I want my copy maybe to be responsive or I want to group it so it's easier to move around and like I said what I'll usually do here is first I'll just you know rename this to like title or header or something like that or headline and I'll rename this to like body that way they'll have like a similar type of naming convention and I'll select both of them right click and I'm going to frame that selection and select auto layout here now I have my frame here and I am going to go into the spacing and select something you know reasonable like 16 pixels now this button let's throw that in here this is our primary button that we made now this is the one problem with auto layout you're going to have to Nest frames and I think one of the big reasons is because you don't sometimes want the same spacing between elements like we see here so I'm going to take my text layers again because I want them to be closer and the button to be more further down and I'm going to frame them using that shortcut and you can find that shortcut here and I'm going to make them a not a layout frame again and I'm just going to call this copy or text it really doesn't matter whatever works for you and whatever is clear and I'm going to set it to fill the container and there we go and I'm going to select all the layers within and set it to fill container as well and there we go now we can go ahead and select a larger spacing between the text content and the button and that is essentially how we can create our own text layer here now we can do a couple things we can leave it as is because right now nothing's responsive so we can you know go into here and go into our constraints because it is an auto layout within a regular frame I hope you all remembered that little distinction about constraints and set that to left and right we can also set this to left and right and now when I select it everything's a bit responsive so I'm going to leave it at that and that's how you create text layers and create responsive layouts Within hey everyone and welcome back we are going to get into some fun stuff over here we're going to talk about some of these images and shapes and we're going to get into how to get these images how to lay them out you know working with fills let's Jump Right In so the first thing I'm gonna do is I'm actually going to use a frame it doesn't matter you can use a frame or a rectangle I'm just going to create a frame here and I'm just going to call this large image and what I'm going to do is I'm going to go into my plugins and I'm going to unsplash so what I'm going to do here is I'm going to essentially just grab an image maybe whiteboarding is a better image oh there's one of them so we can actually go here and duplicate this Frame and call it a small image we found the exact image here actually that's kind of funny so we got that image we're gonna we have it ready already so that's great and I don't know these these people look like they're brainstorming maybe we'll find something along the same lines okay I think this one's gonna actually suffice so I'm going to close my plugin so now I have my images my large and my small image and what we're going to do here is we're just gonna actually start working in this area I'm going to layer them now I didn't do anything super crazy to be honest I'm going to just select them together and group them in the frame so they're grouped in a group right now I'm just going to select a frame and I am just gonna call this imagery now I wouldn't worry about resizing the frame or anything I'm just trying to get a sense of you know how I want to lay this out I'm gonna bring that because I think yeah I I think it can be like a full width almost and this content over here we can even apply a stroke to it so I'm going to apply a white stroke to give the kind of like cut out cut out effect that I've got going on here so I'm gonna apply a stroke and then I'm gonna create a larger width on that stroke so I'm going to call it something like 10 maybe 20 is enough let's see even 32 okay so 32 that's gonna work for us and you can essentially either specify if you want in the center or outside we'll just use it on the outside so now that we have our images I'm actually just going to place them within our frame over here so we have our frame with our images we're not worried about responsiveness just yet we're just trying to think through okay like I like this placement it looks nice it looks kind of natural and I want this to be underneath here so what we're going to do is we're just going to drag it up whoops we're going to drag the frame up and right now it is above so you can do a couple things here you can either you know this is our text layer so let's just name that quickly we can either drag this to the very top or you can say you could do something like this you can right click on here and send to the back or bring to the front so a couple different options you have there so now I have my layer what I'm going to do here is I'm going to maybe shrink it a bit like that I'm going to bring this in I'm going to bring this in as well okay that's good the problem is this part is not easy to read so let's make that a little easier I'm going to remove this layer and I'm going to add a new one now it's only going to come in at 20 and I'm going to change that to a hundred don't be scared it's just black and we're going to change that immediately so I'm going to select linear because we're going to make a gradient so we have white and this is the end of the gradient down here and make that white as well but it's at zero percent so that gradient kind of tapers off see how that works so we can get a little you know we can make it come in from the top there in the corner and adjust that nicely just so we can make sure that users will be able to read this and we can even adjust that and that's how you can make a gradient on top of an image already you don't need an image to make a gradient you can use just like a regular shape and I think that's going to suffice for now for our images [Music] hey everyone and welcome back we are going to be talking about this little section over here we have some little shapes actually I would say large shapes but they do derive from our actual Originals here so I'm going to show you how to make these Cool Shapes on this side so what I'm going to do is I'm gonna actually take these shapes and duplicate them or I'm just going to copy them and paste them so I'm going to copy I'm going to go into my frame here and command V so I have my little shapes here I'm just moving them down while holding shift and arrow keys so you can move them it's faster to hold shift so I'm going to select my frame and I'm going to make sure that it's not set to clip content because I want some of these shapes to come outside a little bit and I'm going to go into here and I am going to ungroup this layer hopefully everyone remembered how to ungroup but if you didn't don't worry about that just right click and the options there with the shortcut once again so I'm going to ungrip that layer and we can do a couple things here you can see on this example I've rotated them different ways and I'm using Strokes now let's get into how to use strokes and create these dotted lines so I am all over the place with this okay so we have our Square I'm going to make this a little bit larger and I'm going to make it over this guy's head and what I'm gonna do is I am actually just gonna create that stroke right away select a color and there we go we have a stroke and I'm going to remove the fill so the stroke is kind of hard to see that's fine I'm going to select four pixels as the stroke width and from here we can go into our Advanced stroke settings if you wanted you can have you know one stroke at the top or the right or you can set it to custom but we're not going to get into that just yet we're going to go into our Advanced stroke settings and we are gonna set the style to Dash and there we go we can specify the amount that we want do we want more space between the dash do we want less space I'm going to say we want more space to start so that is how you create Strokes let's keep on going so we have a circle I'm going to bring the circle down here like it's circled around this this little area like a sticky and I'm going to do the same thing I'm going to go here go into my Strokes select the color I want which is blue remove the fill select maybe I don't know let's say two and we are going to go into our advanced settings set it to Dash and I actually like four on this one I like the little spacing that we get and it's almost kind of like a dotted line okay you can also set the dash cap to a circular rounded Edge so we'll just do that I like that look too and then we're going to be really simple with this one I'm going to make this one one of the largest ones because and I'm going to tell you this right now modern design principles still apply to the web so what I'm saying and where at least I'm trying to get across here let's just bring that above is that we can use certain things like arrows or just the way we outline or place our images to point users eyes in a certain direction I want them pointed right towards that button that's like the main CTA here so I'm going to set that stroke where is that yellow there we go remove the fill and set this to something like 10. we can make that yellow a little bit more darker and easier to see and there we go we have some pretty cool shapes over here now they're all within this Frame they're all contained and I think that's it for the most part this is how you can use images in shapes Within figma foreign welcome back now we are at the very end of our project and you probably have something that looks maybe similar to this or you have some sort of web page that you've put together now the the one thing that I like to talk about is now if we take a look at the resource that's given to you use your right and left spacing and just resize you will notice a couple things like this thing is responsive now how are we going to get that same effect for ours let's take a look at what I have so far so nothing there is responsive the only thing that has kind of responsive here is the nav this isn't working the way I want it to so a couple things let's work on these pieces what I'm gonna do is I'm actually going to put them together and I'm going to group them into a frame I'm going to rename them and I'm just going to call it hero kind of like a hero image or something like that now I'm going to make sure that is the full width and the full height but I'm going to leave this to the right and I'm going to leave it fixed in terms of its width now let's go into our hero frame this can also stay as an Auto Lao frame because we have random shapes all over the place they're a little it's a little different when you have things that are overlapping you can't really do that with auto layout okay let's do this let's do this perfect let's work on the text first so I want the text to be off of this page by a wide margin and I wanted to fill the container so let's go in here let's go into our spacing and on the far left I'm going to set something like 120 pixels that way it pushes everything over I'm going to go into our text and ensure that it is actually set to fill so what this is going to do is it's going to fill this is going to be responsive and this is going to remain the same so when I start to move it like this let's sit there we go we got fixed content sorry you gotta set the constraints on that left and right so when we start moving this the hero should respond like that now we have some issues here with some spacing so let's go into our hero container our frame and we can set that spacing so I'm going to take a big chunk maybe 56 maybe that's not enough let's try that again how about something like 80. or more we can even do something like maybe like one oh not one thousand one twenty there we go that seems a bit better so we have a lot of spacing because we remember that we have this Arrow that's hanging out of the frame okay I think that's basically it for the text and our text is centered that's because we have it the alignment set like this let's do some work over here on the images now a couple things I think it's fine when we're moving like this but what about when we're doing this okay so the easiest way to do that when we're expanding from top to bottom is to ensure that this Frame is going to not only be fixed but it's actually going to fill that auto layout container so regular frames can fill Auto containers as well I'm going to leave the horizontal resizing to fixed now we're going to have to go inside to this container to play around so we can start working on you know some of the spacing I'm going to bring this down here like that and I'm going to make sure that this is set to right and bottom so that means when I resize it it's going to come in on the right but it's also going to oops stick to the bottom so we gotta make sure that is set this one's going to set to fill and let's go back into that small image perfect the square is fine we can set that to Center because we just we're not really going to worry too much about how these work too much when they are responsive Center is fine as long as like they kind of have some movement same with this perfect now this larger image I'm gonna have that come down a bit click here and what I'm going to do is I'm going to make sure when we scale from top to bottom this is going to stretch as well so we know that is working this way let's see how this is starting to shape up okay so one thing I noticed is our constraints aren't working properly that's because we haven't set the constraint for top and bottom here so let's do that again okay now we got something going here now we can fine tune here this is set to left that's fine this one can be set to bottom so it maybe follows this sticky this one too bring that here over this guy's face and we'll set this one to bottom so let's take a look now okay some more fine tuning we have here we have the square so it is set to bottom left oops perfect and for some reason that one isn't working properly that's okay we're gonna bring it down I think we can settle with something like Center let's see how this one works now but that is essentially what you're going to need to do to create a pretty awesome layout sometimes things can get a little finicky like you're witnessing with how this one's working but that one isn't but don't let that deter you I mean ultimately look at what we created with just some shapes some basic images some text UI elements we created a whole responsive layout pretty quickly and that's how you create a pretty quick landing page in figma hey everyone welcome back we're going to be talking about user flows today so what are user flows I see this question thrown around a bunch and people always say they are working on them but never really present them at all so what are they well user flow is essentially a series of steps like we have Illustrated over here and it is a series of steps a user takes to achieve a meaningful goal so why do we use them well you may be thinking you know are these wireframes are these like some part of our sketches well I mean they're used to communicate the intended flow of a user through various pages and actions in an app or website so how do we make them well your flow should include a name steps users and a description of what happens at each step so I really like this quote but Ryan singer from Basecamp created a great shorthand for user flows and he actually calls them UI flows it's basically what the user sees and then what they do and then the next step is what the user sees next and what they are going to do next it's really simple But ultimately user flows are just another method that designers are going to use to define their product experience websites Etc but wait it isn't just another method it's not just like sitemaps or it's not just the same as just sketching they have the ability to Define sections of something abstract or technical from the perspective of the user the most important thing about user flows is that the outline the goal your user achieves by completing the flow so here's an example this is a very basic user flow step one a user goes to a welcome screen step two they use a social login maybe step 3 and they get instant access to the product that is as simple as it gets so why do they help you maybe asking well I mean they are the best way to solve the issue of communicating the way we want our products to work and the way users interact with our products they also help us think about our product and the users who interact with it in three simple questions what is the goal of this thing so we want them to register for the product in this example who is doing it well a general user who is external from the product is doing this right now and how do they do it well they go to the welcome screen they use a social login and they get instant access to that product let's take a look at the process in a bit more detail before we begin we need structure we need Foundation gone are the days of creating these massive user flows that are sprawling all over the place and they really lead nowhere and they're hard to you know just comprehend if you're not the person who created them so Step One is what is the purpose of your user flow you really need to name your flow it's as simple as that give it a name that describes its purpose that is the goal the user achieves by completing the steps and surprisingly people often miss this step two right here despite popular belief user flows go in One Direction you don't want to be going all over the place limit your decision points in each flow so you can avoid crazy huge site maps and huge prototypes yes it's okay to have multiple decision points like what we see here and multiple prototypes and a site map we'll get into that later but when we want to convey a distinct interaction user flows work best that's the big difference and why is this the case well they tell a story and it's far easier for anyone to remember than a large product map or a series of cards in whatever tool you're using like jira or GitHub issues ETC the third piece of the process is they represent a complete task to ensure that your product is organized the scope of each flow should be a single task or a goal for your user you shouldn't be having massive you know you shouldn't have massive user flows to have like three or four different endings you really want to just hone in on like maybe one or two maybe there's a successful and unsuccessful path over here and ultimately that's going to be maybe something like you've applied for something and you didn't get accepted so remember keep those user flows concise if they're too short then you fail to tell a story and if they're too long then they lose their meaning remember your user flows should be the clearest model of your product and you can do that if you follow the rules I just laid out hey everyone welcome back I know explained what user flows are but I really want to get into some details about the things you should do and things that you shouldn't do so let's start user flows show the purpose of what you are trying to create so don't do this don't be vague vague user flows and names hide potential complexity and it really doesn't communicate enough information back to the viewer instead let's move up over to here instead you should use more descriptive names like add user payment details in comparison to just profile or something like that organize them into also separate flows if you need to if you have something that's a little bit more complex by naming your flows you're able to design from the user's perspective and you can split goals based off of their goals another don't let's get over to over here okay I see this a bunch especially from Junior designers your flow should always go in One Direction basically don't do this where you have these flows that are sprawling I mentioned this in the past but confusing flow maps are the absolute worst these work as a good site map or to show the way the navigation works in your product But ultimately these aren't essentially what a user flow is instead you should do this split them into distinct flows and categorize let's move on to the next one here it is okay a very important part of a user flow is its details don't do this don't add in useless information and don't miss the key information we need to know the details the user needs to take to complete a task and the actions instead let's take a look at a better example this is what you should be doing add the right amount of detail outlining each step and goal this way anyone can read and understand your flow so these are the do's and don'ts of creating user flows if you follow them to a t you should be good to go hey everyone and welcome back before we start I want to talk about what we are going to be building today so we're going to be working on our own user flows you'll have available assets over here in the assets page where you can use these different types of containers containing different types of like blocks of text imagery we have buttons and form elements and all that kind of stuff so you'll have all this available to you to just use right out of the gate I'll go into in a bit more detail on how to create some of these things really quickly but that really shouldn't hold you up too much the purpose really that we want to focus on is actually creating some really amazing user flows so we'll be working on three different types and these are the user flows that we're gonna have at the end of our tutorial and we are going to need a couple of things so we'll have those assets and we're going to need a plug-in and that plug-in over here is called autoflow now you may be wondering you can use these arrows that I've created or you can go ahead and actually use that plugin called autoflow I'll make that link available for everyone but this makes it really easy to just connect flows so all you need to do to use autoflow is hold or click on a device click on another device while holding shift and it's automatically going to create the arrow for you so totally up to you what you want to do if you want something a bit more like custom and different types of spacing I mean you have to go this route but if you do want to create a user flow just really quickly I would definitely suggest using this plugin super helpful and it's going to come in handy in a lot of different areas in design so let's get right into it and have some fun foreign and welcome back before we actually jump into the fun stuff of creating our own user flows I want to just talk about something that's really important here when you are creating a bunch of user flows you really want to be efficient and you want to speed up your workflow as much as possible you don't want to be spending time and time on trying to get like a perfect box or making sure your user flows are like High Fidelity because they really don't need to be they can be really simple now in this page over here called assets I have a bunch of different types of assets and what these are they kind of look like wireframe assets to be honest now the best thing we can actually do here is we need to think about all the different types of assets that we could possibly use and we can keep it really simple so what I've done is I've created a one column a bunch of assets so like just an image or image and you know like text and you know there's like some subheading and a heading and all that kind of stuff I also have a grid here as well all using Auto layout it's really simple stuff and I'll show you how to create a couple of these different things but I've created like even three column products based off of our client and what we want to build and I've also created just plain text pieces over here then we have some like inputs and buttons If you have like forms that you want to use I have like a primary and a secondary button and that's all I basically have here and I think you should do your best to also create something similar to this so that way you have something always to reference and to use so let's get into creating some of these little pieces so you can do it any which way you want I like to keep my things really neat so I'm just going to make a copy over here you have this file so I encourage you all to follow along to take a look and see if you could recreate some of these pieces I think maybe we can start with something like this so basically if we wanted to recreate this what I've done is I've have a frame here which is like the device frame and you can choose any size or you can just go ahead and choose like the 13 Pro I believe that's the size I'm using what I've done here is I've just rounded the corners to just give it a nice little effect and put a nice faint stroke just on the outside so I'm just going to add a stroke and add a color and we're going to move rather quickly through this and I am going to make that stroke dark so we can all see it and it was set to the outside now you can create anything you like you can create something that looks like mine it doesn't have to I'm just creating something really rough here so just to walk you through that process now the other interesting thing here is I'm going to make this an auto layout frame because I just want my content to like stack nicely I don't want to have to worry about like laying out to be honest like that's not my priority here I just need it to be neater and I can focus more so on writing the details so what I do is I just created an auto layout frame you can set the padding to whatever you like I think 16 or something like 24 is probably the best and then you can set the spacing I like keeping everything to 16 is totally fine now for these little squares what I did was I just created a square and I used the rectangle tool so you can go up here and get it or you can just press r so I'm going to use R and it doesn't really matter for the size just yet and I'm going to duplicate that by using the shortcut which is command D or control D and it's over here we'll make this a little bit darker so that way we can see so now we have two like blocks and we can use things like this as like imagery and we can group that into a frame and we can just call this like images or whatever you want then you can set the spacing in Auto layout and we can just throw this Frame right in oops so you can resize your device if you want so that is basically how you can just make like images and the same thing basically goes for these little like text layers all I've done is I've made these little rectangles and put them in a auto layout frame as you can see so if you're confused as to like oh well how did you make something like that just always look at the actual layers in here and break them down this is an auto layout frame you don't actually need this one so I could actually remove it and it still functions the same you can just adjust the width here instead of setting it to like fill the container like this and you can also set like some paragraph text if you want to have like the effect of having long text so there's there's a bunch of things you can do like that for buttons I essentially just created like the same thing I have another rectangle I just gave it like a fixed height of something and you know you have like a black version for like a primary and then you know you create another duplicate of that and you have we'll have a uh a secondary so maybe like if you have like a cancel and save button or something like that so you can go ahead and create different types of assets like that and I really do encourage you to do your best to you know name those assets right now I'm not being the best over here I just call it rectangle but if you look at the assets that you have available to you I have like primary button laid out and I think this is the first step into understanding how you could be way more efficient with your workflow now that is all you're really going to need to know to get started here and I wouldn't worry too much about like creating components just yet or anything like that I would use some of these assets and just start throwing them inside these devices you'll notice that they are fixed with and a fixed height so you can fill uh set these to fill the container and not really worried about you know how the container reacts and yeah that's basically it these are going to be some useful assets for you foreign and welcome back I want to talk about user flows and more specifically I want to talk about the one user flow that is registering for the product because it's very important for something like this now if you have images of your sketches or other types of resources that you think are gonna help you you can bring those images right into figma easily by just going over here and by placing the image and that's the shortcut for Mac users and you'll see it there for window users as well so that's an easy way or you can copy and paste that image directly from a website you can copy and paste it from another file but so I have all my assets here I have even like a title asset and a details asset and a device asset additionally to what we have here I'm going to create a large frame by pressing F and I'm just gonna bring that over there so I'm going to rename this one just generally just onboarding then I'm going to place my title in there it doesn't really matter I'm being you know a little messy and that's okay now the title of this flow is it's one of the most important things I think it should be like registering for our product so let's type that in okay and let's bring in our device and our details frame so I'm holding shift while I'm selecting both and just dragging them directly in the frame and you can see that pop up over here in the layers panel I also have an arrow here so we can keep that trusty Arrow okay so this is going to be our step one and when I think about just the first step of registering for a product I am going to start typing before I actually start designing just yet like just placing things within this device but the first thing I think about is like the user arrives at our welcome screen and notices a button to proceed forward to registration perfect I mean I think we should probably have like a little thing here that says this step is skippable or the user can skip this step okay so I'm just gonna increase the frame so I'm gonna hold down command or control and just bring that up here so that way we have a lot of space the one thing I want to stress here is that you know the first thing somebody sees when they come into the website or the product is that they are essentially you know they are going to see like a welcome screen of some sort so I duplicated this and brought it into here you can just like copy and paste it as well so I'll just grab a button here like a primary I'm going to copy that and click my frame and paste it and there we go I mean you can also go ahead and like I like to use colors sometimes because I think it helps just show you you know what are the interactive stage like do they click this and then do they click something else so I think this is just gonna suffice as like some sort of welcome screen then we're going to move over to the next screen so you can see you can start building these out rather quickly just by thinking even in your head I would actually sketch these out first and think about every single flow you have and you know which ones are really important for the success of your product like you don't need to do like a normal login flow I mean you could I mean it would take you probably like five minutes but I think that kind of design pattern is is pretty normalized when you're thinking about things that are much more custom like this registration where I don't know step two may be something like the user is prompted to add their email and password oops they can confirm those details so this is pretty standard but I think we need to also you know mention it but let's actually copy this whole container we can throw it in there oops there we go finally we can remove that just by pressing delete while clicking it and remove this one so and then there probably should be like maybe like a back button so I'm gonna take this whole container and paste it in take this black and I'm going to use the Color Picker by pressing I and select that blue so we have like a primary and secondary maybe this is like a skip button or something like that and I don't know I'm just trying to cover some bases well I'm also thinking a little bit about wireframing at the very very simplest and most basic stage so we have this step now this is where things are going to get interesting because like I said just before this step you know you are going to have situations where you have very custom flows that really need to be thought through and user flows are going to be the best way to do that so I'm going to increase that frame let's think about this third step now step three I'm gonna jump right in there and I'm gonna go right into my details so the user can add a photo or skip the step and I think that's fine so maybe you know there's some customization aspects and we can take this one column image and we can throw this here and you know at this point you can do a couple different things I'm going to ungroup it by using shift command G or you could do shift Ctrl G oops oh never mind this is actually the frame is actually the piece here so we can make it smaller and you can start customizing that and we all know how to use Auto layout now so there's no real need to re explain how that works but you can you know mess with the alignment if you need to here but I'm just going to keep everything Centered for the sake of simplicity let's get into a little bit more of the custom oops the custom stuff that we're going to see in this flow or at least I think we're gonna see so I think the the big part of this app is just like customization in general and we want the user to be able to you know add things about themselves they can you know pick let me think if they can pick interests and hobbies to personalize their shopping experience so I think this is another thing that we we didn't really uh talk about just yet when we're thinking about a whole flow here it's very straightforward even though this flow is a little bit longer I think it is fine because it's like one step after the other just outlining each step what's skippable what's not skippable what are the areas that you can like you know truly manipulate if you need to so I'm going to take this one column asset and just paste it into here I'm going to click into this device paste it and I'm going to move it with my arrow keys and I'm going to just delete this image at the very top so it kind of acts like a title I'm gonna set this to hug the contents and I can just bring everything to the top so say there are like maybe I don't know like a bunch of categories that they can click here let me back up there because I don't know if they'll have paragraphs or anything like that not that that's important but I think it's it's good to try and be I guess you could say a little bit truthful and what type of content may actually be there and the last step and I think this is going to be it after this step right here but I'm going to select all these and you can do that just by dragging your cursor or by clicking shift so I'm gonna do that I'm holding option shift and I am dragging it so it's kind of acting like a duplicate okay now this is step five so I think step five ignore the actual design in there because I don't think that's what it's going to look like but step five should probably be something like okay I've picked my hobbies interest they're it's gonna personalize my shopping experience no I should get some sort of Confirmation and I'm done like happy success that's it so success the user has registered for the product and can now access all of the member related features this is just off the top of my head but you can kind of see how this does follow the same line of thinking when it comes to just the general way things should flow with a user flow so I'm just going to paste that in there and I'm going to once again make everything centered and there's like my confirmation screen I know it's not like beautiful or anything but it definitely gets the point across and these blue buttons are like this is what I'm really clicking on maybe we can even come in here and you know just set one of these uh we can set these colors see these are the selection colors so if you click them and you select like say blue then we're starting to select everything as blue then you can go ahead and maybe adjust the opacity here I mean you can say that this is clickable and and so is this so Color Picker while I'm selecting that and just pick the color and these are a little bit uh interactive so you can go ahead and and do that across the board if you if you really want to not necessary at all I mean I think the the details are the most important part as you can see how I've basically laid out every single step what can and can't be done and kept it really really succinct and that's how we created our first user flow for registering for a product foreign welcome back we are going to create one more user flow I think the most important one that I really want to get to is finding the right product through search now this one is a huge one so we uh have this one over here and literally I'm just gonna just duplicate it so it's going to duplicate beside it by pressing command D or Ctrl D and you can bring that down that is exactly what I'm going to do and I'm going to jump right into here and I'm going to start naming this one so you can name it anything you want uh we could just call it search or something like that let's get a little more specific with the name okay finding the right product through search Now search is very very key to a lot of products success when it comes to like e-commerce or when it comes to you know just searching for different types of products search results for knowledge uh sharing when you think about like things like Google I mean there's a lot of ux work that goes into that and I just want to kind of build out that flow a bit think about all the different scenarios that are possibilities and yeah just go through that with you so you can either just follow along with me or you can actually start building some design so I'm just gonna like I said I have a duplicate here so we can just start from that now when I think of search like where does it start so step one I'm gonna start writing some details because it's the way I personally work you can just start visually I like to just start from just writing down what I think is like the job to be done here by the user so so when I think about like search you know the user is able to begin that search from like the home screen so beginning their search from the home screen the user can click the search input okay and now we can put together like a quick home screen we could repurpose this button to be at the very top maybe this image is like a header of some sort of like some big I don't know product Maybe what else is there there may be some more products let's go to our assets so I'm going to actually oops I'm going to zoom out a bit I'm going to grab these assets over here and bring them right beside at least for now oops I'm zooming in and out so much and here we go so we have more products this is like just me quickly building a home screen maybe there's some smaller products too and there we go that's our search and okay so now that we've clicked searched what do we think is going to happen so we need to think about like every little detail I mean you know step two I think the user hmm the user receives a keyboard prompt so I'll even go into sometimes like little details like this as to how certain interactions should perform and you'll need to do this for everything I like to do it for the most important types of interactions that maybe users really need outline because they have such high traffic not like okay the button is clicked and then it hovers and does a spin and then jumps out at you I don't know like those types of micro interactions I don't think you really need to worry about I like to do certain things like this where the interaction is more like a multi-step interaction so an example is you know the user receives a keyboard prompt within a search overlay and is able to enter their search so this is pretty standard as well I think maybe it will just remove this and we'll start fresh like maybe the search is still at the top and maybe there's this massive keyboard prompt that comes from the bottom and now we can just play with auto layout a bit instead of packed I want them to be separated so I'm gonna go and do space between so yeah this kind of does look like a keyboard prompt that comes out and I'm going to just make it blue as well this can be like secondary like you can still click on it in some way shape or form but this is the main interaction that's happening and then step three so now this is what I'm talking about like let's get into the details here so as the user types the products gives the user suggestions for potential searches so think about like type aheads and stuff like that the user can click on the search item that relates to their intended search so I'm thinking about a couple different things here to be honest I have this screen I'm actually going to delete this entirely and just duplicate this screen and drag it over because I think this one's gonna actually work well so this is maybe like secondary now and what we have is I don't know let's think here let's steal this so we have these rectangles and that's going to be kind of like our our list items so we're going to set it to fill so there's like some sort of subheading we're gonna I'm gonna just copy and paste it command C or control C and you know the same for adding the paste is controller command V and we have a bunch of different items here maybe that's too many it doesn't really matter but let's see and then over here we'll just make this like blue so they're gonna click on this now you can make another flow where they just click or you can do a branch here like instead of clicking the type ahead they click the they just click enter on the keyboard and then it goes to the same place ultimately I mean it's basically the same flow and I'm not sure it's worthwhile to to think through that too too much but step four I think the users then presented with many search results and then this is where you can Branch again maybe there are no search results what happens then how do we get them back to searching so these are the types of scenarios that you need you're going to need to think through and they choose the product they have been looking for okay so I think we can actually reuse some of this stuff over here maybe or maybe we can use like these types of pieces so I'm actually going to delete everything that's in this Frame and I'm going to start fresh so maybe there's like tons of search results maybe we still have that search at the very top that's easily accessible and then we have like our maybe our step five here where the user is then like finally in the product page so the user is now able to review the product that they had searched for and it can decide if they want to add the item to their cart so this is a very important step as well because this is actually the end right like this is our goal and we've found the right product through the goal so what does this screen look like I mean I think it's you know maybe very similar here where it's like there is let's go to our assets I think we have like oh there we go we can use that so this looks like kind of like a product page now and maybe there's like this big add to cart button or something I don't know I think it doesn't really matter right right now but this is essentially maybe how the flow plays out and essentially that is what it is like to create like a user flow for finding the right product through search so remember get into those Nitty Gritty details think about the optional routes users can take because if you do not you're gonna have a lot of trouble trying to design later for solutions that you should have been thinking about way more earlier in the process I know we all love to jump right into like creating nice UI designs and and whatnot but take some time to think about some of the more important user flows hey everyone we are back at it again and today we're going to learn about site Maps so before we even get into creating them we're going to talk a little bit about the anatomy and why they're so useful and yes they are still useful so the big question is people still use site maps of course I do it's not just limited to information architecture everyone should use sitemaps especially designers they help provide structure for your product like look at this we have the primary navigation our secondary navigation we can really plan out all the different Navigation schemes within our product sitemaps help a lot so what are they sitemaps are hierarchical diagrams of a website or an application that shows how pages are prioritized I want you to think about the last lesson that we went through use your flows that we did prior are kind of like a street view of what we were discovering in terms of like how the user should achieve goals and where we discover different types of content we needed do you remember this user flow over here this is making a purchase and we discovered a lot of different things we discovered like the different steps that it took to actually complete a purchase we discovered different types of micro interactions all the different close-up details that we didn't necessarily know before now a site map is essentially a bird's eye view this way we can take an early glance of what our product looks like from the Treetops so when do we use sitemaps well sitemaps are generally used in the beginning or really early on in the design process like right after discovery or kickoffs right after you get all the information from your clients or from your product team kind of like what we're doing right now with application that we're trying to build they'll really help us when we need to start working on our wireframes welcome back so you may be asking yourself well how do I create a site map well let's jump in the first step is anatomy let's learn about the anatomy of assignment so essentially a sitemap will consist of all these linked pages so we have this as our page I mean they don't need to necessarily look like this like I said before with other things it's all about what works for you what best represents what you're trying to get across so right now I'm just kind of using a little card I don't necessarily use this when I'm creating a site map so this is the main card and within the anatomy you have a reference number some people like to use reference numbers they really kind of help when you're like creating actual wireframes afterwards you can use that same reference number you don't necessarily need to I know a lot of people that like to but it's a preference but one thing that is definitely needed is a label so this label over here is definitely going to be needed because it'll let us understand what the page name is that is what we really want to know so what you want to do is you want to start with your home page always the rows that follow afterwards are by the highest priority so I say rows because typically people when they build a sitemap they're building it from the top to the bottom you can build it from left to right like I said before it's all preference so I'm going left to right right now so the next step of the same map would be like your primary secondary and tertiary pages and so on so right now we have a primary page so if we were to think about our current client we have our home page and you could access a category on that page and that would be our primary level and then afterwards you may be able to select a subcategory and that would be our secondary level and it could go on and on I wouldn't advise doing that but you get the gist so this is our primary and our secondary and this is Ground Zero now you could use a legend if you'd like it's totally up to you that's another preference if you're sharing it with a lot of people it may help if you have a lot of symbols in there if you have colors I like to use colors because it helps to signify whether like a page is public or a member only so totally up to you if it really helps to get through what you're trying to say with your product and your sitemap use a legend so there are two types of site Maps this is a flat site map and this is better suited for a smaller to medium-sized products I'm thinking maybe like 10 to 100 Pages maybe even less to be honest there are four or less vertical levels you'll notice that there's only two vertical levels here and that's probably what we'll be using when we create our site map but there are four less vertical levels and they all help enhance the discoverability of content because there are fewer levels to click through so you want to use this for smaller products you don't want people to be going too deep unless it's absolutely necessary the next type of sitemap is a deep site map so these are better suited for larger size sites and they help house a lot of information so we're talking like hundreds and hundreds of pages we're talking maybe Pages for like a government website maybe like a huge e-commerce website they can get around to five vertical levels which is huge I mean we're at four here and you can imagine the amount of pages that you can get into this ultimately makes it harder to discover content so you'll need to think about the different ways for users to get to places like menu shortcuts but yeah so deep site Maps use them for larger products don't use them for a product like we're building so why are they so valuable well they help you plan for usability and it provides a full overview which can really help teams simplify and trim unnecessary pages but really when you build a sitemap you can also strategically place content where users can find it it results in the creation of navigation hierarchies and categorizations of your product you get a good understanding of your navigation you can calculate the amount of content you need and it gives you a good understanding of your scope so set maps are incredibly useful you may not create like a final sitemap and that shouldn't bottleneck you in terms of starting wireframes or even like sketching and user flows but you should really start one to get a sense of what your entire navigation scheme is going to look like let's jump right into figma and let's start building our own foreign [Music] and welcome back we are going to be talking about site Maps today before we begin this tutorial though I want to show you what exactly we are going to learn within figma and what we're going to build so we're going to learn a bunch of different things we're going to learn how to build these types of assets for our site map that are going to be reusable for you in the future and today and we're going to make non-component versions and we're going to learn how to use components and that's going to be super fun trust me it's going to make your workflow and your life just so much more easier then we're actually going to build our own sitemap as well so you're going to need a couple of things before we can actually start building you're going to need obviously you need figma but you're going to need the Auto flow plugin so if I go into my plugins just by right clicking this is what autofillow looks like and if I were to make a rectangle it basically allows you to connect one layer to the next kind of like how we're seeing here we're going to be using that a lot so if you haven't used this plugin yet definitely get it before we start okay let's get started hey everyone and welcome back I am going to teach you how to create these assets that I've used for our site map now these are some great assets I'm just going to run through them really quickly to explain why we have a bunch of different colors and what they mean and what this container is over here so these are actually going to be components we are just making some reusable pieces here if you're not comfortable with components yet that's totally fine we don't have to jump into that just yet but I will teach that now I have decided to show the site map in a couple of different ways now we have a page and I'm going to break it into pages and the links that are available within that page we have public links and that means links that anyone can see even if you are not signed in or registered we also have member only links those are links for people who are specifically registered with our product we have more specific links for logging in signing up logging out that kind of stuff and we have yellow to indicate the outside links links that are going to push you outside of the app or product ultimately you may not use all of these you may use this for future projects I think it's just great to have them like just ready but I'm going to get into how to build these and this is the container over here on the right side that is going to house all of these items so let's Jump Right In so actually I'm going to just take one of these just to show you what it looks like so this is essentially just a frame if we break it down so we can build it together so what I'm going to do is just use a text layer like I've just done I press T and easiest way to do that is just press T click and you have your text layer ready so if I write say something like link and then after I wrap this within a auto layout frame so I'm going to right click on it add Auto layout so now I have my link frame there we go you can't actually see anything right now because there's no fill but if we were to say press I to get the Color Picker and use the Color Picker on this little link over here you know we can easily just copy that so that's all I basically did you can choose whatever style you like I'm going to actually stretch this out a bit and I am going to add a border radius to this so I have a four pixel border radius I'm also going to make this a tad taller so I like using fixed Heights on things like this it really depends on if it's going to run to two lines it may be wise not to for something like this though like a button makes sense to use like a fixed height but something that may run onto two lines I don't really like to take the chance because then it'll look kind of awkward I'll show you what that looks like in a second so I'm actually going to keep this pretty simple we'll make a copy I'm going to just you know duplicate that to the side and we'll we'll show you what that looks like when you have a fixed height and you know two lines but so let's Jump Right In here so we have the link we have the auto layout frame we don't need spacing between items we can just keep it pretty simple 16 pixel spacing there and maybe 16 up top and we will add a stroke so I'm just going to press a little plus icon here and there we go we got our stroke now for the stroke what I did was I just grabbed the color and I basically went down you know don't make it too dark don't make it too light just looks like it's kind of like you know just a little bit darker version there and you can adjust the width and basically there you go you could also adjust like opacity if you want of like the link so the text here I'm just going to adjust the opacity is 75 percent and that is essentially the link now let's actually remove this one and make a copy from this since we have it already ready so if we had two sentences that are on two different lines this is a very long link so if we have a very long link and we set that to fill the container we shrink it you know it the the actual Auto Leo container grows but if we were to set say a fixed height and then copied that text over here make sure it's set to fill container then we have this issue where this is a fixed height and it's not going to grow with this anymore so definitely make sure that if things are going to go to a second line you know if you don't have it set to a fixed height so that's essentially how you create these individual links so you can just give them different colors I like to do that personally when it comes to the actual page container though this one's a little bit more trickier let's take a look at how it's built so first off I'm going to take that right out so you can basically command C or control C and you know or you could just drag it out of there command V it's going to paste underneath there but you can you know take it out so I have my links actually set up in a auto layout container so and they're only half a spacing of 8 pixels and within that container Are My Links then I have another layer that's right here so that is just like my page title really simple stuff now this is the part that is a bit difficult all I've done here if we take a look at it is create another Auto layout container with these traffic lights so these are just circles in a group we have green yellow and red basically it is literally just grabbing the ellipse tool which is o making a copy oops and just to mimic like a top of a browser so really simple stuff then you can group it and then we would frame it again into like an auto layout frame and call it our header I know I am moving a little quickly here but I do just wanna give you a good understanding I'm going to grab the Color Picker with I and click on this just to get the color that's basically it I mean that's all there really is to mimicking this header once we have that header we can take the rest of our content we're going to take everything and you guessed it if I press shift a it's going to throw it in Auto layout frame and now we have our frame here and now we can do a bunch of different things first of all I'm actually going to set the fill to White I am going to also add a stroke like I have here that stroke will be say two pixels and I want it to match the color that I have for the header another thing I want to do is I want to ensure that this has a nice border radius so I'm just going to slap something quick on there and then it's going to clip the content because you notice I put the Border radius but it didn't really apply to the header that's because the header background is bleeding off of the frame and we haven't clipped it so now that we clip it it's hidden now we have the issue of these things now you can't just set the the padding within because if I were to do that it would also create padding for here so the best way to handle something like this is to actually wrap these two into their own container so I'm going to use shift a and set this to new container within here to fill and then I'm going to select all the contents within you can see my layers opening up here I'm going to select them all you can use Ctrl a or command a and set them all to fill the container so now that we have everything fill in the container we can actually set the different padding and spacing between things so 16 pixels I'm gonna just have like that as the padding here and I'm going to set 16 pixels here and 16 pixels at the bottom and the top and then you can go into your frame finally your top level page container mine has the aim of a frame one I think of this and you can remove the padding if you need to and that's basically all there really is to creating this new page container now the only thing here I have to fix is the header and set that to fill container and there you have it you can create your very own version of this pretty quickly and I would say you know if you have some time you know you can put your own personal spin on it but that's how you create your own like reusable little asset for sitemaps foreign and welcome back I want to talk about components basic components we're not getting into really really deep details on how to use like components super properly I just want you to increase your efficiency make you also feel like you can build better components in the future but let's start here so we have these reusable assets the only problem is that you're just gonna need to copy and paste them over and over again and maybe it's not super efficient it's still efficient it's definitely better than nothing A hundred percent big Improvement but if we turn these into components they would be so much better so let's Jump Right In really the only difference I would say between this and a component is you'll be able to access it in your assets table over here so let's jump in so these are our current link components so I'm going to copy them with a command C or control C and paste it I'm going to drag them right out so these are our links what I'm going to do now is I'm going to deselect the group ungroup them so I for me it's shift command G you can even go into our right click it's going to be shift Ctrl G for Windows users so now that we have all of our components that we want to build we can do a couple different things now we can either we can either just create a component like this or using the shortcut you can create individual components or we can select all of them so if I just I'm going to go back in time and undo that we can select all of them so we can create multiple components and now I can access all those components right here whenever I want just drag and drop them into whatever I field I need and and so on so these are components and they're not really you can edit them but they're going to be reusable and you won't be able to necessarily like do much in terms of like touching this master component so there's two things here we have our Master component and then we have what we call an instance and these are copies of the master so whatever you do to the instance will not affect the master whatever you do to the master though will affect the instance as you can tell if I select all of these and I say change the Border radius to 100 that's going to change everywhere now the great thing about instances is that you can swap them pretty quickly so if I go into here and I select member only this is where our instances are I can go and select outside link so if I want to switch something really quickly on the fly I can do that but I'm gonna just go back quickly and fix that so now that we have these components we can do a couple of things we can either leave them as is or we can actually go the route of using something that I like to call a variance and variants are very powerful so if we select them all since they're all very similar the reason why you would do this is because you have a similar component to the other similar Master component so an example is primary and secondary buttons or different states like hover States versus active states and when you're thinking about like things like inputs and forms now for our little links here the only difference really is color they're the it's the color and the type the differentiator is essentially the color but the the type is like public member only login or sign up and outside link so if we select all our components we can click over here combine them as variants that's going to put them in this little box and inside this box now we have the link version we have the member only version and we have the login or sign up version and the outsize link version if we click this bounding box around our variance we can go in here and specify a couple of things so they're called properties and those are the differences between the components so we're going to say that our property type here is the type of Link or link type you can go deeper you can have so many different types of properties you can have like you know icons and so on and so forth like it can get really Advanced but for this we're just going to keep it super simple so we have four variants now if I were to say take a copy or I have them here now so it's in my assets panel over here now if you were to take a copy and now go here you can select member only it looks a little different this is going to be great for more complex components so that's how you create a component and that's how you start to use variants The Next Step I want to talk about is actually creating a component for this over here so I'm just going to drag a copy over and what I'm going to do is I'm going to take this public link I'm going to copy it and I'm going to select in my layers the links container that is housing all of these versions and I'm going to paste it there it is you can see it's outlined in purple you can see that layer I'm going to just shift it right to the top and I'm going to take the rest of the links select them all here so I can select them in my layer panel 2 and delete them then I'm going to take this link and I'm going to copy it and paste it I'm just going to make sure that's dragged right back into this layer because sometimes when you copy and paste and there's only one layer within it'll paste right outside so we can copy and paste it again and again and again and again and again and again I know that's kind of crazy but just stick with me I promise it's going to get better so what I'm going to do is now that I have this set up with a bunch of different links I'm going to turn into a component and that's it and you may be thinking what are we doing here now like we have a bunch of links so the great thing about components is you can't add to an instance so you can't necessarily say okay now I want you know this another public Link in here you it doesn't work that way once an instance has been created you can't add to it but you can hide what you have added so if you make a very long list you can take whatever you don't need and press like say delete and it's just gonna hide them in that panel then you can go in here and you know start specifying what you want oh I want it to be this one an outside link and this one a member only link and this one a login or sign up link and so on and so forth and you never know how many links you're going to have on one page so it's great to just you know prepare for the absolute worst and throw them in there and now you can just you know either grab links or just you know grab this every time you need a new page and just keep on going and then you know link them together and now you have these components that are reusable now you may be thinking oh my goodness like why are we doing all this like it just seems so excessive well maybe for sitemaps but this is a great way to demonstrate how useful they can be and if I really wanted to you know change things you can start to tell why they're so powerful for things like user interfaces because sometimes you make one change on a button because you maybe you don't like rounded buttons anymore and you want like you know flat buttons with like strong sharp Corners you're gonna have to go through all your designs and find all the use all those buttons now if you were using components you would switch one and you know it will be modified everywhere else if I wanted to you know switch here and say that this no longer has like a rounded corner like I did over here and it put the Border radius to zero that's going to reflect everywhere so that's how you use components to create some pretty awesome reusable assets that you can use within your local file remember that if you have a free starter plan this is the only way to use components you cannot use components across multiple files you can only use them within the file that you're working in thank you hey everyone and welcome back we're going to be jumping right into creating our very own sitemap now we're going to start with the home screen and work our way out we'll do what I'll call the top layer or the you know the login and registration stuff onboarding some of that kind of stuff and then we'll get into some of the main Pages now I'm going to be using my component that I created you can use it too the assets are there for you and if you have any sketches um like when we actually did the sketching section or if you have any user flows bring those in here because they're going to really help you understand where you need to go and what you need to do so let's Jump Right In so I have the home screen over here what I'm going to do is I'm going to start with search I know this isn't necessarily like a public link or anything but it's actually a very important part of the flow and then I'm gonna go with a member only link so I think there's probably going to be some sort of like shopping interest section or something like that yeah I'm just going to leave it at that for now because I'm not sure what it's going to be called just yet and then we probably have a way to get to categories and Deals now one of the big things that I think you should know is that it's just going to come naturally to you when you are actually building your own site map and you're starting to work through the project a bit more depending on what exactly you're building it's going to be something that you're going to start getting you know more and more comfortable with in terms of like the subject matter so we're going to have a couple or a couple more member only links okay so we have a wish list maybe we'll have orders as well and it seems like the other option is something like profile we'll probably have cart now I'm not sure what exactly is going to be part of the main navigation just yet and that's something I'm going to figure out more and more with uh you know as we refine site maps and as we just move forward into the wireframing stage so what do we have here probably a login or sign up oops let's install that on the next launch and here we go okay so this looks like the great place to start with home now one thing I want to do is I want to think about registration I think that's fairly important and we'll start building out that portion so there is I'm going to actually make a couple of copies because I'm going to use a bunch of these so I'm just making a bunch and I'm leaving them here because I'll grab those in a sec okay let's take a look so we probably have like an introductory screen that I think you know makes sense something like uh you come in there's a tutorial maybe or if there's like you know either sign up or log in that seems like something that's really logical for a mobile app so let's take all these and what we're going to do is we're just going to press delete and you can actually delete them and they'll hide because it is a component and so what I'm going to do here is I'm actually going to create two different sections one for login and one for sign up so I'll call the sign up just sign up so delete the rest of the text there and for login we'll delete the text there probably steal this one that makes sense okay so and then I'm gonna just make another another one of these for login as well what you want to do is you want to make sure that you have everything laid out to the best of your abilities so from the login screen it makes sense that you'd be able to go to like some sort of registration and onboarding and then from there you'll probably be able to go to login and then go to the home because we're not we're not necessarily going to force people to sign up and that's that's the right approach I think we should take so I'm just going to link these together now I'm going to run my plugin where are you autoflow so I got my auto flow plugin going definitely download this plugin if you don't have it so when I think about the introductory screen I think that okay from the home I'm just gonna you know hold down shift when I clicked that little layer and then connected it to home I'll show you again in a second so if I click login so I'm going to click this link layer over here and I'm going to hold shift and then click this this whole container and just like that we've created our connections and some of them are I would say you know you don't necessarily need to do it but you can you can you can fill that in I mean I think it's more so useful when you have like the main navigation going somewhere and yeah that's basically the first step like just get these normal screens I would call them out of the way and then we're going to move into some screens outlining just the main architecture of it all hey everyone and welcome back so what we're going to do is we are actually going to start building out some of these different screens that are going to house like things like shopping interest categories deals Etc so let's jump right in so I'm just going to close my plugin because I'm not going to need it just yet and I am going to zoom out okay now I think what makes sense is to start just maybe I don't know we can pick a couple but I'm going to start with shopping interests so I'm going to go in there and I'm just going to name it now you can just follow along with me or you can go ahead and you know do your own thing if you feel like you have enough of what you need to actually just get started I think you should at this point but this will be just something that you can watch just to see how I'm going through that process so when it comes to the shopping interests and habits this is definitely going to be a members only section so I'm gonna just make a big note here what I'm going to do is I'm actually going to make a login and sign up so like to somehow prompt us that okay hey you need to absolutely sign up to go any further so kind of like a paywall over here what we're going to do is make all these member only links and then we can probably hide the rest I think four is going to be enough because what I have in store for this I'm thinking that this is where you know you can discover new products and maybe a way to see just like your general interests and maybe a way to update them and then you have categories so you can have a bunch of different types of you know categories for the interests and then you have maybe some deals maybe so I mean this this definitely can work so deals may be specific to your shopping interest so I think that will probably suffice for shopping interests I'm going to move into over here I'm going to just do categories and let's see oops there we go so we have categories and I'm just going to keep these very very open they're going to be all public links so we have maybe some like trending items or like trending categories I'm gonna leave that and then we probably have like categories for specific like events like whether that's something like oh it's Mother's Day or something like that or it's uh it's a holiday this is what you can get for uh your partner maybe or your friend I think there's definitely a lot of a lot of stuff we can do with that which will be really interesting and then probably I like to say that maybe every page that's like in relation to products will probably have some sort of like deals uh section just because we want to push people to stay within the app and deals are probably one of the best ways to do it serving up like really good content like that so I mean I'm on the topic right now so let's think about deals so deals we probably have like trending oops I know Amazon does stuff and other other larger retailers kind of do these stuff where they have like these types of like uh you know Lightning Deals or like giveaways or something like that maybe there is a section for like giveaways I don't know I think that's uh that's something where you should maybe explore um and then we have like maybe deals based off of categories I mean that that seems like just like a common pattern I've seen on e-commerce sites and oops you know what maybe we do have a member member only type of Link here where it's like the content is more so around deals like just for you I think that that makes sense and yeah I think that's that's gonna do it for the first half here when when we get back into our next video we are going to work on the other half of some of these through these links over here hey everyone and welcome back we are going to be jumping into the other half of this site map over here so we are digging deeper into some of the finer details and one thing I really want to point out right now just before we jump right in because we are going to get lost in there and just you know go through the weeds of you know building out those page containers and whatever content is within them but I think another thing to really stress here is like a site map is so good for developing a Content strategy it is so good like you can already see that the types of content links that I'm trying to push through each page can make some for some like really interesting designs really interesting experiences for users so definitely definitely go through this exercise even if you're gonna do it on a very lightweight scale I mean this is a very lightweight I don't like to spend too much time here but this lets me think about everything from like a bird's eye view and then I can make some of those bigger decisions little by little when it comes to the types of content that's going to be on each page and maybe some pages that I really do want to prioritize so let's Jump Right In so I still have a bunch of my duplicates over here I'm just going to drag them over so okay I think maybe like the next thing that makes sense right here is I want to actually talk about the cart we can work our way up now so the cart is going to be pretty simple let me move these out of the way they're a bit of a distraction so with the cart definitely I think there's going to be a a section here where it's like if you're not logged in but you have stuff in your car you should probably you know log in so I'm gonna just put in a login and sign up section there here you should be able to you know go to the items in your car so you can probably like go to an item listing or something like that product page and then you should probably see maybe some similar items I'm not sure how wise that is because at this point we really want people to convert and actually check out so I'm going to keep this one really simple maybe we'll have a big CTA to like place your order yeah actually you know what let's actually do this we'll have one right here this is place order okay and so the next thing I'm going to do is I'm going to create the profile page so that's yeah that's next now we're gonna have a bunch of a punch of member only links so I'm gonna just make like maybe five four five just to cover all my bases and close those ones off okay so when I think about the profile page like this doesn't need to be something that's super crazy I think you know there should be some account settings here definitely some way to maybe you know see your interests and get to that section maybe this profile is a bit more involved is what I'm trying to get at customer service maybe like a help center I think that's a pretty cool option and then I think maybe your orders like a way to see what you've done in the past and I think that's it so I mean this isn't a really big task that I'm working on right now I think ultimately you know we're keeping it really simple so I have orders here now for orders this one's a little bit more you know I think we need to think through it a bit so we have like probably like a search and filter people could have many orders so we need to account for that wait for build to filter through probably the most important thing is like the orders that are in progress so I'll just throw that in there then we have past orders and then finally we have a help section beautiful so I mean I think that's what comprises of an order screen search definitely in progress we definitely see all our orders and maybe a way to contact somebody if something's gone wrong maybe that's something that's like an FAQ section I'm not entirely sure just yet and then the final the final final screen that we're gonna work on is wishlist okay so with wish lists this one is pretty simple as well so you probably have like your saved items and then you probably have a way to like go to those items that's why I'm putting saved items and then we have maybe some sharing options maybe you can share a list with somebody I mean when I think about like maybe my partner and I are buying gifts for people or you know we're trying to buy gifts for our kids and we have lists for each individual kid I don't know maybe there's something like that in terms of like a workflow or a user flow so maybe sharing options and what that looks like and how you link out and support you know internal third-party linking I don't know maybe some Social Media stuff and then we have a similar items I think this one's a really interesting one just trying to get people back into the funnel of adding stuff and I think that pretty much details what I think is a pretty good site map I mean we could go into search and talk about like what does it look like when you click search you have like a an overlay but we're getting more into the nitty-gritty of you know maybe search results search goes to search results or something maybe we will I can add one like that but there's not much to really add there and I think that is pretty much it for our sitemap great job everyone this is let's take a look so we can go ahead now and actually link them all so I'm going to delete this we're not going to need it and I'm going to select everything bring them down and then we can link them so shopping uh let's let's get our plugin first I actually really love this part I know it sounds a bit childish but it's fun to just like see everything come together and that's perfect we have wishlist then we're gonna have orders and profile and then and uh cart I don't I don't think it's useful to maybe bring the login up here I mean I think that's pretty self-explanatory one thing I do want to note though I mean we can even go deeper than this like this probably isn't totally complete and that's fine but like there are sections in here where like we haven't even mentioned like the product page we haven't even mentioned certain things like you know deeper within like a category page so there's a lot of different things that we are you know not looking into is that it's going to take a lot and a lot of time but I very much urge everyone to kind of keep on going deeper until you feel like it's enough and that is how we create a sitemap in figma hey everyone and welcome back I want to give you some very quick tips on how to build great site maps and not get stuck in the process this may seem overwhelming but it is really easy to pull off so one of the big tips I always give people is don't think about two things at one time if you're working on a site map you know you don't want to start thinking about where to put things while you're also thinking about what things to put keep it simple focus on one thing at a time and you'll make way more thoughtful decisions so when we're thinking about some of these types of pages like yeah it's great to start thinking of this content strategy I'd love to but we're not going that deep just yet we we're touching the first layer and then you know we're digging deeper and deeper gradually the second tip I'd like to give is to bring in your user flows now your user flows should indicate the types of pages you need and where they may fit within the structure of your app so I mentioned you know search not necessarily being an actual like link but this user flow is something that we already have thought of we know that there's some sort of like intermittent overlay where they're searching and then they go to the search results and then they get to the page so we already had an understanding of that model and that flow so definitely use your user flows and your sketches now speaking about sketching tools now you can definitely start with sketching but once you start to revise move it over into an online tone like figma it's great to see like you know those structure maps that you can build But ultimately this is where you're going to refine everything and move forward I think another thing that people don't think about is colors I mean you don't need to go crazy with colors just because it's the same app it doesn't mean that you shouldn't have colors I like to use colors to highlight things like screens that are maybe visible to certain users like we have here with member only links and public links it also makes your sitemap much easier to just remember instead of thinking of it as like a black and white set of cards that's super boring and I think the last thing and this is it don't aim for Perfection things are going to change you just want to set yourself up for success and give yourself the best chance possible to succeed you're never going to get it perfect I've seen things like this thrown out later in the process when there's like some sort of large product pivot I need you to remember that once you have a good idea of what your product structure is going to look like move on to your wireframes dig deeper and test some of those assumptions that you're making here because these are a lot of assumptions this is just giving us a nice little bit of a plan to move forward your site map is not going to answer all the questions but it will give you that starting point for your wireframes so remember be lean hey everyone welcome back so we're going to be talking about wireframes so we're really going to get into designing very soon but you know we're done our site map we're done user flows you know we've done a lot of sketching and you know we have a good understanding of the content and the structure that is going into our product so now I think wireframing is pretty much the next step but the big question is well what is a wireframe now you may have seen images like this when we were sketching and wireframe is a low Fidelity layout that you know serves three simple purposes it presents the information that will be displayed on the page in a little more detail than our sketches and our user flows it gives an outline of structure and layout of the page and it conveys the overall direction and description of your user interface it's basically as you can see here it's just like a blueprint of a building but instead of a building it describes the details clearly and specifically while giving everyone involved a good overview of the product it's kind of like that middle ground between your sketches and higher Fidelity designs and prototypes they help you really plan layout interaction patterns for your users without worrying about distracting details like colors or copy or you know typography you know all those things can really bog down your design process another thing to really know is that they're really heavily influenced from your prior work so if you've done story mapping you have user stories if you've done things like user flows or site maps I mean all these different artifacts should really influence the way you create your wireframes so just keep that in mind that you shouldn't just be like jumping in and creating a whole bunch of wireframes and not necessarily really understanding the type of content that needs to be there in the requirements that need to be there so really consult all those artifacts that you have and if you don't have them you know talk to the right people that can get you that information whether that be product managers clients stakeholders internal stakeholders you know use your voice if you need those requirements to even start so why do we use them two big reasons I like using them because they really help to test your Concepts and your structure so they really help you to understand how users will navigate your product sometimes you can use your wireframes to highlight certain areas that you think need to have prominence on the page to test if that piece of content is actually working and if the user flow makes sense so this is one of the big reasons I use that so that it could be like user flows again but in much more detail understanding the different types of interactions and putting it into a wireframe makes it a little more easier to test with users to get I guess better results the next best thing actually I think this is the number one thing actually you need to use them to learn you know they are fast cheap and impermanent don't get attached to wireframes they are meant to change as you gather more information through research and feedback from your clients and from your users they're a great place to fail and I don't mean that negatively on a project you want to fail as quickly as possible and that means you want to test your assumptions as quick as possible before it gets to High Fidelity designs or even development you know they serve as that common language for your team as well they're complex enough to inform everyone but simple enough to not get bogged down by too much detail now the little kind of graph I have here is the build measure learn graph and if anyone's red Lean Startup I think like you're that's amazing because it's an amazing book but if you haven't you should definitely read Lean Startup it talks a lot about building measuring and learning so what that essentially means is you build and that could be a wireframe that could be a sketch you measure it against something what metric you're testing against it could be like I want to know if this interaction works I want to know if users actually are interested in my product you learn from those results and then you build again so wireframes really help you to kind of implement that build measure learn cycle so I want you always to think about that whenever you're kind of testing with users or just talking to other clients or stakeholders you know keep that in the back of your mind because the design process isn't linear it's very iterative so how can we use them you're useful for three big reasons right now you know they help your team estimate the type of work they're going to complete Clarity and common understanding across the team they help your team understand what is going to be built I mentioned this a little bit earlier it gives them an opportunity to chime in as well if you're presenting to them and you should always be presenting to them even if it's just like ad hoc you know talk to your peer really quickly the specs are kind of dated and wireframes could be really much more collaborative than that so get your team involved as much as possible the next thing is user testing we use them a lot for user testing the sooner you test the better and that's the big thing you know like I said before fail fast so you can get quick feedback without necessarily developing complex prototypes with all those different types of visual things like typography color and all the different types of details like that so testing with users really uncover like the different types of pain points and opportunities so this is a little customer Journey map you know if you've created one at this point that's great as well because it'll really help you understand how the user moves throughout your product and other products so really document how your user can move through your wireframes understand like what their pain points are and usually there you'll understand that there are certain opportunities that you can really benefit from and I also like to I think this is kind of inevitable I really like to use these to you know demo to clients it's a good way to get really quick feedback instead of like going all the way and sprinting towards like that beautiful design or that beautiful complex prototype I mean you got to remind them that it isn't the final design because you know you may have a client that is just like uh this has no color or this has no like typographic elements like what is this that doesn't look good and it's not necessarily meant to look good so you need to explain that to them just so they can give you some quick feedback on certain things like interactions and you know flows and just placement and layout and hierarchy another thing about getting quick feedback is that you know making changes to High Fidelity designs is like really time intensive and you don't want to be making bigger changes when you're nearly done the product you want to be making those changes as you go along and the earlier the better so that's how we can use wireframes we can definitely use them to like test and I think like that is the biggest thing is testing early and testing often and not worrying about the details so I'll teach you next how to create them hey everyone and welcome back we're going to be talking about how do I create my own wireframes so the one thing I really want to stress is to keep things simple you know don't worry about Fidelity especially when you're wire framing you just need just enough to really get people to understand what you're trying to convey pencil and paper is probably the best way to wireframe quickly you know this is one of my mantras like we've already done this I mean we sketched a bit we did some user flows and you've already kind of started wireframing even if you have a whiteboard you can use one but I mean pencil and paper are huge you know if you do have a client you can polish them up to Showcase some of your interactions or more prominent areas within your flows and you know pages that you're designing for you can definitely like add a little bit more Fidelity which is just showcase or demo them but you want to keep your colors to grayscale white and black is perfectly fine you know grazing between don't go crazy on fonts maybe two what you can even get away with one you can easily show hierarchy with Bolding fonts as well or increasing the size avoid any flashy images you can use rectangles and squares and you know an X through the middle just say that that would be an image and for videos you can add a triangle in the middle to indicate that that's one as well so you know keep it simple don't worry about Fidelity especially at this stage next thing is you gotta ask yourself some pretty important questions you know what are the users and the businesses goals when interacting with this page how can the content be organized to support these goals what should the user see when they first come to a page what will the user expect to see on certain areas of the page I think these questions are a perfect segue really into wireframing and you know consult your old artifacts right here I have a story map and definitely go back to the story map if you have one do you really consult like user stories and requirements so you can understand what will be on every page we even did user flows as well and we're going to get into that right now so consult your user flows and your site map you know as I consult my sitemap I'm always looking at the key requirements and hierarchies for a certain page I want to know like what is the most and least important thing that should be there you know different user stories like they're really great because they're a better indicator of what exactly needs to be built from a user's perspective and a proper like if you have a story map like I mentioned before we would you know have a user source for every single instance throughout the product journey and then we would come together to discuss which is like the riskiest part of the product we want to tackle first so like for our client we'd probably want to you know tackle search or the home page or maybe the initial registration all those different points where it really depends on users actually finding products or registering their interests so that way the product can actually be successful they're high traffic areas and the interactions are pretty integral to the user goal and we need to get them right to succeed I always and I mean always tackle the riskiest features first so like I mentioned before like that's a perfect segue into this because everyone has a different definition of what risky is and it can mean a lot of different things it could be features that dictate the success of the product it could be certain assumptions that your team and client have for a certain feature when I'm in a kickoff meeting or I'm talking to clients I really kind of I have a list of risky assumptions that we have as well and I Mark all those things down anything from what we assume the user wants or assume will be a good feature or certain things like risks there are high traffic areas that really depend on nailing the interaction in order to succeed for the business for our client if we release a search that just doesn't work or the interaction is way too complex the product essentially will fail so there's a lot of things like that that we need to account for and we should probably be focusing a lot of our attention on like in comparison to another feature like profile or a wish list so always keep that in mind another big thing is to bring your team into the process I mean this is huge you should often be talking to every member of your team it doesn't matter product managers for business goals Developers for like development strategy you can even talk to like quality assurance people like quality analyst people to talk about and just how certain things work within the product and what their expectations are other disciplines will provide Priceless insight into the ways you can build those wireframes so make sure that you include others in your process it may be a business school that you aren't meeting or a technical challenge that you may have like for certain interactions you want to come to life so tap into your peers example of you know trying to do things that are way too hard to develop so if you have like a wireframe that is just way too complex you should definitely be talking to your developers I often take a look at dribble I mean I mentioned dribble a lot because it's a great place to get inspiration and all that but the majority of the designs showcase there will probably never be built and have never been built because they just are way too complex and time consuming I'm not saying that it is impossible because everything is possible with enough time and money but most times you want to build your way up to something that is like considered perfect and we may release in different stages whether that be like a minimum viable product that has only the features that you truly need to validate if your product has any you know legs or sometimes we may be releasing on top of that the next best features and over time we'll get to a point where we can really hone in on the design and polish different things but generally you want to release in kind of waves instead of building out a product from zero to a hundred you want to get like 25 of the way there build another set of features improve on other features based off of what you've learned from your wireframe testing and even just basic prototype testing so remember Loop your team in it's really going to help you understand what you can cannot build it'll also really help you understand what kind of like different business goals you may have that you haven't considered maybe stakeholders have certain goals so these are the tips I often give other designers for when we want to actually use wireframes and when we actually want to create our own so follow these tips and you'll be well on your way to making some awesome wireframes that are based off of facts and different types of data and are used to actually validate everyone's assumptions foreign welcome back we are going to be working on wireframes and a bunch of other things in this section what you're going to learn is going to be huge you're gonna learn how to build or at least start building and using a small asset Library this means we are going to jump into some very quick things about Styles when it comes to color and typography we're going to learn a little bit more about components and maybe how to create some more complex components that allow you to you know have variants and these different layer Styles so I mean it's going to be super fun and then once we work on that and finish it we are going to work on some wireframes for ourselves that means we're going to build a bunch of pages based off of our user flows and sketches and sitemap so if you have all that knowledge that you've built up over the last I don't know how long you've been watching but I mean last couple days last couple of hours we've learned so much about user flows sketching and site maps and we can use all that information to really funnel into these wireframes since we are starting to get a really good understanding of where certain content is placed so we're going to learn a bunch about that we're going to build home screens wish list screens we'll go into even some product pages and stuff like that we'll build some fun pages together and then we are going to be using a couple of different plugins this time so definitely going to be using lorem ipsum so if you do not have that plugin definitely grab it that will let you come up with some easy easy content so definitely definitely grab that plug game okay I can't wait to jump in and start building some of these amazing screens see you soon [Music] hey everyone welcome back we are going to learn about components and we're going to create like a basic button component that we can reuse so many of you may already know how to create a component but I just want to do a quick refresher for some of you that don't so I'm here in just a test file and I urge you all to just create a regular design file and follow along so what I'm going to do here is I'm just going to move around I'm going to press f and I'm just going to create just a frame like this it doesn't matter right now because we're creating the body of the button then I'm going to press t for the actual text tool up here and I'm going to click inside that frame here we're just going to write button label so there we go we have a button label and I'm just going to adjust that to 16 pixels or we can leave it yeah 16 is fine you can just set to 16 or 14. I like to keep my buttons around that size and I'm going to give it a medium font weight you can choose any font you want I'm using enter it's a really great font and that's it now we are going to go to this Frame layer and I'm going to rename it so you can press Ctrl R command R whatever product you're using whether it's Mac or Windows and I'm going to just type in button there we go now the great thing is I'm going to go over to Auto layout so I'm going to adjust the spacing between items to zero because we don't really need that right now and then I'm going to adjust the actual horizontal spacing to something like maybe 24 pixels and I'm not going to have any vertical padding right now we're actually going to make sure that the vertical resizing is fixed and we can adjust that height to whatever we want so what I'm going to do is I'm going to keep it at let's say 40 pixels in height and make sure my content is centered I'm going to zoom in now and there we go we have a button we can go ahead and adjust things like the Border radius we can adjust things like the fill so we can give it say maybe like a nice blue fill and we can adjust the label Within to White so I just pressed FFF and there we go we have our button label perfect and that is everything now this button label is kind of responsive so you can you can keep it to like hug contents like hit this or you can make it a fixed width if you want it to spread across something so that's our button and what I'm going to do here is I'm just going to press the component button here and there you go now we have a component so remember if you are using components they're only available for professional users across multiple files so I won't be able to access this button from another file unless I took it this is the master one with that those little squares over here but unless I took this copied and pasted it so now I can go ahead into my assets file and I can see that that component's there and I can use it any which way I want and even when I update this master it's going to update that as well so that's how we're going to create a basic button component hey everyone welcome back so we just created a basic component but we all know that there are many types of components out there they have components with icons which we're not really going to get into just yet but we have components with icons like buttons like that we have buttons that are different colors different sizes so what we're going to do now is we're going to create something we call a variant so let's Jump Right In so I'm going to make a copy of this component so I'm just going to duplicate it and drag it below and here I can go ahead and I'm going to actually make this button way larger this is like my marketing button so it's going to be like 56 pixels and it's going to have like more width on it and then I'm going to create another couple of variations so I'm going to have a button over here as well and this one is actually going to be like an inverted button so what I'm going to do is I'm going to keep the fill to zero and I'm going to take the stroke here and give it a stroke and go back to my document colors so it's going to have a stroke on the outside and then the actual fill of the label is going to be the same as the blue so now we have a stroke like that and we're going to do the exact same thing so we can actually just copy this oops we can copy this instance that we've uh that we're using and just shrink it down so now we have four buttons now the thing is you don't want to create like four different separate components because that can be really hard to just manage so what we'll do here is we're going to select them all and I'm going to actually remove this instance I'm going to select these all and I'm going to actually detach the instances so if I right click here and where is it's right there so for Mac users it's going to be command shift B but this is your shortcut so I'm going to use my shortcut or I'm just going to click there and now I have all these buttons and they are not components yet I'm going to go into this little drop down here and create a component set so what's going to do is it's going to create this stroked bounding box that basically encompasses all these versions and this is what we call a variant or variance now what we're going to do here is we are going to look over here into the variant panel so if I click this box I can come here and specify properties and properties are basically the distinguishers between the types of variants so you can have a property for like say type of button so that could be the primary and secondary then you can have a another property you can have a lot of them you can have a property for size so that's what we're going to do we're going to create two properties so we already have one here we can double click on that just to rename it and we're going to make the first one called size and we're going to select our larger one so I'm going to hold shift and here you can see the current variant right now the size is set to default but we're going to just rename that and we're going to rename that to large so okay now we have those set to large and now we're going to take our smaller versions and we're going to click that and go to the size and we're going to rename those as regular and now what we're going to do is we're going to click that button again and click the properties up here and we're going to create a new component property so you can choose what type of property you want whether it's Boolean interface swab text and these we will get into later these are called component properties a little bit more advanced and we're going to go into the variant that's what we want we want another variant and we're going to name this one type so basically what we're going to do is we're going to say these two are the type primary and these two we're going to call them the type of secondary and there you go we have our components now what does this look like in the assets panel let's delete our original button so now we still we still have the same button here but now when we drag it you can see on the side that now instead of having to go back into your assets panel and pick new buttons over and over again you have them over here so now I can specify that this is a large button and it's secondary and you can swap between these different variants really easily and if you want to make sure everything's neat here you can even adjust the stroke of the bounding box to whatever color you want you can actually make it an auto layout frame and stock those nicely on top of the of one another if you really wanted to that all comes down to preference but that's how you create variants with envigma hey everyone and welcome back we are in our wireframes resource before we begin I want to talk about the assets panel and how to use some of these things that we have here now if I just click onto the canvas like I'm doing right now and I look to the right I can see all my text styles for things like buttons body copy body bold copy body regular copy and headings I can see things like color styles and then I can even go into my assets panel and see all the different types of components that are available to me I have inputs I have icons tons of icons I have content blocks so I can drag a card like this zoom in and I can start messing around with it now before I get into just how to use that I want to just run through this really quickly so these are all our typography styles that we're going to just use for wireframes we're keeping it really simple you don't need to like modify these but they're over here I'm going to teach you how to use these later but I'm going to teach you how to create your own typography and color styles but this is something that we don't really need to get into at the moment we have our color styles here we have our icons which are all individual components that you can easily swap out so if I use one of these icons and I drag it out here I can go ahead and you know find a new one that I can replace it with up here in the instance panel so let me just delete that also if I go over here I can see all the different components I have things like buttons we have icon specific buttons we have different elements and these are all variants and everyone shouldn't understand what variants are by now but these are all variants so if I use like say this tag button and I drag it out I can you know choose the type of variant whether it's like outlined or the light version then we have this other thing called component properties these are these other types of properties on the component now you don't really need to know how to create them but I'm going to show you how to quickly use them so as you can see I have this tag selected and if I don't want an icon with this tag all I have to do is you know use this Boolean property over here and just click that that toggle will turn it off and as you notice the other component property went away if I turn it back on it appears and now I can select the type of Icon component that goes with it so there's a lot of flexibility to all the things you can do think of component properties as things that you can easily turn off and shut off not things like you know changing color or things like changing the size really it is for turning on and off things so here's an example I have a bunch of component properties here but here is the variant property so I can turn into a horizontal card I can turn it into a vertical card but then I can say that hey this card doesn't have an image and this card doesn't have an icon or just an image and no icon and maybe it doesn't have a headline and maybe it doesn't have a subheading and or content or a button or any buttons for that matter so there's a lot of different things you can do with those properties just to turn things off that doesn't necessarily suit you and if you know you can't find anything that works just detach that instance by right clicking and going over here and then you can make that card whatever you want so definitely a lot of flexibility here you're going to have a lot of different types of components different types of inputs different types of placeholders that you can use and over here to the right you have the some base components and these components if you want to make an edit to the style of the inputs here you're going to make them on the base component basically these components make up the majority of the components in here so it's easy to instead of changing all the different types of variants all you have to do is change say one value so an example is if I come over here I can change say this color to like 700 and there you go and like it's changing over here instead of having to change it twice there so definitely don't delete these but these are going to be where you're going to basically change the styling of some of these components if you really want to I would definitely urge you to you know keep things really simple you don't need to you know do that for all these different types of components but like I said oops like I said you can just take these components you know use like if you have a label or content you want to write you can write them right in the property here and say say something like hello and it's going to be reflected in the component you can specify things like icon left and a type of Icon and icon right and so on and you can specify the variants as well so these are the components we're going to use to build out our wireframes really really quickly this is going to really help speed up our workflow [Music] hey everyone and welcome back so if you have any sketches bring them into this file if you have things like your site map that are going to dictate the content on the home page bring them into this file we're going to work together right now to work on some of the different pages within our app so let's start with our home page now I have a pretty good understanding of what I want to build already based off of all the stuff that we've done thus far I know that our home page needs to have things like recommendations ready these are things like maybe things pointing you towards deals to buying stuff definitely categories to pull people into words in a really good search so let's Jump Right In and I'm going to show you how to build a quick wireframe so what I'm going to do is I'm going to press f and I'm going to just use the iPhone 13 Pro as my frame and I'm going to rename this to home okay so we all know how to use those wireframe components and what I'm going to start it with is I'm going to actually start with the navigation so I'm going to grab our little toolbar component here and place it right at the bottom and here we go so now that it's placed inside the frame and you can see it right here it's inside that frame we can just resize it to fit the frame and now we can specify the different labels we want to see so I think there's going to be a couple of different options here I think we're going to need around like maybe four so I'm just going to specify the amount of nav items there I'm going to jump right in so definitely going to need a home and we're going to need wish list maybe that's what I was thinking definitely don't need to follow me in terms of where I think the content should go and what I think the content should be I would definitely urge you to do that yourself we have a cart and then what we're going to do is I'm going to go ahead and select a new instance a new icon there so I'm going to use the wish list icon I don't know what icon maybe a heart yeah that works and oops there we go what else should we choose so for profile maybe would it be under something like user oh there it is perfect I think that could work so I want them to be able to see like maybe their orders really easily and this one's really easy instead of a home we should probably use something like a cart perfect so there we go we have our versions ready now I can set this property to active so definitely nice little nav that we've just created really easily so that's going to be our nav for now and what I'm going to do next is I'm going to go into my assets panel once again and I'm going to start top down so I'm going to maybe build from the very top here and go all the way down and I'm going to get a search input so I see all my input Fields here what do we have so I'm just going to use the regular input field and you may notice that okay this has a label but now I can actually turn that label off because that variant has been created and then I'm going to switch that value to search I'm not worried too much about like the looks here like as long as there's enough contrast you know that's going to be totally enough for us and so I have a little search icon already placed there okay so making it really easy and apparent to search right at the top so we have that ready and I think it would be nice to have you know maybe some text here I'm going to just press t for the text tool that says something like a welcoming thing so maybe like hi Leslie exclamation mark and what I'm going to do is I'm going to go into my styles so you press this little icon here in text so I'm Gonna Go My textiles and I'm going to select maybe like heading as um I like the other one better and we can even go into our fills and then choose the type of color we want so there we go so I'm just going to do that and then I'm going to make a copy of that and drag it down and I think we should do something like oh we have some recommendations okay and I'm going to select all that with command a or control a and then we can specify the text so I'm going to leave the body copy here at like a medium or something like that and now we can set that to 600 just creating a little bit of contrast between the two so I'm going to actually group these so I'm going to go right click and I'm going to frame that selection turn it into an auto layout frame so I'm going to move a little quickly now and now what I'm going to do is I'm actually going to make this really easy on us I'm going to set up some sort of foundation where there's just like Auto layout so once again I'm going to frame this selection so I'm using my shortcut which is option command G and I'm going to make this an auto layout and so here we can you know start making some nice changes where we can just like pop content in and out we can make this the full width and the full height and specify you know just like the the padding around so say we want like maybe 24. pixel padding on the edges and then at the top you know maybe there's like 56 it just comes down there and all the content within we can just select it all and set the fill so now anytime we have like content here it's always going to span like the entire width so there we go we have like an introduction now I think the next thing to do is to probably have let's see what other pieces of content we have here I'm going to go into my content blocks and grab a card and I'm going to drag that right into that auto layout frame we can just move it down with our arrow keys and here we can actually start specifying some of the things like I don't want any buttons so we'll just turn those off and I think I think that'll be good and maybe we'll have like a price here so we can just change that to like say 25 and we can call this like the product name and yeah and now we can actually just shrink it as we see fit and now we have a product card I'm going to make a copy of that and I'm actually going to group them into a auto layout frame so I just press shift a while selecting them both and there we go we've created some sort of like container here which is essentially just like a vertical scroll but it doesn't really have a title I think the best way to do that is maybe just bring in a title bar and here we can you know remove the divider set this to like maybe small and set this to fill the container maybe not button two we can see how like we can just like run in here and you know change all these types of buttons so maybe this is like okay so we can set the properties and I want this style to be like a ghost button and I can say something like oh see all and the title is something like just for you and then we can take these and press shift a and we are in an auto layout frame again and now we can just specify that this is like maybe only eight pixels apart and we have like our own little content area here so now that we have that I think we're getting pretty close I'm going to just right click on that frame into an empty area and drag it out some more this can go right to the bottom we can specify that we want this fixed to the bottom and we can say this is right there to the bottom the constraint and what I'm going to do actually is I'm going to take this and copy it and it's going to make a new copy now I want to make a deal section and this is where I'm going to start you know messing around a bit with the actual card so I'm going to take these two cards make kind of like a grid so I'm going to you know select them both set them to fill okay that looks a little messed up I don't think we need all this content so I'm going to now that I'm selecting both of them I can remove things like the content I can you know keep the product name like that that's totally fine and I can keep that just the same and what I'm going to do is I'm going to select them both oops let's go in there select them both and let's bring them up in size now we can even come in here and you know mess around a bit like this title is maybe a little bit too big so we can make it smaller so now we have the little grid of items oops bring this in a little bit and we can select these together I just made that copy shift a and maybe 16 pixels apart or something and these two are right now 32 pixels but we can make them like 16 pixels apart and we have a grid of items so now our wireframes are starting to come to life a bit I think the last thing that we do need is maybe just a categories page or something on here just a place where people can easily come to see you know what kind of categories I can jump into right away so here we go I have my categories title I'll just keep that see all there and I'm going to modify this card a bit so I don't want an image I don't even want an icon I think all we need is a subheading and I'm pretty sure we could just like you know make it centered and I'm going to select that text jump in there again get right down to the text layer and Center it and there we go and how many pixels should this be so I'm going to make it like maybe like a horizontal scroll so this can be like just hugging the content this can be set to hug the content okay so let's take a look at our layers so we have a lot of layers here now so there we go we can remove this one so I'm going to ungroup that and we can actually spread it out so it's something along the lines of this okay so we have like these squares now so what I'm going to do is I'm going to just you know come up with some category names so I have Tech I have fashion and the last one maybe something like gaming and we can jump right in here and we can like tighten it up a bit and there you go we basically just created our own home page really quickly so we have like a search which I really wanted to bring in obviously I'm going to think I'm gonna come up with like different variations here and that's what you should do too you should come up with different variations of like your homepage and you know start choosing and testing which one is oh you think is the best in terms of like the content strategy and just like the hierarchy of information here but I have like my my just for you personalized products I have deals and I have like a categories page I also have a nice navigation at the bottom an easy way to search so that's it for our home page foreign welcome back I want to make another page right now so I think what we're going to focus on at the moment is just the car page so very very important part of this whole app we want to ensure that when people come to the cart page they are going to be able to easily jump right out and just you know check out and get through the process so I've just duplicated this Frame and I have like this Auto layout frame on the inside that's just going to allow me to like you know delete comment and everything's going to be responsive so we can do that and I'm going to name this one my cart and before we go any further I'm going to switch this to the active instance turn that one off so now we know which one we're we're on and now the next thing we are going to need is we are going to have to create some interesting stuff here so I'm going to delete that and I'm going to delete this now what I'm going to do is you may notice that like I'm not really caring too much about like the the container names in the final resources I'm going to rename everything just to keep it neat for everyone but when I'm going through my wireframes like I really do not care that much about renaming layers just yet I try my best to but if I'm working really quickly like I am now um I really don't care so definitely keep that in mind so I have these layers I'm going to just delete one of them and what I'm going to do is I'm actually going to take this and use some horizontal cards I'm going to delete this so I have this massive horizontal card that we can also delete that frame on the outside so I have this horizontal card here I'm going to go into this right side okay everything looks good make sure all that contents there I don't think we're going to need the icon on this card especially when it's in your cart like we just want them to get in and out so I'm just thinking about what's all the information they're going to definitely need in order to you know check out appropriately so I have the product and there we go oops that one went right outside the frame so maybe there's like three products so that's fine so there we go so far we have the products in our cart the next thing to do is to think about the content within so I'm just going to take this container and like just drag a copy over I'm holding option down and I'm going to switch the direction so saying that to fill the container all the content within I'm going to select them all to fill the container this one I'm going to have it right aligned so now I have this neat little thing here where we have both the like I'm gonna have like a title here saying like the cart total and you know the other information over here I'm just gonna change that to hug the contents there we go because the text was spanning too high so oops cart total so we can actually bump this down in terms of like the size here I'm going to just use 16 or maybe 20. yeah 20 is fine and I'm gonna come over here and you know say this is gonna be the car total of 75 dollars before I go any further what I'm going to do is I'm just going to create a copy because I think I'm going to need this again and I'm going to bump this size up so this is going to be maybe like a heading around like there and it's going to be really dark this is going to be set to hug the contents just like that and there we go so we've hugged the contents the next part is when I am thinking about checking out definitely want to know like okay is this delivering to my house um delivered to Leslie and the address so you can do a couple things here I have plugins that really help with this so you can go into your plugins and you can go to I have one called content real so definitely grab this plugin if you don't have it or just use your own address just for the time being and what this lets you do is it allows you just the free content allows you to you know Plug and Play so I'm gonna go to like a US full address and it's just going to give me like a basic address like that and it fills it right in for me so I have that address we can actually switch this to a line at the top these can actually come down in size they're a little bit big for what we need they're taking up too much horizontal space this one can come down in size as well and this is something that could probably be bolded perfect okay so now we have that and now I'm going to go into my assets layer and I think we need a big button here so I'm going to drop that in I'm going to move it down to the bottom here I'm going to set that to fill container and for my button I'm going to go ahead and say that I want this to say checkout so I'm editing it right in the properties over here instead of having to like deep click into the layers and I think like maybe there's like a cart button I don't know something like that that says like hey check out ran away I'm gonna use just like a horizontal rule because I think maybe there's an option here I I don't know I'm gonna put this in and I'm not sure how I feel about it just yet but I think there's like a way that we can you know bring stuff like this in to like the cart to say something like hey others bought similar things so you know you should buy them too and I don't think we need content for this we can definitely shrink the height though and there we go I think what this is gonna suffice for our our car because when people first come to this screen but they're going to see something like this based off of the height of the phone and so they'll be able to click the checkout really quickly and still if they're you know not sure about what they want to buy I mean they can add more things to the cart but they definitely see everything that they need right away to start the checkout process so that's how you create a card screen as a wireframe [Music] hey everyone and welcome back I am going to work on one last screen and that is the profile screen so I'm just going to once again I'm going to take this copy drag it over here and one thing I do want to remind everyone is like when you're working on these wireframes I mean it's not the end-all and be all like we are gonna definitely work to you know change these to be a little bit more different maybe it really depends on the direction we're going to change the direction we're definitely going to take with some of these these different concepts that we have here but the whole point of wireframing is just to get those ideas out definitely a much more you know quick and iterative way so you know don't spend too much time like worrying about like how things look because things change pretty quickly especially in design so the profile page is going to have a pretty similar makeup it's gonna have like a profile you know header I think the you know one of the things that is going to change here is like maybe we have like something that is very personalized like you have your own profile and you know items that you want to buy and you know interest that interests you so maybe there is like some sense of like you know maybe there's like a social media aspect to it I'm not sure so maybe there is like an image and oops I'm going to take this again because it's been really useful so I'm going to just drag that into here so maybe there is like an aspect of like some sort of social media I'm not I'm not sure just yet so we have I don't know I'm trying to think of a last name Leslie maybe Flores so we have that and I'm gonna use the plug-in called lorem ipsum so you definitely should have this for by now I mean this is a great plug-in I'm just going to generate it's going to close the plugin right after I do it and generate some content for me we can make that smaller and that is that so we have like maybe like a profile image that they can edit I mean we can even make it a little more apparent we can go into our assets panel and go into our buttons and you know grab a button throw that in there and we could say this is like a small button and it's like a light version so it's very secondary and say something like edit profile so that looks pretty good so we have like this area here this probably can fit in there so I'll just holding command while I was dragging that so it can go inside that auto layout frame and I think we're gonna steal this divider so sometimes I'm just like I'm not even using the assets panel I'm just like copying you know different components over so I'm going to steal that and throw that in there now the interesting part about this now is that I'm gonna actually take these so I'm going to actually leave these here because I'm going to reuse them but I'm going to take these I'm going to put them in there you'll notice that it's acting kind of weird so I can fill the container and hug it and then we can specify the height I'm going to call this like my interest section and the content here is going to be like maybe like gaming so we have our interests gaming what else can we put here maybe we have another one oops I'm gonna make a copy there throw it in there and put two ugly content this is where we can you know jump inside here and you know essentially delete some of the content that's in here because it's kind of confusing so we have our frame and I'm just going to set this to fill and I'm going to create another one that's in there so now I have two so I'm just going to leave it at that and I'm going to select these two and make them like more squared and over here what I'm going to do is I am going to set this to like maybe reading I mean I personally love to read and we have I don't know Sports and there we go so we have like an interest section and I'm thinking you know maybe they can come in here and they can see all their interests and you know be a quick way to go ahead and you know like see those interests edit those interests and and so on so I'm gonna make a duplicate and drag that down and now we have another section here now I think this is where they can get you know another maybe Deep dive into their account so maybe it's like Account Details and over here we have things like your orders and then we have other things like buy again and okay maybe wishlists so definitely some things here that we can use from the other part like how we just drag those components over but there we go like we've created a pretty simple profile page just by like throwing in some quick components and you know staying true to what our goal is for this app we want to make a personalized app for shopping as personalized as it possibly can get and now we've you know started exploring this maybe this idea of having like a profile that you know other people can maybe access I'm not sure just yet maybe that's like a post launch feature or something that we don't really build in right away and it's more of like an account screen but I mean lots of different strategies can come out from you know just simple wireframing and that's how you create wireframes Within figma congratulations you made it all the way most other people have already given up but not you you clearly have what it takes to become a professional in this industry so I would highly recommend you keep the momentum going and take the rest of Daniel's complete web in Mobile design boot camp course you can check it out in the description below or watch that video right there on your screen to see everything you'll learn in the rest of the course thank you

Channel: Zero To Mastery

Views: 69,818

Keywords: learn ui/ux, learn uiux, learn ui/ux design, learn uiux design, learn ui design, uiux 2023, ui/ux 2023, learn ux design, learn figma, figma 2023, figma crash course, figma course, learn web design, how to design a website, design course, ux design, ui design, what is ui ux design, what is ui design, ux and ui design, design, what is ui, what is ux, what is the difference between ui and ux, design crash course, web design crash course, web design 101, free design course

Id: cKZEgtQUxlU

Length: 373min 31sec (22411 seconds)

Published: Fri Mar 03 2023