How to design & prototype a Mobile UI/UX Design Experience using Figma design tool - Learn Figma | Aaron Lawrence | Skillshare

How to design & prototype a Mobile UI/UX Design Experience using Figma design tool - Learn Figma

Aaron Lawrence, UX Instructor & Product Designer in SF

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
9 Lessons (5h 48m)
    • 1. 1 Introduction video

      4:55
    • 2. Class intro to figma & Download the class file

      33:19
    • 3. Designing the login & sign up screens + component creation, prototyping & smart animate

      88:10
    • 4. Designing the shopping experience

      90:11
    • 5. Designing the checkout experience

      61:14
    • 6. Designing the profile screens

      25:52
    • 7. Collaborating with others & exporting UI assets for engineering

      16:01
    • 8. Keyboard shortcuts+plugins+GUI kits

      20:56
    • 9. Commenting & final thoughts

      7:12
104 students are watching this class

About This Class

In this class I have created a figma file for you to download and I will walk you through step-by-step, how to create a fully-functional prototype using the design tool Figma. Here is the class agenda:

1. Intro to Figma design tool & file walkthrough
2. How to design a login & signup experience
3. How to design a shopping experience
4. How to design checkout experience
5. How to design profile & order history screens
6. How to create & use a component library
7. How to create & share a clickable prototype + smart animate and other transition effects
8. How to invite others & collaboration in figma
9. How to export UI assets & inspect code for engineering
10. Figma keyboard short cuts
11. How to use figma plugins & GUI Kits
12. How to create comments & review comments in figma
13. Final thoughts & going forward

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.