Learn Figma: Design a Web App UI | Nima Tahami | Skillshare

Learn Figma: Design a Web App UI

Nima Tahami, Entrepreneur & Graphic Designer

Learn Figma: Design a Web App UI

Nima Tahami, Entrepreneur & Graphic Designer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
10 Lessons (49m)
    • 1. Introduction

      1:30
    • 2. Project Outline

      2:24
    • 3. Starting with a Template

      5:17
    • 4. Login Page

      8:45
    • 5. Image Masks

      2:28
    • 6. Dashboard Page

      9:07
    • 7. Auto-Layout

      8:18
    • 8. Adding Sample Data

      7:44
    • 9. Version History

      2:00
    • 10. What's Next?

      1:52
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

170

Students

1

Project

About This Class

You will learn how to create beautiful web app user interfaces with one of the most powerful free design tools, called Figma.

What's Figma? Figma is a leading design software, helping teams and individuals create designs faster and more efficiently. Figma is free and you can use it right on your web browser, on Mac and Windows.

What sort of project will we be designing? In this course, we'll use Figma to create a beautiful and simple web app mockup for laundry store clients to browse their orders for a laundry delivery service. As we go through designing the 3-Page Web Mockup, we'll go over some of the most useful tools that Figma gives you:

  • Setting up a Figma file from a Client Brief/Requirement
  • Learn how to apply Images & create Image Masks
  • Applying a Color Scheme to our designs.
  • Using Components for faster design experience.
  • How to use Plugins in Figma to fill our designs with sample data using Microsoft's Content Reel plugin.
  • Using Auto-layout to build responsive and replicable designs.
  • Learn how to create multiple versions of our project and refer back to old designs using Version History in Figma.

Is this course for you?

You're in the right place if any of these apply to you:

  • You’re interested in user interface & user experience design (UI/UX) but not sure where to start.

  • You’re an entrepreneur with an app idea and want to turn your idea from a sketch to a realistic mockup and prototype.

  • You want to brush up your design skills to get the job that you want at companies like Airbnb, Google, Apple, etc.

  • You’re already designing and want to jump into Figma and take your designs to the next level.

  • You’re interested in earning income as a freelance designer.

  • You simply want to enter a new career path, and graphic design has interested you.

Never used Figma before? 

No problem! If this is your first time using Figma, it's recommended that you first check out the Introduction to Figma course before taking this course (optional step):

Want to also learn Mobile UI/UX?

In the Mobile UI/UX course with Figma, you'll learn how to create a customer-facing side mobile app mockup for Clean Kangaroo. This app will let users place a laundry service request and much more. Check that out here as well:

About your instructor:

This course is taught by entrepreneur & designer Nima Tahami. Nima has more than 10 years of experience designing and developing dozens of mobile & web apps for both clients and startups of his own. Nima's current startup, ShiftRide, has been covered in many news outlets, including Forbes, where his app was highlighted for its ease of use.

Nima has created this course to help people become the best designer they can be. Design is part of the foundation of many things from great products & websites to great advertisements and everything in between. Nima has also designed and developed an open-source iPhone development library by the name of FCAlertView, helping 350,000+ app developers use beautiful customizable alert prompts within their applications.

Meet Your Teacher

Teacher Profile Image

Nima Tahami

Entrepreneur & Graphic Designer

Teacher

Hello, I'm Nima. I'm a design instructor with more than 10 years of experience designing and developing dozens of mobile & web apps for both clients and startups of my own. My current startup, ShiftRide, has been covered in many news outlets, including Forbes, where my app was highlighted for its ease of use.

 

I teach online to help people become the best designer they can be. Design is the foundation of all great products, websites, advertisements, and everything in between. I've also designed and developed an open-source iPhone development library by the name of FCAlertView, helping thousands of app developers use beautiful customizable alert prompts within their applications.

 

Joi... See full profile

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Your creative journey starts here.

  • Unlimited access to every class
  • Supportive online creative community
  • Learn offline with Skillshare’s app

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

phone

Transcripts

