Transcripts
1. 1 Introduction video: welcome to how to design and prototype a mobile UX experience using the design tool Sigma. My name is Aaron Lawrence, and I'm a principal UX designer and founder of AUX agency called UX Honey in San Francisco , California I'm also aux instructor, where I teach advance UX design at the Academy of Art University, also here in San Francisco. In this course, you will learn fig HMA, a cloud based design tool that's becoming the standard UX design tool for the industry and UX designers alike. Companies like Google, Twitter, uber, Airbnb, Microsoft have all adopted Fig MMA as their preferred designed tool due to its easy collaboration and efficiency in design creation. And my favorite part is it's free. So let's go show you the outcome of this course. In the next series of videos, I will show you step by step, how to design and prototype a on demand Boba tea ordering experience. You learn how to do a sign up, page a log in page, you learn how to do it. Animated GIFs. We'll work on the shopping experience, how to create fixed elements as you're seeing here, transitions for your prototype mobile drop downs. You'll learn button states. We'll go through and create a check outflow payment and the final purchasing of the Boba tea being delivered to my location. And yea, I have Boba tea Also, we'll work on the profile page Order history page, and we'll log out and create a seamless experience. You also learn all the different ways that you can create transitions between screens. When you prototype using fig MMA, we'll learn how to use the smart, animate feature. We'll learn how to create, move in and move out screens, slide up and slide down screens. We'll learn how to create a mobile menu, will learn how to create models and will also create a reusable component library, color styles and textiles all it that make design more efficient and easier when it comes to editing. You also learn how to create a link for your prototype and share that link with your teammates or with users for user testing. You'll learn how to invite others into your design and best practices. When it comes to collaboration within Fig MMA, you also learn how to export U Y assets for engineering and how to inspect code like CSS and HTML within your designs. I will also show you all of the fig but keyboard shortcuts and how to use them and the best ones that I use day to day. I will also show you how to download figment plug ins and to go online and download gooey kits. I'll show you how you or your teammates can create comments together. And last but not least, I have created a Fichman file for you to download and open within fig MMA that contains all of the designs that you've seen within the Boba Tea ordering application. Already there prototype Ready to go that you can use is a safety now or pick apart if you like to and will use this design file to go step by step and recreate the prototype that we saw earlier within the file. You also have all the assets that you seen ready to go. I have typed up all the quick keys and I have a list of my favorite plug ins that you could use within Fig MMA. Also use that file to show you the in and outs of how toe work within fig MMA, and it will make learning design and learning figure of fun in the sense that will go through and create together rather than just a list of videos for you to watch and do on your own. And you can walk along with me as we recreate this whole experience together. This course is great for anybody whose learning design and wants to learn how to prototype a user experience or if you're a designer and you already know other tools and want to brush up on how fig mo works. All right, well, thank you for watching, and hopefully you enjoy the class.
2. Class intro to figma & Download the class file: All right, Welcome toe. How to build a mobile application Experience design using the design tool Fig, MMA class. My name is Aaron Lawrence, and I'll be your instructor for the class before we get into fig MMA and building out the mobile application that I'll share with you in a second. I like to walk through the agenda for the class. So the first video here that you're in right now is the intro to the figment design tool and the file walk through. So I built you a file that you'll download in the class and I'll show you how to set that up, give you a walk through that file as well as fig MMA, and then we can continue to the next series of videos, which is how to design the mobile application experience. It's a boba tea ordering experience that are shared with you here in a moment that applications broken down into a series of scenarios that are gonna be broken down into a series of videos. So the first video that will have after this one is how to design the log in and sign up workflow. The next video will be the shopping workflow experience. The next video after that will be the check out workflow experience, and the next video after that will be the profile workflow experience. Um, I believe that the best way to learn a new tool and learn designed just get right into it and have fun. So this isn't a video where you're gonna have a bunch of instructions and things to do. You just gonna follow along with me and we're gonna learn by doing design. So while we're in these videos on and these scenarios designing, you'll use fig mutt toe. Learn how to create and use a component library. You'll also learn how to create and share a clickable prototypes that you contest the prototype or share it with your team. You'll learn how to invite others and how collaboration works. Within Fig MMA. You'll learn how to export U Y assets and also inspect the design for code attributes, and you could use those code attributes for engineering. You'll learn fig MMA keyboard shortcuts. You learn how to use figure plug ins and how to download gooey kits from online. You'll learn how to create comments, and you'll also have some final thoughts and a going forward will be the last video there. All right, So before I show you the goods and the designs that we're gonna build in this class, I just want to talk a little bit about why Sigma has become ah, very popular design tool for major tech companies and most the industry. And the companies using these tools are companies are Sigma Tool. Are companies like Google Twitter, uber Airbnb, Microsoft to say a few? Um, but why fig MMA? The one of the great things here is that it's a cloud based file storage application. So that means that stores all your files in the clouds. There's no more file management trying to track down the most recent file. Um, you can access these files from any computer via the Internet, so it doesn't just exist on your computer. They exist in the cloud, and they're accessible anywhere. My favorite thing about Sigma being a cloud based application is that a auto saves your work so you never lose progress in your work. It's constantly saving your file in the background, so you never have the like crash or the application crash, and then you lost work. The other thing, what's been heavily adopted throughout a lot of the companies is that it's great with collaboration, and one of the reasons why it's great is that uses you can view multiple mouses, and it makes for real time collaboration. So if other people are in the tool, you can see there mouses in the tool, and it makes that it makes it really easy to collaborate with other teammates. This also makes it easy for engineers and PM's to use. And it's great because engineers can come into your designs and they can expect them, and they can grab the CSS code attributes and copy and paste it into their code base. The other thing does that make Sigma gray is it? Does prototyping live in the tool, so you don't have to use one tool for designing and another tool for prototyping? It's sort of, ah, one stop shop for all of that. It makes that prototype really easy to share, and it gives you a clickable link that you can share with anybody in your team or you can send it to users and you can do testing with them. You can watch them go through the link. You can also download the fig mud mirror application that I'll show you on your phone, and you can see your designs that you're creating in real time also on your phone. It also makes um, the creation of components and component instances really easy. I'll show you that in this class as well, and it makes creating style guides and character styles and colors for reusing during your designs really easy as well. But I assure you, uh, sure you in this class and it makes for dropping comments so other teammates yourself can drop comics in the tool in the context of your designs, which really makes it really easy to see what people are referring to when they're giving comments to your design, which also show you in the final videos. It also has endless art board space and page layout and has lots of plug ins that you can use to make designing faster. All right, so it's a little bit about why fig MMA, Let's go take a tour of the application that we're going to learn in this class. So I'm gonna go over to the prototype here and we have a loading screen. It's the Boba tea application experience. And what this does is allow anybody in San Francisco to open up to download this application and to get Boba tea ordered to them and deliver to them in real time. So, essentially, if I want Boba Tea delivered in my office, I can order a Boba tea and I can have it delivered into my office with in San Francisco within 15 minutes. So we'll learn in the first video. After this is, we'll learn how to build out the sign up in log in page that you'll see here. You can see it has a tap system on the top, left and right, and let's go ahead and log in. Someone put my name or my email my password in Press the log in button fig. Ma also supports animated GIFs so you can see that little loading spender GIF. I'll show you that as well. And then here's the shopping experience. Here is all of the three Boba or for Boba teas, flavors that we have on offer. Here we have the tab bar here that stays fixed, meaning it doesn't stroll with all the other content. I'll show you how to do that in this class as well. And let's say I want to order one of these regular Boba tea drinks here. I just have to tap anywhere on this square and it opens up the regular milk, tea shopping, um, settings. And here I can change the milk if I wanted, maybe nondairy milk, almond milk. I can also change the regular sweetness here and the media mice. So in this user experience will change out the regular sweet to a semisweet. So here will also use figment to learn how to create a mobile drop down, which is a slide up here that you can see. And when I click the semi sweet, you can see the SEMISWEET has populated now. So it's really feeling like a ah riel application, although it's just your designs. And this is the things that we do to show engineering, how to build out the experience, the transitions and the little details that we have in our designs. So you can see here I can select my toppings. The toppings I have on selection are large tapioca, small tapioca or lychee jelly. I can see the total here, and I have the add button. So let's go ahead and add large tapioca so you can see have added the large tapioca. I've seen the price go up a bit and I'm gonna go ahead and add this to my cart. You can see that transition where the screen went down. We're gonna learn that in this class as well. And I could see now that I've added this to my cart, I click on the cart here. I see that I added the one milk drink, a run, regular milk, tea drink, and I can edit. I can remove this. I can also add any quantities, but I'm good with it. I just want one drink delivered to me. Here's the sub total the taxes, the delivery fee, that order total. And I'm good to go. If I want to close this, I compress the X, and it will close it, um, down like that and I can reopen it again. So your learned these little transition states in this class as well. So let's go ahead and do the next and you'll see Ah, the address here. I can put the address in my apartment and my phone number press done, but say I wanted to go back at all. I can press the back arrow. You can see that screen slides from the left to the right, and you can also see it come in from the right to the left. Here. Those are little transition details that will learn in the class as well. And I'm gonna go ahead and put in my credit card information here. Press done. And I could see my took my order total here at $9.49. And I'm gonna go ahead and pay and we could see were using that spinner again at seven ng payment. And you'll see I now seeing the delivery of my Boba tea on the map in real time. And bang, it's here. I can say, OK, got it. And it takes me back to my home screen. I want to go look at my profile here. Aiken, Tab over to my profile. I see. I'm now on the active profile tab. I can see a picture of myself. I can add a picture. I can edit the information here. Oh, and by the way, this isn't a picture of me. That's just a random picture that I have of somebody using a plug in, um, in fig MMA. That's really neat. It's a plug in called, um, content assets, that I'll show you how to download and it just pulls photos for you Really easy. Also, there's the order tab here, and I can see my most recent order was that one regular built milk tea, the date and the total there, and I can click back on the mobile. T ah, uh, are the Boba tea icon. Hear? It takes me back to my shopping experience. I can go back to my profile, I can log out, and I'm back at the log in screen here. All right. Pretty awesome. So that's sort of the goods that rule go through in this class and learn how to build. But going forward right now is what you'll need to do. If you haven't already is, go ahead and go to fig MMA, um, sigma dot com and you can just do a Google search like Sigma download and find the figment download. Um, U R L, which is sigma dot com slash downloads and download either for Mac or Windows. I'm using a Mac, and most people that do design work here using a Mac, um, so download the local application for your figment file and you'll see here by pressed the download. It shows up on my bottom left corner. I double click on that. It will show, but my applications and you can begin to start using fig mud. What's really neat, though, also is, um, you can also access fig MMA through the Web as well. So you can see here I have the file loaded here on Web and I can go through all the designs that I just showed you on Web. But for this class, it's best to use the local application, so download the local application. And the best part is it's free. It doesn't cost you anything. Okay, so go ahead and download the application if you, um, haven't already and pause the video and I'm gonna continue on and you can join us after you download the fig. My application. All right, Now that you have sigma up and running, go ahead and download the class file or folder here. It's called fig MMA file for download And once you have that downloaded, you can go ahead and open. It has two things in it. It has the figure, a class file that you're gonna open and figment. I'll show you how to do that here in a second. And this is the file that we're gonna use for the entire class. Also, it has the fonts for the file on the design that we're doing for that Boba tea application experience. And it you could see all the fonts here. This should already be installed in your fig MMA application, but just in case it's not. You have him here. You can stall those on your machine. Okay. Before you open up this, um, file here, I'm gonna go to Fig MMA. Um, beginning of sigma looks something like this. You land on this page, you have your drafts, your plug ins, your recent your search. You have your, um, your settings here most of time. I'm going into the drafts here, and I'm making new art boards. Your your figment application probably like mine because it has. I have a lot of files already that I'm using, but you could do the new file here And that's how you create a brand new working file here you've seen, like I've done here. If you click on entitled Here, this is how you create a name for it. You just say name here and now I have a name here, file created. I'll get into the inner workings of Fig Mahir. Um, but it's best just open up the file that I've created for you, and we'll go through all of the details and we'll just learn by doing which I think is the more fun way to learn. Okay, so now that you're here and you have the file, um, if you're already in a file within fig Ma, you can come Teoh this section here. So come to this. Um, I click on the top, like four boxes here. My figure application comes to my home like dashboard. Here, go on the draft section here, and what you're gonna want to do is you're gonna want to click and drag this file here. This figure, a class file, slash boba tea into this space here so you can see highlights blue. And that's how you'll load up this file and eventually you'll have this figure a class file here. I'm going to go ahead and delete the one that I just created called name here. That's why delete. So if you ever want to manage this space, you just right click on different, um, files that you've created within fig mond. You can delete them, duplicate them, renamed them share, um, copy links, open them. You can also just open them by double clicking. So once you have the figure eight class file opened up, just double click into it and bang were into the file here, um good and followed me. Let's just go to the final prototype here, and this will be the good section Teoh to take a look at. What I'm gonna do is I'm gonna zoom out by doing ah, command if you're on a Mac or control your on a on a PC minus so command minus for me and I'm already doing some basic functionality within fig mo Just command minus to zoom out command Plus to zoom in. And if I wanted also, uh, zoom in and out, I can hold down Z and see how that gives me the my magnifying glass. And I just click and I zoom, click and select click and drag, and that will zoom in the art board or this art page to anywhere on the page. I can command minus again, and the next thing toe that's important to learn to is if you hold space bar, it gives you this little hand, and this hand, if you click and drag, allows you to move this space around pretty quickly. So those are some of the fundamentals of really any design tool. Is your using command minus command plus to zoom in and as you zoom in, you using the space bar and the hand told to move things around to help position yourself. And then you can hold Z to zoom into places that you want to see more. Let's say I want to grab that Ah, this little arrow icon and I consume back here. Okay, so let's go ahead and do a walk through a fig mahir again like you saw before. If I want to change the name of this design file, just click at the top here. I can change the name. I also have all my layers here, which I'll show you how to do that here in a second. Um, for this page system here. So what figure allows you to do first? First off is it allows you to create pages here on the left. You can see I have the learning. Paige, this is where we're gonna go ahead and design out that Boba tea application has the component library. Um, page here. This is where we're gonna put all our components. That will reuse. Are you? I components. It has the final prototype. This is the actual boba tea application experience that you've just seen already built out . Ready to go in fig, MMA. Just in case you ever get stuck during the class or you just want to dive into the designs already. Haven't see how I've used them. Um, that's all there for you. I have the design goods. This is a breakdown of all the like icons and photos that we're gonna use for this class already here. And I also have the gooey kit. This is the IOS gooey kit. And this has all of the functions for, like, keyboards for your your iPhone devices. Um, notifications. All there. We won't use all of it. But it's there for you, um, for future projects, if you need. So what you could do. Here's let's say I want to create a new page. This is a new workflow that I want to work on. You just click on the plus button here, and you could see I have a page six. I'm just gonna call this like, new page here and now I have a new art space that I can go create all of my designs here. So let's go ahead and ah, delete this page here. So we're gonna delete this guy here. You can see I can delete page. I can rename Aiken duplicate it. I can also do a new page as well. We'll just go ahead and delete it. That's why you add pages and delete pages. Now that we're in, um, the learning page here, you can see at the top. Here we have our tools. You have the selection tool. Some move tools from scale tools. You have the art board tool here. It's a frame tool in the slice to, uh, get into these as we do it. I think it's best when, um, just a design as we go, and I'll talk about these tools Maurin deftly throughout the videos here and show you how we use them. But here's the shape tool to create rectangles, lines, circles, polygraph stars. You can also place images. You can also just drag images and just drag him into the fig MMA on DATs. How you can. That's how I tend to place images in this tool. You have the pen tool, which allows you to create any shape that you want here, which we'll get more into, um as we use the tool or as we do these series of videos here we have the comment, um, tool, which I have, ah, video towards the end here. How to use this. And then we have the same similar settings here at the top. We have the file here seeking open file from a browser. You can save this file as ah, as an actual file so you can get it out of the cloud like I did here, Um, for the documents for this class, you can export um, art boards and you can export the screens as pdf's. Some basic addict functions like command seat, a copy command V to paste. Um, and then you have some view areas to view grids. You can see view layers. Um, a lot of stuff, A lot of like any designed tool you don't they use. You'll learn all of this. You just kind of learned the basics. And, um, you'll learn as you as you need to learn. So I'll show you pretty much 90% of the tool, um, that I use and there's still some things within it that I don't use. I don't find all that helpful for, but they're there some option settings. You have some vector settings of you have any vectors? I've never used this at all. Just a heads up. You have some text features here? Can I never use this here? I use the text field over here that I'll talk about here in a moment. You have a range arranging objects. I'll sometimes use this, but I also use quickies for these as well. These air how toe like layer objects on top of each other and arrange them. You have your windows. Rarely. Do I ever use this as well? The plug ins or cool. I do use the plug ins a lot. So, um, I have a video towards the end here that just talks about just plug ins I'm and how awesome they are and then help. You could just quick search anything here if you wanted Teoh, um, like keyboard. And it will give you keyboard shortcuts here, which I have a video on towards the end that we'll talk about. So if you ever get stuck, you can You can, ah do the help here, all right, And then So let's go ahead and just create a rectangle here. You can see I've grabbed the rectangle to I clicked and dragged here and you could see the left column. Here is a lot to do with my layers and my pages here that you that I have the right column here has to do with whatever I select. So you can see this is a basic I'm on the art board. It's showing my background for the art board, some local styles. I'll show you how to set these up in the video. The next series of videos that will do and I click on the rectangle Watch of the stuff on the rights Gonna change Boone. So now it's changed to rectangle functions here, so I can change the width of this. I'm just holding. Let's say I want 20. You can see it's gonna get real small. Let's go like I don't know, 2000 if we want. And let's go ahead and make this 2000 as well. We got a square. Gonna zoom in on that. So I changed the width and height of that square. Let's say I want Teoh. Rotate it. That's the rotating. You can also just rotate by just clicking on the side. Here, you see, when I my hover my mouse over the side of any corner, I get a rotate tool, and if I just click and drag, it rotates elements. But if I want to get more specific, I can click here to rotate and get more specific. I can also around edges here sick and see if I go up here around the edges and they'll get more around around, eventually turning this rectangle into a circle. If I click into the, um, independent corners, this allows maybe just to round out one corner at a time. You can see just the top right there is getting rounded and I'll dive Mawr deep into these , um features as we continue on with the class. But I have a feel here. I can change the colors. Say I want to make this blue. I can change a solid to a Lanier, which is a Grady int, and I have two colors. Let's say I want to change this color here and to maybe something more Ah, purple And he could see its at 0% opacity. Here there's in the past. The slider makes it transparent, and now we've made it. A full fledge was kind of a nice color. I have my document colors here below that you can see as well. And let's say I want to add a stroke like I want to add a black stroke to this. So here's my stroke. You can see what I did here was I pressed the plus and I've added a stroke here. And then if I can make the stroke thickness more here, you can see I can also do the same thing I did with the feel. I can change the color of it. I can change it from solid toe. Lanier have different radiance. It's fun. Just go play around with these two. What's I just want a solid here. I can change the colors here. Let's go like a darker blue, Okay? And then I have the transparency here. So if I want to set the entire image transparent, I can start to move it down. Eventually it disappears, Moving back up. It appears I can do the same thing with my feel. You can see here. I'm just making the field transparent. Pretty simple. They were just pressing the keyboard down Arrow. To do that, you can also type it in. Let's say I want, like, 20 you know, I'm going to go back 200 I could do the same thing here for the stroke. Compressing shift down arrow and I'm seeing a stroke. Go away for the stroke. Aiken, do an inside. I can do a center. I can also do an outside their pretty simple stuff for the effects. Here. You can do drop shadows, things like that. So it has a drop shadow here. Let's go. Um, apply. Drop shadow here you can do in our shadows. Defaults to drop shadow. That's mostly what most people use. Let's go make this. Um, we'll start with maybe 70% here on the transparency. Let's make it 40 on the left or the right and 40 on the bottom. What's at along? Blur on it and you can start to see that drop shadow. And if I want to change the drop shadow color, let's I want to put a little bit of blue in that drop shadow there we got some blue going. I'm gonna go ahead and delete the strokes. Aiken delete. I can press the eyeball and that's just still keeps the stroke by just can't view it and you compress the minus here and I could just delete it. So now I just have ah rectangle and I have the shadow applied to it. I'm gonna go ahead and click on this rectangle and if I do a command, see or I go at it here and I do a copy and then I go and do a command V or edit and I paste . You can see that I've just pasted a rectangle here. I can also hold option click and drag, and I can copy a rectangle here and if I hold shift while I'll do that, it keeps it in line. So it's exactly at the same alignment as the one that I'm copying. Here. You can see I can't snap out of this. But if I undo shift, I can. But let's go ahead and make these all a little bit not aligned here. So now I have three rectangles and you can see here on my panel on the left. Here is I have get rid of these. I just pressed. Delete. I can select these rectangles just by clicking these layers over here, which is helpful, cause as you start to get many, many design elements going on your page, it's nice to know that you can just go select him over here. I can also hold hold down shift, and I can select a couple of these. Select all of them. What if I just want one and three thin? I can hold down command and I can just select the one and three. I can also just click Find the one here. Uh, click on the rectangle itself. Told shift, Click another one And you could see I have these two selected. Not this one right now, Just these two here. I can move these two around. I can hold shift again and unclipped And I just have this one selected. Or I could click and drag, and I can select all of these just like that. And I can hold, shift and click and drag again and see how it uninsulated the areas that I'm clicking and dragging. So those are some pretty, like, really, fundamentals of any design tool is, um, being able select elements create elements at some color at some, stroked at some effects, being able to select multiple objects. These select multiple multiple objects. Another thing that's pretty fundamental to is being able Teoh, align these So you can see I've selected all three of these and I pressed the alignment and bang. They're all aligned at the top. I can also even lead distribute them so I can say tidy up here, or it's to distribute horizontal spacing. And it makes equal spacing from left to right and left to right here. All right, so you can see the a lot of those functions that I just showed you were also, um, at the arrange setting up here um, object settings up here. Let's say I have Ah, I'm gonna make one of these just black. I'm gonna go back to solid and just make a black one, and then I'm gonna make this one here. I'm gonna make this one go back to a solid and just make this one. Um, Any colors find by my make it pink for this case. Now, you can see my layering here. So I have the pink on the top. I have the Grady in in the middle of the black on the left. I want to change any of these layer rings. I can goto object and I can go to bring to front. So whatever object I have selected, I have selected this square I could bring to front and boom were brought. We brought that one to the front page. If I want to bring it, um, let's go ahead and say I want to bring this pink one up now. I gotta object. Bring to front and I can see that's gone up to the front. Now, if I want to send this all the way to the back, I can go send to back and he concedes to the back. And if I want to bring it up one I'm gonna bring forward and you can see how I brought that forward. I can also do the same thing by clicking the layers and dragging the layers so you can see I'm dragging the layers up and I'm gonna bring the pink all the way to the top here. Pretty simple stuff. Um, let's say I want to flip this element here. What's do? Um, I'm gonna make one of the corners have a different shape here, and I want to flip it. Just go to object, go to flip horizontal, and you'll see it'll flip horizontal. Or I could flip it vertical as well. And I have that I can also do. Their rotating up here is well, but I like to do the rotating just by putting my mouse over here and rotating it just like that. Okay, cool. So that was a little rundown of the basics of fig MMA, the design tool. Let's go talk a little bit about the structure of this file that I've given you. So we have the pages here, we're gonna we're gonna create everything in this learning. Paige, here the top left. We have the component library page to put all our components. You have the final prototype here. So essentially this learning page that we have at the top will eventually look like this file here broken down into those four scenarios that I've labeled here at the top. These are just a square with text on it. That, um, helps me organize my files. So you have the log and file here. You have the order scenarios here. The check out here and the profile screens here. So those are all in the file there already? Prototypes. You can see if you click on the prototype tab over here and I click and drag this here. That's how we prototype our screens together, Which I'll show you in the next file or the next video here. But you can see it's all here for you. Um, but the best way ah, took to learn this is actually just we're going to recreate this, but it's it's a safety net. If you need it, I might have all the design goods over here, and so already we always we already have everything that you need here is Well, um and yeah, and with without further ado, I think we're ready to go ahead and kick in to the next section of this video, which is we're gonna learn how to start designing that mobile application, and we'll start with, log in and sign up workflow. So again, I want to thank you for taking the class and I'll see you on the next video. Take care.
3. Designing the login & sign up screens + component creation, prototyping & smart animate: All right, welcome to the next class. So this is gonna be the fun series of videos where we get to design that mobile application . The Boba tea ordering on demand app that you saw in the last video. And what we're gonna do is we're gonna start with, log in and sign up workflow. And while we're doing that, we'll learn how to create and use a component library and will also learn how to create and share the clickable prototype as well. Let's go ahead and begin. Um, what we're gonna do here is let's go over to the design goods here that you have and what you want to do here is if you zoom out this art board here, the one that says design goods don't click on the inside your does air clicking on elements , click on the art board itself. You can see here this design goods or I can click on the layer here on the left that says design goods. And that's clicking on the entire art board. Go ahead and click that you can do a command, see or control. See if you're on a PC. But command, see, for Mac or you can go to edit copy, get over to the learning page here and go ahead and pace that. Copy that again and paste that here so you can see the all the elements that we're gonna use for this. All right. And the pages that we're going to design here are the figure out of the final prototype link. Here are this Siri's everything underneath this black bar that says sign up and log in. You can all see right here, so don't copy these. Um, I'm gonna bring over some of these elements here. Just so I remind myself what to show you as we continue our journey on building out this application. All right, let's go. The final prototype. I'm gonna show you real quick how this will look in the at the final version of this video . We're gonna do a loading screen with the map. We're going to do the log in, sign up tabs just like this. And then we're gonna create these forms here and click on or tap on the email and name form tap on the keyboard, puts the email in, click on the password, opens up the password inputs you can't live type in fig. MMA doesn't have that functionality where I can, like, live, type something. So you're you're sort of prototyping or mocking up what this experience will look like once it's developed, and then you could type on the keyboard. But most prototype tools don't have that functionality unless you're using real code. And so we'll get up to this point, um, and we'll go ahead and stop there. Okay, so the first thing we're gonna do, um, that we're gonna learn is how to create an art board. So go ahead and get over to the learning page here, and what you're gonna want to do is go to the top left. Here. There's this tool here, which is called the frame. Click on the frame and you'll see on the right here works as designed. You'll have a whole list of, um, art board sizes that you can create easily within fig MMA. So it has phone has tablets here, see of iPad. Mini iPad Pro has desktop. You're looking a design for a Mac book. MacBook Pro Surface book. An I Mac has watched templates here has paper, has social media for this case you can. You can also just click and drag and make any type of art board size that you want. And you could manipulate the sizes with with and height here. So let's just say I want this art board to be 100 by 100 kind of a smaller art board from a zoom in on that pretty simple again. You could just click here, create the frame for our, um, any frame that you want. But for our purposes here, I'm going to select these two are boards and delete it. We're gonna use the iPhone X here. So we're gonna go to, um, the iPhone 11 pro X and just click on it and you can see it automatically added the art board size affiliated to an iPhone X that you have. I can also move this our board around just by clicking on the top and dragging it. So I'm gonna go ahead and set it up here, right? And the first thing I want to do in this art board, once I have it selected is I want to come over to the feel here, and I want to click on the field and I'm gonna make this all black. So drag this dot here, all the way to the bottom rate. And what that did is that created the background of this to be black. You can change it any color if you want. We're going to use black for this setting. So this moment you've just learned how to create a man, an art board that's specific to an iPhone 11 screen size. Or you can create any size art board that you would like. And then we learned how to grab that are bored Here, you can see there's a layer, um, on our new art board over here, layer. If you click into this layer, we can name it. Let's go ahead and give this a name. What say this is the loading screen and you can see here I can change the fill, so I just click out of it. Click back into it. I can change the feel here. All right. The next thing I want to show you is how to save or how to create a and save a color to reuse throughout this experience. So we have black, which is a hex color. Um we have it. 000000 is the hex tone we're going to do here is we're gonna click on the little four dots here that you see, and we have a thing called color styles. I already have some here labeled You may not have any right now, and that's totally fine. We're gonna do this together. So go ahead and press the plus button here, see where it says create style. And what that's going to do is gonna create a black color for us to reuse. So let's call this black and go ahead and press the create style button about obeying bada boom. And I have a black style here if I want at this black style, all I got to do is click on it. If I click off into the art board here, Um and I don't have anything selected on the design tab. It just shows me my dashboard, which shows all of the styles, including color and textiles. You probably don't have textiles yet. That's okay. We're gonna set these up together. So if I want to change the black here, I just double click on the black right click on the black and then you'll see this little setting here, press the settings and I can change this black property and see how it changes already on my art board. So wherever this black color lives, I have many art boards. I can change it in one place, and it will change throughout all of the screens, which I'll show you here in a minute. Okay, so, um, we now have our first screen with the black background. What we're gonna want to do here is to get over to the design good section and grab the information. It's the settings and battery and time that lives on your iPhone, and you can see the tab here. I got this from the gooey kit. If you go to the design page here and you can see all these settings here for the status bar, um, the settings percentage of battery time WiFi, these all changed throughout your when you're using an iPhone. I usually just go with the time in the battery at the top, and it makes it feel more like a riel live application that you're using, which is the goal of these tools is toe mimic actual software even though it's just screen designs which allows us to test and learn quickly on an illiterate quickly and then eventually build out these application experiences with engineers with real code and eventually get an application to market and create businesses. Okay, so let's go back to our learning tab here. I've already created the one that will need. So just if you click on it here and go ahead and do a command, see and go back to your art board here, you can see I'm zooming in holding Z, and then I'm using my space bar again to move around. Somebody even even zoom in even tighter here with just holding Z clicking and dragging. And I'm gonna pace this. Somebody do a command V or you can go to edit paste up to you that pasted that. Here. I'm gonna put that into the top here, just like this. That should be fine. You may see this is already on the right. Selected. It has the fixed position when scrolling, make sure that box is checked. We don't We don't want this status bar moving around. We wanted to keep it fixed. That always stays in that position at the top of your iPhones device. I'm gonna zoom out by doing a command minus here. And the next thing we're gonna do here if you want. If you want to come back to the final prototype tab and just check on what we're what we're building here. Um, we're building out this screen here. Has the map. Has the status bar has this cool icon this Boba tea has the Boba tea logo and it has this loading text here. Let's go back to the learning page here. Let's go grab this map Here. I have the one that's already been cropped and I'll show you, um, how to crop this if you want to get this section here. So go ahead and grab the image to the left. Here, you can see there's a crop I called at the top. Go ahead and click on that and I can pull this in now and I can crop an image you can see here I've cropped an image press return and it crops it press command Z or edit undo. And it goes back to the steps that I've done. If you go command shift. See, which is redo can see here. And thickness. Nice. Because it has these, Um it has the quick keys here, next to your functions. So as you get so used this it's best to start learning the quickies on. And you can move through this pretty quick. Somebody a command shift. See? And I've cropped this down here. Now, if I also want to move the image within this crop down, I can go ahead and click on the crop tool again. And just by clicking on the inside of my crop, I can move this image around. And if I want to also blow this image up a little bit, I can grab the corners of this image, and I can scale it. Usually when you're scaling, it's best to hold shift so you don't, um, deform your image. So if you hold shift, it holds the perspective of your image. Some holding shift right now on dragging my mouse up and down and I'm downsizing and upside . He's I'm scaling my image. All right. The next thing here is you can see When I went into the crop tool, it automatically opened up the image functions here, So let me talk a little bit about that here in a second. So if I go to the Phil here has the image on this box and I click on it, you can see I'm in the crop area right now. I can also change this. I can fit the image to that square. I can feel it. So it feels the square. So I scale it. It's feeling that space I can tile it, which I'd never really use, but it will tile the image. So if I scale it down like that, you can see kind of cool all the tiling that's happening. Style is kind of like your floor tile. You know, it's taking ah section, and it's copying it all the way vertically and horizontally. I also have some engine image settings here. Allow me to add, um, the color within this image, and I can pull back the transparency a little bit here. I never used these, um, so I usually tend to stay away from from these. Um, let's go ahead and go back. Um, so if I went back and I wanted to fill this shape of the color, you can see it, Fill it with the color would go back to image here. I always keep it on image. I never really used tile that often either. Um, I usually just set it up to have ah fit and we can go back to our crop if you wanted to crop this guy again. Une Zewe to change your images. Here is if I click on this image, see where it says choose image. I can click and I can select another image. Let's just say for this case I'm gonna select one of my, uh uh, images here. Let's go selectable bit t image like that and I have just swapped out this image. But it's, um it's being fit and cropped within that space so you can see it's interpolated the image a little bit. Okay, some basic functions of images and cropping. I'm just going back into the space that we have here. But for the sake of the design, let's go ahead and grab this image that I've already cropped and let's go paste it into this art board. So if I want to pay something into an art born again, I clicked the top left which is the art board. Ah, Layer. And I do a command V. You can see you can go paste Here is well command V. And there is the map. Now I want to set this map. Um, below the ah, you could see it should be below the status bar here, which it is. I also want to set the transparency on it down a bit. So you can see I'm gonna go ahead and move the transparency down. Let's say about 20% here. I'm just pressing. Shift down, shift up. If you undo shift, it gives you the actual ah, increments. And if you hold shift, it gives you increments to the 10th. So 2030 40 50. 60. Do 20 here. That looks good. Okay, Now, let's go grab the Boba tea logo here in all uhm pink. So I'm gonna grab that press command V. I'm gonna go back over to my art board here. I'm gonna paste it right into the center. You can see it automatically align it, um, horizontal vertically centered for me or horizontally centered. And just around there does have to be perfect. Just like that's fine. Next thing I'm gonna add for this loading screen is I'm gonna come back over here. I'm gonna grab this. Boba Tea illustration here. Caught command. See? Copy it. Gonna pop over here, and I'm gonna paste it right on top. Command V second copy is command C and Paste Command V. Next time we'll do is I'm gonna use the text tool. So the tool here is at the top left That has the tea on it is the textile. I'm gonna click on it. And this is how I can create typography in my application. So now I've clicked on it. I'm gonna click and drag on the withs of my art board here just like this. And I'm gonna type in the word loading and we do three dots. I'm also going toe change this, Phil here on the bottom toe white so you can see it's loading now. And let's get into some text attributes, um, and text functions that we can do right now by pressing the feel on the text here. I can change this. Any color that I want. I have the color bar here. I dragged this Aiken select colors and I can also make transparencies here, all within this color setting and similar to the colors that ah, are the, um, the squares that I showed you in the past video where you could make them Grady intel near , Um, you can do that as well as text. Although I wouldn't recommend it. I don't typically put radiance and text. Um, most of your design serves communication. So, um, when your typography ah, has Grady in Senate and makes a hard to read. And the goal of typography is Teoh is to read it and help educate, um, the person using this application or giving them context. So, um, again. And don't use the linear Grady ants anything like that for your Texas. You solid. I'm gonna use white for now. Now, let's go ahead and say, I want to blow this up a little bit. I want to make this text size bigger. Somebody close. The Phil here I don't have to do is select the text box that I have and see here where it says 15. I can start bumping that up. Let's make it 18 and you can go down on it as well. That's how you decrease and increase fonts, font sizes, this one below. It is called letter spacing, and that's the space in between the letters. I want to up that a little bit. Let's do you like eight there a little bit easier to read when it's spaced out like that. Okay, And let's go ahead and set this, um, text here to have a transparency to its, let's say, 50% transparent. Actually, no, it Let's keep it 100 and let's actually pick out. Agree that we can use. So whenever we use graze, I typically like to put a little bit of blue coloring into my gray versus just gray. Um, the blue coloring helps to add a little bit more modern tone to the application, So I'm gonna pick. Um, any blue grey like this is fine. Any blue will work to. It can be like a cool blue or darker blue, or even a teal blue if you want, but just go with the normal blue. Let's say that a little bit later. OK, let's do that right. At this point, I want to save this color, so I want to re use this color. So how he did that before is. We click on the four dots here, the menu for fills. And we had that little plus here on a press plus And I'm gonna call this cool gray. You can give it any name that you want, McCall Mind cool, gray. And I'm gonna create this style. And now I can reuse this style any time I want. You can see when I click on it, it has the cool gray color. If I don't want to use that color, for example, I wanted to try something else. You click on this detach here and now it detaches it. And I can go back into the normal color setting that we had. But I don't want to do that. I just want to keep it as cool. Grey for now. All right, great. So we have the loading screen here. I'm gonna go through my checklist to make sure I showed you everything we went through on this screen alone. What we learned was, um, some typography settings. We learned some color how to use Grady INTs, re sizing, text and imaging cropping, creating color styles. Um, and then we'll get into, um creating some of the components on the next next green here, I just The next screen we're gonna build out is if you click back on the final prototype here, I'll show you. Is this Boba? Sign up and log in screen here. Let's go back to our learning Paige here. All right, So now we already haven't aren't board. You can see here that has the black background and some, um, and the status bar here a swell. Instead of creating a another new art board by using the frame tool here, What we actually want to do is we just want to copy this art board. So there's a couple ways that we can copy this I can click on the top here. You can see when you click on the art board at highlights blue versus anything that I am. Ah, want to click on and select within the art board itself. But in this case, we want to select the entire our board. 2nd 2nd click, I can move on, move and dragged that our report around. But I want to copy it so one day I can do is I can do a command, see, and I can do a Command V. And it copies the art board automatically for me and places it right to the right of that, um, our board to the left. Here, you can see another way I could do this is I can click on the art board, Hold option till I get the double arrow. You can see here the double arrow click and drag it to the right and then let go. And when I let go, I've copied that as well. So one more time on that one. I click and hold option until I get the double arrow. And when I hold shift, it keeps this aligned so I can't move. You can send moving my mouse up and down, but I won't let me remove this art board from the alignment where if I undo shift, I can move it around as much as I want to someone ahold shift because you want your our boards online. Do you want to have a clean organized, um, layout? Right, So now I have the new loading screen. Let's call this loading. Let's call this the log in screen here, so if you just double click over on the layer and you do, You log in. Well, you log in and sign up because it's both All right, Cool. So this point, let's start removing some things. So let's remove the boba tea. Let's remove the map. I'm going to keep this. Um, this loading actually would delete it to start fresh. Okay, Cool. So let's go ahead and grab the logo that we have here that has the white and see here and do a command. See? Copy it. I'm gonna It's pan over to the other art board that I have here and do a command v All right. Just like so. And the next thing I want to do is I want to grab the text tool here, and I want to create the sign up and the log in tabs. So I clicked the textile here. I'm gonna click and drag to somewhere. The middle's fine. I'm gonna type sign up. I'm gonna do it all caps I just typed with my cap blocks on. Make this white and you can easily change text here by doing. You can change the all caps of text here with the text menu at the top by going to original case, you can do lower case here or upper case as well. I want to keep my number. Case. All right, cool. So we have signed up here and what I have it is set at Roboto Bold 19 points. Let's go ahead and create this as a character style that we can use and reuse throughout this application. So how to do that is similar to how we created the color style. See a little four dots here on the right in this text dialog box. I'm going to click on it and already have some textiles and character styles already created here. You may not see him, um, but what you could do here is create a new one and let's just call this. Sometimes I just name them what they are. This is a 19 point or pixel height on the right point, and it's bold. There you go. Now why that's helpful is, let's say I use the text tool again. The quick Etem command to use to grab the text tool. Pretty simple, his tea and you can see when you hover over it. It gives you the quickie. Some of Presti. If I just type anything again. So let's say I'm gonna do this outside the art board here. So I do the text here, and I just type in one. If I create men, turn this, um, toe lower case as well. All right. And if I select this font and I go into the text here and I grab that attributes that we created the character style say 19 point bold, it's automatically setting up that character, and I can change it to white. And I have the same font size and character and textile as the one that I've created here for. Sign up. Right. So what I'm gonna do is copy this sign up here. I'm gonna hold option, click and drag to the right, and you can see and tell those to meet right in the center. You can see right there, and it will snap those that binding box. That text box for sign up that I just copied will snap to the the one original one that I copied from. I'm gonna grab both of those and I'm gonna just use my arrow key on my keyboard and just move those to the left a little bit just so they're both aligned and you can see they're both centered on the page. At this point, I'm gonna type in law again. And now I'm gonna break this style and make its from the character textile dialog box here and make it a regular actual. Let's Yeah, let's make it regular. I'm also going to change it to about 40% opacity here, so you can see that. So one more time I've grabbed the log in. I've detached it from the textile that we've had sings to the detached style. Now, this allows me to do any fault that I want. You want to choose other fonts, you can come in and selective her fonts, but we're using Roboto for this case, and I'm gonna change it to a regular. You can even do light if you wanted to. Let's go with light. I'm going to remove the opacity down to 40. Maybe do 50. Now, that looks good. Okay, Next thing I'm gonna do is I'm gonna grab the rectangle tool. So I've got in the top left here, and I'm going to create a little line. So what I did was I grabbed the rectangle tool. I zoomed in a little bit and I've clicked and dragged and I made a little line here where I rectangle here real thin. Now what I'm gonna do is I'm gonna change this color to be this pink. So what I could do is I want ah, color that I'm viewing already in my design, I can try to select it over here trying to match it. You can also just grab the eyedropper here and hover over any color you want and click on it. And it will automatically make this color for you Another way. You can add the color here is I can click on this element I can copy and pace. It's hex value over here command. See, I can click on this new rectangle that I've created and I can command v press return on the keyboard, and I have the same color. The way I like to do this is let's let's go ahead and create a color style. So now that I have the car that I'm going to reuse and this is gonna be an action color, So this is the color that are buttons. They're going to be mostly anything that's clickable in the application we want to create with this primary action color. So now I have the color. I'm gonna go ahead and click on our creates style here, and C already had one created It's created it again. I'm gonna call this primary action color. I'm going to create that one there so you can see this new color that we have here on the second line. Okay, cool. So now we have the sign up and the log in going. Let's go back to the final prototype here. Let's go look at the sign up. So we had first name last name email password here. And this is where we're going to get into the creation of some components here, which this is a really important piece toe check out. Let's go create these form fields. Let's go back to our learning here. And what I'm gonna do is I'm gonna use the line tool, So I'm gonna go where I can select the rectangle. Just click on it. You see the drop down? You see the line tool? I'm just gonna make a line, not edge to edge, just kind of within some boundaries. here. Give it some space on the left and the right to the art board. If I hold shift, it will give me a straight line. If I do not hold shift, you can see it gives crooked lines. We want a really straight line here, and I'm gonna go ahead and make this, um, white. So let's go ahead and grab white and again, I'm gonna make white ah, color attribute that I could reuse and re select. So let's just call this white. Makes it really easy for me to select this, right? So now I have White is a style. It's too strong for right now. As far as the color goes, let's pull this back in transparency. Let's make this like 20% here. All right, 20%. What's pretty good? So now you're getting the hang of it. Um, I'll tend to slow down a little bit, too, as we go. Um, hopefully I'm at the right pace for you to follow along when if you have to pause and kind of do it for yourself and come back and press play, that's fine, too. It's the next thing I want to do. Here is I'm gonna just copy over this. Sign up here. Images click and drag. Hold option. Copy it over like that and see how it's centered. Meaning it has a centered paragraph setting. Where if I pull this box, it's gonna center the text within it. I want I left a line. This so not senator line, but left the line. And how I do that here is you can see the alignment tabs on the right. If I do the right one, it right aligns their center. We want left a line. Yeah, just like that. That looks good. And let's title this your first name, all caps. I'm gonna center. I'm gonna decrease the height on a little bit. Okay, that looks that looks good. All right, so now we're gonna we're gonna actually create a component. So this is, um, an important piece of how to make designing multiple art boards and applications. Um, really easy and efficient when you want to make changes across more than one art board. So what I'm gonna do is I'm gonna copy this, uh, name the text field here and this line when a copy it, man C and I'm gonna come over to my page that I created here called Component Library. And let's go over there. I'm gonna paste it here. You can see you have the first name in the line here. Now, I'm gonna call. This would go back in where I typed in first name, and I'm gonna call it title. Make sure your text box two scales. The fool with you don't want your text box like that. Um, that Why do you want the full with of the line that we have here? Okay, so I'm gonna select the line and the title. And here's how we create a component. You see this little diamond shaped icon at the top? Go ahead and click on that, and you can see knife selected. It's changed the selection from a blue you see here to a purple. That means that this is the master component now, So we want to change this name to form. We're gonna call it form default. All right, So what we're gonna have is we're gonna have this page that's called Component Library on the left, and that's gonna house all of our components that we're gonna use throughout this design that we're creating here. Okay, so I have the component library. We have created our first component. You can see here form default. Let's go use this component. So now I'm on this back to our learning Paige layer here. If I goto assets, you can see a happy here, and I click and drag this component into my art board. And you see how it has a purple selection and not a blue selection, because the purple is my component. What I'm gonna do is I'm gonna delete the first name that we've created, and I'm gonna replace it with the component. So that's pretty common. What you do is you you create a u I element, and when you should create a component is whenever you copy something. So if I want to copy this and say, Now, make a last name at that point, I shouldn't have copied this component or this, um, this you I form filled here and duplicated it and changed the name. At that point, I should have created a component and started to use components. So what you don't want to have is you don't want to end up with a whole bunch of forms like this that are all individual, that you can't change from a master view. And I'll show you how to do that here in a second. So let's go back home in a command Z go back some and again, Fig must saving this the whole time. I could go file and I could say, um you see, there's no save here. I can do a command s, which is the shortcut for save, and you'll see here. It says figure fig, MMA auto saves your work and gives me a little peace sign. And they always put different. Um, I call it like little ah emojis in. Whenever you do a command, see, they just like, randomly put whatever emotion they want. We're just nice. So they're just letting you know you don't even save your work anymore. Like it just automatically saves it for you. Okay, so now I have my component again. What I how I access that was I moved from my layers here to my assets, and I clicked and dragged my component onto the art board just like so. And I want to replace this first name you. Why that I've done with the component here, and I'm gonna click into this component, and I'm gonna change the name title back to first name. All right, so now we have a component when he made that lives in this component library and we have an instance meaning a child representation of that master component living on this art board here. So now what I'm gonna do is I'm gonna copy this component, and now I'm gonna create more instances up it, and I'll show you why. It's important that we stopped and made a component before we copied the original text and line that we created earlier. So now that we have first name, I'm gonna change this toe last name, Do that as well to be a second. All right. And we're gonna copy this again and you can see it's giving me spacing increments here. Soc at said 12 There 18. It's helping me automatically distribute equal spacing when you hold when you copy that way . So when I click and drag and hold shift down that's why I like to copy that way. So again, if I hold option and I click and drag and I hold shift it keeps it aligned. And it also helps me. No. Oh, this is 18 pixel spacing from the last component there at the top. And that's equal distribution. That's what I want. Great. So let's go ahead and call this one email. And the last one that we had here was password. All right, Now watch this. This is why it's really important that we made a component. Let's say that I'm talking to my client or another designer, and they're like, Hey, you know what? It's better that we make all this first name text here pink. I'm like, OK, I you know, I'm gonna go ahead and give you that example or go, go ahead and change it something. All right, let's go ahead and changed all of these two pink. In the old days, we had a click on one of these here and change each one pink, so I had to click and then select first name and changing pink. Then I have to go back to last name and change a pink, and then I have to go to email and change a pink than 30 password and change of pink. But when we when we think about setting up? Are you y and components like this? What I can do now is I can go to my component library over here. And this is that master component that I created. So all the masters live here. So I changed this text color here to the pink that we made here like that, and I go back to my learning Paige, watch. All of them already changed for me. So that's the beauty of why we set components up. And why we reuse components is it makes editing a component really easy because you do it in one area, the master component here and you see all of them changed throughout your art boards. And let's just say you had many, many different art boards like this. Imagine having to change all of those. Okay, I'm gonna go back to my component. I don't want to change it back to pink. Are just giving that example. I want to go back and change this into white, just like we had before. Okay, cool. So now we have the sign up page looking pretty good. Um, all we need to do is add this little, um eyeball, which will show your password if you're typing this or, um, it will also disguise the password as well and the sign up button, so I'll show you how to do that. All right, so let's go create a button pretty easy and simple. Just grab a square and let's go ahead and make a square here. Any size is fine. I'm gonna use mine. Like I don't know. Let's say 200 by snow would say 50. No. Well, this 60 should be fine. All right, So I have a button here, and I'm gonna go ahead and round out all the corners, so I'm gonna just type in 100 where it says rounded edges. And that gives me that pill button here where it has the rounded left and right corners. You can see fig MMA already, Um, helps me center this button on the art board, which is really great. And the next thing I'm gonna do is I'm gonna grab a text tool here, and I'm gonna click within this button, click and drag, and I'm gonna add some text here. I'm gonna call it sign up and again. I want this centered so back to our character, um, dialog box here, press centered, and we have it centered there. I'm gonna change the color here. I'll give you a second and change the color toe. White could see it now. And if I want to access, um, the rectangle underneath it underneath the text. I can use the layers on the panel on the left here so I can see I have the sign up selected . I want to go grab the rectangle underneath it. Go grab it here. If I was also struggling to get that rectangle selected, I could also lock something so I can right click on the sign up and do you lock. And now I have locked the sign up. So now if I click there, I'm actually selecting the rectangle. You can see some change in the color. I'm gonna get command C Command Z back that I don't want to walk that text there. But just so you know, you can lock things here. Um, whenever I select a layer, I can also hide it. So let's say I just I pressed the eyeball icon here. It hides it as well. And you can see by having the lock icon next to sign up that I still have it locked so I can unlock it. And I can do that with every layer. Aiken, remove the background rectangle like unlock it just by the layer. Panelas. Well, so there's a couple of ways you can do that. Let's go ahead and select the rectangle. And let's make this the action pink that we had before. And we're looking good. Okay, So one thing that we're going to do here is we're gonna probably reuse this button a couple times,
4. Designing the shopping experience: All right, welcome back. So in the last videos we worked on the log in and the sign up work flows in this video, we're gonna cover the shopping workflow. So let me show you what we're going to do in this next video. So the last one we worked on the sign up the log in, and at this point, we left off right here, which is the loading screen and this next series of videos or this video that we're on right now, we're gonna build out this workflow of having, um, ability to select a Boba tea drink and added to your cart. So let me show you that right now, we'll also build out this tab bar at the bottom that stays fixed. Meaning it doesn't move as I swiped down and you can see if I click and drag up it. Sigma automatically transitions this as if I was swiping on a mobile device. Okay. And at that point, the next train out to rebuild this one out is the selection screen. So you could see we have a transition state where this slides up. If I tap on the X, it slides down as a transition. So we learned that is well, and we'll also learn how to create a mobile drop down. So if I tap on this regular sweet here, you can see I have a slide up overlay, and if I tap at the top, it slides down. And if I tap a selection semi sweet, you can see it updates the selection where said Regular sweet to semisweet. And then the next thing we'll do is we'll create the active state for the topping selections. So if I click on the large or tap on the large topping tapioca, you can see there and I press at, and that will add to the cart there. All right, cool. So let's go ahead and get going. So let's go back over to, um, are learning page here that we were on. You could see this one here, and remember where we left off? We stitched the log in, um, and the go button here to this load screen. I'm gonna copy the load screen here. And so what I did again was, um I click told Option clicked and dragged once I got the double arrows. Is my mouse that copied that are bored and I held shift, so it keeps alignment. So when I don't have shift goes out of alignment. When I hold shift, it keeps it online to the next art board. I'm gonna, um, click and drag outside of the art board. You can see how I'm doing that here. And that's just gonna select things within the art board. And I'm gonna delete the boba in the loading. I'm also going to select the status bar here. I'm gonna command see or copy here, and then I'm gonna delete it. And I'm going to grab this art board zoomed out a little bit here, actually, Before I zoom out, I'm going to create a guide to show me the bottom of my screen. So if you're not seeing your rulers here, you can go to view or your pixels and you could see, um, where it says, show rulers, this will give, you know, rulers right now. And if I go view showed rulers again. I'll see the rulers. You want the rulers out because you want to be able to drag guides. So if I'm on if I'm in art board, I drag a guide it stays in that art board. You can see now it's Onley in the art board. If I'm not in the art board and I'm over in just the design area, I condone drag a guide and it stays outside of the art board. So it stays anywhere, so I can always see it. I can click it, drag it If I want to remove it, I can just slide it back up into the ruler, and it deletes it. So this point, I want to grab the guide, and then I want to select my art board here, and I want to make it really long. Don't worry too much about, um, how long it is. Just make it pretty long here. Like I have mine at 2000. Let's just make it even longer like 2400 pixels. Okay, so that looks good. And then I'm gonna paste, um, the status bar back in. No, I'm gonna copy it from over here. Paste it from over there. Make sure that this status bar has the fixed position when scrolling here. So we set that up in the last video, but that's really important. Now that we're going to be able to scroll down and see content here. Okay, so the next thing you want is we want to create that tab bar. So I have the tab are here over on the design goods. Go ahead and grab it. Copy it and you can pay. So outside the art board, for now is what will create this. We just want to grab those icons so you can see I have this status. Um, this ah navigation bar at the bottom or tab bar at the bottom is set at 375 wide and we can make it 8 85 heights. Cisco, grab a square, a rectangle here. And let's just make a rectangle in this art board doesn't matter the size yet. Just make it the same with as the art board. So you got 3 75 and then let's come to the height attributes here at the top. Right? Let's make that 85. Okay, Cool. So now you can see it here. Looks pretty good. Let's go ahead and move that down a little bit. So now it's flush to the bottom of this art board. So what? We want to do now is when you click on it on the design tab, see where access fixed position when strolling. Let's go ahead and tap that and I'm gonna show you what that looks like. Um, once we get some content in and how this will stay fixed on the bottom as you scroll down. So the next thing we want to do is let's give this a colored background. So let's go ahead and dio weaken do a little bit of an off black. So let's go get the blue color palettes and let's get enough where I can kind of see it on black. That looks good. We could dio um, 012436 as a color. Or you can just use your best judgment if you want to. All right, so now you have the tab are let's go. Put these icons in play someone to grab all three and I'm gonna put them at the bottom. You can see that they are underneath the rectangle. That's because whatever's fixed position in Fig MMA will arrange itself on the top. You can see the layering system here. It has labels on this. Our ports has fixed at the top. Anything that's fixed will automatically go to the top of the layering arrangement. Anything that's not fixed will go underneath this scroll title here, and this is the rest of the content. So what we want to do is we want to fix position these icons and you'll see them jump from the left layering system here up into the fixed layering positions here. So we're gonna tap the click on the fixed position when scrolling and you'll see they moved up from the scroll area to the fixed area. And let's go ahead and make them even further weaken, Click and drag them in between are on top of the rectangle, so now they're laying on top of it. Let's go ahead and visually make them centered here. That looks good just using my arrow keys on my keyboard, and now what we want is we want to create an active state. So let's go ahead and select the profile icon here and the shopping cart icon and let's push those back and transparency. So let's do about 30% here. That looks good. They're still visible, but it gives the user and indication of where they're at in this tab, our system. So you can see here. We're creating this screen here where this is going to stay fixed and the status bar at the top will stay fixed and you'll scroll down and see all this content. All right, Cool. So let's zoom out a little bit. You can delete the rectangle we had here. Now that we have this tab, our system in play and let's go grab the first Boba tea drink here. So this is the regular Boba tea. Just command, See? Copy it. It's already has to say the, um the with and height for you. Just go ahead and paste it in and you'll see sense it's not fixed and automatically was underneath the status bar, which is good. That's kind of what we want. Let's grab this Boba tea logo here, Command, see, unless just paste it here. So now you want to change the text of this Boba tea logo to a black text Work says Boba, All you have to do here is just triple click, triple click into it and then hold shift and select the other letters. Now I have the word bullet Just Boba selected where? It says, Phil, just go ahead and change. The color was making black. We can also use our color styles that we made because we made a black here and select black as well. All right, that's looking good. So the next thing we wanted to add is the text here we had regular and sweet tint of caramel and chocolate, and we had the price for his Well, right. So I'm gonna grab the text tool here. I'm gonna type in the word regular and again, you can see out my Texas defaulting Teoh line on the bottom here on the character. Ah, text dialog box. Is this piece here that happens Sometimes. I like to have it aligned in the middle and not on the bottom. That's good There. Let's go ahead and make this a Let's do about a 16 point font and let's grab some letter spacing here. Um, it's too tight right now. You can see without letters facing it. Zalkind of hard to read and you'll see what I mean when you actually give it some letter spacing. Right now it's at minus 2%. It's right underneath the box in which you can change the width and height of your fun and let's bump it up. Let's give it 8% and you could just see how just a little bit of spacing makes it just a little bit easier to read again on the paragraph alignment we haven't set at centered. Let's make it a right aligned. So if I click on the right one on the text box here, you can see I have it right aligned. And that's looking good. OK, so like we did before in the last video, let's create a character style for this. So now we have a 16 point font. So let's go ahead and create a new 16 point. Type it 16 point and it's a regular. I believe you regular fun so we can reuse that as we go through this. All right, The next thing we want to do is we want to type up the sweet tint of caramel and chocolate . So from here, I'm gonna just copy this same layer. This text box here again, I just I pressed, um, option shift shift tips that keeps that alignment to the right, which is really good I don't want it off like this. I want to keep it directly aligned, and let's go type this. And so at this point, I actually wanted to be not centered in the box, but to the top. So I'm gonna do the alignment from the text property here aligned the top. There you go. That looks good. Okay, so we have sweet a tent of caramel and chocolate. Cool. Right. So this point, what's make this text bigger? So let's detach it from the character textile that we have here. So 16 let's make this probably too big there. Let's make it a 22. That should be. That should be fine. I'm gonna stretch this out. So I want three lines yet out looks good there. And let's go make this a regular, and that looks fine. Cool. So now that we have, um, this at 22 we have the, um, the title text here. It's 16 and the description taxed at 22. Let's make a textile for this as well, so we can reuse this now. So now we're getting a, um a combination of nice textiles that we can use. We have the 16 point, we had the 19 points that we set up from the log in pages, and now we'll have the larger one, which will be a 22. So let's grab this and make it a 22 point. I'm just typing in 22 point and you'll see why do this, Um, when we get to the next Siris of Boba Tea flavors because we're gonna type in the flavors and the descriptions and then we can easily set them exactly like this. All right, that looks good. Um, one thing we had to was the price tag. Someone to copy the same regular type fracture. I'll show you why we use some of the character styles and watch Really helpful. Here's I'm just going to type it. Just gonna type for I think it was for 99 and let's say I don't have it aligned here to this text, but I do have it right aligned on the paragraph setting. If I want to create alignment between all three of these elements, just select all three, and you can see at the top here I have these alignment icons. So here's left alignment. This was centered alignment but I want right alignment here. Someone to click on the right and you can see it. It aligned all three of these onto the right now and the 4 99 I want to make it. Not the 22. Um, but let's see what it looks like in the 19 Bold. That looks good. Don't keep it. The 19 bold and the last thing we want to use. I'm gonna copy this one. I'm gonna create the ad. Just just indicate to the user that they can add this to their cart and let's give it the action color here and while Ah, that looks That looks pretty good. All right, cool. So what we're gonna do next? Um, let's go ahead and stitch this up so we can see what this looks like on the prototype. So if you remember, we had the log in screen prototype log in, button on the log in screen was connecting to the loading screen, and the go button on the keyboard would take you to the load screen. And like we learned in the last video, the load screen needs toe. Have a delay so you can't click on any items within the art board. To create an art board delay, you have to select the art board in itself. So I have the loading screen selected. I'm gonna click and drag the buoy prototype arm, and you can see now it's connected to the shopping screen. I'm gonna change this naming of the shopping or the loading screen here to shopping screen because we copied that. And again, all I did was select the screen here, got the layer on the left and just tripled, clicked on the layer, and I could type in shopping. Okay, cool. So we just want this tow this interaction here to go away after a certain time duration. So on the prototype here, when I select the prototype link I have on tap, let's go ahead and do after delay. And three seconds is about right or 3000 milliseconds here. An instant should be fine. We don't want any smart animation or anything, all right, and then go ahead and press the play button at the top. And now you could see the prototype. Here we have the loading screen. We can just go through the log in, and you can see when I tapped the log in button, the loading screen shows up for three seconds and then, yeah, we have the shopping screen with our first flavor above a t here. You see, if I click and drag up, see how the things that are fixed the tab are here and the status bar here at the top, the settings elements, those air all fixed. That's what it means to have a fixed element is that those things are not going to scroll while all the other content scrolls. All right, so let's go add the rest of the flavors of Boba tea that we had here. So you can see here. I had the, um, the next flavor here and just go ahead and pace that right in place, just like so. And we want a little bit of about a one pixel spacing in between. So that looks in between the two photos just like that, Okay. And then what we want to do here is probably best just to copy this text here, and you can keep it aligned, so I'm gonna hold option. I'm gonna click and drag down and again, I'm gonna hold shift. So I'm not doing this. So you can see as I move my mouse by hold shift. I can't move my mouse around. It's keeping all of this this information here aligned. I just space it kind of midway through to your image here. And I'm also gonna goto object and bring to front here she can see okay. And on that flavor, what we had here was we have a coffee flavored with premium cold brew with black tea, and it's for 99. So let's go back into our learning tab here. And let's change that here. And let's see here what it said Premium cold brew with black tea. Type that in. All right, we're the spacing there, and I want to drop the with to the third line and had the spacing there. Cool. We're getting through it pretty quick. That's good. Okay, so you can see that these two, um, elements fit. Everything from the tab are up. Let's go grab the next flavored here, which is the macho tea flavor. And I just command see, copied it and command v paste it. And I'm gonna go ahead and get it in the right position here There you go. And I'm gonna copy the same text here on the option. Click and drag. Hold shift. So again, holding options, I get the double arrow, select all these elements. And if I want to, I can I can group these to make it easy from a next selection. So if I just do a group selection here and I hold option and click and drag No, I have them copied. And again, I want to bring them to front. I right click on them, bring to front. You can also use command option up and down arrows for the quick keys to bring these up on the layers. All right. And let's go ahead and call this one macho. Uh, and the text on it waas premium cold brew up. That was the, um, the coffee flavored. So let's go ahead and just change this text tohave a macho t description. So let's call it premium mata and black tea. That should work. Okay, cool. So the next thing we want to add is the final flavor, which you can see here on, um, the final prototype here. Up here was the text here. Sweet Japanese macho t Let's go back and add that real quick. So sweets Japanese much, uh, T which is my favorite drink, by the way, out of all of those, all right. And the last one is the chai Tia's. Well, um, so let's go grab the chai photo here. Just the one with a little bit more. It's the same as the regular t. It just has a little bit more of a color to it. Go ahead and select. You can see that when I paste. If I don't have my art board selected, I just like pace. This is not gonna pace in the art board. You can second move the art board. It doesn't go with it. So always remember, Teoh selected the art board and then paste when you're in the art board, I'm gonna move this down. I'm holding shift when I move, so I don't move the proportions. It already pasted right in the exact with that I wanted it full with when I moved it down. Like so. Okay, at this point, let's go ahead. And, um, copy. I'm gonna move this up a little bit. Let's copy this text here and again. I'm going to right click and go to bring the front or command option up and down I can go up for bring to front and down to bring to back So you can see that And this is the sh i t . So the description for that is made with Golden Chai tea. Let's go back to our learning, Paige, and I'm gonna type that in made with Golden Chuy T I believe that was also that's 5 99 All right, you were getting a little bit more expensive. Now it's good. Okay, Cool. So now we have those four flavors in Let's go ahead and go back to our prototypes again. You can click on the play button, or you could just do the tap. If you just have over here, you can also press. Um, the tab are there the top. And now you can see what it looks like to scroll so you can scroll through these flavors. You can see the line between the coffee and the mata isn't there. So let's go back and add that. But that's looking pretty good. Let's go back. Um, I'm gonna re select so one thing I do is, um go ahead and select outside of the art board. Start your mouse arrow to the right and click and drag over just the elements that you want to select in the art board itself. So we just have those flavors just the chai and the macho Now selected a na minha arrow down to you can see I created that little line there for the macho t. Okay, so again many ways to get to my prototype, I can press presents or I can click on the tab at the top. Let's go tab back to the top there, and there's on my flavors. Okay, cool. So now that we have the art board here, you could see we made it pretty long. Let's go back and shorten that up now that we have all the content in play. So what I'm gonna do is I'm gonna add another guide to not just the bottom of my content, but a little bit further. Usually want to give some space for the tab bar so that all the chai the chai tea information goes above the tab bar so you can see about there's fine. Just a double check I'm gonna copy this, nab our and just see. Yep. We could probably move this guide up a little bit here. We just want it where that chai tea will sit at the very low end of the tab or the swiping . Um, well, sit on top of that tab. Bar that tab are won't hide content that we have here. Okay, so this is kind of a fig MMA thing that happens here. It's a little bit of a bug. Um, So if I want to stretch this art board with content that's fixed within it, you can see what happens. See how the content that's fixed starts to squish. So look what happened to the Boba and the Status bar. It's a thing that happens with figures. I haven't quite figured that out. So what we tend to do is just click and drag and select all the elements that you have. And now art board, do a command. See? Just copy it, then delete it for now. Then grab the art board and shorten it to that guide that we made here. And then command V. Well, pace back in place. There you go. I'll give you a second to do that. Okay, so at this point, what's go back to our prototype and we can check how that looks. So you can see here we have the regular of the coffee, the macho. And if we didn't add that extra space in the bottom, the child would end up at the bottom swipe looking like this. Or even worse case it would hide that add button. But since we added that additional space, you can see where just goes right to the top of that navigation bar. So it looks good, Nikkan Second, swipe up and and figure what gives you that transition of swiping. So it acts as if I was swiping with my finger. And if you had, um, if you download the Sigma mirror application on your phone, you can see why that makes it feel just like a real application on your mobile device. All right, well, that's looking good. Um, so the next thing we want to do here is if I tap anywhere not just the add button, but anywhere on the milk tea space here, it's gonna open up the selection motile for the milk regular milty. So that's this screen here looks like this. So let's go ahead and build out this screen here, and we're gonna work on the drop down as well to the right here. So they go back to the learning. Paige, this is gonna be a regular screen size height. So let's copy the loading screen that we had here. So again, I just held option. Grab that art board, hold shift and drag it over to the right. That I'm gonna click and drag from the right to select the elements within the art board. And now I'm gonna delete that when I pressed elite. Okay, I want to reuse this photo. So let's go ahead and press command, See? And I'm gonna command V this photo here at the top, and then you can see here where if I move the bottom up like, say, I want to score shit up like that, it and mix the perspective of the photo, Um, it doesn't hold the aspect ratio and it interpret lates the photo like that. And it it really doesn't look good for photos. So what we want to do is here is you want to go to the image here. Click on it and you can see where it says Crop image. Let's go ahead and do one that says Fit image here. Actually, What's going to fill? There you go. So again we moved from crop to feel and how I got here. Was he just click on the image? Phil here come over to where it was cropped and I put feel, and now you can see when I move it up, it doesn't give me. It doesn't defy the perspective of that image. I want to move the actual image inside of this up. So if I click on the image again and I double click, so there's one click. But if I double click, I get to the crop here at the top, suppress the crop and you can see it. Now I can grab the image within that that I've cropped and I can move it up a little bit. And about about there should be fine. Maybe give this a little bit more space. So again, I it's pre set me back to crop so I can go back now to fill and go back to crop again, and then just move this up a couple ways. You can do that. Okay, at this point, um, let's go ahead and have some more fun. We're gonna make the prototype section for this first, but I need to make a close button on the top left. So when you tap on this, um, you can close the screen as well and go back to the flavored screen with a shopping screen . So what I'm gonna do is I'm gonna grab a rectangle here you can see have a rectangle and they click and drag Gonna hold shift open up, No holding shift, Just click and drag and I'm gonna round out the edges. So over here I have the corner radius. Just press 100. It's fine. And see how it made it rounded out that selection. Since this is an actual element, we want this to be the actionable color. So let's go grab our primary action Color that pink and I'm gonna copy this command. See, I'm gonna click off of it. I'm gonna click back on the art board and I'm gonna command V, which is a paste in place. I'm gonna select the one I just pasted, and I'm gonna rotate it 90 degrees and I have a plus button. Sonam gonna select both of these and I'm gonna right click when a group, this selection or you can also command G. I'll give you a second to do that. And now that I have that grouped or that plus button available, I'm gonna rotate the plus button. And now I have the X that I want. And like anything that we use that's gonna be that we create that's gonna be reused. Let's go make this a component. Someone of downsize it just a little bit. That looks good. I'm gonna copy it. I'm gonna go back to our component library here, and I'm gonna pace that here, move this over a little bit and I'm gonna create the component. So I get I pasted it here. The little top, um, diamond icon create component. And I'm gonna name this close and just put a tax close X like that. Awesome. Now let's go back to our learning page here and let's go back to the layer asset. Ah, delayer tab here at the top. Let's go to the asset tab and let's grab the X component that we just created. And let's put that in place of this X now. So that way, when we re use this, we can change it pretty easily from the same area from the master component. And it changes on all the art boards. Okay, so let's have the fun part. Let's go ahead and prototype this, um Ah, transition here in our prototype. So it's click on the shopping page here. Let's go to the prototype tab here and just select just the image of the regular probity. Let's go ahead and connect it to than the screen to the right. Let's actually label this screen here. This is says loading screen, because we copied it. Let's call this one the selection screen. All right, so now we have this selection screen. So again we have the shopping. Ah, strain. Here we selected the regular Boba tea. We click the little gooey prototype connector onto the selection screen, and now we have the interaction on tap just good. And it went to move in. Sometimes years may just say instant like this. Um, what we want to do is we want to create a move in scenario, so I'll show you what it looks like. We're just instant for right now and weaken. Do the X here, back the X in the selection screen back to the shopping screen, and we could just do it instant. Okay, so if I tap anywhere where the photo was, you can see it just instantly transitions to that selection screen. And if I tap on the X than instance instantly transitions to the shopping screen. We don't want that. We want a transition. We want this screen to slide up and in the X to slide back down. So what we need to do is select the ah prototype. So ah, gooey line that we just made. That was from the Boba tea here and where it says instant. We want this to have a move in. So what it's saying is this screen here, this new screen is going to move in, and then you define how it's gonna move in. So here we have the slide left. You can see an example of that's gonna come in from the right slide left. We have the slide writes gonna come in from the right. We have the slide downwards to come in from the top down, and we have the one that we want to do, which is the slide up. So this screen, this selection screen here, is going to slide up on top of the your shopping screen. So now we have that to make sure you have this selected on MoveOn and the, um, specifications for how it's gonna move in. Set on up. Let's go look at the prototype now. So if I tap anywhere where the regular milk tea is that you can see how this slides up and I think X is still on instant. So now we want this screen toe also slide back down by pressing the X. It's a lot of times when you do this, I've seen is sometimes you'll have move in, selected, and then you'll have this specifications set on Move down and it makes it look like the thing that you want. But let me show you what happens here to see how it brought the other screen on that transition with it. So let me do that again. You click on the regular Boba Tea here, it slides up. That's what we wanted. That's a good transition. But when I pressed the X. You can see the screen comes from the top, the screen underneath at the shopping screen, and it slides down again. We don't we don't want that. We want this to look like it just slides up and then slides down again. So that's caused because we have the selection here on the animation defined as move in when we actually wanted to be a move out. It's like, Get out of the way. So again we have the regular milk tea selection coming in as telling the prototype to move this screen up, move in and then we have the X button being informed to move out and go down to expose this screen. The shopping screen here. So let's go ahead and look at that side tap on the regular milk tea selection photo slide up. And then now that we have the slide to move the move out, you'll see it move out and just moves down. It doesn't bring the other screen with it, so move in. That's up and move out. Going down cool. That's a really common mobile pattern, an interaction pattern. Is things sliding up with an X and then sliding down with the X as well. When it's coming in from the left to the right, that's usually a back button. And we'll have opportunities in, um, the shopping cart experience to prototype what that looks like with the back button. All right, cool. So at this point, um, we want to add some labels that you're on the regular milk tea, someone to copy this regular text here. I'm gonna paste it here. And I think we said this was 16 point. Let's go make this a 22 point. Like the regular there. That looks good. I'm gonna copy that and just call it regular milk T. And I'm gonna make this one of my break. Detach this and just make it bold. That looks good. Kind of center. This here. If you want to have some real fun with it, let's just bump up the milk tea up a whole bunch so you can see I've made it now 32 and I have the regular that that looks That looks good. That's getting there. One thing I need to add here is, um you can see the word milk tea. It has a lot of letting meeting, um, paragraph spacing. So the space in between the word milk and the word T this space here that's called letting or line height or paragraph spacing. Um, the reason that is called letting was back in the day when they were doing typesetting. They usedto have to do it out of metal, and they would They would have a typesetting machine where they would cut out individual letters. And then they would, um, arrange those letters to make words. And they would actually put pieces of lead in between each word here to make the letting. That's why it was called letting, because you had different point sizes of metal. So in the world of CSS languages, that's called line height here. So let's go ahead and make that a smaller line height. I'm going to just say 50 as a starter point. And then now let's go down. So, um yeah, 38 is perfect. So now I have this set at 42 of the font size and 38 for the line height and 8% for the, um, the character spacing. All right, that looks good. I've we've created a little bit of some hierarchy here with the regular font and the milk tea. Since we've created a 42 bold. I'm not sure if we'll actually use the font this big going forward, but just in case, let's go ahead and do it. Let's make a, um, a 42 point character style or textile. So now we have a pretty good a range of 40 42. I need to rename this. I typed it. 43. It's 42. Okay, so we have 40 to 20 to 19 and 16 is pretty good so far. Ever get a range of character styles that weaken and textiles weaken we can pull from. All right. The next thing that will need to do is we're gonna create these little drop down, uh um, pieces here for milk and regular sweet and medium ice. So let's go into this prototype here, or the screen. Um, selection screen. Let's grab a rectangle and just make a rectangle. Doesn't matter what size it is. I got mine set at Let's dio um, let's do 3 20 with and 70 65 height should be fine. Cool, and it has a feel right now. We don't want to have a Phil. We want to have a stroke. So let's remove the fill. So if I click on the minus button here on the right, you can see minus no more Phil and I wanna add a stroke. So I'm gonna press the plus button on the stroke. And now I have a stroke. But it's black, but I want to make it white and give it to points again. Since I've selected White already and I have it set as a character style or color style. Let's grab it from the color style here. So it's do white here and I'm gonna go step back a little bit. Let's do, like 50%. Yeah, that looks good. All right, so let's see, we had a 19 point. We have the 22 point font. 22 should be fine for now. Let's go grab this regular font. Let's make this white. And again it's on that right alignment. So if I stretch of this box, it aligns to the right. We want that to be left aligned here, and I'm gonna just call this milk and I'm gonna center this box officially. That looks good. Okay. We want to make a little, um, triangle here to represent the drop down. So how to do that is go ahead and grab the polygon. I like mine to be a little bit more. What? Wide? You can hold shift. It gives you a straight ah, triangle. I like to be a little bit more wide, like minds. About 20 by 10. Or 20 by 11. 20 with 11 heights. That looks good. Let's go grab that primary action color pink that we made here. And then we will just want to flip this so it's pointing down. All right, Cool. So that's our milk drop down. And, like, anything we're gonna I'm gonna downsize this a little bit, but we're gonna copy this. So remember the rules earlier about anything that you copy. Let's go. Make this a component. Someone to copy it. I'm gonna go over to the component library here. I'm gonna paste it here. I'm oppressed a little diamond button at the top here. I'm gonna create a component and call this the drop down button. Cool. So that's the drop down button, and I'm gonna change it from milk to just text So give it a more general description. It's best practices. And once that's done, I'm gonna were gonna go back over to our learning page here. Let's go over the learning Paige and then see the layers tab that we're on here. Let's go to the asset tab and you can see at the drop down button here. Click and drag it. You could see its purple selection rather than blue, indicating that it's a component. And I'm gonna put that right over the top. I'm gonna command, see, copy and delete. And then I'm a select the milk, the drop down icon and the rectangle and just delete him. And then minutes select the art board screen. Here. I'm in a command V paste in place, and I have that dropped down component. And let's make it an instance by changing the name and now we have the milk here. Okay, cool. So here's a little t
5. Designing the checkout experience: All right, welcome to the next series of videos. So in this video, we're gonna cover the check out workflow. So we've just designed up and prototype the log in and sign up work flows. We did the shopping workflow, and now we're going to get through the check out workflow, Um, and to see what that looks like, we're going to go through the prototype here. So we've already done this. We have created the sign up in the log in. You can put your email on your password in. You've logged in its loading the application. You have all the boba tea. This is what we did in the last video we created on the Boba tea, um, flavors here that you can select from if you tap on the regular milk tea here, you can see we we made the milk the regular sweet and the medium ice drop down selections, the topping selection buttons. And we've also prototype the X which closes that. Open it back up. We made a mobile drop down selection, but you see here if you select semisweet, it changes the semi sweet. You can select the large tapioca you can do the ad and then we're going on this video. We're gonna build out and design up the check out workflow. So if I tap on the shopping icon, I'm now experiencing the check out experience where it showing me the application shows me my selection, which was? I had my milk tea. My quantity was one I could edit. Remove these. If I want to hear, I can close this. Go back. And if I'm ready after I see my totals, the delivery fees, the taxes I could go to the next. You can see that that screen slides in from the left to the right and the back slides back . Well, we'll make that prototype transition as well. You can put in your address these air components that we already made, so it should be pretty simple and quick to make these press Andone go to the next and again , If I want to go back, I can go back all the way to the beginning. I can close. It's a very common interaction pattern that we use in mobile devices. Get to slide up with the X. Now I can go into a series of back buttons, grab my address. I can put in my payment information press done. I see the total I pay. It's confirming payment. And then I can see my Boba tea being delivered to me with a series of screens that have the , um, the time duration transition effect. Now you can see the final screen. My Boba tea has arrived and I press OK, got it. And I'm back at the screen here, so we'll work through that in this video. Let's go back over to our ah figment file that we created here. You can go into the learning Paige that I have here. You want to start prototyping up what it looks like when somebody clicks or the user taps on this. Check out Icahn here on the tab bar. So let's go grab from the beginning here. Let's go grab this loading screen here, Command see and come over here. Command V. Paste it and let's move it in position. Here, let's call this check out. So again, just click on the art board, click on the layer on the left and type in, check out and let's go ahead and remove everything that we have there. One of the things we're gonna need for this screen is we're gonna need the X. So let's grab that X and paste it. What's tapped to the prototype? Make sure that it doesn't have any prototype pre existing prototype links already set to it . And it does. So let's just go ahead and grab that. Just drag it off and let go. Now that that X doesn't do anything on the prototype and on the photo final prototype here , you can see what we're looking toe design up here is we want to have the check out title, the regular milk tea with the pre defined selections, the quantity with the ability to add more than one. Ah, and it removed buttons. And then we want to put in these totals here that we have. So let's go ahead and design up. This section here will probably copy and paste thes um, and make it easy. But let's start with the check out, um, tab at the top there. So let's grab this regular fought here lets us copy and paste it here. Let's make it white. Let's center it and we'll put it here. Call this check out all right, and this was already out of 16 points. Color style are textiles. That's good. Reuse that. Let's go ahead and center this a bit. That looks good there, all right, and let's go ahead and copy this. Now let's change the alignment from a centered paragraph. Align alignment to a left, A line that looks good. And let's call this the regular milk tea. We have 16 point, and we also made a 14 point bold Let's go make this a 14 point point. Bold. That looks good. All right. And I'm gonna copy this. I'm gonna hold option click and drag and hold shift. Membership keeps things from moving out. Alignment like that. I hold shift. I can no longer do that. And let's go ahead and see when I stretch the height of this text box, it was defaulting to a middle alignment for the text. Let's do top alignment that just moves it to the top of the text box that looks good and the selections that we had for this regular milk to you as we had milk, we had a semi sweet, and we also had the to go back here and take a look medium ice. And then we also had the large tapioca. All right, let's make these a little bit bigger. Let's go grab our Let's make this our 19 point. Yeah, that looks good. Um, what's do? 19 point light? Yep. That looks good There. And then let's make this the lighter gray color, the cold grey that we made. All right, that looks That looks good. All right, this point. I'm gonna use the command quick key command are, or go to the shape tool here and go to rectangle. I'm gonna hold shift, click and drag and make a rectangle box here in the center. Kind of like that. We can make this about 60 by 60 here. And let's make this also the cool grey. So select the cool grey that we made earlier. Um, all you gotta do there is click on the four dot sports as Phil. Here's all our color styles. Cool, gray. And let's pull back the opacity of this to about 30. That looks good. Okay, let's go ahead and make a text box about the same size of this rectangle. Here, type one. Let's make this, um, white. You can select our pre existing color styles make it white. And here's a case where I do want it to be, ah, in the centre paragraph alignment, but also in the middle of the text box. And let's go ahead and make this the 42 point I will move to a 22. Looks like, Yeah, let's go make this 42 point. I'm also going to copy the regular milk tea and move it over to the right and just type in Q two. Why? For the quantity. And go ahead and make the text box the same with. And there you go. You can see the quantity there, right? Next thing up is you. Congrats. The, um the X that we made here click and copy it. You're just copying the component and let's go back and reverse this. So go back and make it a regular, Uh, not 90 degrees. And you can see now we have the plus symbol. I'm gonna copy it over here and make it the minus symbol. Since you haven't clicked anything yet, the user This is disabled. So let's go make this the cool gray color and pull this back about 20% capacity, maybe like 40% capacity. So that would enable if you were to add more than one. You can go upto 23 then go back. Teoh. 2 to 1. Okay, and then let's copy this regular milk tea here and let's make a button for the edit. And since this is tap herbal, this is something that you can engage with on the product. Let's make it the primary action color. You can see that here, and I also want to make one for the remove and to make a little bit of spacing. Here, let's our little visual, um, hierarchy here. Let's make a line in between these two. So I just grabbed the line tool. You can also quick key that is L. And let's also make this the cool gray and tone it back to about 20% capacity. Oh, maybe 30% percent opacity there, right? Pretty simple. Check out page that we're building out. Let's go have some fun and prototype this here. So if you select the one and the circle and the shopping car icon and do a command G, which is group or you can right click and go to group selection. Let's go to the prototype tab here. Now let's drag this little gooey product prototype arm to the check out screen here from the shopping experience that we have, we wanted to be on tap. We want it to be movin here. Move in and we wanted to come from the bottom. Some moves up. And now for the X. Let's go ahead and drag that back to the shopping screen here, and we want that to be moved out and moved down here. So it's good of our prototype and let's see what that looks like here. But a press, the play button or the present button, you may already have the tab open. Just go walk over to that tab and you can see here. When I pressed the shopping icon, it slides up, the screen slides up, and when I press the X, it slides down Very nice. If you want to add more screens to make it to show what it looks like if you added more numbers here, press that it remove. Feel free to do that. I'm gonna I I just I usually choose not to do that, Um, for these just this more about teaching you the tool. But you can go do that on your own time if you wanted to. Um, this point, let's just copy up. Um, this amount text from the final prototype, you can just select it. Copy it Now that you know how to use the text tool. Um, you convey Build this out if you wanted to, but let's just go ahead and copy it. Speed things up a little bit. Just paste it. Remember to select the art board. If you just select within the our board, see how it paste? Um, not in place. But if you select the art board from the top here and press command v it paste in place from where you copied it. And then we made a line here for this drop down selection. Let's grab that line. And let's pace that here and give this a section in case you had more than one right At this point, what we can do is you want to have an ad or a cancel button that they can the use Ercan or next and cancel button that the user can engage with at any point. So if you want? Just cancel all the things that you go through in the shopping cart experience. You can have that and we'll have next buttons here that will help us go to the next page. So what I'm gonna do is I'm gonna add the add button here. I'm gonna make it less wide. I'm gonna copy it over here. And I think they're actually the original with might be okay. Let's probably go on the with here about 1 45 wide. Now I'm gonna copy it. That looks about right. Okay. And what I'm gonna do here is I'm gonna I'm gonna detach this component, so I'm gonna remove it as a component and bring it back to just a design element. So what you do is you right? Click on the button. Well, for select the button first, and then right, click on it and press detach instance. And you can see it went from a purple Ah, boundary box selection to a blue boundary box selection indicating that it's no longer a pick a component. Now, I'm gonna change the text to this button here to next, and I'm gonna change the text here to this one to be cancelled. And what I'm gonna do here is I'm going to grab this back room and I'm gonna add I'm gonna remove the field. So see this minus here on the right, But remove the field. I want to add another feel. I just press the plus again, but I want to add a stroke, and I want to make the stroke. The primary color that we had so you can see here has the to I'm gonna move these a little bit to the left, center them up. And now we have a primary button and a secondary button. So let's go make this secondary button. Ah, component so we can reuse it. So again, I've grabbed the cancel button. I go to the Component Library page here on the left, and I paste it into that page. I'm gonna select everything. Go to the diamond icon here, the top create components. And where that says, primary button, let's call it secondary. It was changed. The were cancelled to just text speech. And Eric, let's go back to our learning Paige here, and let's go place that component that cancel button component into these pages. So I pressed the assets tab at the top, left here by the layers. I can see the secondary button. Here I click and drag it into the prototype. Paste it right on top of that cancel button. Delete the cancel button. I selected the art board here at the top press place. I hope they didn't pay someplace. One second. So there we have the cancel button. I'm gonna copy it. My pasted in the art board. Usually, if you don't originally pace this button in the art board itself, it won't pay someplace like it like it happened before. So let me go ahead and move this down. Good. Now, that's right. On top of the cancel button, I'm gonna command. See? And now I'm gonna select that cancel button, which is not the component and deleted. And now I'm going to select the art board, paste in place, and then change that the text of this component now making it an instance of that component and calling. Cancel. All right, so let's go ahead and make the cancel button go back to the original shopping screen here that doesn't have the notification for the shopping cart, and we were still want the same interaction here. Toe slide this page down so you can see when I click it, it slides down. We want the next button to go to the next series of pages here. So if you go back to the layers tab here and we look at the final prototype, the next series of pages here is to set up my address. So the the delivery of the Boba, um, will end up at my address that I input here. So we're gonna have the back arrow here, So let's go back to our learning. Paige, let's grab this art board here. What's hold option Click and drag and hold shift and let's copy this page. At this point, we're gonna grab the arrow icon. So if you go to the design goods that I created over here and grab this arrow icon Press Command, see, and we'll keep the X here for now, just for positioning of the arrow click on the check out screen that we're on right here, the new one that we copied. Let's go ahead and name this one address. So I clicked on the art board double clicked on the address layer on the left and I can change the name. Gonna paste this in place, Paste this into the art board, place it right around position of the X, copy it, delete the X press the address. I art board the top here and paste that arrow. Now it's called this address here and let's go ahead and remove all of this. These elements here. So let's prototype this. So the next screen here is going to go to the address screen. But in this case, we're still gonna have it be on tap here. We're gonna move in instead of move out. Yours might be on instant or smart animate. Let's create move in. And we want this one to slide in from the left to the right, and we want the back arrow here to move out. But instead of coming in from the left, we wanted to come in from the right so it moves to the right. So moving in allows this address screen to move in from the left and when we, when we say move out, allows this screen that we've selected to move out of the way and we want to go right. So sometimes you. If it gets unclear of how these work just met, make thes selections and then go into your prototype and go play with it in the prototype. And it helps you to find Hallows Air working for you so you can see the next this is going to slide in this address page. If I want to go back, I can go back. And it's a pretty common interaction to see this slide up. See the X go next. And now we enter a Siris of back buttons and back screens. Okay, so at this point, we need to put the address information in. So I'm gonna go back to some of the components that we've already had. So if you remember, we we built out on the asset screen here. We built out some form default components. So let's grab that component, click and drag it onto the art board. There was one of the defaults. Let's call this one address. And since this application knows my name already, I've already logged into it and I've signed up previously and give it gave it my name. Let's go grab the focus form filled here and you could see if you if you click on a, um on a component and we'll take you to that component if you click and drag. That's how you use it on the art board here. So already have, ah input form that I've created that has. We've already have the one that is a focus ST input. So let's go ahead and say name here and we will pre populate this with my name and let's go ahead and change the text to all lower case. Right now we have the address field. Since this is an application that only works in San Francisco, we're gonna type in San Francisco and we're gonna make this 30% opacity. So that, um, actually, before we do the San Francisco we need to put the apartment or the sweet here. Okay. And now, since this isn't a application that's Onley used in San Francisco, let's type in San Francisco as a city, and let's go ahead and default that, um, are make the opacity 30% opacity. So is disabled. The dress has to be within San Francisco. All right, and then let's go ahead and see how figment does that gives you all the spacing attributes . So it's equally distributing these form fields for us at 20 pixels each and we had the state California. And the next thing we had here was to make sure this is equally distributed here. We had the phone number here. All right. Pretty simple, since we've already had these components built out. Um, I'm gonna double check, but the final page? Yep. Looks about right. We already have this. Prototype it up, so you can see. Here's what that looks like. I go next. Now we have the address. I'm gonna copy this address, holding option, clicking on the art board and shift. And I'm gonna press. I'm gonna double click on the layer of this art board and just call it a dress one. All right, So at this point, I'm gonna copy the keyboard that we have from the log in. Just command. See, I'm gonna select the address command V and bought a bang, but a boom. We have the keyboard screen. Now, let's go ahead and just pre populate all three of these here. So if you can see, I have the component for the active input Stay already for these form fields. Some just gonna copy this holding option shift and dragging it and just get this over to the top of all of the phone number and the apartment and the address. So I'm gonna command See? Now copy these, and I'm gonna delete the apartment, the phone number, and I'm gonna go select the art board again. Command V and place those here. So at this one thes that paste in place. Now I have the address, my type in the address, and we're just gonna put, like, 111 Aw, Noboa Street. And we'll do. Here was apartment I slash sweet and let's just do 123 for the apartment. And then we had the phone number here. Go ahead and grab Aaron Lawrence here and let's do 1112225555 as a phone number. Okay, at this point, this go button we need to make this say done. So if you select the go, let's go ahead and change the text back over to Roboto so we can change it and press Ah, double click into the text box and call it done. And What that will do is it won't allow you to move forward. It will just slide the keyboard down and you can go to ah, the next button here and move on to the next screen. So this point, I'm gonna hold option. I'm gonna click and drag this mobile prototype or mobile art board and make a duplication of it. I'm gonna You can see you see how far how smart figure was. It noticed that I copied this our board. And when I let go, it changed the address from one here to two and notice that I was always numbering art boards. So it just automatically started to number incrementally my art board. Very smart tool. I'm gonna delete the keyboard, and now it's prototype this up. So I'm gonna go back to my prototype tab here. The top, right, I'm gonna click on it and let's go ahead and click on the address, the apartment and the phone number. Here, let's do a command G or a right click and just group these as one selection and go ahead and drag the prototype gooey arm to the next address. One screen and we want on top but we just want instant. No, Um, we don't want any spent fancy stuff happening here at this point. Let's go ahead and selected the done button here and click and grabbed the gooey arm. Click it to the art board, addressed to and on tap and again. Instant. Nothing fancy. Okay, so now what happens if you tap into early in the address? The apartment or the phone number is? You get the keyboard. We're just gonna auto populate it for now in the art. But if you want to make individual screens for each one, you now know how to do that. And then if you press don, it takes a keyboard down. Who can move to the next screen here, which is in putting your credit card details. All right, so good. I'm gonna copy this address one here holding option. I select the art board, click on it, hold option to get the double arrow, click and drag shift or again. I could just copy it, and I can command V and it will paste it for me. So command seeing command be, Let's call this one payment and call it one. And let's relabel the top here to payment and let's go into our prototype tab here, right here. Let's rab the arrow because the arrow now will go to address where before this era was going to the check out. Now the back button and the arrow will go to the payment screen. So again, nothing fancy. We just want on tap. Oh, and we do. We want it to move out? Yep, correct. And we want to move to the right. So let's go ahead and delete some of these here and let's go see what that looks like on the prototype said I press next hope that didn't work. So let's see what happens here up. We didn't, uh, connect the next button to this screen. So let's grab next. And let's grab the prototype gooey arm connected to Payment one. And we wanted to move in here. So we want on tap, move in and we want to come in from the left and then we want the arrow here on move out and we want to come out from the right. So to go back through that, here's our check out we got next. Here's Theodore s information. The phone number Press done. I press the next button, and this page is gonna come in from the left, is gonna move in from the right. You can see that. And then this screen here is gonna move out to the right so you can see how that move left . Our next button here says this page is gonna move in from the left and the arrow here, connecting to the address to screen is gonna move out of the way to the right. And that's what that looks like. Move in, move out. Okay, let's go look at the payment details. What we had here was, um, we had the address details at the top. So let's go ahead and grab the regular milk tea and the sweet semi, uh, the semi sweet and medium ice text here, let's just paste it directly in the same spot on the payment screen. And let's just change this to delivery or deliver to. And let's just input the information that we did on the last screen here. So we have my name. You have Aaron Lawrence. We have 111 Boba Street and we have number 111 or 123 for the apartment. And we have the phone number, which was 1112225555 All right, cool. So at this point, let's drag up another one of these, um, form components that we made. So if we go to the to the asset screens on the left here, perhaps go to the asset screens on the left. Let's grab the form default. Pop that on to the art board here. And this is gonna be name on card. I am in a copy. This one is wells to the 20 spacing, and this is going to be a car number, and then drag. Um, click, Hold, option and shift. Copy this card number one here. And let's call this one the expiration date. And what I'm gonna do here is I'm gonna select the line element. Actually, what I'm gonna do is I'm gonna grab a rectangle here and just make a black one. I can also just click the I drop her, click the background so it's the same color as the background. And just keep that toe. Hide this form document here. What happens when you create a symbol you have an instance is I can create the start. I can change the styles of it Like I can change. The color can change. The graze here can change the styles of that component. But I can't actually manipulate it like I can't go into this line here and make different widths off the lines. I could see it still didn't let me do that. So it keeps it pretty true to the component. So I'm doing here is I'm just kind of faking it. You can see I have that long line. I don't want that line there because I want to put the cvv on top of that. So what I'm gonna do is I'm gonna grab this expiration date. I'm gonna pay someone like, right click, move this to the front and I'm gonna call this one the cvv. Just a small field here for three numbers, and I'm gonna do the same thing. I'm gonna create a black box here and just layer it over the top. I can press I to get the quick key to get the eyedropper and select the background. And I have the black so you can see I still have the components I'm using, but I've created space for them. And that way, if I ever want to change this component, Master, I didn't detach these two components and have to come back in and re change these. Okay, Cool. So at this point, let's go ahead and put the total that we had. So we created a total element here, and we've shown the total here is well, which is 9 49 And its best practices before you purchase anything is to see the total in which your purchasing here to put that centered. And we had nine, I think 49 as the total. Here, let's go and change this button to pay. And now we're in pretty good shape. So now that I press the back button and I put all the address information in I press next Nam on the payment screen here, I'm almost done with the payment. So let's go at Ah, let's go populate thes really quick using the, um the forms that we created that are at the active state. And so what I'm gonna do here is I'm gonna copy this payment. Aren't bored. I'm clicking on the art board holding option and shift, dragging it to the right, and I've made a copy of it. I'm gonna go to my assets here. I'm gonna grab my components that I've created. Remember this form Focus. Um, active state that we have. I was going to replace all of these here with this component, so I'm just gonna lay a room right on top of each other for right now. I'm gonna grab all four of, um, command, See my delete these ones here, and I'm gonna replace the active ones here. Right. So you could see here. I need to put this form underneath the rectangle, so it gives it some space. And I also need to grab the rectangle that I created here. You can see how I do that is I click and drag from the right that selects all the elements here so I can select more than one element. Select all these elements. Really? I'm just trying to get to these two trying to get to this input form filled and this rectangle here. So now I have those too. Now I'm gonna hold shift. I'm going to click on the title and put component here for the cvv. And now I've d selected that. And I just have the rectangle here. So now that I have that selected, I'm gonna click the rectangle on the layer panel on the left and I'm gonna move that above this component. All right, so let's go ahead and change these up. So we had name on card, and I'll just use my name for now. I'm not gonna put my card details in, but, um, that changed the text here to original case and then we had, um the card details are the numbers. So card number and then go ahead and hold option and press the letter. Eight hit four, make four bullets, make another four bullets, and then just go 1111 It always exposes the one on the left from the last four of those digits here. I'm going to select the expiration dates and I'm gonna put I would say 01 2020. And I'm gonna do the cvv here cvv and was 2123 Cool. Right? At this point, we need the keyboard also. So it's just grab the keyboard here that we created for the address art board, Paste it onto the payment. Aren't bird that we have here? All right. And we're in good shape now, so let's go ahead and prototype this. Just select all of these components that we made here, go to the prototype tab. You want a group these go ahead and right click. Got a group selection or command G. And go ahead and arrow this to this. Grab the little Aero gooey to this art board here. CNC it's connected that art board. We don't want anything fancy just on top. Um, when you do move in, it's just instant. And that opens up the keyboard will just pre populate all these form fields. And then I'm gonna copy this one more time here, and I'm going to select the done button. I'm gonna drag the little prototype gooey arm to the payment three screen. And on this interaction here, we just want on tap Instant and we're gonna delete the keyboard. And then here we have the pay. But in going somewhere, we don't want that working right now. And we also have it here. You have choices on your UX here for this. You could make this, um, 30% opacity until you fill out all the information. Once you fill it all out, it goes full capacity. You can keep it 100% than make air states for these, where you get a little like the line turns red and it says, um, you look like something like this and the lines go red indicating that they're still information to be filled out. Um, little things that think about in your UX. If you're curious about any ah ux classes, I have aux class that you can check out two under my name. Um, but for this case, I'm just want to teach you Ah, a mobile application experience and how to use stigma to build that out. All right, so let's move on. Um, we have that prototype. Let's go check that out. So I click on the names here pre populate, have the keyboard press done, and now I'm ready to pay. So the next thing we want to do here is you want to grab that loading screen that we had here? Let's go ahead and grab the one that we made here in the beginning. After you logged in, I'm gonna copy it, and I'm gonna just pan over to this section. Press command V and I've placed art board into my layouts. I'm gonna keep the, um, the loader GIF animator gift here. Just delete the logo, and I'm gonna copy up. Um, actually, just grab this delivery text, grab this loading screen and see how it's left the line. I want it centered on line. Now I just want to center it right underneath that loading gift. Now, I also want to keep the text boundary box the same with of the art board. And when I have that and the centered paragraph with that keeps this text directly in the center and let's go ahead and change this to submitting payment, just like so. Okay, so at this point, we can just select the pay button, click the prototype we want on top. Nothing fancy here. Just instant. Just go straight to submitting payment and let's go see what that looks like. So you click on the pay and now you're in the screen where it's submitting payment. Okay, so the finalize our check out workflow experience, we want to show the Boba tea in real time being delivered to your address with a series of screens and eventually getting delivered here at the end. Okay, cool. So let's go back to our learning Paige tab here and let's copy up this loading screen. And let's change the name of this loading screen to delivery and will do delivery one. Let's just click outside the art board. Just click and drag to select the loading gift and the payment and just delete it. And remember, we had this map here of San Francisco. Let's go grab this map. So if you just remember, you just click on it already cropped it. It's already in the right position. Just command, See, and then go over to this delivery one art board, selecting the art board and command v Ill pace right in place. All right. And the next thing is, let's go to our design goods art board over here on the left, and let's grab this little Boba icon with the white circle behind it. Command see, let's copy it. Let's paste that somewhere on our application. Let's say maybe here and now let's go grab the map pin icon here and again, like I'd explain in the last video. If you want lots of icons, just go to the noun project dot com type in map icon. You could get a whole bunch of these little map pins that you want or even just type in map in and to get a whole bunch of thes here you wanted, right? So I have one here in the design, goods are bored. Just go grab that command, see, and I'm holding shift again as I grant click and drag come over to the final art board here that we have. Let's place the map icon. What's do somewhere will say, like somewhere here, that's fine. Okay, And then the next time I want to teach you here is the pin tool. So that's this little pin section here. This is a drawling tool and allows you to create any custom shape that you would like. You can see I can just go around and it's sort of like connect the dots. I could make any shape connect the dot. I can add a fill. I'm making Press V to get out of it and select the shape, go back to the selection tool and delete it and So what we're gonna do is we're gonna create a custom line that follows the street to from the Boba to my map icon here. So let's go grab the pen tool. Press P click around the boba icon here, and then you can see it follows your mouse. Go ahead and click again where you see the street and then follow that treat. Click down. It goes a little bit to the right now click again and then connected to the map icon. Let's change this color to the bright purple or the bright pink action pink. And let's change the stroke to to cool. And if you want to manipulate this, you can come in. You can grab these point ah, anchor points, and you can move them around. If you select one impressed the lead on your keyboard. You can delete him. That's how you manipulate, um, that shape. So next thing we need to add is, um, a title at the top. That just says delivery. So it's grab our title from the payment page. Click on this art board press delivery are, ah, paste the payment text. Let's just call it delivery. Do dot dot dot Actually delivering with the i N G. Here you go. And now let's create a space here for us to put the text of the time intervals on how long this is going to take. So just grab a rectangle. Here you can press are as a shortcut or go to the shape tool, and that should be fine there. What do we got here? About 160 heights and the width of the iPhone? Let's go ahead and make this black. We can select from our black color styles here. Make that black. And let's put the arriving time. I think we had some big text here. Yeah, we're using this regular and milk tea setting that was a 42 point and a tool 22 point text . So let's make the what's grabbed the text tool. Do T. You can also just type t on your keyboard is a short cut. And let's call one, um, text area arrival. Arrival time. How much change this toe white so you can see it what center it by doing the paragraph center here. And let's make this, um, a 14 point bold, and that's also changed the color from a white to the cool gray. Kind of like that. All right. Next thing we're gonna do is let's add, um, 15 minutes. Let's go ahead and select this color here. Let's make it, um, let's make it white. Not cool.
6. Designing the profile screens: All right. Welcome to the fifth video of how to build a mobile application using fig MMA designed toe in this video, we're gonna cover the ah profile workflow. So we've already created the log in, Sign up shopping, check out all awesome stuff and we'll have the video here which be the last video of us designing together. Um will wrap up with the profile, um, tab that we built out earlier. We'll also have another series of videos going forward just to talk about other ways that you use Fig Mahato. Invite people into your design and collaborate with them how to export assets, Uhm and letting engineers inspect your design for code attributes. We'll talk about fig, MMA keyboard shortcuts. I'll show you some figment plug ins and how to get gooey kits online. And then how to create comments and I have some final thoughts and going forward. Okay, so let's go back into our file here and again. The screen that we're gonna be building out today is this screen here, which is once you get once you tap on the tab, are where the profile is. It takes you to the profile screen here I can switch between orders and profile, see a picture of my Well, it's not really me, but some track down online, and it has some some my profile information I could edit. This information can add a photo I can log out as well. Okay, so let's go back into our file here and let's get over to where we left off last, which, um, was be finished up the check out experience. We have a pretty full fledge prototype for a boba delivery user experience. Um, but let's go ahead and grab the final pieces of this. So let's grab the, um, sign up page here and let's copy that command. See, let's take that over here to the final edge. And let's pace that over here. Give a little bit of spacing, and let's rename this as our profile screen. So again, I just selected this screen here, and I typed, I double clicked on the layer on the left and I press profile, which, hopefully, at this point, you're getting the hang of copying art boards and renaming them on the left. Another thing I need from this is I'm gonna need this tab are from the shopping screen here . So let's go ahead and select that command. See, and let's go ahead and pace that into this profile screen that we have command V and that will paste in place. Let's remove all of the form, fields, the buttons there, what's remove this logo and let's grab these two tabs and just move them up just a little bit about about their okay. So at this point, we want to make the active state of this be the profile icon and go back to a default state for this Boba tea illustration. So let's grab the profile icon here. Let's go to feel we have it already set at White. Let's make the opacity 100%. All right, cool. Next thing we need to do is we need to grab this Boba tea illustration here and what's go ahead and just add a feel to it. What's making all white that defaulted toe white? And let's go ahead and make this a 40% opacity, actually, 30%. There you go. Now it's very clear to the user that they're on the profile tap after they tapped on it, and that these are default States. And this is the active state. So let's go change the sign up and the log in text. Let's call, sign up profile and let's call the log in here. Orders. All right. Pretty pretty simple. Okay, now what we're gonna do here is let's make the space for the photo of that person, so just grab the circle here. Quickie is also zero, and let's make a little circle here. Okay? So I'm gonna have a video in the next series. Um, about 21 or two ahead to talk about figment plug ins. But you can also get some plug ins right now. And I want to show you one that I use all the time. It's called content, riel. And how to get to that plug in is if you go back to your dashboard, clicking on the four boxes here in the top left takes you back to this screen. I remember this is where you can create files. This is also where you add people, which I'll show you in the next video. At this point, you're on the drafts here. This is where you can create as many of these art boards as you want. If you go to the plug in here, you'll see all the plug ins that you can use, and you can see this one here. It's called Popular to Call Content Riel. If you click on content riel, you can also search for it and press install. It will install it in your fig MMA, all free for you. So why don't you go ahead and install that plug in? I'll give you a second. It's pretty quick, too. Like all uninstall this and install it goes pretty fast. Go back to my drafts, and then if you want to get back to your ah class file, just triple click on that. We're back at the same thing that we're at. Okay, What's really cool about this plug in is I want to fill this with an image this circle. So at the top here in our menu, we have plug ins. Click on the plug in and the one that we just added content. Riel. Go grab content riel, and we want to avatar here. So let's go click on the avatars, and we could put male, female or both. Some put males. Just click on males and it will pre populate this with any mail that you want. You can click on it again, and at another one, I could just go through it ad as much content as I want. Pretty pretty cool. I can also just take text like Let's grab this profile text here. You just watch me. I'll give me names, phone numbers, addresses, numbers, dates. Laura Epsom e mails you RL's, um so it will pre populate this stuff for me. So I don't just think of it and type it all up just pretty cool. All right, so let me change. I'm gonna change one more time, will grab this. Grabbed another avatar. All right, let's get that guy like that guy. Okay, so at this point, we have their profile image. And now let's go add the name. So it's just copy up this profile text here. Click and drag and hold shift while a and option while you click and drag. Let's copy it. It's at a centered lay out. We want it left a line for right now, so it's left online. It Let's center in a little bit. And this was the 19 point system. Let's go back to a think we had 16 regular. That's perfect. Let's go grab 16 here and I'm gonna stretch out this text and I'm gonna go back to text alignment not being centred, but at the top, just like that. And I'm a type in my profile information that I used when I signed up. So it was my name. Aaron Lawrence. You can type yours if you want. We had test at gmail dot com and let's go break up Aaron Lawrence into two lines in case people have long names here. And let's go ahead and make this the cool gray color here. All right, that's looking cool. Let's had a little bit more visual flair. Let's grab a rectangle. You can just do our or you can go to the shape tool here and let's put a rectangle behind all of this. So here's my rectangle. I'm gonna grab it from the layers panel on the left and just click and drag it and move it behind everything and let's go ahead and change this up. Let's make it that cool gray color that we had, and then let's make the opacity on it very low Let's do like That's okay. Let's actually do another color here. What's detached that? Let's go do Let's go do a white and just take it down a 10. That still isn't working for me. Sometimes the visual design You guy kind of go a couple routes. Um, so let's grab us. Ah, blue color. There you go. Now we're getting somewhere. It should be just very subtle. I'm gonna up the opacity a little bit. You have 35% and we're gonna use something in the middle. Will go about their, um, to 54 56 b as a color. It's a background color. Let's give a stroke to this, um, at this profile image. So it's at a stroke here. Well, I'm gonna go with White for right now that I'm a tone it back. But let's make it, like, real thick. Okay? I think that I think why it should be Okay. Okay, So now this Texas A looking a little bit small. Um, So let's go back and make it white. Let's give it some more visual hierarchy and let's make it to the 19 point Bold. Yeah, like that. Let's go bold. Okay, that's looking good now, right? So next thing to do here is let's go add the function to add a photo. We won't prototype it up, but we'll add the button to do it. So I have this little camera icon. Let's also grabbed the edit icon. Why we're here Over in the design goods Art board. Let's go back over here and let's pace those into this art board. But leave these here for now. Okay? Lets grab this circle here. You can also just press O on your keyboard and I'm gonna hold option shift. As I do this, you could also just hold shift if you hold option. It goes from the center of where you're clicking. If you just hold shift, it goes from the left to the right. I'm holding option shifts. I can go center from where I click and I'm gonna make a little action button to upload the photo. Not too big about that big. And since this is something clickable, let's go make this the action color and let's go grab this camera icon and let's go ahead. I'm gonna right click on it. Bring to front my downsize it a little bit. I'm gonna hold shift when I downsize. If I don't hold shift, you'll end up doing things like this, which isn't good. You want to keep the perspective of that illustration of the camera. All right, place that right in the center. I kind of dropped that a little bit. What's at a stroke? What's at a darker stroke, Like a three pixel stroke to this? Give it some separation from the image that looks good that I can tap that camera to get into my pictures and select a new photo. If I want to edit any of this information here, I'm gonna Ah, I compress the edit icon. Let's go ahead and make that also in action color so you can see the action color here. I'm gonna copy the orders here. Left a line, it I'm gonna change it to 100% opacity here. And I'm just going to write the word added. Here, put it next to that icon and move it down. Okay. And that would allow me to go into editing these, um, this information here. All right. Next thing to do is let's go do the order page here, so it's copy this profile page. Let's go on the left here. What's called this order? And again, let's go make this text We had profile was 19. Um, this text here was, I believe said at 19 Bolds and let's make it whites. It is Whites had 100% opacity. Let's make this profile here 19 point regular or light and let's go make that 50% opacity. And then let's switch this rectangle over toe orders. And then let's just delete all of the profile stuff that we did given the background. And at this point, we just want to call out some of the details that we ordered here. So let's go grab one of the photos, this milk tea photo here. And let's grab this information here. So I'm gonna grab the photo first. I'm gonna pace the photo into the order for now. Just anywhere is good. I'm gonna downsize it a little bit. And I'm also going to grab the order information here. Copy this. Okay. And let's go ahead and paste this underneath the order here. Right? So let's shake the, um we'll call it one milk tea. Here. Let's take the information that says Milk semisweet, medium ice, large tapioca. And let's just change that to, um, quantity. And let's just put one here and let's center that. Let's center underneath the regular milk tea text here. I'm gonna make it the same with of the art board. So I know it's exactly in the center of that art board. How much of the same thing to the regular milk tea text, But you can see it has the left alignment. So let's go to the text area here and what's make it center paragraph alignment. That looks good. Okay. And then what we're gonna do here is we're gonna crop this circle here or this. Ah, um, this image here and make it into a circle. So let's select the image. If you go toe the top here, where has your won't your within your height Attributes. There's the the corner radius, um, fields here, go ahead and press shift and the up arrow and just do it a whole bunch of times. You can also just type in about 100. That should be fine. Let's make the with on it 1 90 by 1 90 and then let's go ahead and blow this image up a little bit. So what you can do here is if you triple click on the image and then go to the crop tool at the top. Now I have it cropped within the circle. You can grab the image here and hold shift and just blow up. The image could blow it up like that. And I'm gonna downsize this circle a little bit. I'm holding shift when I downsized, so I select the corner. Hold shift, downsize it, go ahead and throw it over here. Move that down a bit. Right? And we also had a line that we put somewhere here on the check out page. We had this line. Let's go select this line. Just copy it. Now let's go back over to this board and we're gonna add this to a couple places. We're gonna paste it. We're gonna add it right on top of that image. Give it some space, but below the orders tab. So if we have more information on these orders, it can scroll underneath that line. And we're also going to center this here. And also add the date someone a copy, this quantity and make the date Heroes say it. 0103 1020 and the price of it was a dollar or $9.50 49 cents. All right, let's go ahead and make the text white for the total. And let's go make it 19. Bold. All right, and let's go ahead and grab a line. Just separate this order here and we can ADM Or down here is we go. What's cool if we do it this way, is if we have more orders than one. We could copy these and make them a little smaller. We can add a whole bunch years. We wanted to say this was like a Nord er of three kaput them here. And let's say the quantity was three. We could have three. If it was like six of these, then we can have six and all have different flavors within it. So this this design scales tohave that those different variations. You don't have to do this. I'm just doing it second, See? All right, cool. So, um, there's the order page. Let's go ahead. I'm gonna go back a little bit here. Let's go ahead and prototype this So let's go first to the shopping screen here. And let's grab this profile icon here, zoom out. You kind of zoom out really far for this one. Press the prototype tab at the top, right? Grab the little gooey prototype arm and go ahead and connect it to the profile here. At this point, we want to on tap. And we don't want anything fancy. Just just instant. That's it. We also want to take this illustration Drink of the Boba and connect that back over to the shopping page here, you can see and nothing fancy. Just instant. So on tap and instant. All right. And one thing we need to do as well I'm gonna copy. Um, my copy that order text here, and I'm gonna make this text the, um 16 point regular at 100% opacity. And make this the pink or action color and just make this log out and let's go ahead and connect that log out button by zooming out. He grabbed a little prototype link. Or if you just move it to the right, it will stroll the page for you. Let's go. Sent that back to the log in screen here, Cool and last but not least, let's connect orders here to the order screen. So orders on the profile tab to the order screen on tap, and we want smart, animate. And then let's do the same for profile. Ah, text on the order screen to go to the profile screen on tap. Smart, animate and let's go ahead and take a look at that, right? So, for back at the shopping screen, I tap on the profile. You can see a go to profile here if I goto orders. The nice, smart, animate applied the transition of the rectangle over toe orders. I do profile Aiken. Do log out. I can click back on the Boba drink icon, take you to the center, and I can log out. It takes me to a log out screen. All right, so that's pretty much a full functional app that we just built out anywhere, all the way from logging in ordering a boba drink, using multiple interactions, adding the drink, doing slide ups, putting the address information, putting in credit card details, seeing the loading screens using animated GIFs, seeing the transitions of time delays on screens, getting to a final experience here. Seeing the Boba tea has arrived and then getting over to your profiles, your orders and logging out. All right. Great. So that kind of covers mostly everything that we've done on building out the mobile application for this Boba tea on demand experience. I want to thank you if you got it this far for not only purchasing the class and going through the class, but just going along with this with me here and spending the time on learning something like this design. I'm very passionate about design craft. It's a great craft. If you're getting into it, it's honorable court craft, and it takes time and commitment toe learn. And, um, and to develop this. So thank you for taking the time out and developing your craft with me. The next series of videos I'll wrap up here is, um, we're gonna learn a little bit of how to invite others into your board, how to export assets, inspect code and your designs, keyboard shortcuts, more of the figment plug ins that you got to see a little preview of recently on this video , how to create comments, final thoughts, and going forward all really quick videos that joint take a couple minutes to go through, and you've already completed most of the class. So just stick along for these last few videos to tie everything together. Okay, well, thanks again. I hope you have fun with your prototype, and I'll see you on the next videos by
7. Collaborating with others & exporting UI assets for engineering: everyone Welcome to the next video. So this point we went through most of Sigma learning the in and outs of the design and the tools and all the functions for that particular designs that we created and the prototyping . The next series of videos is more around showing you how to invite people to your board. How did export U. Y assets keyboard shortcuts, plug ins, how to create comments, some final thoughts going forward to the pretty short videos just to show you how toe continually work with Sigma as you work with teams and work with others and how to get more efficient with it. Okay, so let's go ahead and look at how to invite others and what collaboration looks like in fig MMA, as well as how to export u I assets like icons, um, and illustrations and how to inspect code for engineers. So if you go to our file here that we were at and we can go to let's go back to our learning. Paige, this is the page where we created our prototype here. Have you want invite anybody to collaborate on this board here and they'll have access to all of the pages here. Pretty much this whole file. All you have to do is go up here to share, click on the share link, and you have two options. You can make them a viewer or editor. So if you are allows them to feet view the art words they can get into the, um, art boards. Take a look at it. They can look at the prototypes, but they won't be able to change things around. They won't be able to design like we did. If you make them an editor, then they're gonna They can come into your art board and they can change things. Taken, taken, do pretty much full access to fig MMA, just like you have it. And for the view of you were only that's a free one. You can invite as many viewers as you want to your board as you've invite Mawr editors. I think you have about three that you can invite. After that, you start to pay for the tool, so it's pretty much free for you to use and invite as many viewers as you want to. But once you invite more people to edit your board, it becomes a subscription model. Okay, cool. So you can just go through, invite as many people as you want to. What it looks like when they're in your your board is pretty neat. This is one of my favorite features in fig. MMA. Um, so let's say I've went over here. I got a, um, View or Edit link here. Um, and I've added somebody or clicked on the view at it here. And let's say I added, Somebody's email may just put me in for right now. There's my email that I sent an email out. Whoever gets that email say it's an engineer. They'll open up that email and they'll have access to Fig MMA on their desktop in a Internet browser. They won't need to install software. It will be free for them. They just open up a browser window on their Internet, and they'll have access to this file like you see here, some in the Internet. Right now, I'm in chrome and they'll have access this file. They can work and design just like we did, but within the browser. And what's really neat is if you're working on your file and this person comes into the um the person you invited comes into this board. You can see their mouths so you can see I have two A's with purple circles here in the top , right? And one is Aaron Lawrence saying It's me. Another one is me as well, But this would be you'll see more than one of these little profile icons here at the top. And those are the people that are in your board right now working. So if I zoom out a little bit, you'll be able to see my mouse from the other project that I was on. So let me go back over here. And so now I'm in the browser window. I'm that user that I invited. And if I come back to Fig MMA, I can see my mouse here so I can see the people in my board. I can see what they're doing in real time, and we can collaborate together. It's a lot of times I've used this by opening up a screen sharing software or a ah video call with somebody, and we're on the phone. We're chatting together. We're also working together in Fig MMA so we can chat. I can talk to this person. I can see their mouths moving and we can collaborate together. So it's really great. You can send this to product managers. Engineers invite them to collaborate with you, and you could see them and spy on them as they continually work on fig mo with you, they can also see your mouse as well, so they know that you're in the board. And another thing that they can do here is so if you wanna continually invite more people into fig MMA, another approach to this is we just invited somebody into our board or file here. You can also create teams. So here I have a ah new project, a new team, and I compress new project here. Aiken type in a new team name and I can create a team over here and within a team I can Aiken invite. Um I can add boards to this team, and I could invite people to just this team and have a series of boards. So that way I can have my own personal projects in my drafts, and I can have my team projects within my team here. I can also go and invite people to this team so you can see I have a board here. I have my team, and if I want to invite anybody, I gotta members and I compress the invite here and do the same thing. I can invite people to view or edit, and they'll have access to all of the boards within this team. I can also do some user management here. I can change people from viewers to editors here. You can second downgrade them, and that's where it starts to get into. A monthly cost is you want to create team to start adding editors into these boards. Most of the time, I don't really use team too much. I just invite people to my boards here, and I have ah, different people in different boards that I work with. And that's pretty much 90% of the cases is you're just inviting people through Ah, that share button in the top right, and you're adding them viewer at it. If you want to get to a larger like corporation, they typically will use this section here, which is creating a team. Okay, cool. Once you have people into your board, if they're engineers. One of my other favorite things about Fig MMA is you can let your engineers know that they can inspect these designs and they can get code attributes. You can all you also use them as well. So if you come over here to the right where we have designed prototype and we have the code tab So if you tap on the code tab, this is great and you click on anything here. It will give you attributes toe whatever you've clicked on. So you can see I've clicked on this form default here. And if I click on the text, it will show me the position. It will show me the thought that I'm using the font style, the font weight, the font size, the line height. It will give me the letter spacing as well. And they can copy this. They can just select it, command C and be ready to go. It also does another great thing for you, is it? And it shows them inspections, so it shows them the spacing in between the left and the right here of this form. It shows them the spacing from the top of this art board to the bottom. Same with this button. So anything that I they click on, they can get inspection details so I can come around here over their mouths. See, it's 104 on this side, one of five on that side. It's a lot of times back in the day, we used tohave to inspect our, um, our documents and do what we would call redlining what you're seeing here. And these were two. To inform pixel dimensions and spacing for engineers and help them break down our help. We would break down our designs to help them get understanding of how our designs are laid out from a compositional point of view. But now we don't need to do that. They can just come in and then they can see based off using that code tab. What everything looks like they can click on shapes, see what this width and height. This here for this rectangle. What color hex code it is that can copy these hex codes makes it really easy for them to inspect your design. If you invite them as a viewer, they still have access to, um doing, seeing the code here. They don't need to be editors to get in here and expect your design. If they want to change anything, then they need to be an editor. So you can invite an engineer just as a viewer. And they have the full functionality it you're seeing right here from the code tab and they can also go into the prototype is well, and click around on the prototype and see how the function is cool. So let's go take a look at the next point, which is how toe export assets. So let's say I wanted Teoh export this illustration of this Boba here. Fig mud does it Very simple. All you have to do is select the icon or the illustration and press. If you scroll to the bottom right here on your design tab, just press the plus button. It has the export, and then it gives you different options. Here, you can do one x two x. This will blow it up, um, and make it bigger. So if I do two X, it will make it double the size that it is right now and it has PNG J peg spg. Pdf so most of time, when you're implementing for software you're not going to use. PDF use p and G for assets that have a transparent background. So pretty much an icon that you need and you use J pegs mostly just for photos. So most the time you're using either a PNG for your icons or what we call an SPG. This is a scalable vector graphic. So if I given engineer a PNG, that means they have to keep this, um, icon hear it this size. If they make this icon any bigger, it gets pixelated. But if I give them an SPG a scalable vector graphic, that means they can scale it. They can actually make it bigger like I'm doing right now and it stays clean. It doesn't get pixellated. As you can see the lines, you're really clean. So most of time we're giving out S P. G's for these types of icons, and all you have to do is select the icon that you would like, or the illustration that you would like select SPG press the export button here. I'm gonna put it in my download and I've exported that. So let's go take a look at what that looks like there's my Boba, Tsv g, and you can see it's here in the top left. Let's go do that again. Let's go grab a Nikon. Let's grab this Boba tea and me icon here. Okay, so press the export. Go to S V G here, Export logo. Now it's gonna look at that Is SPG as well and you could see it here. Let's do it as a PNG so you can see. So let's go ahead and select PNG here. Export that logo and let's go take a look at what it looks like. It's a PNG to see how it has a transparent back room. Let's go do it is a J peg and you can see how has a white background now as a J peg, so figure it makes it very simple to export assets. If you select this Boba tea drink and this Boba tea, um, logo here, you can also export more than one at a time. So let's say I want those as a PNG export. Those replace the files, it will export both of those. You can see the PNG here or the Boba tea, and the logo here has been exported. Let's say I want those both as one asset. So then all you have to do here is select both the illustration and the logo and right click or press command G and group these as one element. Then press the export in the bottom. Right. Let's go ahead and make this A P and G Let's export it. Let's call it logo and T and you can see now this is one asset. So typically, what you're gonna want to do is go through your design and export anything that can't be engineered. Which would be like this eyeball. It would be the logo in this page. Give him we'd have the logo here, these photos you'd want to export. So let's press the export here and go to J. Peg and export these photos. Now you can see the photo here. You'd want to export these little carrots that we made here for the drop down buttons. Uh, this check mark, just by selecting them, you want to export this X here? They just want to go through anything that's not, um, text and colors and, uh, or buttons and just export the icons, the illustrations, the photos. So in this case, you'd want to export this white circle and the map, and there you have it. That's pretty much what you could do to export all of your assets and put him into a folder , and you could be able to implement this application. Now, with the prototype and the assets that have been exported, you can hand those to your engineering team, or you could put it into the website for yourself and you be ready to go. All right, so that covered mostly how to invite others into the board. What collaboration looks like being able to see other people's mouse's on and how to export U Y assets and inspect code for engineering? All right, In the next video, we'll go through keyboard shortcuts. We'll look at some plug ins, Um, and I'll see you there. Thanks again. Bye.
8. Keyboard shortcuts+plugins+GUI kits: All right, Welcome to the next video. We'll cover fig MMA keyboard shortcuts and we'll dive into figment plug ins and go look at gooey kits as well. All right, so let's go ahead over to Ah, the keyboard shortcuts. So I'm in the design file that you have here, and I created a page here called Quickies here. So go ahead, go over too quick keys, and I've typed up a list of my favorite keyboard shortcuts here. These are the ones that I use most common, and I'll go through them with you here right now. Um, so the first set that I use a lot there are tools on the left and commands on the right. So for tools, I use V a lot to get to the selection tool. This selection tool allows me to select elements and things on the board. So let's say I'm in the rectangle tool here, and I want to quickly get over to a selection tool. I just press of the and now I'm back over at the selection tool. I use P to go into the pin. Tool soapy on my keyboard takes me quickly to the pen tool I could make a selection or draw shape like I'm doing right now. And then If I want to select this shape, I compress V and now I'm back over to the selection tool. And I can move this shape around i u Z a lot to get to the the zoom tool to proceed into the zoom, tool, click and drag, and I've zoomed in to the area that I clicked and dragged I use Ah, they are for the rectangle tool a lot. So just press are and I can create a rectangle here. Can I compress V start to select it and oh, for the circle tool. And if I hold shift when I do a circle, it will give me a perfect circle by go without shift. It will make ovals for me, and you can see once I create the oval or the circle or the rectangle and automatically jumps to the selection tool here, l for the line tool. It's allows me to create lines you can see when I hold shift. It gives you straight lines when you don't hold shift. That allows you to do any line that you would like. So There's the line there. Sleep that space bar for the hand tool that allows you to move around the art board space easy. And then, um, I for the eyedropper tool, which allows you to select colors. So let's say I have this rectangle and I want to easily go grab this pink color here. I just press I on the keyboard. You'll see it opens up a little circle here that allows you to see the color that you're selecting, and I'll go and select. Say, this pink here and watch my rectangle. It turns pink. So pretty simple tools there, um, and shortcuts to get to those tools. The next ones I want to talk about here are the commands. So, um, to zoom in, you can do a command plus and then zooms in and then to zoom out, you can do the command minus some, zooming out, zooming in, zooming out, zooming in. It's a lot of time. I'm using those commands with the combination of Z for the pencil saw. Zoom in, select the space that I want. If I'm too far in, I'll zoom out or I'll zoom in again and then I'll use the space bar for the hand told to move around. All right, so the next one we have here is for text options. So you can see I have this text here 12 and three. When I do command shift greater thin, that's gonna up size the texts. And if I do command shift smaller than that's going to downsize the texts saw Select the 123 text here and I'll go command shift less than and you can see it. It goes smaller, some downsizing the text. And if I do command shift greater thin, then it's going to go up. Size the text so you can see the Texas getting bigger. Now, the next thing I do in conjunction with the command shift greater than less than to make text big is also use option shift greater than a less than to decrease the line height or increase the line height. So you can see now the line height, this kind of squished. I have overlapping words. So while I still have this selected, I'm gonna shift from the, um, shift command and go to option shift. So I went from command shift greater than less than and now I'm gonna go to option shift and you can see what happens here is I'm increasing the line height by doing option shift greater than and then I'm decreasing it by doing option shift. Less than so. One more time to decrease the font size and selecting it. And I'm doing command shift less than and I'm decreasing the font size and then to increase the line height, I'm going to go over to option shift while the text is still selected and I'm going to go option shift less than to decrease the line height and greater than to increase it. So these four here take a little bit of practice doing it, but once you get the hang of it, it becomes very natural. Okay, The next thing I want to show is, um, the command for moving layers on top of each other called bringing forward or below each other, which is called bringing backwards. So these two commands here. So let's say I have these two rectangles here, and this is for any layer, any shape, and he text any graphic element that you're using in fig MMA. If I want to bring this rectangle underneath the black rectangle underneath the pink rectangle. All I have to do is select the black rectangle. Do command option and I can go down arrow to bring backwards and you can see it goes below the rectangle. And if I want to bring in above directing all again, I'll just use command option up arrow. You can see how that works. I can also do these with more than one shape. So if I hold shift and I collect and I select both of these rectangles, I can also move those up and down. So let's say I want to bring it below the text here and I can bring them back up. I want to So pretty much about 80% to 90% of the tool usage in fig MMA. You'll be ableto have these sets of quickie commands and that will cover most of their tool usage that you'll use. And I've also left them here in this document. So if you come over to the document here and you see the quick keys, you'll have these here. Another way to view the quickies in fig MMA is if you go to the little question mark here on the bottom. Where says help and resource is and you click on that and then you go Teoh Quick keyboard shortcuts here. Just go ahead and click on that. And then here's all your keyboard shortcuts or quick keys here, and you can see for tools. Here's all the ones for the tools. Here's all the ones for viewing you have zoom. Yep, text shortcuts, shapes, selections, cursors at its transforms, arranging and component shortcuts there. So if you just want to go under the hood and see what kind of shortcuts figure figment provides for you, you can go here by clicking on the bottom rights question mark and go into the keyboard shortcuts like So. Another way to see keyboard shortcuts is, whenever you're in a tool, let's say I want to look at the rectangle tool or the line tool where the lips tool it provides short cuts to the right here. So there shortcuts to your frame and your slice tool selection tool, and it also does the same here. If you go into the menus Seiken, select an object, and I could see all the quickies here on the right So bring the front. Bring the backwards. Lock the layer here and same for editing. Undo command Z redo command shift. See Cut command X copy Command. See paste command V paste over Selection Command shift B. So you can also view the keyboards in multiple ways. You can see it by the question Mark, and you can also go into the menus here and the tools and see the shortcuts as you go along . All right, Cool. So that covers the keyboards. Let's go look at some of the plug ins now. So I created another page here in the Sigma file that you have and this one's called favorite plug ins. And these are my four top favorite plug ins that you confined in fig MMA. So to go find foot plug ins and to go look at plug mints plug ins, just go over to the top left. Here, go over to your dashboard. Click on the four boxes here in the top left, takes you to the dashboard. This is where you have the ability to search projects. Here you can see your recent projects. You have your drafts and then you have your plug ins. here. So these are all your plug ins here, and my top favourite four plug ins here are called content. Riel, spellchecker, unspool ash and map sickle so you can see there's some popular ones here there. These are pretty popular. These first to the in splash the content riel. You can also search plug ins, so just go browse all plug ins and you can type in, say, map, sickle. Here, you can see the one here. You can also type in spell Checker. You could see the spell checker here. They're pretty easy to install. So let's just go say I want to install this spell checker while you got to do is click on Spellchecker. You can see where it's installed. I can uninstall it and then click back on again, and I've installed it into the application. Pretty simple stuff. It's fun to just go around and just house all of the the plug ins that figment provide you . There's tons of them. They're pretty cool. Let's go look at some of my favorites here, and I'll show you how to use a plug in. Let's go back to the file here. Just click on your figment class file. I'm in the plug in page here. Let's go look at content riel. So a lot of these plug ins you you want to select an element. So let's go ahead and grab and make a rectangle here on the top in the menu bar. Here, you have plug ins. You go ahead and click on plug ins, and these are the ones that you'll you have installed. So in this case, let's go look at content riel. So I click on content real, and it's opening up that plug in. And what this does is it provides me. I'm different types of content that I need. Someone put it text box here, and it gives me text avatars and icons. So if I click this text and I want names, it gives me random versions of names will give me random phone numbers. It'll give me addresses that I need. It would give me dates and times. It will fill with Laura up some if you want just default text, random generated emails and random generated you RL's as well. I can also click on this rectangle shape here goto avatars, and this will give me automatically different photos of people scientists want males say females here I can do both male and female. It just It's just a random selection of photos. So I'm next a easy if I'm doing a whole bunch of different, um, team boards Right now, I need different photos of people or social media where I can see I have a lot of people in photos toe populated my designs. This makes it really easy to do that next thing, it also has some icons. You have to install a font to use the icons. I don't really use the icons that much again. I use the noun project here. I showed you earlier where if you want any, say, a profile icon, just go to noun Project. You can download it like I showed you in the past video and drag the scalable vector graphic into your figment file and you can use that. All right. Another cool plug in that I find really valuable is unspool ash. So if you gotta unspool ash, this is just free photos that you can use So it goes beyond just photos of people here such select this square and I could just insert random photos. It would just give me any random. That's a really beautiful photo there, but it also gives me some presets here. I can have animals, architecture, and if I just click again on architecture, it gives me more architectural options. Same in nature gives me nature as well. I know populate any shape. So let's say I want, um, a circle here that I do portrait. Give me a portrait view here or space and I can also search stuff. Let's say I want like a tiger and there's some photos of some tigers here. Pretty cool, right? Such unspool ash. Just a quick way to get a free access to many different types of photos as well. You can also go toe on splash dot com, and they have a library of photos that you can download. All right. The next one is spell checker, so just go ahead and select any typography or paragraphs or written content. Go to your plug in and just click on the spell checker there and it will. It will automatically, um, spell check anything that you have, So let me go. Let's go back over, Teoh. Quick keys here, select all this. Go do spell checker and now it's loading. It's telling me that I dropper is misspelled or has incorrect spacing on it. So pretty neat. Um, have seven errors here talking about eyedropper tool. Lets go select the commands. They'll probably give me some errors here, too, as well. Yep. Been shown some errors. What's sad? Misspelled. This word would see command. And I do spellcheck. Well, I guess that's a word. But, um, yeah, Best case to when you do spell if you want. Spell checking is used Graham early. You can copy and paste this into an email and 1/2 gram early. Check it as well. All right, cool. The next thing to check on is map Sickle. Some obstacles are pretty cool. One of my favorite plug ins here. Um so again, just start with the shape that clear out this year. Make a rectangle large one. And this is for anything that you want map related. So if you want to get away from the normal styling of a Google map and you wanna have a more of like a dark theme or like, theme map, you can come here to map, sickle, click on open map sickle, and it gives you different styles here. Suddenly move this a little bit over to the left. So let's say this is a street style. It's more graphic. You can do outdoor style. Here you do a light style. I like a dark theme that gives you a satellite. Here's your satellite plus streets here. I like the dark theme personally. A lot of dark theme you can create other with, Um, you can zoom out. I could get the whole the whole world here if I wanted. Let's just do the United States. Many California and I can do different whiffs here, so let's say 1000 by 1000 If I wanted and I press create map, it's going to give me a screenshot of that design inside the shape. Here. I'm gonna get one with lots of streets, little lines that be hard toe create. Let's say San Francisco here and you can see now I have San Francisco generated. Within this shape, it's an image. So I go to my feel image here. I have the image here. I can come in and crop this image if I want to buy pressing the crop at the top. And that's map sickle. So those are my four favorite plug ins. I'll leave, um, these here for you, and you could use those and plug them in. Um, and you can find your plug ins here. Another way to go to your man. It to your plug ins is if you just click on the plug ins at the top, going to manage plug ins, it will take you back to that page that we just visited. All right, The last thing is to go look at how to download gooey kits. So a gooey kit is, um, the word you e g u I means graphical user interface, and figure has a whole bunch of them for you to use. So if you go to a Google search, I have one here for you and you just Google search and download fig MMA gooey kits. My favorite one is this download 49 free. Um, it's the you i store dot com. If you click on this one, it will take you to a link here, and this has a whole bunch of lets, you know, and green Ah, buttons. here Which ones are for fig? MMA? They haven't for sketch vision, Other design tools. And let's say you want this coin base Web dashboard here. This is all free. You just come in, press free download it will down low in the bottom left. Here, let's go ahead and open that. When you open that folder, it gives you P and G's of these designs here. You can see. And it has a dark theme in a light theme. It also gives you this figment file. So if you want to install that figment file, um, do the same thing that we did in the very beginning where you downloaded the Sigma file that I provided and you dragged and dropped it into your draft space here. So I'll show you. So what you'll do here is this crab this file and just click and drag it into fig MMA like so. And it will import this file and you can go ahead. I'm gonna cancel. It was already have it downloaded. Okay, cool. Another thing that you can dio you can also drag and drop sketch files the same way into fig MMA, and it will pull in your sketch files with all the designs ready to go, it won't keep the prototype stitching that you didn't sketch. But it will translate all of the designs you've done in Sketch in two fig Mahir. Let's go with the cone boy Coin base Web dashboard. That was the one we just downloaded. And you can see I have the light themes here, and I have the gooey kits. I can come into all of these. Aiken, select the graphic elements within this QE kid. I can change them up a little bit. It's a good starting point. You're looking to start for basic design in this case, um, having a dashboard for coin base. And it has both the light versions, and it has the dark versions here. A swell like you can see, there's tons of gooey kits here, um, that you could go download online and check out and play with. But that's how you do it here. And they show up on your dashboard here, like I have on the Web based, uh, coin coin base Web dashboard here you just saw. Okay, cool. So that's a rundown of, um, pretty much how to do keyboard shortcuts and how to use figure out plug ins and download Q B kits in the last video will show. We'll see how to create comments, symbols that will have some final thoughts and going forward. Right? See the last video. Take care Bye.
9. Commenting & final thoughts: All right, welcome back to the final video of how to build design a mobile application using fig, my design tool. So at this point, we're going to go through how to create comments in the context of a design is pretty simple and have some final thoughts and going forward. Let's go ahead, and we're on the figment designed file that you downloaded. Let's go back to our learning Paige tab, where we built out the prototype here, and I'll show you how you and your cell, you and your teammates other people can share comments based off the design that you're seeing here. So let's go over here and let's create a couple comments. So if you see the top left the toolbar here the top left, there's a little speaker bubble icon. Go ahead and click on that, and that will show comments but also give you the ability to drop a comment. So let's go ahead and drop a comment. Let's say, um, let's drop a comment on the map here, and I'm going to write Zoom out the map a little bit, and I placed a comment there. And so it's nice as you can see that the comment is in context to the design element in which I'm commenting about, which makes it really easy to understand your teammates when they give you feedback on your design at what they're referring to. You maybe go to this line here is like line up the line capacity and without the context. If you just read a comment that set up the line opacity, you wouldn't know what this person was referring to. But since they have dropped this comment right on the line, you have an idea of that that change. And again, let's say that was a change we needed to make. That's why we have the component library. Here is all you have to do now is go grab this line and what's up their capacity to 40% now . And let's go back to our learning Paige. And now every line on every single page has been updated, um, in that area. That's why we make those components. It makes it really easy to make changes like that that come in sometimes through the commenting. Lets go back and say that I want to review my comments again. All you have to do is click on it and you'll see the comments on and where they exist. And you'll also see on the right here you'll see a list of you. Of all the comments that happened here once I've completed a comment or once I have completed a comment, I can click on the resolve here and that goes away. That's how you resolve a comment and go away. Another one I want to make here is Let's just do a test comment. Here is Aiken. Tag people by doing the at. And here's a list of people that I have in my project, and Aiken tagged them with this comment. So let's see fall. I can tag myself. Okay, cool. And I'll go ahead and tag myself here. And this will notify me. I'll get an email that somebody has left a comment within my FIG MMA design file. And so I confined the comments here, but I can also see him through email notifications, which makes it easy to manage a lot of comments coming in. Um, so somebody leave me a comment, I'll go in, they tag me in it. I read the comment and I meant resolve or have a conversation with them. Such pretty much the essence of commenting and how comments work. You can see them again. Once you go away from the comment icon, they disappear. So remember that your you won't be able to see them until you click on the comment icon here at the top. That's toe ad and show comments. And then you can go around and click as many comments as you want to, and we'll just final up. This button is awesome. Let's do a nice comment. Well, do you like a little emoji here? Like thumbs up? Cool. There you go, Rights. That's comments in a nutshell. Um, and the last thing is just some final thoughts on going forward. So again, there's lots more stuff we can cover in Fig MMA. I've covered mostly the basics prototype being and transitions within the prototypes and how to design this mobile application here. I hope you got some value out of it. My final thought is just It takes practice. Just continually practice on it. We did a mobile application. If you want to do, say, a Web version, I made a new page here. Call it Web go to your art board here and you can grab a desktop version here. Let's go ahead and do you like a Mac book and you can design out ah website as well. So that's not only just for mobile applications. You can do pretty much any screen size here and prototype any user experience that you go for, um, and also going forward. Make sure to download the fig MMA mirror application on your mobile device if you're especially if you're doing mobile user experiences on this allows you to see the mobile screen designs directly on your phone so you can see how they would look on the phone. That's really important. And if you want to stay connected with me, you can go to my website. It's Aaron Lawrence design dot com, and you can come here and see links to my work. You can contact me directly through the site here. You gonna contact very here on the bottom. You see some of my work and yet going forward, I wish you the best. Um, I hope this was valuable for you, and I also have a couple more classes that you can check out on user experience design. If you just search my name or find some of my videos by typing in you x slash ey design and you'll see me on another class that further deep dives into the tyre UX process that's laid out here where we go through gold, make goal setting problems and assumptions We did. I teach you how to talk to users and customers had a synthesis, synthesize and theme your insights that you learned you're looking for identification of user needs and validations and in coming up with experiments to validate your hypothesis on what you think will work or how you would solve a user need or a problem. And you'll create an interaction, model or prototype and how to test that prototype and then how to collaborate with product managers, engineers and execute on the designs that you have, and then a continuation of building and measuring and learning that process of launching software and learning how to iterating and change to become successful. Okay, well, there you have it. Thanks again and I hope you the best and I'll see you on the next class. Bye.
10. Bonus Video 1 - Dissolve, Delay & Move in - Move out: The bonus videos. So in the next four videos we're going to
cover a bunch more of the prototyping
functions within Figma. And we're also going
to cover some of the newest features that
figma has launched on, including component variants and also interactive components, which is super awesome. And like any, like all my
videos that I have here, I've made a file for you. So if you go download, the file should look
something like this, where in each set of the prototype functions or features that we'll
learn in this class. I have the top end
is the example here. So this row here will cover the example of what
we're going to learn. It's prototyped, ready
to go in case you get lost and you wanna go
see how I've done it. And then we'll do it
together in the video here. So you'll see the example and you'll see the
one that you do. And we'll do the one that
says you do together. And we'll cover a whole suite
of new prototype features, including some drop-down
selections and modals, as well as menus. Will look at building
out some loading gifts through using the smart animate
prototype feat feature. We're also do some
horizontal swiping, some vertical swiping. We'll combine both
of those to make a rich map swiping interaction. And we'll also cover some of the components and a variance. And the interactive
components which are really fun and helpful to get into. Okay, so you shouldn't
have this file. If not, go ahead
and go download it. And remember when
you download it, you may see that
it's a zip file. So if you see the ZIP at
the end of the file format, just triple-click on this file, double or triple click. And it will open up the file here and go into that folder. And remember, you can't
just triple-click on this FIG, fig file here. You actually have to go into Figma and go into
your drafts sections. Years won't probably
look like mine because I have a
bunch of files here, but you'll go into
your drafts sections within your home tab in Figma. And you'll grab this file here, you can see here and
drag it into Figma. You know, you've done it
right when Figma gives you that blue outline. And then it will load the
file, import the file. And you should see
the new file here and your draft folder
here and watch it. Concludes the loading. You'll press the done button and you'll have this file here. I'm going to delete
this one just so I don't have copies of it. Okay. So let's go ahead
and kick off with the first video here we're
going to cover the dissolve, prototype, the delay, and
the move in and move out. So let's take a first look at the dissolve prototype here. So I'm gonna press
the play button up here in the top right. That's going to open
up the prototype. And first thing you'll
notice is that this is loading in an actual device. So I never, I covered that
in some of the past videos. But just to reiterate, if I click off of any of the art boards and I'm
into the art space, just the gray area. And I'm not on the Design tab, but among the Prototype tab, you'll see that I
can select a device. Sometimes it will
load is no device. And then you can select
the model of the device. So I have here iPhone 11, and I have it at
space gate gray, your should already have
this loaded because I've I've engraved this, embedded this into the file
that you've downloaded, but just in case you don't know how to change the devices. Okay, so let's go look at the dissolve function
on the prototype. So pretty much we
have a home screen, repress the view button. And you'll see this
dissolved screen come in. And the dissolved
just means it has a time delay for
this screen to load. It's a very simple interaction. So let's go ahead and start
by making sure that we're first in the prototype type
here at the top right. So not the Design tab, but the Prototype tab. And let's drag this Start
button over to this screen. What this Start button does is it means that
this is going to be the first screen that the
prototypes going to load from. Okay, so what we're gonna
do here is we're going to press the view button here. And while we're in the
Prototype tab and drag the GUI arm right over
to the next screen. And you'll see it's
already sat on, on tap and dissolved. But let us first see how
it looks with instant. Instant. Just going to mean it's
going to have no time delay. And let's go ahead
and play this. And if you press
the view button, see how there was
no delay there. So most commonly when you're in the prototype function
and you click the arrow here and you get the interaction Details dialog
box here at the top right. It's going to default to odd
tap or onclick and in-state. And for this one all we have to do is just press dissolve. And then it will give us some, some of the transition
states ease in, ease out. I also like to do both
at ease in and ease out. Either one's up to you. They're, they're not,
they're very nuanced. They don't have too much
distinctions between the two, but ease out, ease in. It's up to you. The thing that does matter
though here is the time delay. So let's go make this
a really long delay. Let's say it's 5
thousand milliseconds. And let's go look at that delay. There should be real long. And you can see that's
5 second delay. So 5 thousand milliseconds made for a really
long time delay. So that's a little bit too
much of a dissolve or delay. Let's go back here. Let's change it back over to, let's just say a 1000 and
we'll have a nice dissolve. Go back over to the prototype. I'm going to press
R on my keyboard. And that's going to
be the same thing as pressing the restart button
at the bottom right. And it's going to restart
the prototype back to wherever I put this
little start label on. And again, you can just
click and drag this to any of the artboards
that you want. Press View. And that was a nice delay there. Okay, pretty cool. Let's go ahead and
look at the next one. Okay, so now this
next interaction here on the prototype
function is a delay, and this is usually a
whole screen delay. And so there's some common
things to avoid here, which I'll get into in a second. But all you gotta do here
to show the example is just gotten the
example here, move, drag and drop, or drag the start label onto
this prototype. And let's press the Play button. So I'm going to
select this artboard here and press the play button. And you'll see it
has a loader editor. Our time delay, it
goes to the high page. So one more time
loading and it says hi. It's similar to a
dissolve function. It's just that the whole
page is set to a delay. So let's go ahead
and quickly do it. It should be fairly simple. Let's drag the start
over to the set of prototypes screens here
that are next to the u du. And this has no prototype
function to it. So thing through a void
here is if I click, say this loading button, actually, let's do the loader. So if I, if I select this
loading GIF, animated GIF, and I pulled the GUI, GUI arm for the prototype to
set to the next artboard. As so. And I click on on tap. You'll see that this after
delay function is disabled. It's a common thing to avoid. So to get a full screen to delay and move
to another screen, you actually have to select the entire artboard
or the entire screen. So what I'm gonna do is undo
this prototype function. And I'm going to select
where it says iPhone 11 Pro. If I want to name
this art board here, I can just click
until the layers. And let's call
this loading page. Okay, So where it
says loading page now I'm going to click again. And now I have the whole
artboard selected, meaning I have this whole frame. And I'm going to go back
over to the prototype. And you can see the
start here from the prototype on that screen. And I'm going to drag it
to the high page here. And you'll see on tap. And if I click into
the on tap drop-down, you'll see the after
delay has been enabled because we've
selected the entire artboard. So let's go ahead
and do after delay. And then right next
to utter delay, we have the milliseconds for how long we want
this to delay for. So let's go ahead and do. Let's set it for 5
thousand SEK milliseconds, which will be five seconds. And then for the animation, we have different states. We can do an instant which will just instantly
load the page. And we have a dissolve
and we have move in, move out, which I'll
show you in a bit. But let's just go to
institute for now. We'll keep it simple. Okay,
so what I'm gonna do is select the artboard
here, loading page. I'm going to press
the play button. And you'll see
this page loading. After five seconds, it
loads the high page. So that's a delay function. So let's go back in. And if you see the
interaction details here where the
animation says instant, what's go ahead and apply that dissolve function
that we learned in the, in the last prototype
that we did. And let's not do a
1000 milliseconds, let's maybe do 500. And so now you'll see
the high screen here. Come in with a dissolve and
won't be an instant load. So five seconds will
go by and the loading, and you'll see the dissolve. Yeah, it's a pretty
quick dissolve. We can have some fun with it. Let's go add a little bit more. Let's actually do, let's
do 1, 0, 0, 0, 0, 0. So be about a 1 second. Dissolve. Go see what
that looks like. Okay, that's pretty
good there. Okay, cool. If you're interested
in any loading I animated gifs
that you see here, you can go to our website. And I have the directions
over to the left here. It's called loading dot io. I'll go ahead and
pull up a browser. And this has, has
free animated icons and animated gifs while loading gifts that you can download as a GIF and pop those right
into Figma if you'd like. So let's say you're
interested in this animation, but I want to change the color. Let's say I want to
change this color to just say a black here. I'm gonna delete
all the other ones here and make a gray,
something like this. And I want to
download it as a GIF. All I have to do is press
the gift your free download. You'll see it downloading in
the top or the bottom left. So download spinner one S. And all I really have to
do now is take this and drag it into Figma. Well what I can do is
you see how it has a transparent or has
a white background. I can set this GIF to a
transparent background here. And now I can re-download
it and download that. And you'll see now
when I download it in, it has a transparent background. And we could easily just place this loader and downsize it a little bit
into this screen. And you'll see now we
have the new loading gif. Five seconds go by. And a lot, we have
the high screen. All right, pretty cool. Let's move on to the next one, which is open and close. And this is going
to use a move up and move down interaction. So I'm gonna grab the Start over to the example here so we can see
what we're gonna do. This one's pretty simple again. All it is is this
screen next to, It's going to slide up and the x is going to
slide back down. It's very common for setting pages or anything that has
a cancel and a save button. This will just slide up. You'd have a cancel, you have
a Save, close back down. If you have more of a workflow, I'll show you how these work greatest starter pages
to kick off a workflow. And then you go
through the workflow. We're going to learn
now in the next video. So just hang tight. And to see this interaction
and do it together, Let's grab the Start. Over to the page below
where it says you do. And pretty simple here. Let's go ahead and
grab the view button. Go to the Prototype tab. Slide this over to the screen. We want on top. And on the animation
we don't want instant, we don't want dissolve, we want move in. And then with move in, this allows us to
move to the left, move to the right,
move the screen down. And in this one we
want it to move up. Okay, now let's go
ahead and go over to the prototype and
let's look at that. Okay, see how it moved up, but it had a really
slow transition. Cl that move that looked
a little too slow. Examples buggy. So we want to make this fast. So see where it says
the ease in was still set at 100 milliseconds. What's due about 200
milliseconds there. And now that should
load pretty fast. Yeah, there you go.
That's what we want. But almost too
fast for that one. Let's go do 300 milliseconds. Okay? And then let's go ahead and
close the, this with the x. So if we grab the x
and the next screen, drag it to the original
black screen here. And a common mistake is that
you leave it on move in, and you'll see
what happens here. I'm going to do down. So it moves down. And what you're going to want to do is set this to move out. But let's go look at
what it looks like a move in because it's very
common mistake that happens. Okay, so we have
the view that looks greatest slides up pretty quick. That was a good speed
for that transition. And now what happens
when x gets HIT? See how the page,
The Black Page, push the white page
down one more time. So see how the black
page came from the top. That is an odd interaction
for mobile devices. And what we wanna do here,
if I click on the X, is that, that is because
it's saying move in, you're allowing the
black screen to move in. And Figma gives
you a little demo of what this will look like. So what we wanna do is we
want to have it move out. So it's telling the
white screen to the right to sort of
get out of the way, move out of the way, and which way we want to
define is on the right. So in this case we
want it to move down. Okay, this should
work perfectly. So we press the view button. This page slides in and
watch when we do the x, it moves out of the way
and the screen behind it stays in its location versus coming in
from the top there. Okay, cool. That covers pretty
much the first video. And the next video we're
going to cover the overlays, the mold, the modals,
and the menus. And I'll see you in the
next video. Thanks, Bye.
11. Bonus Video 2 - Overlays, Modals and Menus: Welcome to video 2
of the bonus videos, where we're going
to cover overlays, modals, and menus, right? So let's get back into that
file that we were working at. I'm going to scroll down over here and again, what
I'm doing is I'm, I'm using z as a quick
key to get the zoom. So if you see it, I hold
z and I click and drag. That zooms me into wherever I want to look at in my art board. And then I use the space bar. I hold the space bar and click
and drag to move around. And then I'll use
whether you're on a PC, you can use Control. If you're on a Mac,
you can use command, but I'll use Command
Minus to move out of the Zoom Out and in
Command Plus to move in. Okay, So next one, Let's grab at the start of the prototype. Let's move it over
to the example. And now let's go look at the more workflow
driven prototype, which will allow you to have a move up and move down set of screens and then a move left and move right
set of screens. So this is a little
bit more complicated, but still pretty simple. Let's go see how this looks. What's demo it real quick and then we'll get into making it. Okay, so just like we
did in the last video, we have a slide up and then
we have a slide, right? And you'll see it now the
x is on the top right. That's very intentional. And it's to help us
create a workflow. And then also allow the user to get out of the workflow
whenever they like to. So what their workflow
begins when we press Start and why that x
is in the top right. You'll see here, as you see the next screen slides
in from the left. And if I want to
go back a screen, I can go back here. One more time we start
screen two slides in. There may be some settings we
want to input or some form fields you want to input
here at this workflow. And then we go to number three. And let's say you want
to cancel this workflow. A couple of things you can do. You can go back, you can go
back. You can press the X. And now you're back at that
original Start screen. Or if you don't want to
go back three screens, you can just close the x and now you're back
at the workflow here. So that's why the x's at the top right is
because it gives us real estate here for the
back button on the top left. So again, we're gonna go
through number screen 3, screen for here. And we're complete
the workflow here. And if you want to X out, boom, x out at any point. Okay, so let's go make
that interaction again. Let's grab the start
and let's drag it over to the series of
screens next to you do. I'm going to zoom
in a little bit. Let's grab the View button. And again, let's prototype. Make sure you're in
the Prototype tab. Slide the prototype
arm over here, and you already see
it's preset for you. So we want on top, we don't want move out. We want to move in. But let's just see what's, let's see how this looks on. Move out and you can kinda tell sometimes it looks
a little weird. Okay, so you see how
the last screen, this black screen
here, moved up. And we don't want
that, that's a, that's a weird interaction. We want this white
screen to sort of sandwiched layer on top of
that start screen here. And that's because we
selected move out. So if we do move in,
this will work great. So let's go look at that. Okay, that's what we wanted. And now let's go get the
x and play where we can slide the x over
and do move out. And again, we don't want
it to move up here. And you can see some
times that you forget to do the down arrow. And it may look
something like this. See how it moved up. That's very, very weird. We want it to repeat the same interaction that
was presenting this screen. So again, it moved up. We want to repeat and
reverse that interaction. We wanted to move back down. So in this case we want to go select the prototype for
the x, move that down. And bada bing, bada, boom. Okay. Next thing is we
want to do sort of like starting the workflow here. Let's grab this button. Let's go to number two. In this case, we
don't want move out, we want to move in screen and we want it to come
in from the left. And you can see move in
and we have the left here. And let's go look at that. So we've got View. I'm going to start
this prototype and the two slides
in from the left. Very nice. Okay, And then same deal. Let's go grab the
back button here, and let's drag it
over to the one. And what we wanna
do here is we want this to move to the
right and we have the same common mistake
that happens is that we leave it and move
in and not move out. And you'll see what
happens here when I press the Back arrow. See how the one screen moved
in. We don't want that. We want the two screen here to repeat and reverse
that same interaction in which it came into view. Just reverse it. We want to go back out. But right now you can
see the ones coming in. That's because we
left it in, move in. So let's go ahead and move, move it out over here. And now you'll see the
correct interaction where move number two slides in. If you do the back button,
it cites back out. Okay? And then I've also have a pretty much a
transparent gray bar here. You can see it looks like that. And it's transparent for a reason because you don't
want the user to see it. We just want to use this as a prototype mechanism
to allow the user to drag this photo or this screen out of
the way. So common. If you go into a screen
that has a back button, it's common for folks on your mobile device to swipe at this screen
out of the way. And so that's what this
will represent here. I'm gonna make it a
little bit larger just so you can see. And so what we want,
we don't want this to be on the interaction
details here. So we slide it back, this transparent square
back over to one. We don't want on tap, but actually wanted
to do on drag here. And we want the same
animation we want move out and off to the right. So now when I can do as a user, I can press the back button
that we'll go back to one. Or I can drag by clicking
on the prototype, holding your finger
on your phone and dragging this screen
out of the way, see how that worked there. Cool. So this is fill in good. This is filling like
a real prototype, like a wheel apple application. You press the back button, go back down, come on
into the workflow. You can click and
drag to swipe this. And now let's get the rest
of these prototyped in. What we can do here is we have the x and
all of these screens, but the x is really
just going to take you back to
this home screen. So a new feature
for Figma now is that you can paste in
multiple artboards. So what's delete the axes
in these other screens? Let's grab the x. And if you're on a PC, it's Control C, as in cat. If you're on an apple,
then it's Command C. And let's go ahead and
select all three of these. I'm on a Mac and I'm going
to Command V, as in Victor. Or if you're on a PC control V. And it's going to place that x automatically
on all three of those screens with the
interaction we want that goes back to
the starting screen. Okay, and it's pretty
simple from here on we just make the next
button go to number 3. If we want to make
sure it's on tap, we want move in. And we want this screen
to move in from the left. And then same with
the back button. We want to go back from the
screen 3 here to number 2. And we want move out
and to the right. So again, the screen is
going to come in from the left and then move
out to the right. Same thing for 34. We do the next button
to the fore screen. Can we want it to move
in from the left? And then for the
back arrow going from screen number
4 to number 3, we want it to move
out to the right. All right, that
should be complete. Let's go look at it. So we have the view, the screen slides up. We have the start. Press Next, got number 3. Press F4 goes to number four. You can cancel. Close x, goes back to
the beginning screen. You can launch the
workflow again. Go Number 4, or you
can go back, back. Even on the number 2 case. You can swipe and press X and you're back
at the screen here. Cool, that was fun. Let's get over to the next one, which is mobile
modal drop-downs. So I'm gonna go wrap this
Start screen so you can quickly see the example
of how this works. Press the play button here. And so this is a drop-down
for mobile devices. So when, let's say I want to
select my favorite color, click on this drop-down
and you'll see a menu items slide up here. And let's say I select here red. Then you'll see it's
populated with red here. Press the X, go back
to the Select color. Do the same route. I can click anywhere outside
or tap anywhere outside of this dropdown selection
here and it closes it. Okay, so let's go ahead
and grab the Start over to the series of screens
here that says you do. Now what we're gonna do here
is I'm going to go over to the top artboard tool
where it says frame. And if you're on this tool, either whether you're
on the Design tab or the prototype, prototype tab. It will allow you
to click to create different sizes and devices that you would be designing for. So in this case, we are screen sizes and dimensions
are iPhone 11 x. So let's go ahead
and click on that. And it's just going
to drag automatically place a Artboard on to Figma. And now we need to just shrink this art board
down from the top. We want to keep the same width, but we want to move
the top down so it's about a little more than three, little more than
or a little less than half of the
artboard to the left. And so what we'll do is
if you just click at the top and you drag down. We'll say about that looks good. Okay, so what I'm gonna do
is I'm going to select some of the elements
here from the top. Let's just select, Don't
even worry about the lines. Let's just select all
of the text here. Press Command C. Or if you're on a PC Control C. I'm going to select
the artboard here. And again, Command or Control
V as in Victor to place. Okay, that looks good. Now I think we have all
the pieces we would need. Okay, so what we're gonna
do here is we're going to click the drop-down. Just grab this whole element, press the prototype, and again drag it over to this
art board here. And you'll see interaction, the interaction Details
dialog box here. We want the action for odd tap. That's the function that
target that we want to create. But the mechanism here
we want to change. So instead of navigate to where you want it to
say open overlay. And then once you have overlay, it's going to give us
our overlay options, and we're going
to get into these options here in the next set of videos or prototypes here, right after this one
we'll do the modal, but right now we wanna
do bottom centered. We want to enable
clicking when close, when clicking outside
or tapping outside. That means any of the area
above this will close. And we also want to add
a background overlay. It defaults to black, which is most common. And we can even make it darker. We can do 50 percent
opacity here. And then for the animation here, we don't want instead. But let's just go look at
what we've created so far so you can see how
Instant works. I'm going to remove any of the, you can see this one's still had a prototype arm connected to the art board
here at the top. Let's just click and
remove that for now. Okay, so let's go select this art board with
the start label on it. Press the play button, and you'll see now we have
the drop-down menu here. And if you close
it, it goes away. But there's no
transition, right? It's instant. And we want to have
a transition here. So if we select the prototype
interaction details again, and you see where
it says animation, we want to use the same one we just learned in
the last screen. We want those move
in animations. And from this one, we don't
want the left to the right, we want it to move up. And then when you automatically click outside the overlay, it will reverse that for you. So it will move out of the way and down when you
click outside of it. So let's go back over
to the prototype here. Select the drop-down,
and there you go. You see how that slid up. And when you click
outside of it, it's going to reverse that interaction
automatically for you. Cool. So that's pretty simple there. And now let's just go. Say we want red. Let's click over here. And on tap, we don't want
any of the animation here. Just instant is fine. And now let's select
the x here to connect it over to the
beginning screen so you can remove this
selection easily. Just instant is fine as well. And now we'll have a
complete drop-down selection for a mobile device. Click slideUp menu comes in, you want red. Red shows up. Press X, can do it
all over again. Okay, cool. Let's move
on to the next one. Very similar. This will be the modal. And I'm going to move this start down here to the example. Let's go look at
this one real quick. All right, so we have a button
pressed, the text here, and you'll see it says
high and we can close it. So just a modal interaction
for a mobile device. And let's go ahead and move the start prototype label to
the one that says you do. Let's change this text test. Just say, I don't
know it say Open. So I just clicked into it. I press T on my keyboard. That gives me the text tool. You click once it selects
it, if you click, if you triple-click
some clicking twice, a automatically
selects everything. So again, I can triple-click
and type open again. Okay, so let's say I have the
modal here built out again, but let's, let's just
delete this for now. Let's start from scratch here. So same thing. I'm going to come
to the frame here. Frame tool at the top left, I'm going to select iPhone Pro X is going to give me an artboard. And what I'm gonna do here is
take this art board frame. I'm going to make it a
little bit less tall. So I'm going to
click from the top, Let's move it down here. But in this case, I
also want to make it less wide as well. So it's acting as a modal. It doesn't cover
the entire phone from the vertical space to
the left and right space, but it fits kinda right in
the middle of the phone. Alright, so that's
already a good start. And what we wanna do is we want to go back to the Design tab. And let's go ahead and
round out these corners. So you see where it says frame. I'm going to round
out the corners by putting, let's say 20. Okay? Not and you usually don't wanna go too
heavy like you don't want to have corners that
are very rounded like that. You just want a nice
subtle rounded corners. So 20 should be perfect. Okay, and then to get
to the prototype, what's go ahead and press the
click on the Open button. Let's slide the
prototype arm over here, over to this art board. And let's go ahead
and call this on tap. And similarly like we did
before we went to navigate to, we're going to change
this to open overlay. And now instead of doing bottom centered like we did
before, Let's do centered. And let's go ahead and close
when clicking outside. What's also do add a
background overlay. We can keep it at
25 per se here. And again, let's do just
a dissolve interaction. We don't need to have it move
in or anything like that. Okay, that should
look good. Let's go ahead and see what that
looks like on the prototype. Press open, okay,
and we have a modal. Let's go ahead and close it. Open and close. All right, That's looking good. Let's go add some of the
pieces to this modal here. I'm going to copy this high, and I'm going to
select the artboard, paste the high here, just kinda centered it
if you want to as well. And I'm also going to
click on the X here, paste the x, and remove
this interaction. Another way to remove the little GUI arm
here, as you can, right-click on a art board and see where it says
Remove interactions. That will remove all
the interactions just on that art board. Let's go ahead and put
this x at the top right. Let's drag it over to the starting point
of this art board. And let's go ahead
and say on tap, dissolve, that
should work perfect. And it's just going to
close this modal for us. Press X and we're back there. So open and close. And you can also tap
anywhere outside of the modal and close it as well. Okay, That was how
to do a modal. Let's go drag the start
point over to the one below. And let's go look at a menu
coming from the title bar. And this is a very, very common interaction that you'll find
in a lot of mobile devices. So I click on the artboard here. My press R on my keyboard, that will take me to whichever screen has
the start label on it. And you'll see there's
a hamburger menu or a hamburger icon on the
top of this title bar. I have the title bar fixed. So you can see I have all of its selected here at the top. And I've pressed
fixed when scrolling. What this will do is
again, it just keeps it at the top as the user scrolls
and it will stay fixed. It doesn't move while
all the content, like the numbers 1, 2, and 3, we'll scroll. So you'll see how
that scrolls below. And you'll see the menu come in. So I click on the Menu icon and the menu slides in from
the left to the right. If I click outside
of it, it closes it. Pretty cool interaction. Let's go head and build it. So I'm going to click on
the Prototype tab again. And I'm going to drag
the start section over to the one
that says you do. I'm going to move all of this text over
here a little bit. We're going to need that in a
second. So don't delete it. Click on the Artboard Tool. And let's go ahead and drop a click again on
the artboard tool. What's drought? Dropped a iPhone Pro X here. And this case we want
to make it the same. We can make it the same size
as the screen. To the left. Should be fine. But we don't want it
to be the same width. We want it to be a
little bit thinner. So let's say here is good. And what we can do here. So if we go to the
Design tab here, you'll have a fill color. So when you select
the artboard level, it allows you to fill the art board with
whatever you want to fill. You can even do it
fully transparent. I could press 0 and
it's fully transparent, our board, or I can go into
it and select a color. So in this case, I know
it's due must do this blue. You can do any color you want, isn't really your world. You can do anything. Um, but for this
example, let's do blue. Just for fun to change
it up a little bit. And let's go ahead and pull
this text into the menu. Here. Move it down a little bit. Okay, Cool. So we have our menu design here. Let's go select the
hamburger menu icon. And let's drag that over to the menu design that
we have on tap. And then again memory
where it says navigate to. So we have the on tap is good. Navigate to where
you want to change it to get into these overlays. And again, open overlay, just like we did before. And instead of
centered or bottom, we want it to come in
from the top left. So this middle one
top-left here. Same functions that we wanted to close when clicking outside. And we want to add a
background color behind it. And again, we don't want to
have dissolve or instant. So again, we can keep
it in an instant for now and just see
what it looks like. But we're going to change
that here in a second. Okay, there's the menu came in. We can click outside
of it, close it. But you can see a
had no transition. It just instantly showed up. So let's add the transition
for it to move in. So again, if we go from
the animation here, we allow it to move in. And we want this to
come in from the left. So left will be good. All right, sorry, we want it
to come in from the right. So wherever the position of
the menu is on the left, we want it to come in from
moving from the right here. And if you ever get
lost, That's what Figma does in this
little example. It shows you that this screen be this new screen you're
going to prototype here, is going to slide in over the screen that
you're on screen a. Okay, let's go look at that. That should be complete. So let's press R
on the keyboard, click on the hamburger icon. And it slides in. Close here. Slides out. Alright, cool. So there you go. There you have a menu. And that concludes this video. And the next set of videos
here we will look at the smart animate
prototype function will build a cool
look and loader. And we'll do horizontal
and vertical scrolling. As always. Thanks, and I'll see you
in the next video. Bye.
12. Bonus Video 3 - Smart Animate, Build a Loader and Horizontal/Vertical Scrolling: Welcome to Video 3. On the bonus videos we're
going to cover smart animate. We're going to build a loader, a screen loader
using smart animate. And we're going to
look at horizontal and vertical swiping
and scrolling. All right, so let's go ahead and go back to the file here. I'm going to press
Command period, which will show all the my
fig, fig, my interface. That's what I'm doing here. Pressing Command periods
to remove everything, command period to see all of my interface tools within Figma. Let's go where we left off out, which was building up this menu. Let's grab the starter
point over here. And let's just quickly go look at the example for
smart animate. So what's more animated
does essentially it will animate your set of screens
to show the next screen. And we covered that in the
last series of videos. I'm just going to
touch on it briefly. There's a couple of things. The common mistakes that
I found over and over by using smart animate
that I just want to highlight and some quick
little tips for you. Press R on the keyboard. But again, we've prototyped
this circle here. And you can see how it, and it makes to the next
screen with the bigger circle. And if you click
the bigger circle, it clicks and goes back down. So very, very rich animation for really simple
Technique to do. So high results, simple to do. So what we're gonna do is grab this start label over to
the section that you do. All we have to do literally
is grab this circle, prototype it over to the
screen next to the right. And instead of move in, we just press smart animate. And it's going to do
all the work for us. And let's go ahead and
click this circle here, drag back over and
smart animate. And you can see that interaction happening here and
here real quick. You can control the
transition speed. So if we go back
to the one here, let's say it's 800 milliseconds and you'll see
there'll be a lower. And in the clothes
will go faster. You can even change the color
if you want to as well. Let's go over to design. Let's change it from pink
candy to this blue one here. And you'll see it's slowly
change colors as well. Awesome, Pretty cool. Okay. Another common thing that I
just want to briefly touch on is a mistake that
happens quite often. I'm going to drag this. You don't have to
follow me on this one. I just want to call it out for the sign-up and login
here, that happens. Okay, so I'm gonna go
ahead and play this. This is the thing to avoid. And I'm first going to
show you the problem here is if I tap on Login, you'll see how there
was no transition. There was no sliding of this pink triangle over
to the login screen. And what we really want is something to
look more like this here where I'm going to
copy over this screen. I'm gonna grab the
login details, but delete all of this. I'm going to hold, I'm going
to grab the login texts, press bold, Command
B to bold it, make it a 100 percent. And I'm going to go ahead and do another command B to unbolded, make this a light font. And I'm going to take
the same rectangle here, and here's the key. I'm grabbing this same
rectangle from the last screen, and I'm going to slide
it over to log in. And now when we press the log in to this screen and the sign-up back
over to this screen. All with smart animates. You'll see Logan's
smart animate. When I click the Sign Up, goes back over to sign up
with the Smart Animate. You'll see the transition
is much better. So see how that transition
very smartly over. So what happens here is if, let's say I copied the sign-up screen and I
deleted this rectangle, and I created a new one. This great one here. That's what causes
the problem here. So you'll see now when I go back over to sign up, it
doesn't transition. And it's because Figma before, when you use the
same rectangle here, figma identifies this rectangle as the same rectangle
that you're using in the login screen. So it knows. You're saying I want this
rectangle to move over to this side of the Artboard
by using smart animate, where if you draw
a new rectangle, it doesn't distinguish
between the pink rectangle here should be the
gray rectangle here it treats its head as
two different elements. So it's really important if kinda get through that concept. So I'm going to Command
Z back a little bit. So you can see, I'm saying
telling Figma during this prototype here to smart animate over to
this login screen. That I want this same
rectangle over here, so it identifies that
it's saying, oh, it's sign up, this
rectangle lives here. And out log in. The same rectangle
lives over here. And a smart animates going to do its job to do the animation, to move it over here. But again, if it's something
new that you drawn, it breaks that relationship
that you have here. And another thing that
happens sometimes during Smart Animate is you'll notice that something's
just go, go weird. Let's see. You'll usually see elements
like fly around the screen, like say this
eyeball goes flying in or the bokeh t does
something different. It's hard to
reproduce because it happens every now and then you'll see some
weird functions, but the smart animate. And so the trick is, is smart animate house to
do a lot with grouping. So if you're seeing
some weird UI elements fly around the screen, take the first screen
and group everything. So let's say that none of
these were grouped here. Go ahead and do a command G, or you can do an object
and group I'm going to do, or if you're on a
PC Control G by, I'm going to group
all the elements here and pretty much does group everything that isn't that the thing that you
want to animate. Grip the buttons. You can even group all of this, the button and the form fields. And so just start
grouping things. And I promise once
you start grouping, you'll notice the
animation or the thing, the element that
you're trying to animate will animate
a lot better. So just a little trick if
you're having problems with the smart animate
feature and it's not animating properly,
start grouping elements. And, and you hopefully
will see a change in that. Okay, let's go
have some fun now. Let's go build out
this loader here. So I'm going to grab
the start level over to the screen
underneath loading. I'm going to press play. And what we're going to build is something that looks like that. So you see it loads in. And then you have
a transition from the title bar here at
the top of the map. Okay, So let's go,
let's go do that. On the one that says you do. Let's grab the start. Let's pop that over here. And this is really simple. We just want to copy this page. I'll just select the
art board. I'm here. They're gonna do Command
or sorry, option. And that's going to copy and drag the same art board here. Or I'm going to do a
Command C and Command V, as in Victor, and that's
going to paste it. I'm going to remove
this start one label. So you can see on the
prototype it says flow starting point, start one, just press the minus sign here, see where it says delete
starting point and delete it. And all we wanna
do is grab this. When I go to the
Design tab and grab the pink loading bar and just move it all the way
over to the top. And this is where
we're going to combine the delay function that
we just learned about. So we select the
whole prototype, the whole artboard, click and drag it over to the
loading part here. And again, we don't want tap, we want after delay. And let's do a small delay. Let's do about 100 milliseconds. And we want the smart animate, but we want a longer ease
in or longer delay to it. So let's do, let's do 20 thousand milliseconds
to seconds. So two seconds sort
of load state. Let's go press the Play button. And you should see
that interaction here. We haven't defined anything
to happen after this screen. So all you should see is
just the loading happening. So again, we took in the
beginning screen here. We've set it to do a really quick with a less than a second, it will load to this screen. And then it does the soft
delay and transitions the pink rectangle from the beginning of that
screen to the ants. So that's the smart animation, the Smart Animate
doing its magic. And the same thing. We want to go ahead and
look at the screen here. And we want to drag
this over here. And a same deal we
want after delay, very slow or very quick
delay, so 100 milliseconds. And we can do a smart
animate as well. And so you'll see now
when you start this at, then loads the San Francisco map with the title bar at the top and the nav bar at the bottom. Okay, but let's
have some fun here. So if you remember in
the last prototype here, you'll see a delay, you'll see a transition. How the title bar
there transition down. It slid down like that. That's a pretty cool transition where you can see
the one that we've done. It hasn't done that. It just loads the map and you can see how
it dissolves in. So let's go ahead and create
a transition state for this. This is a little hack
that you can use. So again, we have after delay, we have smart animate. And what we wanna do is
we want to first grab the title bar section
here in this screen. And let's place it onto
the loading screen here. And let's also grab
this navbar section, and let's place it
into this screen. So Command V, so I'm
just pressing Command C. When I have these elements, selecting the art
board at the top here, and pressing Command
V. Now I'm going to select this graphic
element here, the nav bar or the title bar. I'm a hold Shift
and I'm going to arrow up and just move
it out of the way. You can't even see it
becomes hard to select it. You know, it's there
when you click and drag your selection. And I'm going to do
the same thing for the navigation bar
at the bottom. And then just move it out of the way so you can
see it's still there. So what we're saying
to tell Figma is that on the next screen with
the smart animate, recognize these two shapes
and move this shape down to transition into position over here
on the map screen. Okay, Let's go look
at that prototype. See how it's laid in like that little bit of
a slow transition. But I think now we're just cool. Very nice. All right, So a little hack there on
the smart animate function. Okay, Let's go look at
some hover real quick and some pressing transitions. So on the prototype, so pretty much hover. You hover your mouse over
it, you'd see the dot. There is no hover
and mobile devices. So this is just for you to see how hover works
as a prototype. You'd only use this for desktop websites and
desktop application design. But you can see it
here and learned here. The next thing we're
going to do here is a pressing interaction, which I'll show you here
and we'll get into it. And this works really
well for four graphs. So you can see I have a
graph here and I want to press or scrub this graph. And when I tap and hold, I see the details for 2016. So let's say we're
measuring hugs here. There was 513 hugs in 2016. That's pretty awesome. It means you've got
more than a hug a day. And he could just how this would work when you add
engineer this is you can just scrub
your finger across the graph and be able to see the details at each one
of these levels here. All right, Let's go
back to the file. Let's grab the start point over to the one
that says you do. Very easy here. Just select the
circle over here. Keep it on Smart Animate, white instead of on tap, we want while hovering. Go into the prototype. And you can see when
your mouse enters it, it changes color a little
bit too slow of a delay. So let's go look at
that delay here. Yes, so 200 milliseconds, let's change it back over to
just 300 milliseconds here. So 3 000 MS. Close it, and now we should have
a good hover state. Okay, That feels good. Let's move on over
to the graph screen here and learn how to do
The Press state here. So what I'm gonna do is
take this art board here. And again I'm holding option. I'm going to click and drag, copy this screen here. While I'm in the Prototype tab, see that says flow
starting point, press Minus to delete
the starting point. So that way it starts
on this screen. And then when I'm going
to copy over the 513, hugs here, just click and drag. I'm going to group it Command G, just so it's all in one shape. So we have it here. I'm going to paste it in place. And now we're going to select, just click and drag. I'm gonna hold shift
on my keyboard. And I'm going to select the, pretty much all the bars
except for the one that we're, that we want to
highlight when we scrub. And I'm going to
make these all 30 percent opacity.
So they go away. We're going to do the
same thing for the dates. Let's grab everything but 2016, Let's make these 30 percent
opacity on the layer within the Design tab.
And we're looking good. Okay? And so what we wanna do here
is you can do two things. You can select the 2016 bar and you can do the prototype
straight from here. Or you can make a
larger tap area. So I'm going to
grab a rectangle. You can also use the quick
key on the keyboard is r. I'm going to make a rectangle
that's just a little bit bigger for the 2016, just so there's a
larger tap space. And now I'm going to drag
this rectangle over to the, to the art board where
we have the 513 hugs. And the prototype function
for this is not on tap, but we want while pressing. And we don't need to do smart animate which do a dissolve. So it's just a kind of a delay, a little bit of a delay. And let's go back to
the Design tab here. Now that we know this gray area is the prototype target
for the next screen, Let's go ahead and turn it to 0% opacity on the
pass-through layer. And now we should see
that interaction. Go ahead and press Play, go over to your prototype, and then just click
and hold 2016. And you'll see that
one area highlight. And when you let go the mouse, you'll see a unhighlight. So state, same thing if you
open this up on the Figma. If you download Figma on
your phone and you log in, you can see the same. You can test the
prototypes on your phone. And this will be the same
as you putting your finger down and tapping and
holding with your finger, you would see the top
level 513 hug show up. And then when you let
go of your finger, you'll see it go back to this
state. Okay, pretty simple. Let's go into a little bit more of a complicated interaction, which is horizontal
swiping, sombody, I just dragged the
start area over to the horizontal
swiping area, art board. I'm going to press play. And so here's what we're
going to build out, which is if you swipe
in these cards here, you can see there's
horizontal swiping. You have the Food 1, 2 as well. Okay, it looks
pretty complicated, but it's actually
pretty simple here. We're just gonna do one,
we'll do the animals. So go ahead and drag
the start section over to the art board
that says you do. And you can see I
have a whole set of cards here for each animal. And one of the cool plug-ins that I use to get
all these photos. Let's say I have a
bunch of squares here. Is I can go to a plugin. It is called Content
real or Unsplash. Let's go look at Unsplash. And Unsplash will give me
a bunch of random photos. So let's say I
want animals here. It will populate all of these rectangles
here with photos. I can do art. Populate with art. So it's an easy way to get, just get a bunch of free photos that you
can have in Figma. And if you triple
click into them, you can see from the Design tab, you can crop them a little
bit if you want to. I'm going to go
from failed to crop and you can see how
crops it for you to fit. Okay, a little pro tip, but let's go ahead and
start building out the horizontal
swiping for the animals. So when he clicked and
swipe left or right. So the first thing we
wanna do here is whatever elements that we want to
make horizontal swipe, move them out of your art board. So I've already
did that for you, but just start with the
elements that you want to create that are behind
the screen here, but get them all laid
out in front of you. Like put all the chess
pieces on the board per say. Well we wanna do
is we want to also select each one of
these and group it. So I'm going to select this one. I'm going to Command
G or Control G. You can also right-click
and say group. So if these were ungrouped here, it would look
something like this. Then I would right-click
and I would go over here to group selection or Command G. So I've already
grouped these for you, but just making sure that
they're all grouped here, just so they're
easily selectable. And now let's
select all of them. I'm gonna click and drag
to select all of these. And then here's what's
really important. I'm going to right-click
on these and I'm going to frame
this selection. So again, select all of
these really important here. Right-click. Frame the selection and you can see on the menu, on the layers here I have
all of these groups. And when I right-click and
I go to frame selection, you'll see it's framing. It grouped all of these
images into a frame here. And you can call what's
called this one animals. So I have a frame here called
animals that has all of the images and the cards that we just created and
grouped in each one. So if I want to
select the bear here, if I want to select the tiger. Okay, So now we're gonna
do is we're going to drag this art board. So I'm going to
click the animals, make sure you have the
artboard layer selected. I'm going to drag it
into this art board. And he know it's
in the art board because it will highlight blue. So make sure it's
in the art board. One of the ways that tests
this as select the artboard here and move it
or move it around. If these don't move, sometimes it will
look like this. You won't have it
in the art board. It will look like
it's in the artboard. But when you move
this art board, oops, Try it again. Okay, So yeah, it
will look like this. And then when you
move the artboard, you'll notice, oh wait, these are these are
in the art board, which would also
mean they didn't show up in your prototype to. So again, just make sure
that your art board here, this layer is inside of
the animal art board here. So you can see right
here, I didn't, it's not in the art board yet. Someone hit command C. I'm going to select
the artboard. I'm going to paste it inside. So now when I move
it and you can see how it's, it's there. Okay, so here's the key piece to make this horizontal scroll. So select the animal frame here. So in your layers palette, just select the animals. And what we wanna do is we
want to hold command from the right here and drag and sort of crop in
this frame direction. This is really important. So again, if you're
clicking and dragging in it and it looks like this, you don't have the
artboard layer selected. So again, go back and select
where it says the animals on the art board level
and hold Command. And drag this in just to
the right of the art board. And we can still see
all of the photos here. So what we wanna do here
is on the Design tab here, the top right, where
it says Clip content. Go ahead and click that. And what's going to
be, it's going to clip the content from where we drag this arm here. So it's clipping the art board. So we're almost cropping
this frame here. And we're allowing
the clip content to clip that content
so we don't see it. It's also a good
idea to make sure to a little bit more space on the bottom and on the
top of this cropping. So that way the shadow comes in. And also move this line here
all the way to the left. That's really important.
I'll show you why I'll do two options where it's not and
you'll see the difference. So we're pretty much done. We're ready to make
this prototype and make this frame
a horizontal swipe. So all we, it's very simple. All we need to do is go
to prototype here and see where it says overflow,
overflow scrolling. Just do horizontal scrolling. And now let's go look. You should have the
horizontal scrolling. So if you tap and click, you'll see the cards
moving in this direction. Okay, And so the reason why to pull the art board
out all the way to the left is so
the images look like they scroll beyond the device. So I'm going to not do that.
I'm gonna do it halfway. Let's just say here. And you can see what
happens, see how they, they don't scroll all the way over to the
end of the device. It looks odd. It's
like it's going into a blink, blink land. So what we wanna do
here is I always make sure that it's all
the way to the end of our airport to make it
look like it's going right to the end where
the device lives. Cool. There you go. There's
horizontal scrolling. Let's go do vertical
scrolling here, which is pretty much the
same technique. Very simple. So again, we have the
top-level navigation here. And it's the same idea, it's
just the cards scroll here. So let's go ahead and
move this start one over to the art board to the
right that says you do. Again, I have all of
these selected here. And again, just make sure
each one is grouped. I'm just going through
command G on all of these, making sure they're all grouped. And I get, I'm going to
select all of them at once. Very, very important. Go ahead and frame
this selection. Now we can know by looking at the layers on the left
that it was a frame. Let's name this
one animals again. And we can see when we select the animal framing
on the left that there's all of the
groups and then the cards within it.
Same kind of deal. We're going to
come in, drag this into the art board here, go to the bottom
and hold Command. Slide this all the way up. Go back over to the design tab and remember clip this content. Now we can see the
contents being clipped. And again, we're going
to add some space to the left at some
space to the right. And we want it to come in just where the beginning
of that menu is. So it looks like it's scrolling
underneath that menu. And now that we've done
that, we're good to go. We can go to prototype, we can do know scrolling, and we can do
vertical scrolling. And now if we press Play, you'll see here same function. Okay, cool. So let's go look at combining
both of those to make a really cool looking
map interaction. So you can go ahead and grab the start label and drag that over to where it says vertical and horizontal swiping. And I'm going to
show you the example here in the prototype. So you have a map and
you can see with both of those vertical and horizontal
swiping capabilities. And makes for a really
great map interaction where you're clicking
and swiping. Very simple again. So let's go ahead and pull
the start one over to you. Do I have this big
map image here? All you gotta do is
just drag this into this file and you can
see how it's still a big image is going to
be cropped a little bit. That's good, That's
what we want. But same deal that
we did with all of the card level pages. We want to go ahead since
this is one element, we don't need a group it. But let's go ahead and
right-click on it. And let's frame this selection. Okay, So you can see now on
the left we have a frame, let's call it map. And inside of this map
we have the image. Let's go back and select
the frame level here. So make sure that
you're on the frame, not the MAP, MAP cycle
map, image, the frame. And let's do the same thing. Hold Command, drag
this in to the left. Pull command, drag it
in from the right. This is really important. You do this or outs the vertical and horizontal
swiping won't work. So we're pretty much
masking this image here. So if you looked at, if
I pulled this back out, you don't need to do this,
but if I pull this back out, you can see here that
we still have the map, we have the framing. We haven't done the
clip content yet. So if the clip, the
content looks like that. But you can see the frame here. We framed up the map. So all we need to do now is
go back into this art board. Make sure you select on
the left layers here, we select the map, do the clip content. So again, I'm on just
the map art board, not the entire
artboard, just the map. You can see I can even click it, clipping a little bit lower from the menu here is fine as well. That'll be the same interaction. Go ahead and go to Prototype. Got a scrolling. So I get, I'm selecting just the map frame
here on the left. I've done prototype. And let's go do horizontal
and vertical scrolling. And now if we go to
the Play button, yours should look
something like this. Alright, that was pretty fun. Hope you got a lot
out of that video. And on the next video here we're going to learn
some scroll two functions, component variates
and will map up. We'll wrap up with the
interactive components. Thanks. See you soon.
13. Bonus Video 4 - Scroll to, Variants and Interactive Components: Before the last video in
the bonus video sections, we'll cover the
scroll to function the component variants and the interactive
components, right? So let's get back
into the file here. And we just wrapped up with
the mapping and showing the vertical and
horizontal swiping to look like this in the demo. Now let's go ahead and
drag this start area over to where it says
Tap to scroll down. And you'll see here if I, I'm gonna go ahead and show
this in the prototype, I'm going to press
the play here. And what this is,
you can swipe down, see all the rest of the content. But what we're gonna
do is we're going to create something where if you tap on this card or you
tap on any section, it's going to scroll the
user down to this section in which you define,
usually more common. You'll see this in websites when you scroll
at the very bottom. And there's a button
that says like an arrow here that says
scroll back up to the top. You'll see that as the
same interaction here. And we can even build
that here on this, on this for a quick second. Okay, So pretty much
let's go ahead and grab the start anchor label over
to the prototype here. It's a very, very
simple interactions. So we have these
four cards here. If you press play
in the prototype, it just swipe says normal. There's no interaction here. I'm clicking on this
cart, nothing happens. And all we need to
do here is within the art board itself is, I'm going to click on this card. How much ragged usually we drag these prototypes to
add their frames. In this case, I'm
going to drag it to another card within
the same prototype, say this section here. And it already knows on tap, scroll to, it will
default to that. And it has instant. We
don't want instant. But I'm going to show
you what instant looks like just so
you can avoid it. Okay, so here we tap on the card and you see a instantly
takes the user here, but there was no transition. So we want to have that
transition come in. So instead of in-state,
we want animate. And animate will smoothly
scroll the user to that point. So let's go ahead and
click on the card again. And you can see it goes back to the cart here at the
top or the bottom. So see that scrolling
it nicely scroll down. You don't want it to be
too long of a scroll. Let's go ahead and say like
20, 1000 milliseconds here. That's probably too slow. You can see how slow that is. We want a fast, smooth one. So maybe even 500 milliseconds will be just
probably good enough. There you go. Nice ease transition there. And then let's go ahead and grab the arrow here where
it says you do. I'm going to just copy that. I'm going to rotate it. I'm a downsize it a little bit. And I'm going to place this
at the bottom right here. And we can do the
same thing here. We can prototype
this arrow to take you back up to the card here. Same function, Alan,
tap, scroll to animate. And now you can see here
we'll go to the bottom. If I click the arrow, takes me back up to the top. And you can see it's
still has a little bit of room card underneath. So what we could do
here is let's move this arrow all the way to the top. We can actually group the
top bar section here. I'm going to create a frame. When a crop it
just a little bit. Alright, and grab the prototype. And let's just pull
it all the way to the top of this section here. Now let's see what happens. There. You go back
into position. So I didn't hide the
cart like it did before. Cool. That's pretty much
a scroll to function. You can use this for mobile, you can use it for web, but it's most commonly
used for either moving down to section
per section or scrolling, or getting the user all the way back up to the top without having them have to like swipe all the way and keep swiping. Alright, now let's go
look a little bit at components and the component variants and
interactive components. So this is one of the
newest features that came out of Figma recently. And you base up the last set
of videos in the course, you should know how to make
a component and what this is allowing us to do here
I'm going to demo this page. It's allowing us in one screen to select
all the variations. Let's say I wanted to select
my different flavor here and allowing us to do all
of these variations in one. Screen here, and that's called component
interactive components, but it also uses
a feature called component variances
are variants as well. And so how did we used
to have to do this? Uh, kinda look like this. You got to prototype all of these different interactions and possible cases for
the user to click on. And so now we got
to solve all of that with just one screen here. So let's go look at
a variant first, and then we'll look
at component variance or interactive components. So if we go to the
component library here, see I have a checkbox
system here. So let's make a
component very first, let's copy both of the silver because we're
going to need them. So just select those two. Go to Command C. I'm going to zoom out a
little bit and let's just go to the top
here and paste these. So these are already
components because you can see how when I click
them, they're purple. Let's select both of these. Let's right-click on them. And let's do detach instance. So again, select both
of these right-click, do detach instance. That's going to detach
it from the component. Now you can see that they're they're blue outlines
versus purple, which means they're not
related to components anymore. They're sort of one-offs. So let's start with the
first checkbox here. Let's say, let's change
this stroke over it. Let's just make
it a pink stroke. And let's change this text
to a darker texts like this. So again, I just
selected the color here, changed it over to pink. Selected, yes. And I selected a color
from our library. If you don't have the
colors, Just detach. So I detach the color here. You can see if you hover over, it says detach style. And I can make any color I want. You can do black here. So that's that maybe
just to black. Okay, so what we first
wanna do is say this is a good component we want to use. Or you want to reuse this
checkbox eventually. So let's right-click on it. And let's go ahead and
make this a component. You can press Create
component here. You can also do that by clicking
this little for diamond, like Foursquare diamond
icon at the top. And it will do the same thing. It will create a component. Now what we wanna do
here is if you can see on the very right, we have a, when selecting
this component, we have a feature
called variance. Let's go ahead and press
Plus on that variant. And it's going to duplicate the checkbox here that we have. And let's call this one active. So we have one that's
already default, that's prepopulated
for the label that was already labeled
earlier in the file. But this new one, we
changed it to active. And let's go ahead
and say this is no. And now what we wanna do is select some a
triple-click until I get to the fill or the
just the rectangle. So triple-click,
got the rectangle. I'm gonna go over to
the fill, press plus. And I'm going to grab that
pink and make it filled. And then I'm going to
copy this checkbox. I'm going to hold Option. And I'm going to drag it
into this component here, so I don't need
this one anymore. Okay, So now what we can do, we have these two
components set. We can go back over to our mobile transition
layer here on the pages. And we can drag these
components into the file. So if we go to Assets, you'll see all the local
components that were in that page layer called
component library here. And you'll see the new ones
that we made because we made them with a darker color here. So you see where it says yes. Let's drag that in here. And what you could do at this point when
you're designing is, let's say, I'm going
to make this screen. I'm a delete all of these here. Let's go grab a new one. Let's make the background here just a little lighter so we can see the, let's
just go white. And we'll change this
over to a darker color. There you go. Okay, So when working
with components, we have the default
section of this component. But let's say I want to
prototype this over. And I want to make this
one the selected state. You could do here, click the Yes icon and you'll
see the component area. So I have the yes,
drop our checkbox. You'll see here it has
the component area. Make sure you're
on the Design tab, not the Prototype tab
on the Design tab. See where it says
checkbox default. And this little drop-down
has the variant. So I can easily say I want to actually switch this
to the active state. And it will change it
automatically to the active state. And you can add as many
variances you want. So you can see here
when I click on the No, and I'm gonna click
it back over here. And we load this up. One-click changes it to know. Another. Quick changes it to yes. So that's pretty much
variance in a nutshell. But figma has launched an even better feature which is interactive components now, which before I'm going to drag the start level
over to this screens. So before interactive
components, if we wanted an interaction, say for a function in which you choose your gender and you either select
male or female. Let's say you want
to do female and you wanted the user to
have a hover state. You'd actually have to create another screen for
the hover state. And let's say there
was a selected state. You'd actually have to create another screen here for
the selected state. So I already have
this prototyped. So before interactive
components, this is what we'd have to do. We have three screens
to make it look very streamlined and seamless. Like I hover over
the female again, there's no hover on mobile, but let's say this was for web and you click and
there's an active state. Quite so three states
of this button all takes three
different screens to get that interaction. So now with interactive
components, which we'll build out
here in a second, we can get one screen
that does it all. If I click off of
it goes back over. So let's go ahead
and build that. So if we go over to the section here
where it says normal, Let's grab this button here. So I'm going to grab it. I'm going to Command G. Just go ahead and group it. So let's go ahead and grab this. Let's go back over to our
layers here at the top. Make sure you can
see your pages here. Sometimes you won't see it because this isn't the
way but pull this down, pull your layers
down if you need to. Let's go over to our
component library. And you can see I've
already built this out, so you can see how it works, but let's go ahead
and do this together. So in the same area where we
build out our checkboxes, let's place command V if you're on a Mac or Control
V if you're on a PC, PC, Let's place
this female button here or this selection
button here. And now let's get the
different states go in and start to work with the
interactive components. So let's go ahead and make sure we're grouped it command G. Let's right-click on it. Let's make it a component. So let's create a component. And let's go ahead and look
back at our Design tab. And let's make sure
we call this one. So in the top frame here, I'm going to go triple-click
in my layers on the left. Call this one the default state. Just so I know when
I selected that, that's the default
state and named it. Let's go ahead and select
the component here. And let's add the variant. So what's add the
first variant here? And let's call this
one the hover state. All right, and then
you can see I've already grouped this
selection here, so let's triple-click
until we get, make sure we're on
the Design tab. So moved from the prototype
to the design tab. Triple-click until we just
have the rectangle selected. So we don't want to
have the female, the icon here for female, just the rectangle and where it says stroke
on the right hand, for the right-hand panel
where it says design, let's add a stroke. It defaults to one pixel. I'm a fan of keeping
your strokes thick. I usually never do
one pixel strokes. Either 23, most cases three
or four is more common. Just to make it very present, presentable and an apparent. So one sometimes can
look like a mistake, like it's too thin, it doesn't look like it's an
intentional stroke. So let's be intentional,
let's say four. And let's go ahead and make
this the pink outline here. Okay, So now if we go back
and select all of the, this component with all
the variants in it. So see where it
says Default State. You'll see it has the property
one default hover state. And it has very, has its own variant section. At this point you'll
see the three little menu options here, the three little dots
in the variance. This is important. Because this is where we
can add more variance. So we add one more new variant. And it will add it
to the bottom here. And let's call this
the selected state. And again, I'm going to
select just the background. So triple-click and Thai
get that background. Let's make the whole
background pink. Let's grab the icon here. Let's make it white. And let's change the text
from black to white. Okay, So right now we have three different buttons
that we could use. I'm gonna go back to the
mobile transition layer here and go into the assets. And we have this button
here that we've created. And it has the
different variances in hover state, selected state. But we haven't met, prototype them yet to
be interactable, right? We just have the variance set. So let's go back over to
our component library. And what we can do
now is we can set prototype features
within a component. It sounds crazy, but
it's very, very easy. And everything that we just did, we're going to apply but
just to the buttons. So let's go ahead and make
sure these are all grouped. So we group them before. Select the default
state of the variance. So you see you're on default and now go to the Prototype tab. And now you can prototype
within components. So let's go ahead and drag this prototype arrow over here. And let's say onclick is fine. Actually what's make
this one while hovering? It goes to the hover state. And let's not do instant,
Let's do dissolve, let's say 300 milliseconds here. So again, I took the top one, I dragged it over to the
one that has the stroke. And instead of saying onclick, I've done while hovering. And now we're going
to do the same one with the one that
is the hover state. We're going to click that one. Go over to the selected state. And we want this one to be onclick and dissolve
will work great. And then we also want somebody
to click off of this, the user to click
off of the selected one and take you back over
to the default state. We want onclick and
we want dissolve. Okay, so let's delete this one. Let's go ahead and
copy this page here. Actually don't even
need to copy it. Let's, let's delete
this button here. Let's go over to
our asset library if all our component buttons. And you can see the one here
that says default state. When we just made. And you know, it's one
we just made because it has the default, the hover state and
the selected state. When we go to the Design tab and look at the
different variants. And now let's go press Play. And you'll see just on
the prototype alone, the component, interactive
component variance at play. So there's the default state. If you hover, you get that
transition to just the stroke. And if you click on it, we get the selected state. And if you click off of
this selected state, you can see it goes back
to the default state. So again, that's pretty much taking the prototyping
that we've done here within this component
variant, selection. And applying those
prototypes into just one component for those
different interactions. It's been a feature I've
been waiting for forever. Again, cause it to get to show these type
of interactions. It takes so many screens like it does get this screen here. This is what it looked
like for a couple years. So it's really great that
figma has introduced this type of feature
and it's a time saver. It's less screens
for us to manage and it's really easy to set up. And you can set that up for
pretty much everything. You can do your
buttons styles here. You can see on this one
I've created buttons here. And if you prototype
this button over here, That's the hover state. So you have the hover
state for this button. And so if we went back over to our file here and we
went into our assets, and we drag this button
over here, press Play. You can see it has the
darker black hover state. And again it's, it's a button. So what we could do is we
kid or it's a component. So what's the great thing
about the component is I can use all these
different buttons here. I can say this one is save. This one is next. This one is cancel. This one is awesome. And this one is lovely. And I can go back
over to my layers. I can go to my components. Let's say I don't
want pink anymore. I want to change this
color to the blue. And I want to change
this hover to say, a lighter gray here. And now when we go
back to our board, you'll see all of
the versions of that button change to the blue. And now we go and look
at the hover state. You can see it's
changed too as well, so it updates all of the different instances are children of that
master component, all in one swoop, in one edit. Okay, There you have it. That's the end of all
the bonus videos. As always, thank you so much
for taking the classes. I have a couple new
classes coming out soon that I will reach out and let everybody know
when they launch. And as always, have fun designing and wish
you the best. Bye.
Aaron Lawrence, UX Instructor & Product Designer in SF