1. Introduction: Welcome to the Web design course with Sigma and this course we're gonna learn how to design a simple Web application for laundry delivery service. If you've taken a previous course, we worked out a mobile version for this as well. And so in this course, we're gonna be working on the Web application for it high. My name is Nina, and I'm your instructor for this course. Over the last 10 years, I've designed and developed both mobile and Web obligations for both start ups in my own and other clients projects. By the end of this course, your learned how to design a beautiful Web dashboard application for businesses or clients , or maybe even for your own products as well. What we designed. The three page markup where else will learn how to import templates into Sigma. How to use image masked for our images will be learning how components can help us make the design process a lot faster. Will also be learning how to use auto layout, which we can use to create beautiful, intuitive designs that we can replicate really fast, even used Microsoft's content. Rio plug in right within Sigma to generate some sample data for our project. Last but not least, will learn how we can create multiple versions of our project and use version history right within Sigma to be able to browse all the different versions of our designs. So if you're ready to learn how to design a beautiful, simple rubber application using Sigma, jump right in and I'll see you in this course. 2. Project Outline: all right. So so far we've built a mock up for a mobile app. A complete markup with seven pages. Ah, and now our clients given us a new project to work on, and this time it looks like it's going to be a Web application. Ah, for their laundry stores to actually browse their service requests from the customers. And then from there, they can accept or decline these requests and then change their status. Or last markup allowed customers for this clean kangaroo company to actually be able to send a request to have their laundry picked up, taken to the laundry store and then delivered back to them fresh and clean. And so it looks like now they want kind of a dashboard or Web dashboard for their laundry stores to be able to use, which completely makes sense. And, of course, we want to make a Web app that's responsive. So if the if the client or the laundry store opens it up on their mobile device, it still looks good. Um, we need to come up with the color scheme, so we've already come up with a color scheme for last projects that we will apply our color scheme and it also our funds to the project as well. And of course, we can use the logo for this project as well. Right now, we're just really interested in the pages required for now. So we want to sign up, slash log in page and then sign up. Options will be emailing passport and signing with Google, similar to our mobile app. We want a dashboard to see their earnings and stats from the up makes sense. So this is again for the laundry stores to see how much money they've made through Clean Kangaroo and then they're saying that a graph here would be nice. So we're gonna go ahead and find them a graph to use as low. And then lastly, it pays to show all their service request with the option to choose to change their status of each request to give the customer informed eso. If you remember in our mobile app design, we had a little status on the services and that showed what step there laundry service was at. So that's controlled by the store, like the laundry store here, um, going through this page and changing the status of each order or each request that comes in . So yeah, pretty simple and straightforward. Well, application sign up page, a dashboard page and a service I request page. So now that we know a lot of the concepts and tools we have access to in fig MMA, I think designing these three pages will be super easy. And in the next lesson, we're gonna jump in and start setting up with a template. Ah, and going from there. 3. Starting with a Template: All right, so I think we're ready to get started with our new project here. One thing I'm going to mention is that we're not going to spend as much time going through very specific details in this on this project just because we covered pretty much everything in the last few sections. So we're going to spend this section really getting down to putting together mockup for Rob application Super fast eso, in order to help without. What I've done is that I've put together a little template file on have used a bunch of other templates which you can find from this templates used a dot Txt. So this first link here is a link to material designs fig MMA template they can use this one's a free version. So it includes a bunch of elements and designs that you can use this one's free charts for fig MMA. Ah, that you can go and use as well, and that gives you nice looking charts inside of your figure out designs. So I've already gone ahead and downloaded these and then place them inside of this clean kangaroo web template that you can use. And it has a bunch of stuff inside as well that we're going to explore eso in order to add this to your project or your fig MMA First, I'm gonna head to my clean kangaroo team here because I do want to place this inside of a project in here. If you don't have this team where you haven't followed this step, you can also just put this file in your drafts folder as well, and that will work just fine. So I'm gonna go ahead and head on over here to new project on Let's just name this project Web app or let's do laundry store Web app. Let's create project and then let's go ahead and select Are Clean Kangaroo wept. Simply don't fit file into here Once it's imported successfully. I'm gonna go ahead and just double click to open it here and let's really quickly go over a few things in here. So there's four pages set up in here. The 1st 1 has our main three frames that were trying to design Um, the fourth page here has the requirements that we went over in the last lesson. Eso you have access to that here is low and These are the three pages that were trying to design in our Web markups page Over here, then we have styles. So I've gone ahead and actually created some styles for my text, as well as the color scheme that we use in the last lesson or in the last sections. And actually, I've added them to the local styles as well. So once you import this file, you have access to the same color styles that we added in the previous sections, as well as some textiles with our Rubicam Carla Fund. Now, if you haven't followed the last few sections, go ahead and make sure to install these funds on your local machine. And then, if you're running the fig mo web up, head on over to Google and search for fig MMA font installer and then download that so that you can use these fonts on your fig, my Web app as well. Otherwise, if you're under that stop up, you can just install those fonts and then head on over back here, and then it should work just fine. I also have a components page here where I placed were again. I used material designs, figment templates to generate a lot of these. Resource is so we have a bunch of cards here that we can use. We have a little chart here from the chart template that I told you about earlier. Um, a bunch of buttons, drop downs, text fields, even and then to kind of rose here for information and stuff. Ah, and also a little navigation dashboard as well. Now the reason that have created these and provided you with them so that we can go through putting together or mock up super fast. Um, we've already learned a lot of these concepts, including how to create components and how to reuse and change components and how to create instances from components and use them. Um, if you haven't already washed those lessons, be sure to go to the last few sections and go over components. Or if you've forgotten how they work, I encourage you to again go over those lessons as low on just kind of come up to speed with that. Yeah, well, use a lot of these components here just to make our design process a lot faster and more efficient. One cool thing that we're not going to get too much into, By the way, is that in your assets you'll find a little team library icon over here. Yes. If you were working with a team, you can actually go ahead and publish these components that you have right here for your entire team. And now, once you do select that, if you don't have the full version, it will tell you that you'll need a professional plan to use this feature. You can also just publish the style so that between your team, if they're working on multiple projects, you can use the same styles. So if I click this, the whole team kangaroo app will have access to these styles for the font. And the color is well s Oh, you can definitely publish thes styles between your teams and use them on the free plan. But if you want to also have access to all these components between multiple different projects or multiple different files within your team, definitely take advantage of the team library year. And of course, you can use all these components by just going to the assets tap, and you have access to them right here as well. These are just general components that don't have a category. These air buttons, containers view cards, so we'll definitely be using these and our mock ups here. So let's head back to rep mock ups and then in the next listen will get started designing our log in page from there. 4. Login Page: all right. So without any further ado, let's jump into designing our lugging page here. I'm just going to use set and zoom into the page right here. So what I want to do here, I want to go ahead and split this into this frame into two portions on the right side. I'll have a little image on. Then on the left side we'll have our log and panel, which will be pretty simple and straightforward. So first things first. Let's go ahead and use layout grid so we can see exactly what we're doing. Let's go ahead and click the frame, and then I've already set up a layout grit s so we can just simply turn the visibility on and use that right here. You should see this year because this is part of the template. But if you don't simply go and add a layout grid with a column type of count 12. I said the pope, a city of the color to 3% so it's easier to see everything else. Um, the type will be stretched and then margins are 60 on the sites on the gutter is 10 between the columns here, so once you've turned that on, let's go ahead and create a rectangle for maybe right over here. Let's just go ahead and make sure this is a line properly. And now we're gonna use a really cool plug in called unspool ash. So let's head on over to manage plug ins to install that. If you don't have it, simply go to browse all plug ins. Now, once this loads, you'll notice that might be the first option here. Or by the time you're watching this video, it might be somewhere else. So you can simply search on Splash in the search bar. Here is well, already have it installed, so I'm not gonna install it. But you can click this button to install it and let's head back over to our file here and then used plug in on slash. Now, if you remember, we used unspool ash in our previous log in page that we made in our mobile app. Now, this is again a free stock image resource that you can use and so they're plug in helps you insert images much more easily into your projects. S so be sure to first select your rectangle here and then head on over to search on Let's do maybe laundry store, see what comes up. Cool. So we have a bunch of options. I'm just gonna keep it simple and go with this 1st 1 here. I think it looks pretty nice. Cool. Just gonna go ahead and close that here, Uh, And now let's go ahead and just create a little divider between these two sections. So I'm creating a line and using shift to make sure it's straight and then doing a stroke color off. Let's go to our styles and choose our Let's do the secondary color here, the orange let's make the width, maybe five pixels or the thickness year. And then let's just go ahead and move this to the rights. So it's right in between our different sections here. Maybe we can bump it up to eight pixels or let's do six pixels. That looks good. So now I'm gonna just turn off my layout grade for the frame here. Ah, and so let's go ahead and create a frame for our log and panel here and keep in mind, you can always create frames inside of frames just to keep things more organized. Just go ahead and draw a frame here. Just make sure it fits this whole section here. And then we can even set up a layout. Great inside of here. Let's do. Collins has to four Colon's with a margin of 60. I got her of 10. Do 5% here just that we can align things properly. Let's first go ahead and add or logo at the top. So let's switch over to our resource Is that you should have downloaded from the last lesson. Uh, go to logo on and let's go ahead and drag this kangaroo color SPG right into here. And then while holding, shifting Ault, I'm going to go ahead and resize it while keeping its position to Let's Do 76 by 76. Should work. Just gonna go ahead and place it right over here and maybe keep a spacing of 60 from the top is low. Let's use T to create a logo text as well here, and then go ahead and assign a style or a textile of heading one and then choose ah, color style or fill style of the primary blue. Here, let's go ahead and just aligned those by selecting them together. And then let's go ahead and group them together as well. Using Command G. I'm gonna rename this to logo. Let's go ahead and add a description. Text here is row, so it's used T. But this time we're gonna actually draw a bounding box for the text right over here. Just it doesn't overflow unless do sign up to view your earnings and except laundry requests from customers. I think that that's good. Let's go ahead and unlinked this style and do heading to that looks good. And now let's go ahead and add a few buttons and fields into year. Um, so let's go ahead and choose our assets. Stab over here and then go ahead and open the components here. Let's drive the Google signing, but in here and then let's go ahead and drag a text field are actually two of them in here , one for email, one for password, and then we also need ah enabled but in as row for our log in. And then there's a divider here as well. So we're just going to separate the two different types of Loggins using this divider. So go ahead and dragged that in here is low and let's go ahead and just zoom in here and I'm properly aligned these as well and resize them perfect. You are signing with Google Button to be first here, and then let's have the divider here. Let's use the align horizontal centers, but in here, just to make sure it's aligned properly, move these down a little bit and then maybe maintain a spacing of 30 pixels here, 30 pixels with the text fields on text fields can be maybe 15 pixels from each other where we can even do 10. And let's go ahead and just put our but in here as well drag it all the way across. Let's bring it down a little bit because we want also put a forgot password. But in here yes, we can do that by just cooking tea and then type in for got password. Question mark. If it didn't automatically give you the buttons. Carla. 14 point Ah, textile. Here, go ahead and detached the cell and then select. Um, but in Carla 14 points. Let's go ahead and align it here. 2 20 pixels from here. Okay, that looks good. Let's go ahead and also duplicate this forgot passport button. Place it down here and then do terms of service and privacy policy for links here. I'm going to select the end and actually use command. Be here to unfolded. It will be controlled beyond Windows. Let's go ahead and just like that and do horizontal line and then maintain spacing off. Let's do 40 from the bottom. Let's go ahead and select this frame here and just hide or layout grid just to see what we have. I think that looks pretty good. Let's go ahead and just rename a bunch of stuff in here or change the configuration of a bunch of components in here. Uh, I'm going to jump in here, change this one to email. Let's change this one to password. And now, if we select or layers panel, we should be able to just jump in here. And then let's hide our luck frame over here so we just show the email and then do the opposite in best field and hide the mail. Perfect. We have email and password, and now we just wanna change the name of this button to log in. Let's go ahead and just a multi. Select these two buttons is Law and Change. The filled to our dark or text dark color style here as well. Perfect. I think we have a nice log in peace now and now. I hope you're starting to see the power of reusable components and how quickly we can put together a page like this that might have taken hours on other design. Software's perfect. So in our next video, we're gonna jump into our dashboard page and create a nice dashboard for our laundry stores here. 5. Image Masks: all right. So so far we've applied images to shapes by just simply dragging them into the shape or over the shape. But we haven't really explored how image masks work. So in this lesson, I'm going to show you an alternative way. Taken place images into your project. So let's say over here, instead of having my image of my background image over here inside of this rectangle, I wanna have it inside off, maybe in a lips or a circle or maybe multiple circles. Um, it's really up to you. Image masks. Really? Give us that option two, please. Images inside of another shape or multiple shapes on. I'll show you exactly how that will work. To demonstrate. I'm going to create a circle over here over my shape. I think something like this would work. And so now what I want to do is I want to place this image inside of the circle and cut everything outside of the circle essentially so that the image essentially shows inside of the circle, and it just hides everything else outside. So I'm gonna go ahead in the layers panel, drag my circle underneath my image here, Then I'm going to select them both together and do the option use as mask. And as you can see here now we've applied an image masks, so that image is simply mask. With that, let's shape over here so you can resize your circle here. If you want, move it around to choose where you want to your circle to be or even if you want multiple circles. Let's say to represent this mask, you can just go ahead and duplicate your circle like this. I just duplicated three times, So let's go ahead and select them all together and then do union selection over here. And now, if I create another mask again by making sure my union shape is below the image here and then selecting them both and hitting USA's Mask or Control command em, we'll go ahead and do the same thing. So now we have our image placed inside of this kind of unique. I use three circle shape or whatever you wanna call this here, so feel free to play around with that and see how you like to present your image in your projects. For now, I'm just gonna go ahead and delete this union and just drag that image outside of my group . And so now I'm back to what I had before. So that's how image mastery cool. 6. Dashboard Page: All right. So with our log in page put together, we can now move on to our second page here, which is the dashboard page. Um, so we want to include a bunch of stuff in here, such as the revenues for that laundry store, um, as Bella's. Maybe show them a list of some of their customers and how many items they've or or Hominy laundry orders. They pleased. And things like that we could definitely add a bunch of other stuff like their ratings. By the same time, I want to keep this page simple just for the simplicity of this section Over here. We don't want to go too much in detail, but feel free to do so yourself if you want to add more to this dashboard patient. So if we now switch over to our assets tab over here, um, first thing we want to do is go up to components, and then you should be able to find this navigation component over here. And let's go ahead and just drag one instance. And here and let's just go ahead and align it on the left. Let me see if I got that right. Perfect left on at the top. It looks good now by default have already changed the background color of these frames to this color right here. So if yours is not set to those colors, go ahead and set it here. This is just a bit of stylings or background is in plain white, and it adds a bit of just a bit of contrast between different elements, like my navigation here in the background. So yet, with our navigation panel added here, um, the dashboard option has already selected in this one, so we don't have to make any changes here. So let's go ahead and just get started creating our dashboard page here. So first thing I want to do, it's like tea and right dashboard just to tell them we're on the dashboard page. And then let's go ahead and unlinked that textile and add a heading one. Let's change the Phil to text dark color style. Let's just go ahead and maybe move this up and align it somewhere over here and maybe maintain spacing off astute 50 pixels from here. So in our components, we also have containers, so let's go ahead and drag a big container onto our frame here. Let's go ahead and also drag a small container. We'll use this big container to hold, or maybe revenue charts and stuff like that. And then this one to maybe show some of the recent customers for this laundry store here. So let's go ahead and just a line does. Hey, here. That's maintain a spacing of 50 and then between each other. Let's maintain spacing off 30. Maybe. I think that's pretty good again. You can definitely use layout grits here to make your job a little bit easier when you're lining stuff. But for now, I'm gonna focus on just creating this design. Perfect. So now let's go ahead and also grab some view cards from here. Um, let's do the first option right here, where you place it over here with the spacing of 30 pixels from the top, just as a reminder showing that spacing between different elements using Ault. So if you hold all for the option key, you can see what while having an object or a shape selected, you can see the spacing with any object that you hover over. Just a little reminder in case you forgot how to do that. It's very handy. Cool. So let's go ahead and add another one here. Maybe a selected one now. And do you spacing of 30 again between this and again as we learn And ux consistency is key . We don't want to add ah, spacing that looks to off compared to everything else. So that's why we're using a consistent spacing here. Let's go ahead and use Ault and drag another instance of this UN selected or not selected option of the view card here as well. And then again, I'm just gonna double check to see that everything is aligned Perfect. Let's work our way from the top to bottom here. Um, first thing I want to go ahead and change this title to revenue perfect. And then go ahead and change this drop down text to maybe let's do monthly. So from here, maybe the user can select what term they want to see their charts in or what Lengthy. Want to browse their chart data and, um and then I'm gonna go ahead and select from my components a bar chart aslo to place it right in here. Let's go ahead and use shift here to just resize this evenly. Gonna hold command and just expand this a little bit more perfect. So we have a spacing of 24 pixels from each side, so looks nice and centered. So first let's go. And here and change this revenue to maybe reflect the month we're looking at. So let's do just one example October 2019. That looks good. And it looks like we have a bunch of filters here for the chart. So we don't really need this one up here so we can go ahead and just delete it from here. Have everything about it would be nice if you can show the total revenue for that month, maybe up here. So let's go ahead and go to the master component here. And then let's add a text here. Maybe put in a dollar amount in a do 000 What's unlinked or detached the style here and change it to heading to on this? Go ahead and just changed the fill color to our tech. Start here and move. It may be right over here, and of course, we can use the show and hide. If you want to show the filter instead of the dollar sign here. But for now, I'm gonna leave that there. Let's go back to our Web markups page, and now we have that appears ball. So let's go ahead and just edit this and put in a sample number that looks good. Let's go ahead and tweak these numbers down here is, well, eso if you notice we have a bunch of icons in here that are layered on top of each other, let's go to this 1st 1 and click on icons. So once you found the Icons group over here, go ahead and open it and you should see three icons in here. Ah, the 1st 1 represents the the Stars or how many ratings they have. Um, so in this one, we want to do people, so we want to leave this one as shown, and then the other ones as hidden. And then we'll do. We'll just leave That has won 20 customers. Um, and then let's go ahead over here to the 2nd 1 It's like the icons in here. And then let's go ahead and hide the people's icon now and then let's hide this one as well , so we just have the middle one here and it may be here instead of 1 28 we can show their total revenue was just put in a random number here, maybe 41 k and do total revenue. That looks good. Let's go ahead over here. So in here, let's go ahead and just leave the 1st 1 and hide the last two, which should show us this star iPhone over here, and I Maybe we'll do. Let's do 4.5. Let's do average rating like this. I think that looks good when you use command and scroll to zoom out of there. Perfect. So this way the client over here has multiple options. They can go to different tabs to maybe see their ratings over time, maybe see their number of customers over time. And so that will treat the page that we're on here, or the or the stats that we're showing here in terms of their dashboard. Now let's go ahead and add something in here. Let's go ahead and double quick and change this to recent customers. Let's zoom into here and now if you go through assets components, I've created two different kind of avatar lists over here. So it's shoes of the 2nd 1 right here, which is the simpler one. And let's just go ahead and, um, at a spacing of 24 in here and then resize that to match that spacing. Okay, Austin, that looks good. So with one created here, let's go ahead and use Ault to drag another copy here and do. It may be a spacing of 12 between each item. And now, if you actually hit command de bunch of times, it will go ahead and duplicate the next items at that spacing as well. I think that's good here. So the future lesson will come back and actually fill these with proper sample data so that they don't look too plain like this. But for now, if I zoom out, I think I have pretty much everything I wanted to add to my dashboard here. Um, again, we have a lot of empty space here, so if you want to fill it with a bunch of other stuff for a couple ideas that come to my mind could be you could show them their average earnings per order or their average turnaround time, So there's a bunch of things you can add into here to make it look better. But for now, I think we're gonna go with this just to keep things simple. And in our next lesson, we're gonna come back to the request page where we have the list of laundry requests from the customers, and then we're gonna actually designed that using a really cool concept called totally out as well. 7. Auto-Layout: All right, so I think we're ready to move on to our last page right here. Ah, the request page. So this is where the laundry store or whoever's logged in from the laundry store will be able to see their list of requests, whether they're the ones that need approval or the ones that are currently being washed or dried or whatever the case is. So we're gonna have some similar components from this page. So when we go ahead and just copy those over eso, we'll have the navigation here so we'll select that one wall holding shift. Let's like this title here. And then let's just like to this view as well using command. See, we can go over to our request frame here and then do command V Perfect. Let's go ahead and rename this to request. Let's zoom into here and let's go into our request tab over here, or the selection right here. And let's go ahead and unhygienic rectangle from here and then hide the rectangle from the other one and let's go ahead and select the text here detached style and do text dark style . Let's like the icon here. Detached style and do this text medium color. And then let's go into here and do the opposite. Change this one, too, the primary color here and then do this one also a primary color style perfect. So we just switched the selection from that one to this one. Here. You could take this a step further and actually make a component for each to be selected or on selected and take things a little bit further and our master components, or make the tweaks here in each instance perfect. So now that we have that, let's go to our Let's go to our container here and let's go ahead and align it here with the request text, and I'm just gonna go ahead and make it larger so it fits almost the entire screen. Let's see how we're doing with spacing. Hold command, make it a little bit larger here, and let's go ahead and just resize that to this height, and I think it looks good. So let's go into the text here and change the alignment to align left. Let's go ahead and change the text to a waiting requests, so these are essentially the requests that the laundry store needs to accept or reject. Actually, maybe we can make this smaller, so we have a couple requests than here. And then we have a bunch of other options for maybe accepted request on and so on. Now I want to show you a really cool concept called Odelay Out here. It's relatively new with fig MMA, but it's super useful, and this little animation is actually showing a really good example of it. Essentially, it lets you create smart frames that resize themselves based on the content that's inside of it. So this could be good for a bunch of things, such as again buttons. So as you're typing, the buttons will resize themselves according to the text. Or, for example, if you have a bunch of similar elements that will go into a frame, you can use auto layout to just easily move the move things around like so, if you want to read more about auto layout, go ahead and check out this article. But I'm gonna also go ahead and apply it here to show you how it works. All right, so now let's head on over to our asset stab over here, where we have a list of our components. And then let's go ahead and drag this avatar list right into here, and I'm just gonna go ahead and resize it. Reposition resize it. So it matches our spacing on. I think that's good. Now, if I want to duplicate this and create multiple rows of this instance here, I can do so by, of course, using command D or alter like we did here in this table. But we can also use the auto layout feature was The thing is super cool. So let's go ahead and try auto layout. Let's go back to our layers here on Let's go ahead and use Ault to duplicate this right here and now. Let's go ahead and use shift to select both instances here and then Now you'll see you have an option called out early out here. If you go ahead and click the plus sign, something cool will happen. These two elements will now get at it to an auto layout frame here. Now, one thing I'm gonna do is I'm gonna uncheck this quip content on. I'll tell you why in a second So right here, I see everything looks normal But if I actually go ahead and clipped the content so any shadow outside of this bounding box will get clipped. If this option here is on, let's go ahead and just turn it off for now. And now this is an auto layout frame. So we have access to a bunch of stuff, Um, on the right panel here. But let's go ahead and first create a few more rows. And easiest way to do that is just click on one of the items here and do command D, and as you can see automatically, things will get placed down. Um, you can select your other layout frame over here and on the right side. Here, you have some options, so we'll go through them. So first I want to show you this vertical option. Ah, imagine you're showing this list in a horizontal way. Instead, you can really easily switch that to horizontal, and this list will be displayed horizontally instead of vertically. But if you choose vertically, it will be shown shown like this, which is what we want. You can treat this. You can treat the horizontal patting here, So if you want more spacing, um on the left and the right. You can treat that from here. So, actually, if you do 24 here, we can just go ahead and move this frame to right here. Perfect. And this will be your vertical padding. So if you want to add any space to the top and the bottom of this entire auto layout frame , you can do so here. So if you had padding of, let's say 24 So now between the first item here and the last item, there will always be a 24 pixel patting. And then this is the spacing between items because originally when we made this into an auto frame, that was the spacing in between. So just maintained that. But we can definitely tweet this and, um, go ahead and increase it if you want more spacing or decrease it if you want less spacing. Um, so I think we can do 18 here and it will look good. Awesome. Additionally, we can add the same styling to our background here, So let's go on. Add a fill of white. Now we can do clip content because we've added those patterns and I go ahead and add a border radius off. Four. Let's go ahead and add a stroke color. So now for a stroke, let's go ahead and change the sculler and use this eyedropper tool here to pick the same color as our as the border of this other container. Here. Now the Phil is white, which is what we want. A stroke is what we want. We can do the stroke on the outside and let's also go to this other container here and use control. See on this text and then go ahead and choose my utterly out frame and do command V, and now you notice it placed it at the bottom of the frame here. But if you want to go ahead and place it in any position that you like, you can do that. So if you want it, for example, distinguish between these two taking, place it here or you can place it at the top like we wanted. Let's go ahead and delete this other container we have. Let's go ahead and I move this to the top perfect. And so now if we keep duplicating and adding more items or whole frame here will grow very nicely or it will shrink as you start to delete items out of it like so. So when we leave foreign here on, then let's go ahead and duplicate this utterly out frame, using Ault and dragging it down here. Let's do a spacing of maybe 30 in between. Let's go ahead and now change this one, too. Active requests where we can show the accepted laundry services here. Cool. So there's orderly out for us. I hope now you can see why it's so useful. And so with that, I think we've pretty much completed our mock up here. If I zoom all the way out, we have all the three pages that we need. Now we're gonna go ahead and at some sample data because right now it looks very plain s. Let's go ahead and do that in the next lesson. 8. Adding Sample Data: All right, So with our mock up pretty much completed here, what we want to do is go ahead and add some sample data to this recent customer tap over here, or the container over here and also our requests over here. So one really useful plug in when it comes to adding sample data to your designs is called Content Trio. Now, if you head on over to manage plug ins, go to browse all plug ins, you should be able to find content real here. Or you can search for it right here as well. This plug ins by Microsoft, which is super cool. You can go inside event and read more about it. But essentially, it helps us at some test data or at some sample data into our designs very easily. So we have a bunch of options like names, phone numbers. Address is on a bunch of other data that we can just add into our design. So it looks real. So go ahead and install it if you don't have it installed already and let's head on over to our project here and now, let's zoom into our dashboard piece here. So I heard to add some sample data first meaning to select the text fuels. They want to add data to s. So let's go ahead and to our layers panel on. Then click into the Avatar list and select the first name field here or the first name text here and then do the same thing down here while holding command on. Just go into the next one here and keep doing that for all your Rose. And I think that's all the six over here. So let's go ahead and do plug ins. And so life content riel. And then once the plug in opens up, we can go ahead and use names. But before we do that, let's just do first names only. So tap the three dots here and then uncheck last things over here. Let's go back, and then we can go ahead and just click on it to apply. And just like that, we have a bunch of random first names generated for us here not to add avatars for each of our avatars over here, as you can see, if you click will tell you that you need an image Lee or first, So these are all, actually just vector icons. But we need an image instead. So what we can do is we can go back to our master component here using this option. Let's go all the way up here. Let's like this sample profile picture that we have from up here in our navigation tap or a navigation sidebar and I'll let's go ahead and replace this avatar with an image, and then let's just go ahead and apply the same size. So this is 40 by 40. So I'm gonna maintain that 40 by 40 and then concerning the portions here is, well, perfect, and we can actually even go ahead and hide this layer. We don't really need it in there until we want apply an image. And now let's go ahead and just copy this using Command C and apply it to here is low for select this avatar and do command V. And just to make sure that word perfect. So now let's go back to our Web mock ups, and now we have an image layer here as well. So let's go ahead and open our plug in again for hunting for you, and let's go ahead and select this frame here. Now let's go ahead and go into this frame here and select the image. And now let's go ahead and actually show the image for this 1st 1 here and let's go ahead and unhygienic E image from the first row here. So now let's go ahead and apply random avatar to our recent customer. Here s so let's go ahead and select the image. Make sure you go and select actual image and not the frame, and then do avatar up here and choose Male Perfect. And then now, if you go to the next one, make sure you select the avatar again. Choose the image, and then, based on the gender here, we can choose inappropriate image. And then let's go ahead and run. Hide that as well. Perfect. Let's go into this avatar on Hide the image, select image and do mail here. Now keep in mind that your names might be different here, so go ahead and at the images. The avatar images accordingly. And let's just go ahead and repeat that all the way through. So I got to duplicate so I can just go ahead and click again to get another image. Perfect. Now this is starting to look, Riel. Now we just have the orders over here. So what you can do for this as you can go ahead and double click into the text here. So select this text here, go to text and we can just do numbers. But let's go ahead and change this right here. We wanna we don't want to do decimals. And maybe we want to do a number range in the tents so it's more realistic. Let's go back and then add numbers. Perfect. So now if we want to do that for all of them, we can just go ahead. And as we did before, with our first names here, select each text for the orders. Go ahead and choose numbers, double generate random numbers all across. And then we can go one by one here at orders, the text orders. And then, to make things easier, we can just go ahead and And what? Do we just select the orders here and at its using using copy and paste? Now you might notice the text field here is super small in terms of the height, so we could definitely go back and change that to give it a little bit more height, so it's easier to work with. But I think that works here for now. Let's go ahead and close this now if I just zoom out a little bit, I think that looks a lot better with real Data added here. Now, let's go ahead and do the same thing for a request page. But this time I'm just going to fast forward through it. I think by now you get the idea because it's really the same process. One thing I want to say is that a great shortcut to use here would be command and shift. How together command lets us select individual items inside of a component or inside of, ah group here, and shift will allow us to select multiple one. So that's very handy. I definitely recommend that to make this process a little bit faster. All right, so now I think I have some sample data, and here that looks good. I want to mention some cool things about auto layout. You can definitely select an item in here and move them around. So if you want, for example, this specific road to be the 3rd 1 here. You can do that or you move it down, so it's much easier to move things around now if I go to this page here, we haven't used utterly out here, but we can do something similar. If he hold multiple items together, we can do things such as increased the spacing. If we hover over this pink line here and drag up and down, we can also swapped them using this little circle that makes it a little bit easier to move things around as well. And this is if you don't have totally out applied to this frame. Another thing I do want to mention about utterly out is that you can't use it with constraint. They're completely different concepts, and you can't use them together. And so now that concludes, our Web mock up here. That would be really nice year if our markups also worked with mobile year. So if it was responsive and it worked on a mobile device, that would be really ideal for both the client and their customers. So as an exercise, I'll leave that to you to design a mobile version as well. If you'd like, but as a resource, I will leave the full version, including a mobile version, and could definitely download that resource and check it out as well. 9. Version History: So, as I mentioned in the very beginning of the course, one of the beautiful things about stigma is that it auto saves your work. So there is really no need to hit command, save or control safe to save your work on. Another cool thing about that is that stigma automatically creates kind of a timeline for your file here as well. A bunch of other applications also do this like Google Sheets and even pages on the Mac. So if you go to your file name over here and click the little arrow and then go ahead and choose show overs in history here and then over here, you'll see all the auto saves that figment has made across the timeline. So So this is my latest all to save. But if I click another one, I can see this is right before added my sample data. And then if I go, one more I can see this is right before I added the requests. Page s. So this is really nice because in case you want to make some changes or you want to go back to a certain version that you had, you can go ahead and click the three dots here and either named this version so you can come back to it or restore this version so that will make this version be the current one. In case you want to get rid of the changes made since then, you can even copy the link and show clients or teams that version of your design. One thing to keep in mind is that the free version only gives you 30 days up version history. I'm just gonna go back to this one right here, which is the latest one. And you can also add a version manually by going up here giving you the title like so I can't even describe what changed over here and then go ahead and save. And then that would give this current version that name over here so pretty cool. If you want to browse the history of your file over here and I'm just using the escapee, I can just go ahead and get out of that version history. And this is very handy and very useful on. One of the cool thing about it is that you can always go to file and safe to version history, where that will also save the changes you've made up until now as a new version, history as well, pretty cool. 10. What's Next?: All right, Congrats on completing the Web design course with Sigma. Throughout the course, we learn how to design a beautiful, simple Web application for our client, Clean Kangaroo and there laundry stores to be able to use. And so what? Sex for you. Whoa, there's a couple things you can do from here. The 1st 1 will be to create a prototype for your Web application that you designed. Now I do have a prototyping course right here on skill share as well. So if you're interested to learn how to create an actual prototype out of mark ups like these, you can definitely check that out. Another thing you could do is design a mobile, friendly version of our weather up. If you remember, I give this to you as an exercise. So feel free to do this step if you'd like. Otherwise, in the resource is for this course, you also be able to find my version of the completed mock ups, which also includes a page that shows a mobile friendly version for the designs as well. So feel free to refer to that while you designed your own mobile version. Also, if you're interested in marketing. Feel free to greet some marketing material for a clean kangaroo. This will be a good opportunity to showcase our weather. Or, if you're taking the mobile, you are you X courses. Well, you'll be able to create some marketing content to showcase clean can drew and what they do on what their application does and how can change people's lives. Now I will be making a course in the future for adequate marketing material for your clients. So if you're doing freelancing or you're working at a company or your own business and you want to create marketing material, that courts will be perfect for you, so keep an eye out for that course, remember, as always, you can contact me at hello clever at gmail dot com. I'd be happy to answer any questions or provide any feedback on designs that you've created , so feel free to reach out now. With that said, congrats again on finishing this course. I'm looking forward to seeing you in a future one