Learn Figma Essentials for UI/UX Design (2020)

1. Figma Course Introduction : this Big Mac, or so we're going to go over all of the basics. And at the end of the course, we're also going to create a Web up in IOS south from scratch. By the end of the course, you're going to learn everything that you need to know your to create any designs for. Entitled I answer faster and efficient way. We're also going to go through the best practices as well as tips and techniques, which have learned over the many years that I've been working as a designer. The course is divided into two sections. The first section is all about learning the basics. Eso understanding how figure works from the ground up and the second stage. We're going to create a Web up from scratch as well as on IOS Apple, which we're also going to create a product So it's going to look like the final Live up is one of the most sick doubt. Software is in the marketplace. Nowadays, US companies realize that stigma has enormous potential in Earth to collaborating remotely with themes of all sizes in an efficient and faster workflow. We think you can work it entirely remotely with teams. So even in fact, scientists on the other side of the world, it's not an issue. But why should you look for me? Well, my name is Pierre Region And you are you X designer with over 80 years of experience working remotely with companies off all sizes from Fortune 500 companies, companies that we're looking to get their first round of funding. I'm also very active on YouTube with over 300 videos on my channel. I have a dream bowl and instagram following off over 30,000 followers, and I always look it to learn more and beyond the Captain Gadjah design industry. So what are you waiting for? Joined the course now and let's get started with big money. 2. Creating a Figma Account: now, in order to use stigma, you have to go on the picnic dot comma, as you can see on the top after and we're going to be redirected to this London page and you can select the idea. Try figure for free. Or you can click on that, the sign up button on the top, right, and you're going to have the option to sign up with. I don't Google or email and password now both for them or totally fine. So feel free to choose the one you're more comfortable with and the after dots you're going to be redirected the main fig mad Ashburn, which is going to be where we're going to continue on with next video. 3. Overview Screen: main a human doctor bird. So, as you can see, the first thing which you're going to be able to view is theory. Recently view the files. Now, once you are a few files, you're going to see them all here and you're eventually going to be able to scroll for the files. Since once we have more, many of them, you're going to be able to view them all in this area. Now, cool feature is that you can also see the files as a list view. So as you can see, you can also browse through the last beauty. And you could basically change in the way that you see the files like also import a signifier, which has the extension that point if I g r directly from here, or you can create a new file by simply clicking on the glass. Now there's some other options and the things to consider in this dash. Berg, the 1st 1 being is the search feature, so if you want to search for a specific file, you can do it dark in here so you can simply start typing, and the results are going to appear automatically based on what you typed. Now, another interesting feature is the identification bell, and this is going to be very important, especially when you're working with clients. And the clients are going to leave comments into the stigma files because this notification bell is going to enable you to see things like, You know, when clients noted Colman's blind to comments or shared files review, and you can accept or decline on the new files, which which receiver? And you know there's ah whole sort of options which are going to be very, very useful, and I almost check it daily. So it's definitely something to keep in mind now. We also have the play games, which is going to be a topic for entire video because plug ins or amazing and enables us to create to streamline our world flows in all sorts of ways. But we're going to focus on them in a moment, and we'll also have the drafts that so few creatively draft. You're probably going to be to see it over here. Now. We're also going to discuss teams, but just to give you an overview, basically, teams allow you to work with to create a different set of teams inside your main think Madox for so even if you're working with multiple teams, multiple clients, you're going to be able to managed projects very easily and very efficiently directly from this spot over here. There is also a great option, which enables you to basically collaborate with more teammates, and we're also going to explored about later on now. Also, another thing which is important to consider is that we have the help research says available over here. So if you need the any things like you know, the help center, the community forum of video tutorials, we said the on boarding and they also some notes and legal summary. You can basically access all of these items directly from here, so it's gonna be quite handy now. This pretty much it for the overview. Next video. We're going to jump into a file and start learning how to work with Zion Files and Stigma 4. Figma App vs Browser: mentioned the fact that stigma doesn't work only on the browser, but also houses a dedicated Windows and make up, which you can access by simply going on Google and typing in Sigma Up and the first, the result, which is figment comma download, is going to be the page which you're searching for so you can go on the very left section where it says they start up and you can allow the district off for MECO ESA or for Windows . Now, once you install it, which is pretty straightforward, you're going to be able to see the upper. And basically, if you click on it, you're going to be able to see about the For the most part, it's pretty much the same. Softer. Not many things change with the up, however, I personally prefer using Get compared to the browser version. Still, because of the layout is more cleaner, and I just feel more comfortable working with the with the native upper. But one thing that we want to consider is all stuff like that. The brother version, for some reason when I'm working with a very dense and complicated and heavy design files, for some reason, that based on my experience, works a little bit faster, but my just being near, you know, my my computer. So take this last government with a venture off south. And also, another thing to consider is the fact out, even though you might want to use our personally the need about if you atia probably your clients and we're going to collaborate occasionally with you are going to be to use a brother version more often simply because there is this option in fig MMA, where I can share a figment link with them and they can create a very quick account and they're going to be able to see design project. But we're going to discuss that in just a moment for this video. I just wanted Teoh convey this information about there is a a figure my up available And if you want to follow through the course with the Sigma Kappa or or even just a browser, both were totally fine. So trophy to choose with every option you like the most 5. Your First Design Project: Now let's create our first figment file. So, as you can see, I mean the main Dodge bird, and I'm going to click on the very top writer elemental this. Plus I can, which is the new file. Now, as you can see now, the file is loading up and we are in our first that figment file. So as you can see, the default title is entitled. But if you simply click on later, you can light late to whatever type you want it. So just gonna rename it to designer. And as you can see on the very left we have Ah, this layers and the assets bottle and also the page. Now we're going to start with age, so we're just going to click on that. And as you can see, we are all not Page one now pages air very useful. And by the way, you can scroll down this or you're going off more space for more pages, and they just basically allow you to organize a multiple screens and multiple parts of the projects in the organized, the sort of folders you can see pages, us folders and the content inside of it is going to be the actual documents and files so we can create two pages. And for example, we are the a rectangle by simply clicking over here, and I'm just going to click on the holder and drag it. And as you can see, we created our first record goal. Now, one thing that might one might have seen it is that on laughter we have this new rectangle one layer and this basically layer spinal. So these air very important concepts to keep in mind. And you're going to work with pages and the years all of the time. So essentially, Bages or your folders again and reckon go in this case is the actual file element. And I can also go ahead and, for example, create the A star over here, and we can change the caller. And as you can see, we have this other element. Now, if I click and move this star and I put it below by simply clicking and holding with the left mouse bottom and they couldn't below you can see that layers or actually in our of here, Ricky. So if rectangle wanna is above star one, you're going to be able to see the rectum go first while the star is going to be beneath it . Now, all of this happened in Page two Pacific like the owner Page one. As you can see, everything disappeared. But don't worry, because really hasn't. We're just We just change. The pager were out, and if we go back to page two by simply clicking on it, you're going to be able to see these elements again. Now, in order to make this concept even more clear, I'm going to create a polygon over here. I'm just going to click and hold and drag it with the shifter, Um, key. And basically, as you can see, we have this triangle. Now, if I go to page, do we're going to see it again, are wrecked and go on our star. By the way, I just the the leader direct and go by clicking on the return key on the keyboard. So, as you can see, these are the first, the things which I wanted Teoh basically explain. So pages layers all the work essentially and how to create a new file because these were going to be things that you're going to use all the time. Now, in the next lesson, we're going to move forward. So we're going to discuss about art boards, so that's going to help in just a moment. 6. Move and Zoom: this video will discuss how to move around the stigma so nerve to move and have some references. Points. We're going to create the directing girls, and I'm simply going to click over here in this cycle, and I'm going to create a rectangle click again on the cycle and create the another one. No, one of the things that you're going to use the old time is this hand tool right here. Now there's multiple ways you can use it. The 1st 1 is you can click on it, and if you click and move around with the mouse, you can see that you're now going to around the design file. Now click on the move to again and the clicker on they click in the hold of Space bar. You can see that the hon toe appears again, and I can simply clicker and plan around it. And this is the way that I prefer the most used. The handle. I simply use space bar, or even better, if you have a touch bar and apple touch bar. Or if you're using a Mac Booker or any other O. R. C. With Dutch Bar, you can simply use two fingers to literally move around. I'm using a brawl at the moment, and this is basically allowing me to just find around in a very easy way. Another way you can do that is by using a full magic mouse or even a regular mouse with in scrolling wheel or something. Simmer is going to work just fine. Just consider that you're not going to be able to rouse food the Y axis, but you're only going to be able to use a the the XOXO or actually had the opposite. So basically, you're going to be able to use it on Lee the Y axis, but you won't be able to go left or right. But that's not an issue at all, because there simply critical space bar or use the handle, and you're going to have the exact same to browse through the is iPhone, So this is pretty much it. That one last thing I want to mention is how you can zoom in. So by clicking on the class T, you can zoom in there and, as you can see as examine allowed, I'm going to be able to see the pixels. If I have that option selected. But usually this by default difficult Kulna the minus. You're going to be able to go to go back er and zoom out. And as you can see on the very top, right, you have these options a swell, and you can see the different options and different keyboard for workouts directly from here. So forever wondering what was the keyboard? Forget again. You can simply go here, and you will be able to see all of these options and also want us think for using a touch bar again. You can use Coleman and just zoom in and zoom out too weak for your two fingers, so that's pretty much it. So, as you can see, there's multiple ways to move around in stigma, and it's pretty intuitive. Pretty straightforward allows you the freedom to focus on the creative process in a very easy and straightforward way. 7. The Top Menu: this video. I want to talk about the very top of head during signal. Since we already explored some of the options that we are, we're here. But there's some things that we must discuss it. So, as you can see, if we go and see this area right here, which is the design tab, it's the same name as we hover over here. And that's basically telling us. He filed name and the degree thing about Fig NYSE that we can have multiple design projects all right here on the top bar. And I can also go back to the main a stigma doctor by clicking on the Stigma logo. And as you can see, I can have access to all of the design files. And, for example, I double click on this design far right here. You can see that a new tab is opening a very top, and I can quickly just browse through the design files by simply clicking on them. And I can also click and keeping holder. I can move them around so I can we order multiple design files at once. Now there's also some other things I want to consider. There's ah especially menu. So the top may knew the really cool thing about the top man. Use that there is this searcher functionality. So if you forget how to get this some mooring stigma, but you already know the name of more or less of what you're searching for, you can simply search directly from here and that you're going to see all sorts of differ and results of based on the letters, which you type them. So this is Whitey's fault now. Another thing which I want to go over this video is the file menu Now NFL money. You can create a new file. You can also important a sketch foul. So if you already have a sketch foul, you can import that in my pretty easily. You can also place the Imagine, by the way, if you have a look a on the right, and you can see that for some of these that the results of some keyboard shortcuts. So this is really happened the and can really be useful in the second time. You can also save the file as a delta if I g, which is the stigma extension. So if you want to save the file locally from Sigma. You can do that out there directly from here. We can also pass it to a colleague that he opened fire with other need off a link but also the version history. There is his option to stay division history because stigma already has some version history. The banana on the plan You have nothing on on the free one is pretty days, and you can see it directly from here. So if you click on one of these previous design files, it's basically going to say to bring you back to that version on Dhere is showing the time when it actually selected that that version. So we're going to go back to the current version. And if you have selected an elementary outboard, got so exported record from here and that you can export it frames to be F, which could be quite useful. Now. Here we have all sorts of different other options, which, for the most part, off names or priest before. But we're going to we're going to work and basically learn about visa in other ways because there's more. There's different ways in order to access these these options so we're probably going to spend more time in the future. Your future videos with a more practical approach when it comes to these options, goes off. The blogging is of the integrations, some preferences, which, by the way, I always keep on default. But feel free, teaches them to check some of these or checkered ones like most of we also have the libraries and the counter and a help section right here. But for the most part, I always use this man. You just for the 40 file sections because the other options are usually easier. Just use in other ways. So this is pretty much it for this overview off the top section roster. Going to discuss these right elements in just a better and, yeah, well, I'll see you in the next video. 8. Frames 101: after discussing pages and let years whole want to talk about frames now, frames air are going to be a very important element, which you're going to use all of the time in your design journey. And you can see it on the very top left this icon right here with these four intersecting lines that basically, if you could like if you click on the arrow, you're going to see that frame you selected. And I can simply click on a on this icon right here and, as you can see, have some options on the right. Now I can choose between some presets, for example, iPhone eight sizes. And if I click on iPhone eight, as you can see now, I have this rectangle, which isn't quite so just wrecked and go. This is basically a container off a screen. So let's say that we were working on ah, few screens for a mobile iPhone app. This the elements are going to be contained in a art board. So, for example, let's out a star right here, and I'm going to click and drag with a shifter, and I'm going to change it the color of the star to this green that now, as you can see, since I created the start inside the art board while other selected the start is inside. So it's basically below I from eight one. So if I actually take the star and they move it outside, you can see us on their left. The star. Now it's it's outside of the art board. But if I click holder and drag it, I can see that the art board has now this light blue outline. And basically this is telling me that if I release of the drug, the star is going to be inside over the iPhone, heartburn and the further confirmation of this. You can see it on a very left since the star is now temporarily below the the art board. So basically, this is the enemy That star is inside. Now, if you re Lisa, you can see that the Sire is inside. And if I move it on the writer, you can see how the star is not going outside of the art bird because if we just had, the direct and go start could easily go outside. But in this case, since it's an art board it basically will stay within the boundaries off that specific art berg. And again, if you just click on frame again, I can literally have a look. A different frame art boards. So basically, I can go through tablet. They stop even even apple watches and paper. So these air really useful. However, sometimes you want. Actually, most of times you might have a specific requirement from my developer. Or maybe you want a specific dimension that you want. You want to choose a tweak? Well, the easiest way to do it out is to simply select the frame again, and you can draw on a thief in the article main file. And as you can see, we have these options on the very right. The 1st 1 is with the and that is it is telling me that we're having a frame 536 big cells and the height is off 564 excels. So if they wanted to increase the outer, I can simply type in, for example, 600 I can take being again 600. Now we have a frame, which is a perfect square. Now, another cool feature that we can use it is to simply go on, not the W or the H letter, and I can literally click. And while holding the left mouse button, I can simply updated directly. So as you can see, I can move around and really changes the sizing to whatever I want in a very fast and efficient way. Now another cool thing about figure Mayes doubt. I can also use it. Some Matha and I can, for example, click from a plaster 500 and click on Enter. And as you can see, math just happened. So if they do minus 500 always said 5 63 So you know you can deserve all of these tricks. One of the one wonder that they use it all the time is using the slasher, and then I can use it divisions. So basically, if I do slash two and the click on Enter, I can divide a D current number by two. So this is quite useful, and we're going Teoh, use these options from the course. But yeah, this is definitely something to keep in mind, and normally when you're using a stigma, you're going to be able to have design files, with many, many different frames of the other working on projects with hundreds and hundreds of frames and things that allows you to basically organize them in a very easy and faster away. For example, you can click up on the framer, and once you have it selected, you can click and move it around with the left mouse bottom. So this is definitely something which is really useful. And then we're also going to explore some or alignment and distribution options later in the course about for now, I think over pretty much all the essentials when it comes to frames. So, yeah, feel free to have a look around your figure file, start great in some frames and start playing around with pages and the layers because it's very important for you to learn all of the elements which I'm teaching in the scores. While it's very important to actual toe actually brought this so for free Teoh out and I will see you in the next video 9. Groups, Lock and Hide Layers: we're going to talk about how to group lay years and some layer options, which we have available. So the first thing that we're going to create is to rectangles in order to show these options. And I'm going to give this rectangle a color of Carina and the second rectangle, which I'm going to copy by simply clicking on the common plus C and then common plus V in windows. That's a controversy and control the so we're going to change the color off this one right here. So let's just move it over here. So, as we mentioned previously, basically the layer, which is on top, the layer view on the laughter is going to have a detox visual Cherokee. So if you move it below, for example, we can see that green that wrecked and go snow above the blue one. And if you move back up is going to change now. Another cool thing about layers is that if you're working with, let's say, a Nahla mentor page with a lot of different layers, which is quite common if you're you're going to work on the Web, Alps and mobile labs and even websites you want Teoh group them together in order to have the ability to just have one single element. So the way you do it, there's a few ways. So the 1st 1 is. You can select one layer and then hold the shift key and select. Also the other one. Now that you're going to do is you gather click on a Commander plus G, or you can use the writer mouse key and you can click on a group selection. Now, as you can see again, all these keyboard shortcuts going to be over here. So don't worry about doubt. It's it's all pretty straight forward. And if I click on group selection now, we see that the two layers of these appeared on the layers panel. Well, that's not quite true because they're still available if we click on this small arrow. As you can see, we have rectangle to a rectangle one, and they were all contained inside this single group. So the cool thing about groups is out Now, all of this section he I can click on any one of these two elements, and I'm going to select the two of them and I can move with the group around, so you can be really useful so you can select the basically multiple elements at once. And, uh uh, I sure got in order to select just one element is you can keep breast commander or control if you're on the windows and you can dip select. Basically, this allows you to select the elements within. So inside a group, even dollar there are there are actually group toe altogether so it can be selected, for example rectangle wanna but holding in the clicking on command neck into the same we've wrecked and go to. So this is really useful. And another thing which is quite useful when council groups, is that you can are layers in January. So this is available for both layers and groups is the fact that you can look a layer. So, as you can see, I just click the on this lock icon. Now the group, the entire group is locked, and that means that they cannot select it. And basically, the way that I locked them is a click on locker again. Now sometimes might have many, many layers here in groups. Maybe it's hundreds of them, so you're not going to be able to see the lock icon. Now. The easiest way to simples, like the Loch layer, is to basically right click for Actually go ahead here, select layer, and you're going to to see the layer or big group, which is slightly beneath the selection, so I can group them. I can also hide the layer. And as you can see, the Eiken changes from an I to a close, I can click again in order to view it. Now this is useful in some cases about chances are you're not going to use it all that much . But yep, that definitely an option, which you have available in your tool set. So this is pretty much it for any comes through layers drooping and the associated options like Welker, The View and they'll see in the next video. 10. Opacity: Let's talk about how to use capacity in pigna, capacity can be a really useful in all sorts of difference in areas and basically the way it's going toe worker is following. So regardless, if you have an image or any type of shape, you can see that next to the layer we have this 100% selected. So basically, if we turned that down, you can see that the capacity is going to change. So basically, that's ah, the how it works when it comes to the busty and that if we turn it down and we bring this text layer even beneath a these two elements were being bring it above, You can see that we can and now see beneath these images. Although the images are on the top, the reason being is that their lesser bake So this is definitely something to keep in mind . And there is not only gonna pass ity related to the layer, but we also have a new capacity related to the fields and even the strokes. So something to keep in mind is that you can you can also change the opacity off a specific I feel So let me do an example right here, so we're going to bring the capacity off the actual layer above. So it's back to the original now. I just selected a and I just added a new field and this is going to be a linear now. It's been selected by default, but just to show you what's going on over here is that we have ingredient with 100% off whiter at the very top. And if you go over here, we're going toe have 0% of white Devery bottom. Now let's say that here wanted this area to be less opaque by 50%. One way I can do it is to go here and drop it to 50%. However, another way that I can do it is to select capacity off this layer, which, if you know that is above er, degree layer and I can drop it down to 50% now. The layer above is going to have a 30% of capacity so you can have a handle on the layer below, and we can do that also for solids. So as you can see, we can create the different colors because we're essentially mixing the color 50% off this current selection with 100% off the selection below. So this is pretty much it when it comes to pass it, ease the I'll see you in the next video. 11. Rulers and Layout Options: the world. Talk about fig muscle layout and agreed options. Now let's Arif degrade the as you can see by default, I'm seeing at these rulers on the very top and on the very laughter. However, if you don't see them, you can simply go over here and start typing rulers. As you can see, the very first option should be checked. The If it's unchecked, just click on it and you should see them. Alternatively, you can also press shift plus R. And these were going to dog. Oh, and on possible them. Now we're going to create a frame in order to show you exactly how these concepts work. So when it comes to the rulers, you can simply go on the very top or on the left clicker. And as you can see as you click and drag, you're going to see this red line while this is it, your ruler and you can simply stop clicking on it and it's going to apply on the frame. So as you can see, I can simply vicar and drag a few of these guys. And if I want to counsel, then I can simply go over here and bring them back to the very top or to the very left, and they're going to this pier. So this is pretty much it, though, when it comes to the rulers, deeds were quite useful times and did. This can use those points off references in your designs. Now let's explored the layout options, which you're going to use quite a bit. You can see them on the very writer. And if you think decomp Lhasa, you're going to see that. Now we're seeing a A grid layout. Now, if a clicker onto the layout agreed, set things, I can you can see that I have the ability to change the sizer. So make this bigger. You can see as the quid becomes a bigger I can also change the color of the grid and really make it customizer the based on my specific needs for ah specific project. Now, I can also go over here and change from grade two columns. And as you can see again, we have ah, with a few options, we have more options than degrades. And if you go one by one over here, you can see the counter. So how many columns we're going to see on our framer. I can change the color yet again and here it could change the capacity. And if you go on the very bottom section, you can see that they can change it. Also the type. So at the moment it's Ah, stretches so basically stretching to cover the entire with off the frame. However, I can left the line it I can write a line at and I can use the center or I can also use a combination. So, for example, I can keep it stretched by default. And, uh, I can increase, said the margin. As you can see on the very writer and this is going thio more margin on the left and on the right. In this case, Now listen to the margin and I'm also going to fear you the culture option, which is essentially the space between the different problems. So the more the bigger dig alter, the bigger the spacing in between the columns it's going to be now. We also have one more options, which is the Rosa and essentially Rosa, or like columns but horizontally instead of vertically. So all of these set things still apply When capsule counter it comes to diaper stretch, it's going to be top about, um, center, instead off left writer. And, of course, we also have the stretcher. And again the margin is going to consider the topper and the bottom section and the the gutter is going to be the distance in y access between one row and the other, So this is pretty much it. As you can see, you have a lot of flexibility, a lot of options, which you can read an urge, greater the layouts and used the reference rulers that, or going to have a view, bring your project to the next level. 12. Version History: version. Control is a featuring figure, which allows you to go back in time a up to 30 days to access the previous. That saved the version of the files by the way out to save the other your worker. So that's ah, how it works and the nerve to access version control. You have to go on the ah top section, where the file name is a click on the Arrow Show version control. And as you can see over here, we're working with the current version. However, there's four out to save of versions. One in a July 11 saved up 9 24 PM and then there's a a few more and, as you can see and the 30 day version history. So this is the diversion diversion in history, which you have by the folder on the free account. However, at the moment, there is a non option off a limited version history. If you have a pay team so considered this if you're want more, more days Ah, all the version history actually having a limited option. Now let's say that they want to go back to the version that they worked on July 10 I I simply going to clicker, not here on your light. And as you can see, the fig, my file is loading gulp. And then there's ah, um some ah few things that I can do. First of all, I can rename this version so easy toe keep track more easily. I can restore this version so basically it's going to bring me back it to this version. But one thing that they really like to do, usually it's to duplicated the version. So basically perfectly conducting Gator Stigma is going to create a domesticated version which I can see over here so that I won't have any, um, override A the current version. So basically, I just have two versions and, as you can see, even in the main doctor Bird at this second version, the second copy has been created. So basically I can work on up to different and separated files. And then, of course, I can always copy the link to D. Prove this version so that they can share with a team member linker off doubt pastor version. So this is pretty much it when it comes to version history. You'll see in the next video 13. Shapes 101: about how to create shapes and Sigma, one of the previous videos. We already solved this tool over here, which is the shape toe, and if you click on the R O, you can see that we can create all sorts of different shapes. The first wana is the most classic, which is direct and go Now you can see as a click and drag. I'm going to basically be able to create a wreck and go. But if I click and hold also the shift key by clicking and holding the shift key, I can create basically a square. So the ratios are going to pretty much say, stay the same and the same is pretty much true for all the other elements. So if we want to create star clicker and holder, as you can see, it's kind of like a deforming so but But the moment when I click and hold also the shifty, the ratio is going to be preserved. So this is something to get the mind and the moment we have directing girls, we have lines we can create. We also have arrows and all the tricky thing about our roses that at the beginning. You're not going to see it the almost because it's so small. But if you select it and you increase the Stroker, you can see that theory is going to become more visible, at least the end. Now, another important thing about the arrows is that you can change things like the the stroke options over here and also some some other options. But we're going to do this Scout stop. Just a moment. War. We also have the option to have lips is and again, if you want circle just its shift on, Uh, there you go. And we can also place an image. So if I click on a place image and this is basically going to redirect me to the file folder so basically I can select an image upload it on, uh, there we go. So I'll just do that. This image right here and going Teoh said tips for some reason, the images very bigger. So, as you can see, I would need to scale a downer on the by hitting shift and just selecting one of these corner elements again and make it smaller basically move around and what not. So this is pretty much it when he comes to the basic shapes. Another thing that we're going to discuss is the drawing tools. So we have to drawing tools. The 1st 1 is the mental, and as you can see, I can literally like a flick and create your lines or under straight lines. Or curved ones were simply moving the panto around the And when I'm done with this, I can simply click on the down the bottom. And as you can see, I have my new vector liner and the other thing I can do is use the pencil tool, which is basically along me to use the pencil. And, as you can see, also moved out the the edges. So basically I can have moved out. Version world. We're going to discuss these vector tools mawr in death in the future, for sure, but I just want to give you a brief overview in this video. Now, if I click over here, I can also access the hand tool, which something that I have access all the time. By simply clicking on the space bar. I can move n pan around the stigma file, so this is really useful and something that you're going to use. Old Diamond. So, yeah, that's pretty much it for this video. See in the next one. 14. Resizing: in this video, I'm going to show you how to scale a elements, change their sizes and also edit them. Now there's a few things to consider the 1st 1 that is that if you want to scale in elemental, one of the easiest way is to simply breast K and that you're going Teoh go on the scalp to , and this allows you to easily scale on element up or down. And as you can see, the value on the writer is going to update automatically. So this is the first way you can skeleton element the other ways you can simply go directly here and the change of the number exactly to the value which you want. So if I want to the square to be 400 pixels, I can simply go over here and selected and the being 400 it's going to be 400 pixels now. If I click over here, it's going to constrain the proportions. Now, if I and checked out the this square is now going to potentially be erecting go. If I change the value so as you can see I can. I can easily just move around and by the way, just like the this cell I kept pressing shifter, and then I used the upper in Donna Arrows in the keyboard in order to change the size of off this rectangle. Now, if we want to change the major vector points, I can simply double click on this rectangle, as you can see now have these circles around the the major points in the rectangle that can select them. I can move around the and basically created a different shape. Now, this is something that I can do with every object in the Sigma, so I can literally move these around now, as you can see these or points with these handles, so basically is going to be a little bit different. But the main point, the main idea still the sacking, double clicker, many shaper that could just move around and change the actual appearance off about specific shape. Now, another thing to consider is that when I select the some of these elements, I'm going to have other points that again changes. So, for example, with the circle, I can change the arca and I can also, for example, create um a radius around the circle. So this is really useful in order to create the graphs or pie charts and with the star can also change the amount off points that the star has over here on the right. So, as you can see, this is this is quite useful girls to change thena ratio off the of the star element. So this is quite useful. And same is true for the try and go which, you know, I cannot Maura counter, So this can become other other shapes altogether. So I would encourage you to just started having some of these shapes on your campus play around with the re sizing tools with and also these other elements because this could be quite useful times. So, yeah, go ahead, the open outfit knife haven't open it already and start playing around with these elements in order to really master them. And I'll see you on the next video 15. Boolean Operations: in this video, we'll talk about the Boolean operations now, As you can see, we have these two separate elements. One is a circle, The one is square, and I'm going to bring the circle on top of the rectangle. So as you can see over here, I have it on Topper from Layer list. So keep in mind that Cherokee we talked about recently and the in order to access to Bullen operations, you're going to need to select the both off these objects. And as you can see on the top menu bar, you're going to see that if you click on the arrows, you're going to access the different bulled on operations. Now, the 1st 1 is the union selection, so if you click on it, you can see that both off these shapes are being united into one single shape. The second option is thesis object selection. And basically, if we select it, you can see that if you which wasn't Topper has bean didn t detracted from the layer on the bottom. So basically, um, you can see that this square now has a circle. Um, almost a lesser. So if we continue, we can click on, Not the Intersex Election. You can see that basically, this is just creating the selection between the Intersect off those two specific shapes. And and if we go over here again, we can see that the four if option is the exclusive election. So basically excluding the center, which was intersecting the two objects. Now there's also 1/5 selection, which is the thought of selection, and this basically flatters the selection. But we still have both off these electors, so basically, this is it. When it comes to the bullet operations, it's gonna be really useful when you're trying to create the specific shape by using one of these the's operations and you're probably not going to use it as off, then the other elements about number lesser. It's definitely something to keep in mind that you have a tear disposal in your tool box. 16. Masks: talk about how to use masks in signal. Now it just uploaded the A new image. And you can do that by easily going on a file place image. Using this shortcut over here, we can simply drag and drop the image or copy and the pace that with a common sea or command V or control Seeing common control V if you're using windows. So now that we have this image, we want to just crop it so that we're goingto have a specific portion off this image and that I'm going to use the erect angle tool in order to we select the area which we want to be crab. Now, as you can see, we're not seeing a fruit directing girl. So one thing that I'm going to do is suggest the lower depositing so that they can see exactly where which board friend were having selected. And I'm going to turn the capacity black on it. And now, in order to access that the master, we need Teoh bring the rectangle which is on top to the bottom. And now we need to select both off these layers and another both for or selected you something to click on that, the very middle top I can over here, which is used us mascot. And that was a click it. You can see that now. Imasco has been created. Now, if you have a look on the layers panel, what happened here is that basically the bottom wrecked and go is being used as the basis for Damascus and the the top wrecked and go, which is the image is still available, but it's only confined to this portion off direct and go, and all of this is grouped into a mask group. Now, if I selected the image as you can see, I can move it around and it still contained so I can steal individually changes the major opposition and in size as well. But it's going to be contained the in doubt, specific portion, and you can use all sorts of different shapes in order to create the mask. So this necessarily to be erect and go. So get out your mind. So that's pretty much it when it comes to master, and I'll see you in the next video 17. Alignment Options: video. We're going to talk about the alignment options. Alignment Options are really useful in Sigma, and you're going to use them off the time in your projects. Now, the alignment options that you can find them by selecting either one elementary group of elemental and these were going to be on the stop right off the menu bar. And as you can see, we have a few options Now. The very 1st 1 is a line left, and as you can see, we're basically aligning. According to the left side er, off this group. If I click on a line center, the axis is going to move right in the center. And if I go and click on a line writer, the axis is going to move on the right. Now we can also do this on a vertical fashion. So if we just select all of these elements and we use the rotation to honor to rotate them and we make them vertical, you can see the defict liquor on a line of vertical centers. The elements are going to align on the instead of the Y axis on the X axis, so basically we're going the other way, and the same is true. If you go and the click on a link top or align bottom, it's going to basically move with the access I during the bottom or on the top, as we saw just a moment ago. So one more thing I want to mention regarding the alliance options is something which is really useful, that I use all of the anything MMA and those are the distribution options. So let's say that we have a few of these comments number, by the way, I'm suffocating them by clicking and selecting the Alta bottom. And as you can see, I have two curses and Aiken basically move the element around a greater copy distantly. Now that being said, I want to show you the distribution option. So let's say that we want to line of vertically these, and now we want to have equal spacing between one of these elements and the other. While it's very easy, you can simply go over here like on distribute horizontal spacing in our world have being equal spacing between one element and the other. We can also use it. Visa useful basically handles nerve to create more or less space in between, and these were available once. We have equal spacing between the elements now the same. It's true also vertically. So if we just moved this like this around and we give them different spacing, we can send simply select all of these squares, and they used distribute vertical spacing. And as you can see now, we have equal spacing between these squares. Now there's also the tidy upper and the option. But these are usually the ones which user over the time and Correggio to do the same because you can use them for all sorts of elements you can use it with. Typography doesn't necessarily need to be an element. Are shape. You can use them with images, so there's a lot of flexibility when it comes to these options and us. As time goes on, you're going to find yourself using them or more because you're going to spot to the bottoms and really see the use on how useful on how much time they can. These can help you say. So is it for this video to see the next one 18. Style Properties: we'll go through the styling options. Figment. Now the first thing. Let's create the A rectangle over here. And as you can see on the very right, we have the field box. Now we're going to click on it. And as you can see, the very most basic option that we have over here is a solid color. So I can go through the color wheel and I can change the color que the Canal City saturation capacity and things like that. Now the great thing about Fig MMA is that we also have other options, like linear. So as you can see, I now have this line on the document, and this is basically if I click here and they drag this handle point, you can see that I can change the direction in which the two collars interacted with. And if you want to change this specific color, I could go ahead over here, make it greener than going to select the 2nd 1 And as you can see the Momenta, I have a zero opacity. That's why I am only having a hint of the color but fame of it all the way up to 100%. I can see the full color, and I can change that one as well. Now, if I click on the radio, you can see that now we're having Calder in this radio fashion. So if I click again and they move these 100 bars, you can see that I can edit this radio effect. This could be really useful for grating some soft Grady insane websites or you know, you I elements. And there's also applications really also administration. Then there's also the angular, which it's not the one of the most used. The effects for sure about that. There's definitely opportunities where this might come in handy and the one before the last one is the diamond. So as you can see, we're going to have this diamond. The fact and the very last one is the images. So this is something that we're already covering in other video. Basically, if you click over here, you can select the actual image that you want, and you cannot take the red directly from here. And of course, you can also change over the image that set things directly here. And so it's kind of like a small editor built in Sigma. And of course, there's, ah, the blending options. So these were the need a separate video, But basically you can if you're our father shop user, you're going to have already some experience with this idea and that we're going to govern these in a separate video. The your because there's multiple variables involved. So this is pretty much it when comes to Visa Topic, and I will see the next video. 19. Blending Modes: you know, we're going to briefly go through the planning mounts available in Sigma now if you're a photo shop user already familiar with blending modes, but basically they are facts that can be applied on that layer. Julian top off nerd to create a specific visual effect now invite you to create a ah, small project where basically, you have an image in the background and you have a color the feel of an object on the top. And you can go over here on the layers panel, and you can see that here we have the various plenty, most so you can go one by wana and see, for example, that if I apply a dark and blending mode, the layer below is going to appear with this more darker appearance. Now, if ago, when the use color burn, you can see that this is going to be toe affect also the layer below. While if you go with the light on one's, the layer below is going to be more, um, toe more human l city and the each and every one of these bending modes of some math behind that you don't really have toe worry about it too much, some of them or pretty straightforward. You can kind of like the the The reason why it's called this way did the name but other ones or a little bit more freaky. But nonetheless, it's all about trying when it comes to blending modes. It's all about, you know, just going ahead and try applying them. You cannot supply them 30 from here, So if you have a new image or radiant or you know any of these options right here, you can sell, provided the blending modes. And this can be really useful in order to achieve a some specific visual appearances and visual results. So that's pretty much it. When it comes to blending modes, feel free to experiment with these and trade him out and host you in the next video. 20. Pen Tool: video, I'll show you how you can create a new shapes using the mental and also how to edit them. So in order to access to mental, which were ready previously explored in one of the previous videos, you can subject, we go on the top laughter, and as you can see, I can go create rigid lines. But they can also use the's vector and more circular lines. And once I select the first point which I created, the shape is going to automatically be united together. So essentially I can. I now have this one single shape and cyclic on the move toe again. DoubleClick er I can go back to the regular view, but if we want to change the shape, for example, I can simply double clicker on the shape again. And as you can see as it dragged these handle points, I can edit the shaper and change it and basically adjusted are to accommodate my needs. And if I select, for example, one of these is the angles and the I click on the Bento over here, as you can see how I can make this a known angle view, and there's also the options to avoid mirroring ger or no mirror the angle or mirror angle and the lamb for so this can definitely useful now. Other things get in mind is that you can use the pink pocket in order to field the inside over this specific shape. So as you can see now, we both have it he feel and the stroke and that we can change, for example, the size of the stroke. We can change the color directly from from here, and we can also change the inside the field. So definitely things that to keep in mind. And this is going to be a really useful specially for creating things like icons, illustrations and any type of vector art. Really? So this is pretty much it for this video see in the next one. 21. Icons: this video, we're going to recreate it thes free icons that nothing GMA now FEMA can be really useful Energy creator I cancer in an efficient and the fast way. Previously I used to use the software is like illustrators, but I can definitely say that the now I'm addicted in creating Aikens directing a big mob. It's just so easy to do. So let's get started. We foot the very 1st 1 Now this one is going to be pretty straightforward. And by the way, guys were just going to try and communicate about. It's not going to be 100% perfect. I just wanted you to learn the, uh, the basics and really understand what we're doing. So the first thing that we did that here is to create our on the lips by going on the top left, and now I'm going to add the a Stroker, which is going to be similar to the ones right here, mostly going to lead the field by clicking on the minus, and I'm going to go right here again. It's like the wrecked and go then going to try in the Mid America the size of a rectangle and I'm going to dry. Get a right below. Now let's other radius So that we can achieve that these border edges on our Aiken. I'm going to click here and I'm going. Teoh is the same color. Now what I'm going to do is I'm going to group it. So these two elements into click on Common Plus g and now all the last shifter I'm going to drag them down. And now I'm going to click on Komen De and I just create the Actually, it's not reading, so let me do that again. So shift plus out and I'm dragging it down. And basically, now what I want to do is to have the same a spacing in between. So in order to check, I'm just going Teoh moovit upper until I see these 15 numbers with for this orange box and that's tell me that I have the equal with. So here we go. We are just great that our first Aiken. But one thing that we're going to do now is to select the all of the elements in the I can and make sure that check the manual selection here, and I'm going to click on when you select. And as you can see on the very left panel we have this I can into one single layer. I can I can always quicker on this arrow, I could see that they see again my groups. So feel free to organize these Whoever you want for this specific case, we decided to go like this, but you can definitely the move with. So let's go over here again and let's move on to the second icon. So I'm going to use the rectangle tool again, and I'm going to make it look approximately like this. Others are good. All the radius again and I'm going to try and the simply match the, um, the Strokers. I'm going to move it up so I can see it better. And I'm going to It increases the stroke by a few sizes, and I think we're we're almost there on going to remove the feel once again, I'm going to move down this element now. What I'm gonna do next the is to use the rectangle tool yet again. And in order to see some time, I'm going to select the previous record and go clicker on a basically copy and paste er right here. So right, Click Copy properties. And I'm going Teoh based the properties right here. So, as you can see already have Ah, the rectangle and just going to make it a little bit larger and decrease the hedge it around in this over here, and I'm going to put it up just right here that you can see we have edges on the top. And in the original, I can we don't. So I'm just going to double click on this and selected these two top just points, and I'm going to give it a value of zero when it comes to the radius. So, as you can see, we have this element this Eigen set in a pretty similar way. Now, another thing that we need that is, of course, that's just the pendulum which you can access their I think here used the comma, the short cut key. You're Teoh. Quickly access it. I'm just going to click over here, click on Esseker. In our sense that I'm fine with the grant one. I'm just going to increase the size. I can always go here and around the joints or actually let me do it directly from here, and I can move it in the center. Now, we need the one last thing, which is a standard. I'm going to use the line tool, which we could find a record from here. I'm using the shortcut Ellner to access the lying toe, uh, very faster and efficiently. And I'm just going to move the line right here. The ah stroke, Um, over here and again, we're going to go on the copper grounded and, ah, I'm going to center it so that it's it's going center, going to adopt a gate by using common sea and Kommando movie. And now I'm going to rotate this by going right over here and turning it down to that say, 40 degrees and hips. For some reason, I created erecting. Go about. Yeah, let's just bring it here and I'm going to bring it down, and the more or less were achieving the same effect. I'm just going to bring this one down just a little bit, and we should be almost ready to go. So I'm going to the obligated this line and by using common sea and common V and now What I'm going to do is I'm going to bed resentfully so I can use the short got shifted, Pallas h or simply go here on the menu. And as you can see, we just created our second. I can. Now let's move on to the furred Aiken. Just going to move it up. And now, actually, let me do one thing. I'm going to cheat the hand. I'm going to copy and paste this direct and go right here so that we don't have to do the same work twice. Now, Before I lived this second, I can I want to you select it again so that they have it all organizing one single layer, and, uh, it's moved back here to the lock icon. Now I'm going to use the same radius that we have right here. The problem is that I can't remember the exact value about that's actually very easy to solve. Second, just double click. I can see that the value is 12. So I'm just going to select the stew elements and going to apply a radius off 12. So, as you can see, we're back in business, So Okay, that's perfect. Going to use Oh, nerd to access the A lip stool and I'm going to create the this shape writer on the here. So let me go on and to lead the field are the stroke. We're going Teoh are the more with a two stroke and I'm going to use line tool again. And, uh, just make clicking on l. I'm going to may get around seven or even eight as the value and I'm going to click over here, cap grounded. And as you can see, we have a, um he rounded the element. We have the actual main section off the locker, most going to add one more stroke right here. Um, these these icons, as you can see, their stroke values are a little bit different. But for most part, we're about there. So one more thing that they need to do right now is to created this top section, and the way I'm gonna do it is by using the mental, I'm just going to clicker on here and the click on here by clear and by holding shifter so that this is vertical. And then one thing that I'm gonna do is I'm going to create the right on the center. But as I'm clicking on it, mostly going to keep hold shifting. And as you can see, I'm creating this shape, which you can then tweaker. But for them for the mean diamond just going to click on escape and I'm going to add the stroke value, you might be wondering why I just create the half off the section. The reason being is that now I'm going to use common see in common V. I'm going to bring it here so you can see what's happening. And I'm going to flip horizontal and the united together. So I'm going to slick. Well, this one union select and now it's just one single shape, so you can just bring it a little bit on the right. Select all of these union selective boom! We're in business. So we just created these free likens directing stigma that the great thing is that these three Aikens they are all the in vector format. So no matter how bigger house mall the are there, there won't be any picks. Elation. You can easily change the color, Ady Grady, answer on and you have ah whole bunch of flexibility when it comes to dealing with S P G's , so visit the ideal workflow when it comes to creating icons. Always use a visa whenever you can, and also you can consider using that PNG's A if have transparent icons and re depends case by case and that there But for the most part, for S P G's, you're going to be pretty safe. So this is everything for this video, and I'll see you in the next one. 22. Typography: learn about typography in the stigma. Now we have this document with a two simple tax. The headline in the paragraph, and I'm going to click on this Dexter in order to explore the topography features, which you can see on the very writer in this panel right here. So what's going on? The first thing is, we're going to have the ability to select it and see the phone toe family that this Dexter is Ah ah appear into. So basically, here's the phone. Family, if I want to make the form toe lighter, can simply select lighter. And if I want to make it more older, black or even metallic, I can select the directly from here now. That being said that, every phone families different, so some food families might have a viable option. Some some wonder someone will have the Calais someone. So this is a really dependent on the deformed family which you choose. And by the way, if you're working on that, the only white projects I would recommend you to check out the Google Web funds. Since those are quite strong funds to use on the Web. However, many other options are also the adobe ones. But let's just focus on the paper before now. So if I go over here, I can see that this is the size off the text. So if I make it super bigger a unit of 64 you can see how the phone size is going to adopt immediately. And over here we have the line height. Now, in order to illustrate what the liner height concept that is all about, I'm going to select this paragraph and I'm just going to click over here and there, reduce the in height by 150% or something around those lines. And as you can see, we currently have a different line height as re did these values. Now another thing that we can do is to edit the letter spacing. So if I click over here and I increase the letter spacing, you can see that the individual space between each and every letter is going to amplify or contract based the owner. The amount that we disliked over here Chelsea go negative. So as you can see, that's a letter spacing. Um, we also have the paragraphs basing, which is essentially differently. This does between the paragraph and the other. And over here we have some interesting options. So the 1st 1 is the outer wit. Now, if it's like out of wit, as you can see, basically the text is going to take up as much space as it cans. But if I go over and selected, for example, the fixed size and I entry value off say, 200 pixels, you're going to see the maximum amount over Waiter is going to be 200 in this case. So this is something which can equate the useful to keep in mind. As you're working with projects with out of type. Typography involved now deserve the common options, which you find also in Salter's like murder or Google Doxa. And this is the text line. So Exline, Center sign writer and I can also align a to the middle or to the bottom based on the Corrente selection area. Now, if I want to change the D color, I just go over here and change the color and also some other options which are advanced, that they Griffey options are available here and they think they on the type of details. Basically, I can see that they also have, ah, one more alignment option, which is the justified. And I can also use the text decoration like underline or strike fruit. Over here. I can see how the a paragraph in the station if you want. So as you can see over here, a indentation has been applied. And there's also some options which might use for times such as I'm just going to believe the strike through effect so that we can see it even more easily and that is the upper case . So basically, hole of the topography is going to be uppercase the lower case option. We won't have any uppercase letters and also have tight. OK, so basically, the first letter off each and every word is going to be uppercase, and we also have small caps and forced small caps. Now these air usually options which you're going to use sparingly. So there's no something without you're going to use all time, but definitely something to keep in mind. We have capital space Inga and smother options. In this big human comes to numbers like proportional uppercase singer on the space and the proportional lower case, or the old style, So this could be quite useful way for dealing with some specific. If you want to greet some specific styling when he comes numbers. So is it as an overview for topography? Now I recommend you to try all of these things out since this quite a few options, and I'll see you in the next video. 23. Outline Text: in this quick video, I'm going to show you how you can convert a typography in outlines. Now let's see that, for example, you're working on a logo and unity slugger to be an outline about Momenta is just typography, so I think that both access now. It's very easy. You simply have to right click on with the topography elements selected and that you can go on outlying stroke and can also use it. This shortcut, which is shift the command. Oh, and the assumes you click on it. You can see that this has now become a shape. So if I double click on it, you can see that that these all of these elements or basically inevitable and that you can change it upper. And they really do what you want with it because it's now a full victor element. So visit for this video to see the next one 24. Adding and Editing Images: video. I'll show you how you cannot the images in a figment file in multiple ways. So the first way, it's very easy. If you have ah, on imager on your desktop or even in your downloads folder, you can simply drag and drop it directly on to the signal fire. And, uh, that you have it now, another way is you can go under file place, image. We can use this short. Gotta shift the Coleman plus K. Basically, this is going to bring up the folders in your computer. You cannot the image directly from here now another way that I can not an image. It's actually I can create the A wrecked and go or any other shaper. And as you can see under the feel option if a clicker all know this is more gray color, I gonna see this deception right here. And if I go all the way down to image, I can actually click on the image and again the file folders air going to appear. I can click on open, and the image is going to be applied. The owner might shape now something interesting that we can see over here is that we can also off data and the editor. Things like the exposure, contrast saturation temperature tends highlights and shadows. So these air really useful. If you need some quick editing over the images and that you don't, maybe you want to use a more sophisticated toe or just seemed need need, the quicker anything on the fly. So this is really useful, and you can have access it directly, regardless off the options, which you use that never to utter the image onto the team. A file. You can always go here, have access to these options. You can also rotate a 19 degrees things like data. And of course, you can also change the fit. So this is going. This option is going to fit the image and maintain the proportions. These other option is going to allow you to crop the image wherever you want. In this specific space, your about your disposal before form is going to tile the image so you can also choose percentage over here. Off the tiling and off course, you can always change it around according to your specific needs. So is it when it comes to adding images in the anything them and I'll see in the next video 25. Components: will talk about the components and that why they're so useful in fig MMA now. First of all, let's start by talking about why would you use components in the first place? All components are essentially reusable elements, which you can use the multiple times of fraud, the project and that maintain a level of consistency and also efficiency in the adding then in the managing them fast. So let's take an example over the federal website. As you can see at the very top, er, we have this header with this logo menu items in the sign of button. Now most chances are that worker they're going to use it this header on the multiple pages for all the website. So if we're creating the designing fig MMA, a very efficient way to actually managed this element over here is to create a component. And the reason being is that if we have a, for example, a website with 10 pages and we're using the same header over and over again well, components, essentially, how can I help you make it more flexible and easy to manage? Because you can, for example, move the logo off? The very writer or at the center and all of the components in each and every one of those pages. We're going to update immediately, and you just need to do the change ones. So this is really useful and also elements like footers or really useful to have US components as well as bottoms and many more. Now that we have an understanding off the components from a basic overview perspective, let's say hope ahead and create one. So the very first thing that I'm going to do is I'm going to create a wrecking go over here , and I'm going to apply a little bit off radius on the borders. How I'm going to make this, um, a blue color. And, uh, I'm also going to add some text so bottom, let's close this. I can right here, Smallville. So I'm going to make it. And by the way, these units are way over scalp. Usually bottoms are going to be much smaller, but this for the sake of this example, I want you to understand the basic concept and off course. The rest is there going to be a ways muller in the actual you Why design Now I'm going to make this bolder. And now let's select both items and the group them. And I'm going to do that by selecting them and then using group selection. Now, at this point, I'm going to right click on the bottom, and I'm going to select this option right here, which is create component. Now, Another way I can create the component is by simply clicking over here quick component. And now we have created our first component. Now, if you go on the very top left, you can see that we're currently in the layers. Barnum, whoever. If we move to the assets panel, you can sit, and now we have our first component. Now, all of the components were going to be the visible from this panel. So this is, ah going to be quite useful when managing especially many of them. You can also toggle the less view, which can be useful. And you can also sink in with the team library. So he for collaborating with multiple Well, that's the owners on the A team. Leverage one single team library and have all the components shared us that you can work together efficiently. And Montini a high level of consistency. Now let's create a doctor Gator, off this component. I'm gonna do that by using Come common, See, Common be They just stopped a gated it. Now I'm going to do it a few more times because I want to show you, uh, the power off. He's in components. So that's out that I want to change it. This one here, which, by the way, is the master component and the the way you see that this is the master component is that it has this for small squares over here, while the other ones Onley have a now outline off one single rotated square. So keep in mind that if you change the master components, all the other ones are going to follow the change. So if, for example, I go over here and make the master component arena, you can see that all of the Boltons we're going to change automatically. And if I change, for example, the fonder Teoh Helvetica and make it smaller, you can see that all of these changes happening in the real time. So this is absolutely, like, amazing. If you're working with a health of screens on large projects especially This can help you save a lot of time. And it's definitely something to absolutely keep in mind for when creating design systems, which is something I'm probably going to explore in death in another course. But for the most part, uh, keep in mind this components because thes air really useful and I can help you Ah, whole lot when designing Fig MMA. 26. Advanced Components: I want to talk about someone more advanced options which you have available when using components. Now the very 1st 1 is that it actually did Thatcher on instance, and the visa or instances. So basically the main component over here, the master component that's the one which is going to change the other ones. If you actually did any off the features off the master component, however, one thing that you can do is you can go over here, and if you can see this is an instance, and you can detach the instance. So what's going on essentially, is that figment is going to create a framer out of off this instance. Now if I use the tour over here, which is basically shifter Los kommen plus G or selecting the framer, you can see that I now have these elements outside of the frame, and this can be useful in case I want to create a new instance. I don't want to have a settlement in a component anymore. For some reason, maybe I want to use it as a reference, but I don't really need it to be on actual component anymore, so this is definitely something to keep in mind because when you're working with science systems and especially like one off designs were going to likely used this feature quite a bit. Another thing to consider is the fact that you can also change on instance and that you can apply. You can push the changes to the master component. Now, the way you do it is essentially you can change for example, the caller over here or any other feature, Really. And, uh, we're just going to make it like the smaller and yeah, it's just there. And now, if you'll write thicker and you go to the master component section, you can click push, override it to master. This is basically going to force this updates, which just made on this one instance to the master component. Now let's see that you're working with a project with multiple pages, many screens, and for some reason you forgot worthy master component is. So I just got the this instance to the bait free, which had just created, and I'm going to right click in order to find the master component anywhere being on the on the file, you seem to have to go here, master component, We can go to master component and boom, You're basically redirected to page one in the section that we were just discussing so again really useful in er to keep things Ah, cleaner and easy to navigate. 27. Autolayout: in this video, we're going to talk about a stigma out. A layout features. Now. The outer layer of features are really useful in some scenarios. So let's go ahead. And I just created this new document and I'm going to create a bottle. So lets out the a rectangle that's out the just a little bit off border radius, and I'm going to add a text inside, which is going to de Botton using Ribalta. But you can use any hip it out you want. It's just for getting the d pointed. So I'm going to make the color of this pot of glue, and I'm also going to group it so it's elected and then common plus G. And we have a bottom and we're going Teoh, um, do one thing now, which is basically we're going to select it and click on the very right out of layout now, as you can see on the very left. Now, this bottom has bean um created inside a frame. So basically we have a frame and the let's create a second bottle over here, so both of them or in the frame now, one thing that we're going to do right now is we're going to select both buttons and then, as you can see, we're going tohave to out the A further out the layout. So what's going on here is essentially we we set sigma dispersed Button is a framer. The second bottom isn't framer, and they're both for um, grouped inside it and out the layout feature. So what? What advantage that is this giving gas so as you can see a to moment if we start, type finger inside about them. The bottom, basically out to resize, is by itself, which is something which is pretty cool. So basically the outer layout, it's grouping the bottoms or any element really inside of it. And it's using a layout which eyes either going to be a horizontal or vertical. And as you can see, we have options to basically the vertical or horizontal tapping directly from here. So, for example, I out the vertical pounding, you can see that more bonding is being applied vertically. I can also adjust the space between the elements from here. So, as you can see, this is ah, something which can really help us in some scenarios, as you can see, here we have the option between auto with and fixed wet. Now the great thing about out of layout is that let's say that we are the, for example, a image to this, this composition or or a shape of, you know, whatever but the doctor type of shape. If I go over here, it's like this wrecked ago, and I put it inside the outer layout frame free. You can see that now it's going. This rectangle is part off the composition so it can simply move it around. And I can also easily move decell a ments and basically used the outer layout feature both horizontally and or or vertically on. But this is going Teoh help quite a better. We're working with a certain type of projects where you have maybe multiple elements in the compositions and, you know, things have done nature. So yeah, this is pretty much it when it comes to outdoor layout, and they'll see in the next video 28. Plugins: in this video, we're going to learn about black gains and stigma Now. Plantings could be really useful, since they can enable you to do all sorts of different actions and expanded possibilities and the options that you're having Sigma so honored to access. To begins, they have to go over here on the top left menu and the under plug ins. You can see that there is this option, which is managed wagons run. Last bargain is going to essentially round last bragging, but that's a non option that you're going tohave available on Lee when you're going to use one plug in and you have installed one. So as you can see as it clicked all managed plug ins, I can see the future blah gains, which are some of the most recent ones. And, you know, future by sigma. You can also hear see the ones which are most popular, so I highly recommend you to keep an eye on this sections. And, ah, usually some of these Baggins are the most used ones. So let's go ahead and go on Splash ER, which is essentially a blag in which enables you to um so as you can see as I'm clicking on its now I have this, uh, this model and I'm going to click on Install Black in. And basically what this begin does is that it enables us to extract the summer. Are royalty free images from famous webs website else blushed dot comma and we're going to go, and it's also conduct riel. So I'm going to go over here on content riel. And by the way, if you cannot find them right here, you can go on the browse, old plug ins. You can search on a the very top, right? So I wasn't going to search for content as they're going to type it in. You can see that I find that content really right here, and I'm going to click owning style and you can see how the stalls You can also click here to uninstall it about for these Uhm moment. We're just going to give it us that and let's go in the tri. A splash was the first flag in. So I'm going to great direct and go right here, and they're going to click on the top, left the menu bar, and I'm going to go under plug ins and click on Splash now as it self loading gulp. For some reason, it's a big moment. Okay, so you can see we have this new window, which is splash. And if I select directing, go click on a minimum, for example, it's going to extract a random Imagine with the minimal tag to go over here in search and I search for minimal again my click enter. As you can see, I have a bunch of images and that this is really useful, especially fair creating several. Ah, said Sue, creating like several designs. And you need the images real quick. Use it to go over here and just them on the go. And this is it blagging, which I used the quite extensive them. And this is just to show you the power of black gins. Now I'm going to closed this one right here, and I'm going to go under content real, which is another great blogging which used off time now, sticking a moment to love the upper. But essentially what content real does. It enables you to stream line all sorts of actions, so which is going to great? Some text. The and we're going to go here on content real again, which for some reason it's to get moment. So that's we're here is dismissed This thing small. Think. OK, here we go. Usually the works on the first try, except when I'm creating a videos. So let's go over here. And as you can see, I just accepted all those on boarding flows on, uh, I'm going to create a few texter, going to make them bigger incisor and listen at the 12 uses some random, full names. Well, content really is it is going to enable us to generator. These names were really quickly and you can you have all sorts of options, and I'm just going to click on apply to all. As you can see, it applied to the names very quickly. On duh, I could do the same for all sorts of different elements. Really, even for U. S. Currency, which is really useful, can simply go ahead and put on a set of numbers. And here we go. So it's really, really useful when creating anger, dash birds or websites where you need some sample data. So instead of going in the one by one. And, you know, coming out of this round of numbers, which is time consuming and really were health of the value, is you can simply use a wagon like like concentrate on Earth created these values very quickly. Another great thing about content real, which I used all of the time. A is that the random generated the pro for pictures with the al Bitters. So Quicken avatars are taken up by all. And basically it's going to sort out the summer images And some, um, yeah, profile pictures. Essentially which or really good looking professional. And, uh, yeah, this is pretty much something that they use off time. So this is it. When he comes to play against now, I encourage you to go on manage blocking section again and start exploring. Different blogging is because there's really a lot of them, and I would highly recommend you to have a look at the most popular ones. There are. Some are really great ones for icons, for example, for the groom material, Aiken's for Flows charts, even for the Inspector, is pretty cool. And yeah, I guess at this point is just about going ahead in the the bragging marketplace and having a look at all of the different plug ins, which you have available in Sigma since you have really have a lot of them. And it's a constantly growing library off assets, which you can leverage to make your design projects faster, more efficient and better. 29. Keyboard Shortcuts: about a keyboard shortcuts. A in fig MMA keeper. Sure, Casa in general can be really, really useful in order to speed up your workflow and also make your work easier. And the fraud? This course I introduced you to several shortcuts. However, you might wandering how and where to find the all of the shortcuts. And in fig my it's actually very, very easy. You can go on the very bottom, right? A question mark. Just click here on the and go on the keyboard Shortcuts. Now, as you can see, this entire panel is going to open up at the very bottom, and it's going to show you each and every short gather that's available in fig MMA divided by these different groups. So the essential ones are right here. So, for example, pick a color. If you go and use, um, this control key and the sea, you can see that I'm going to be able to pick a color. So, for example, I have a few rectangles right here, and, uh, I simply go and use the pick a color option. I can literally use the color picker right away, But let's go. And the brief to go through this this menu first. So, as you can see at the very top we have, the shirt gets divided by the different type of actions that you can use. For example, these air, all the shortcuts related to was all the shirt gets related to view, zoom, text the shape and so wanna until we reach to the components. Now in this video what I just want to show a few of the most use once and the ones that they really are used all the time. So they're all the ones that related to the tool. So, for example, for one to you is the move toe going to click on V one. Teoh Framer. I can just go in the click effort and I'll be able to use the frame. I used all of these ones like rectangle ellipse lying to text tool. Also the comments and the caller. I would say that all of these air or the ones which are used on a regular basis so my best recommendation is to actually go through this menu one by one and try to memorize the essential once, because you're going to just make your workflow so much faster once they become second nature to you. And it's going to happen in just no time because you're going to figure out how efficient is to actually work in a design problem that science after once, you know all the shortcuts. Now when it comes to the view, um, to older, I don't really use them as much. Um, like all these things like rulers outlines and lay upgrades. Pixel greats wouldn't use them as much of the zoom wants, though, these essentials, and that we already covered Visa in the very first lessons. So you should already be familiar with some of these, like the zoo Mina and the zoom outta and also zoomed to 100% which is really useful, especially once you're zoomed the in ah, away from your actual art board. And this can really be useful. Teoh have ah, the overview A to glance in no time. We also have ah previous page X page, which can be useful to learner and, uh, um someone some other ones. Um, let's go to three topography. Also, the boulder d italic underline these ones. I use them occasionally, and we also have the text line left and so on. We have to make in this video too boring, and we felt much, Ah, substance moving forward. My best recommendation is for you to go in this main. You have a Luca and try all of these air keyboard shortcuts and that really spend us sometime. A memorizing at least the most essential ones in the tool sections for sure. Essential. And the some in the view. Zuma at the in textiles and I can guarantee you that this is going to be a really good the were fii investment. I myself, I worked on hundreds of projects on menu like It's and, you know, projects where I had, like, hundreds, hundreds of screens. And I can tell you, by far my biggest advantage. Waas, in order to make the workflow efficient and the easy on myself, is to have the right blagging and with the keyboard shortcuts because it just makes ah whole lot off a difference. It's a small investment of the make up front in your education, but read us pay off long term. So that's not have a look at the all of these menus. There's There's so many sure gas and you have, like so many options and the opportunities. So, yeah, that's best recommendation, and I'll see in the next video. 30. Sharing Files: this video, we're going to talk about the sharing options, which is one of the reasons why I love Big must so much because it's so easy to share documents and design fouls. Even with people who don't have a stigma, they don't have the software installed on the computer because they can open it directly from the browser. Now, in order to share a common foul with someone, you simply have to click on the top of right share button. And as you can see, we're basically redirected this model with a few options. So the first thing that you want to consider is, ah, the invited section. So basically, if I enter a anymore so you know, sample karma, I have the option to allow thes user on this, which is going to receive the signal fire mafia, Imo toe either view or edit. Now, the difference between this is that if they can, either you give them editor. Basically, they can edit the file so they have the same options and abilities as you have. If you just give them view option bacon, bacon alter changes, things like you know, the topography. They cannot move elements around so they can only view it as a view on the I read on the document. So once you selected these three options air related to doubt toe, you can simply click on send invited. Now, another brief thing about fig my eyes that I can send someone did link directly. And if you if you see over here, actually have an option anyone with the linker or only people invited to this files? Basically, I can send link only two people with files or I can send a link it to anyone. So I even if they didn't other their email, they can still view the file with the linker. So this really useful If you want to share a linking I'm warning from way again, you can select if they can edit for dicking view and the essentially, In order to access this link, you can simply click on a copy link and you're going to be able to send them this link which, you know, they could have access to either view or headed the thing that file. Now you can also use the embed code, and this basically allows you to embed the stigma file inside a webpage. So it's almost like one of those Google maps integrations where you see the portion of the mouth. But it's so still interactive, so you can still move things around and view defile. This can be used for in some scenarios about you. 99% of the time, you were not going to use it unless you're doing good. You're maybe, like sharing thing my file in an open source way. Or maybe you're doing our tutorial in a block post. So yeah, this is ah, pretty much it when it comes to the sharing options in the figure. 31. Comments: in this video, we're going to talk about comments now. Comments in Sigma are really, really useful to collaborate and that receive feedback and manage feedback from clients. So the way comments work is simply see the clicker on this comments icon right on the top bar and that you're going to see that we have a few comments. Now we have comment 12 and comment free, but there could be more in a document. So you know, we could have a comment here, for example, in the way that they create a new comment, as you can see, is while 1/2 D commenter V selected, I can simply click anywhere on the design file, and I can leave the comment directly here, So I'm just going to leave a comment click on poster. And the great thing is that the basically whoever is lengthened to to this fig Mount Zion file is going to receive a notification, especially if you live a after director. So basically, if you click, come out, you can see that at the moment I am seeing the option to select myself Now. The great thing is that if you shared the this figment file with other individuals. Other team members. You're going to see all of them right here so you can potentially Daigle multiple people in the organization and that they're going to receive on email notification directly if you if you mentioned them. So I'm just going to select myself and I can write in government and I can post it. And, yeah, it's a pretty useful It's, ah, way, way better and more organized than going from emails or maybe messages on you know, Facebook. What's up? Things have done nature. It really helps you to organize the workflow and make everything easier. So the way you do usually work with clients is you would share the feed my link with them, and we're going to go for the share options in just a moment. But basically, once they're in the figment Scient file, they can simply click anywhere. You simply have to tell them that they can click here, think anywhere, and they can leave a comment. And the great thing about the comment is that you also have and see all of them directly from this section on the right. So as you can see, I have old governments organized and I can click on them and it's going to redirect me exactly on the part of the screen. Worded comment is so this is pretty useful. It also talent tells me useful information such as who made the comment? What is the comment? How long ago was the comment made? And for example, we have only comments from today. But if you have governments from even mounts ago, we're going t o be able to see the dates off those comments. So this is really useful information. I can also click on Topper right section, and I can also filter to see on the my comment a local mints or show resolved comments, which are essentially governments which already has bean solved. And over here I can also basically set the notification. So this is really important because basically saying, select which common threads on this file you receive the most and notifications for. So if it's like all comments, grief is like the only yours or non that's going to have an impact on the notifications that you and your clients are going to receive when comes to to the commenting, so I usually have it set out to all comments by default, just to be sure that received the old identifications on the I highly recommend you to do the same, so I wouldn't touch that. The setting. Since it's like this by default, so is it. That's pretty much it when it comes to comment on the I'll see in the next video. 32. Export Options: in this video, we're going to talk about how developers can use the big minor to get extracting assets and also explore all the CSS code and the relevant information for them. So in one of the sections off this course, we created this Web up designer and that we're going to use it as a way to explain all of these concepts. So one thing that they do, usually when I'm working with teams and this can be with one developers and I worked all the way up to teams with 30 developers is I'm going to share the stigma project with the ANA and I'm going to give them, ah, view access. So in another reader, we already explored that the share option, the options so you can see the details in that specific video. But just to give you an overview, I'm going Teoh enter their emails and they can access and create a market counter, which it takes two minutes. And I can also copy the link a directive, Danna. And basically, once that they access the fig, my account, I would usually shoot a quick video explaining them what I'm about to show you right now. So, as you can see were for the most part in this course, we only worked in the design tub. However, if you see on the very right, we also have a code stub. And if you click on it and you start selecting different elements, you can see that on the right. We can see some really useful our coding feet according options and the actually coding informations so, such as the phone family from South on 28 size lie heights. So these air really useful for the developers. And as you can see as I'm moving around the different, uh, selecting different elements, you can see that in this view, I also have information when it comes to the numbers delay out the spacing in between elements. So this is all informations, which are quite useful for the developers. And when he comes to extracting assets such as icons, it's very easy on their part. They can simply go ahead that human design that but we can export and pretty much select whatever file four months which they need. But usually what one thing that I like to do is to already prepare these assets for them and send them over either via envision or directly in a folder. So, for example, I know that I wanted the icons in SPG four months since its back performer and I'm going to already prepare the S P G's for them. I can also rename it directly from here so this can be item one and saw Wana. And this is basically things are basically two options which makes ah life much easier for both parties and then usually went on working with developers. If they have any questions, I'm always happy to hope Call with them or I can even record a quick a loom of video in order to explain that these things are directly with them. But for the most part, it should be pretty straightforward. So yeah, that's pretty much it, though, when it comes to working with the Albers and giving them access to all of the CSS, the coding and, um, images and icons. By the way, we went through the eye curs to this probably I the hikers. But the same is it is exactly true for an image. So if we have, for example, an image right here, I can simply tell them to exported working from hearing PNG energy, Bagger or I can that already prepared these files and explore them and send them over in a folder or being vision or some other toe like that. So that's pretty much it for this video and see in the next. 33. Export: video. I'm going to show you how to export the images, Aikens and also group of elements like buttons. Now let's start with the image. If I want to export this image, I simply have to select it. And on the very right on the very bottom right click on the export on the plaza and basically you're going to see the following option, probably the previous going to get checked by default. But if you click over here on the at work, you're going to see exactly what I'm seeing. And as you can see, the very first elemental which we've seen the export option is Ah, this one X. Now what does that mean is that it's going to maintain a the same oration and the same size or so. For example, this image is 1644 pixels by 1095 pixels, so this is going to export it exactly. With this measurement, however, I can make it Ah huffer and by just selecting your point of five Xer wreck and make a double by simply clicking on to access. The same is true for these other many measurements right here Now We also have, ah, summer off this, um, other type of measurements, which were basically saying The with is going to be 512. That's what the W stands for, and this one is The height is going to be 512. That's what they hide stands for. I can also selected and simply change it to any number, which I want a about the food up For the time being, we're just going to keep it up the one X and over here I can select between PNG Jake Dagger SPG. Pdf. Now, if you're not familiar with these, a type of file extensions are just briefly go through them usually PNG's or grated for having elements with transparency on dure planning on using them, for example, For the weapon, de Peg is usually used it for a lot of images. This would be a great case for Egypt J Peg Export, SP, Giza, or usually used for vector graphics and things like items which were going Teoh Ah, seen a bit and then the PDF is pretty straightforward is a pdf file. Also, it's ah really good for things like we boards, um, see visa and any type of file which need to be exported in pdf. Really? So in this case, effect liquor on a J. Packer. Another thing which is important to consider is the fact out. Once you click on the export, you're going to pretty much exported with the same name as layer. But you can. But you can change the name of right afterwards. So we're just going to rename it to image, and I'm going to sell it to save it on on my vista. Now, as you can see in the second example, we have a bottom about recurrently facing a problem because if I selected, I can only see the background. And if it's like the text and I scrolled down, I can only see the text. So if I'm going to try and export these two elements, there won't be grouped together. Now we never to solve doubt. It's very easy. You can simply select both for these elements, right click become group selection. Now, if I take on expert again, you can see that I'm going to exported the entire bottom. So again, for example, I can select this as a bank not really recommended, but we're gonna do it just for these video. I'm going to save it on a swivel near which is this stop. And the very last elemental, which I'm going to expert, is this icon right here. So I'm going to click on Expert and the four icons I usually like Teoh export them in a visa as it's the most of scalable and most friendlier file for you. Abby, Let's say so. I'm just going to rename this to Likeable. And, uh, if I click over here and I go to my desktop, you can see that they have the image, the button and the light bulb selected. And of course, you can dislike these and out them wherever you want in your folders by simply clicking over here, and that you can do the Alta very easily. So this is pretty much it when it comes to exports, and I'll see in the next video 34. Import from Sketch App: Sigma allows you to easily import sketch files. And in this video, we're going to show exactly how so. Let's go here on the sketch up Sources. As you can see here is one of my dashboard designs, of which I contributed some time ago and I'm going to download this sketch file. So it's ah, upload. It's the logic over here, and what I'm gonna do is I'm going to bring it in the now that stop. I'm going to double quicker on the ZIP file in order to open it up, and I'm going to close this one, and I'm going to open fig MMA now in order to important sketch foul. It's very easy. You can simply drag and drop it on top of figure up or you can I go on the import option. So if you go over here on import, you cannot browse through the files off your mecca or PC, and you can import it that way. Now, as we can see, once we double click, the fall is going to load up. And as you can see, the file is, ah, in a pretty good shape. Overall, it's looking good. Sometimes there's not. There's going to be some, um, issues when importing sketch falls. Maybe, especially when it comes to, like, nested components and advance the elements like that. But for the most part, I think the they did a great job, and it's definitely a very viable option or to easily import sketch files. 35. Dashboard - Part 1: in this video, we're going to create our very first that Dr Design in Sigma. Now the design is going to inspire to be inspired by one of my most popular dribble shots, which also happens to be the doctor burn off the printing company that I helped to raise their first round of funding as well. So let's get started. The very first thing that we're going to do is to create a frame. So I'm going to go over here and the under this stop. I'm going to select the this stop. And here we have our frame. Now I'm going to rename this to simply one and the very first thing which I'm going to create that is the side menu. Now, as you can see, this is ah, project where I'm going to essentially be inspired. But I'm not going to copy it big. So by pixel. So the very first thing that we want to do is to give a linear color to our sidebar and the the 1st 1 I'm going to use it the same purple on the very top, not going to use the I drop to in order to get the exact color. Now I'm going to do the same over here for the bottom wana. And as you can see, we now have the same side menu. So one other thing which I'm going to do in order to make the the workflow easier isn't going to click on Common and Plaza. And as you can see, I have more real estate on my monitor. So let's go ahead. And also are the first texter going to use CO month plus the doctor again and that we're going to use the Lotto for this specific project, which is a free Google at fund, which I'm leaving here on the assets Bano. As you can see, if you simply quicker on the phones, you're going to be able to download the latter, which again, frequent fund, which you can find over here. So just click on the world family and you should have it inside your your project file. So again, as you can see, we're going to have the top headline. I'm going to write balance, and I'm going to make this a regular now. Let's are the little better off more fun size, and I'm going to place it more or less here now, since that this is a one off screener, we're not going to go very precise with each and every phone size. Usually if I'm working only crime project, I would create the some specific font sizes, which are essentially going to be the ones that we're going to have in our design system. So basically we're always going to have the same phone sizes from colors and form families for all the headers and off the park of tax on the things like that. So I'm just greeting this wrecked and go. I like the stroke. He made a deal bus to lower. However, you can also go over here and by leaving the A positive E at 100% you can make the slower and I'm going to are the a little bit off a roundness on the very top of So, as you can see, this is starting to the shape and we need. Now I'm going to make it later, but more give it a little bit more with. I'm going to move it over here also up, and I'm going to create the free sections that inside of this rectangle Now I'm going to use the line option, and I'm just going to create the line, going to adopt a gated by using shifter plus alter, and I'm going to do it out again, and then one more time. Now, as you can see, I created the more lines than we need The basically, the reason being is that I'm going to go over here while selecting the mall, distribute horizontally. And now I'm going to get rid the 1st 1 and the very last one. And we're essentially going to have equal spacing between these free, different sections. So going to use the eyedropper tool again, honored to have the same exact color. And I'm going to help lines over here. No, I'm going. Teoh obligate this text layer which, as you can see, is needs to be put above er And as we can see here, we're gonna need the a few items. So the very 1st 1 is the amounted Just going to go out, the around them figure out here the euro, And we need to make this old caps, as you can see, just made out by going into the typeset things going to make this smaller and I'm gonna make it black. So Okay, this should work, and it's going to center it. Now, as you can see there, these lines of these guidelines which appear as I'm working on my project, which are quite useful, actually, they basically allow you to do a better job out making some quicker alignments and they all decisions. So yeah, this is pretty cool. We now need the those two small dots below, and this layer is interfering a little bit with the type of work I'm doing. Er So what I'm gonna do isn't going toe lock it, and this is going to prevent it for from moving a whole bunch. And it's going, Teoh, make a oval shape over here, going to not have any feel. And basically, we're going to have this l And, uh, I'm going to simply copy the green color, which we have right here, and you make it a little bit more saturated. That looks like a better on duh. I'm going to go over here on the l. And I'm going to copy because now, as an copying the code on the stroke can see that this now is taking shape. But I'd like to have this this whole section to be smaller. So I'm going to press K. And as you can see, we have the scale to and I can scale it quite easily. No, I'm also going to press shifter and Alta together, and we're going to make the stroke of a little bit bigger because once I scaled it down, basically the stroke also scalp Donald fit. So I'm going to give it the value of one. And I wasn't going here and going to update this Dexter to t. And I'm going to make the l in a different color, which is going to did this bright blue and the legis give it the value of around this lines , then going to this value as well Probably wanted them to be a little bit bigger. So yeah, that's ah, that's more or less and quite happy with it. I'm still not to fund about the stroke. Let's give it the value of 1.5 and yeah, I think I think there are much better place now, so Okay, this is Ah, this is perfect. I think we're going well, and we're going to select all of these elements. And by the way, I grouped the L and the T together. So now I can use the Stryker, which is basically selecting all of these elements. Click here in order to center them, and I'm going to group then one more time, simply because it's easier to manage. This is easier to manage this section out. And what I'm gonna do is I'm going to copy this one more time and again. And I basically didn't out by using shifter plus alta, and then I used common be so basically, this is carping on the same a liner which you, um, did the initial the initial copy. So it's going to move with these elements. And remember, we locked this one so I cannot move it. I can still keep it locked and decreases the Heitor. So I'm gonna do that directly from here. And now let's just out a few few different values over here going to make this USD. And this is going to be pounds. All right, so I'm going to Amanda. Check the text here is well, and, uh, it's going to move this. A few big sells big cells over here is well, and I need to change euros because obviously this waas not euros. We were showing a first place. So they should be working much, Much better now. Ok, Perfect. I think we're we're close to the to the original. Let's make this well but smaller. Bring it over here. And now we're going to create this bottom section which is Ah, de bell the activity just going to rename it activity because I don't want to make the I want to have two guys balance so I'm going Toe also copied this element right here. And as you can see, we have this salam ente and I'm going to created this this part off the menu. So I'm going to copy and paste. So as you can see, I'm number using elements all the time Pretty much leveraging Go water. I already be ableto and again If you were if this was a real clients project will be selecting the typography for the first time. But then we would be reusing the same elements over and over and over again never to maintain design. Consistency sang Consistency is something which is really important. And if you're first starting out in the design world. You're going to learn this this lesson pretty faster. Um, but yeah, after doubt, it is just I'm out there of off diamond in order to when it comes to, you know, creating design systems and learning how to how to be efficient with all of these things. So, yeah, but we're gonna do it one step with dying. So Okay, I just what they did here is a century created, erect, and go give it a lot of radius set out, We have the spiel form, and then I'm going to use the white collar, and I'm going to give this a section collar off glue. So this would be the current selected stater in this start Inga menu. I'm going to the OPTIC ate a few of these guys over here and that we're going to change them £2 tolars and euros. Now, what I'm gonna do is actually change it to heroes USD em down. So it's more consistent with the elements above, and I'm going to change the caller right here, so doubt. It's, uh, simmer to this to this gray as you get seen. And I'm also going to make a diese feels smaller and as we're going to take a breaker in just a moment, since I want this video to be too long, if you want to break it into multiple into multiple sections because I know there's a lot going on. And the previous videos were more relaxed because we only had to explain one concept at the time and was pretty straightforward. Now I realized that there's more things going on about. It is just part off the learning experience. It's going to to look overwhelming at first, but if you go or it might, it might not be. But if you go step by step and also rewatched the video multiple times, especially for first starting out, this is going to be really, really useful because you're going to do these these actions a lotta for going to used Sigma. So it's definitely something which you're going to pick up quite quite faster about the beginning. It's going to take some time, so let's make this dubbed menu right here and I'm going to use these appeals again, so let's go ahead list obligated this element. I'm going to bring this further and going to with the value of for 21st August 2020. And I'm going to use the same color as we have right here now going to use the same stroke color as well. And let's group it together. And it stopped a gated. So we're going to have the second value, which is going to make it until 28th. And they were going to other A to in between. So it's going to be right right here. That's like this group element. And as you can see, we have, ah, the menu as well. So I think we made some good progress over here. What we're missing now is this bottom table and the decide menu. So we're gonna continue with the next Sparta in the next video. 36. Dashboard - Part 2: we're going to create that the side Manu for the dashboard, which we started creating in a part one. So the very first thing that we're going to see if where we have a look at that the references dribble shelter is that that we have a few ICANN's together with the side Manu. So this is going to be a great lesson because we're going to discuss Aiken's and how we're going to implement them efficiently in figment and that if you have a look at the Assets folder, you can have the Assets page. You can see that I already added, are fewer acres so that they're ready there so you can copy and paste them. But I just want to show you the entire workflow, which I went through you never to get the icons. So all of these Aikens or from the Google Material Icon Library, which is a very common Google material e. Aiken set and basically it's going to allow you to have all sorts of different icons. You can search for them right here, and as you can see the results of late in real time, and you could also simply go ahead selectman I can and you can download it over here. Now we're going to the law, then in ah SPG format and that the reason being is that when it comes to Aiken's, this is a format which allows us to have them in, ah, in vector format. So it's going to be very easy to implement for for the developers, and they're going to be scalable. And they're going to look perfect that a toll sizes. So do you, whether they just did this is I don't love it and the My Downloads folder, which is going to drag and drop the icon directly into fig MMA. Now, as you can see on the left, are currently having this icon in a framer. I prefer to have it in a group burn just that they don't have extra space around the Eiken . So I'm going to remove the framer. I just going on the right clicking, and I'm just going t to say I'm group and, as you can see now, the images or in a group. Now I'm going to just the copy. These these images, which I have, is a reference I'm just going to click on them and like them. And I'm going to copy them directly here in a decide menu. Now, as you can see, they are smaller. So we're going to increase the size by simply count the scale toe. I'm using the shortcut k whole. Not the he Burt. As you can see now, they're a little bit too big. I'm probably looking for a size around these lines, and I'm just going to drag them down here and the movement down so that I can space them vertically. So let's do that right now. Got do it like this. And I loved this guy up, and this one opens well, and that you might may be wondering what I'm doing right here. But I'm basically regarding and then like this that I can then click only the Alliance center and boom, we have them centered. I also want equal spacing between one icon and the outer. So I'm going Teoh use distribute. So OK, I think we're in a good shape again. They're a little bit too big for my taste, so we're going to scale them down a little bit more. And, uh, Morris Well, they think where we're in good shape now in order to make the work easier. Just going. Teoh Locker decide manual so that it doesn't move anymore. I'm going to change the field color off the items to whiter. I'm going to give it the capacity off around the 50. Actually, 60% is that we can have a little bit more. Is it bleeding when it comes to the Aikens? And I'm going to already predisposed the order in which the icons are going to be more or less? And now we're going to make this no cops anymore and then going to say rights here very creatively. Menu item 12 free and so on. And, um, let's change the color off this element as well. And again, Guys, I'm creating these topography elements on the fly. But we're working on a really client project, probably going to simply creator a few of these Brophy elements, and then you're going Teoh, reuse them throughout the entire project. So that's usually how Briggs I actually prefer. Just determine itin said the menu item. So let's just quickly renamed these for and feel free to other, any name of which which, like feel free to be creative, know as adjusted right here. You can definitely go ahead and the more creative with these names and make it feel like it's a really lash burger. So let's go ahead. And also Dr Gated this element right here since we're going, Teoh need it, and this is going to show the overall noun toe and let's ah better am and clicking on Commander and I'm deep selecting. So basically, I'm selecting the typography inside off the group instead of selecting just group, and I'm going to go over here and click on these two, um, selection colors. Make them wide, and I'm noticing that this one is not 100% white. Some going to deep selected them like think young commander and I'm going Teoh, increase the capacity. Since we have the some capacity now, I'm going to go over here on the line and then going to domesticated here. And so I just copied and pasted it using common sea and common V. And I think that in the original concept, we have it left lines. We also have some options to browse through the different units in a different over the values which we have a so I'm just going to do the out. And I'm basically going Teoh over here used the oval tool by clicking on Oh, and I'm going to make it smaller around 8.2 big cells, and I'm going to make this one white. Okay, If I'm if I'm going to faster Sorry, You can also make the video is a bit slower. Richard Aries. Doubt the adoption. Or you can simply look at the video twice A and that's going to make things easier for sure . All of these concepts again, they take time to really to really be learned and the winterized. So this is going to be a process. But once you get these concepts, you're going to move really fast in stigma and really efficiently, and it's all going to be worth it for sure. So okay, I'm quite happy with how the this is looking so far. Now, I'm just going to borrowed the arrow from the bottom. I can, and I'm going to do that by simply clicking on this icon over here, going to copy it by using common see, and I'm going to go on the top and use common demeanor to baste it. Now I only want the hour with the arrow. So this is an interesting case. So what I'm gonna do is I'm going to double click on this icon. And as you can see, I mean edit motor so I can just copy visa points by using shifter. And basically, if I weren't using shifter and I selected these two areas, you can see that the previous one is not selected, but effect weaken shifter and keep holder. I'm going to like that. All of these points right here and then just going to use the back bottom nerd to cancel those areas. Now we have just the arrow. So what happened that I'm going to make the arrow face towards the very top, So let's keep it like this. And I think we're good with the side menu, but it's just make the hour 60% in order to keep the consistency with the other elements. And, yeah, the only thing I will be in the single is the top logo about for this case. We're just going to keep it as it is right now. And in the next video, you're going to see how we can create a the bottom section off this web 37. Dashboard - Part 3: in this video, we're going to finish out Booty Dasburg, which we're starting the past videos. So we're going to create the able writer at the bottom. So let's go ahead and start designing. So I'm going Teoh simply over here, and I'm going to obligate this layer which we locked previously. For some reason this modest people appearing. But yeah, let's just unlock this this layer right here and I'm going to replicate it. So I'm keeping a hold of the all the shifter in a moving D layer down. So basically, I can created this day applicator in a faster and efficient way. Another thing which I'm going to do is I'm going to duplicate it. These lines that we have on the top going to select the top layer and just going to bring it down and change the orientation by using shift and are and let's go ahead and make this the same weather off the container. So I'm just going to do it they can, because it was slightly rotated and okay, so here we go. I'm going to duplicate this a few more times, and I'm going to leverage the distribute option, so I'm going to actually create a one more computer on the doctor and one on the bottom. And I'm going to select all of these layers un selected the Maynor container, and then I'm going to distribute horizontally so that we can have these nice space singer, and I'm just going to delete these lines on the very top. So, as you can see now, we have this container with he call space, the elements. So I'm also going to create the the liner. So I'm going to just line item by clicking on l. And I'm going to give it a stroke off, free out. Almost going to go over here, get the, um, and make also this elemental with No, um, we've no round in this whatsoever. I'm going to duplicate these air a few times without we can actually leverage it for the other ones. So I'm just going to assume in and go ahead over here. And as you can see, we're going to adopt it. Um, and they're going to obligated a few time by using Komen plus de. And as you can see, we have this nicer and that even, um, colors. So I'm just going to change it over here and the boom we have, ah, have a few different dollars, most of going just like the 1st 1 and make a greener using this shortcut for the eyedropper tool, which is control plus C. And this is going to enable you to quickly access the eyedropper tool. So going to abdicate the text again? And I'm going to just copy the Dexter. So it's 450. Load into your British on the account, and you can see it at some time to get. But it was all I could only be very right. So just out most of going to copy the decks below, which is essentially the data. So 16 January State 1020. And I'm going to change the color off the text and make this one regular so that the the main focus is on the on the notification over here, and I'm going Teoh also copy one of these elements. Bring it right here, and I'm going to zoom in a little bit slow taking see things better, going just like the typography exist, the tool changed color above the Stroker and the individual feel off the texter and, as you can seem, created a baseline, which I can group together. So a sect that hold these elements using common velocity in order to group you can also right click and group selection. And now we can complicated by again clicking shift assault. And then you can see that we created a quick obligate. I'm going to use common D just a few times, you noted, obligated. As you can see, we have these, um, the Skopje's, but they're not greedy in liner, so I can do it manually. I can also adjust one and leveraging distribute too nervous to help us. So as you can see now they're nice and even mostly going to change that. The topography? No, the blue ones. So again, using a control plus senior talks, it's the eyedropper tool Quickly and efficiently Go. It's like these guys again because we need to change the stroke and again dropper tool and pretty much have it. We can change a the different values different. No, you rose pounds with everything prefer, really, and yet we're pretty much set with this dash bird. And again, if you're working on a climb project or working within it Dema and they want to keep things clean. You ideally want to clean out but visa elements on the left. So, for example, you can start creating our groups. You get started Renate Minga, the layers and groups thing. It's pretty easy. You seem to have to select the elements on basically that. Then you group them together whenever you want to change a name hospitable clicker and change the group to whatever you want, really? So it's pretty straightforward. I'm not going to do this because it's going to be tedious and boring to watch, but you get a glimpse off. You get the overview when it comes to these actions, so hope you enjoyed this small serious on integrated this expert screen, and I'll see you in the next video. 38. Prototyping: in this video, we're going to go fruit. The prototyping panel and briefly discussed that the initial prototyping features and Sigma . However, we're going to have a real life example and the all of these concepts are going to be easier to understand the in a later video in which we're going to create our first prototype. However, it has been said that let's get started. So the very first thing which I'm going to do is I'm going to create a new framer and I went to select the iPhone eight. Lhasa. However, any of us Thea other devices are totally fine as well, but which is going to use this as a our reference example. Now, in order to go to the prototyping, features have to go in the top writer. And as you can see, there is this text brought diaper, and as you click on it, you're going to be able to see the nature prototyping features. So if I d select and I don't have the friends like that anymore, you can see that I have access to the overview set things that so, as you can see over here against like, the device which I'm using. I can also set it the orientation. So if it wanted portrait or landscape. Now, as you can see, if I click on the device is I'm going to see a bunch off devices options which are pretty much the same with the ones which I have on the frames of selection. Now, I can also create a custom size, not forfeit and possessed presentation. And as you can see over here, I can also change it. The model. So if you wanted the gold version, the silver or the space gray version off the iPhone eight plaza, I can update it from here, and you can see a quicker preview right on the button. Now, where do you actually see the prototype live? Er is a by clicking on the stop right present bottom. So if you go ahead, you consider now a new tab in fig. MMA has Bean has appeared and it has. This is Mull Triangle. Who next to the text and that What? What this is essentially is the presentation mode. So I'm actually seeing a the presentation moder off this frame. So, for example, I out the a rectangle and I go back to the designer, and I'm going to change the color of this practical just for um showing it and they go back on the design. You can see that now. This is updated in the real time. Eso, As you can see, this is quite useful. You can create prototypes of all kinds, and you can see a preview of what the real upper is going to look like. Now, if you want to change the background, let's say that they want a black background. I could simply do the out from here. And as you can see as I'm jumping back into the presentation mode, the entire background is black and I'm going to change the model of space gray so that this is going Teoh the better in blacker. And that's pretty much it when it comes to these sections here on the top. Now, if it go ahead, the and the selected this for his frame, and I'm going to die obligated by using common see in Command plus V and the windows, its control, policy and control must be. You can see that now I have a visa to art birds going to double click here. I'm going to rename these real quick and I'm going to change the color. So going to go on desire and I'm going to make this read the and we have our first to our parts. So what I'm going to do is I'm going to select the first framer. I can do that. It also after clicking here and brother type. And as you can see, I I see these handlebars. But what is most important is this circle right here, which is at the very center vertically. Now, if I click and drag this circle, you can see that on our is being created. And this is basically the linker option which we have. Nirta created a link between one screen and the other. So if I hover over the second frame, you can see that now De Lenka has been created. If I release it and the reason I know that it's ah, its length is basically I see the stroke on the outsider The blue Stroker. Never really, Liza, You can see that now I just create that my very first link between one frame and the other . So if you go over here and click anywhere on the screen, you can see that I'm being redirected to the second Sweet Now I can did the same when it comes to the second screen chicken click over here and I can link back to the very 1st 1 So as you can see anywhere, I click on that the screener. It's basically going to have this interaction where on top, on going to navigate to the previous, to the screen and from the previous screen to the next one. Now we're going to explore Ah, more interesting example further along in the course where we're going to link individual elements and we're going to create all sorts of different effects. But for now, let's just keep it up. This and one thing which want to consider is the fact that once it's like the frame, you can see that the many on the right changes. So at the moment it's saying that on top, and we have you can see many different options, such as drug, while hovering, pressing also have these mouths and touch items and basically saying that on top and going to navigate to and again over here. We also have a few of other options to frame to. So if you have a lot of element, a lot of the screens in a particular design project and you know the name, you can also updated the linking directly from here. So you don't necessarily need to drag this all the way around the design file. So that's another option. And we also have animation options over here, so you can choose if the animation is going to be instant with solve, smart, animate or one of these mover pusher who's lied options right here. So I encourage you to just experiment with this and trade if combinations, try different animations, options and overflow behaviors as well, which which is something which we're going to weaken on entire via about. So this is that as a no overview to the process typing features, and we're going to explore much more in depth. In a further video 39. iOS Project: this video, we're going to start creating our US up from scratcher by using a like it. And in this video in particular, I want to show you a different approach compared to what we did with the doctor for designer. And that is we're going to leverage a you like it in order to speed up the process and ah, using the elements which are going to be in line with the Epple guidelines and style and that we're going to use this beautiful You like it, which waas done by Joanna Regina. And it's truly are great starting place if you're looking to start in our US off project. So this project is going to be more copy and paste rather than creating everything, every single element from scratch. And you can see how this is going to enable us to speed up the project by using elements which are already down and then tweak in the project based on are specific needs. So let's get started And let's have a Luca after the you like it in general. So over here we have the basic apple. You why we have the colors, then we have a tape biography page, the SF symbols and all the symbols which basically, if we zoom out, you can see that we have a lot going on over here. And this can truly help Pastor in a lot of ways, as we're going to be able to see in just a moment. So let's get started. Let's go to the design page, which is thievery top one. And I'm going to select Dislike the for Aamer tour and I'm going to select the iPhone eight now, as you can see, that the extra is quite smaller than that frame. So I still want to have this text of Barber just to give it as a reference. So what I'm gonna do is to click on K, which is essentially scale toe, which you can also Manulis liked on the very tough laughter and just going to X find that quite a bit. All right, here we go and then just release. Now, when it comes to the very first screen, which is the log in, we're going to copy and paste some of these elements. So for logging, we need the A input, and we also need the the bottoms which we can find right here. So just going to copy this, which is, as you can see from this icon right here, it's the master component. And that means that this is going to dictate all of the instances which we're going to create. So essentially, if I go over here and I already called pay the the component and they go over here's like the frame and taste that then by using common b, you can see that on the instance has been created off that master component. So essentially we have it in our design now. Now what we need is also the top menu. So we're gonna go over here and look food the top, Mani's. And as you can see where since we have several elements, we kind of have Teoh look around a little bit and we also have several options when it comes to to the top menus about what I'm looking for. It's exactly this one right here. So the very left deep bars, the status bar. So just going to cop it in, and, uh, here we go. So as you can see, if I dips like the insider, I can see that the current founder is Ah Assefa, which is the formed used the Tepelena us er. So one of the things that I'm gonna do right now is to copy one of these larger titles and I'm gonna go back into the design on and just based it over here. I'm going to change the name to log in now, Now that you have a deal, log in. I think that I'm going to go with us and full alignment in the specific case. And now we need some input fields. So just about searching around first good input fields and just the opium paste them then And by the way, guys like Visa, you like it's can really help us get out of the process. However, one thing that I want to show you is also the fact about it's not us straight forward every single time. So sometimes you know, you have to take in consideration the amount of time that you're going to spend just looking for stuff and you need to figure out if it's actually going to be worth it, because in some cases, especially for working on dashboard designs and you have a like this massive you I kids, we've probably like nested components and things like doubt you also taking in consideration the amount of time that it's going to take to just search around first things . So I just wanted Teoh show you this right away. So I keep it in mind. I think that we're going to use a component similar to this fund. But I wanted to make it so the main input fields. We're not going to be exactly like the US ones, but we're going to tweak them a little bit. And I just I just copied the search bar over here, and then I want to go on detach the instance and what I'm gonna do here. Since this is a frame at the moment, I want Teoh group it, So I'm going to go over here and group it so it's not a frame anymore. I also want to get rid off the search ICAM, since we don't end it anymore, and they'll probably want to use the same height as the bottom. As you can see, we can always customize these elements. Just be sure to detach some of these instances in order to have mawr freedom over the of the options. And I'm going to go over here the stroke click, the I drop color selector and I'm going to remove the field. And on the one more point of stroke, I think I'm quite happy with this simple field. We just need to change the the names on our so Aziz logging. We're going to need the I'm actually wondering if it's better to just bring this guy right here right up and ah, that's user name and let's make this one touch from the original color and let's make this one blacker and I'm going to make a group now. So I just made the group. I'm copping. I am basting this. We have the password input field ready, and there you go. We have our first logging screen, and I'm just going to a line of visa in a way which better suits us up. So I'm just going to make it a little bet easier on the eye. And one thing that they my want to consider as well is helping a forgot password in this green, since it's quite important so but first of all, just going to change the next year from the current wanted continue mostly going to copy and paste this text. But I just did outside off the dickering group. So it's like this. Let's change the color and let's detach from these styles. Since this is a smaller project, I'm not really worried about keeping the entire style are consistent with the photography and A with the elements on this. You like it since this year I get has a very precise go, but we just want to great this up and then make a prototype out of it, since that's going to be one of the most exciting part and you'll get to see the animated version off this flow. So let's go over here and let's move this one up just a little bit. And here we go. We have our logging screen for this, US up. Now what we're gonna do is we're going to, uh well, first of all, rename of this. So I'm going to use Komen, plus R and, uh, for some reason, the ire, Um, they're big matches resulted. That's fine, But let's go over here and let's do something more simple. Skin over here and double click on the actual name off this frame, not going to rename it to log in. Now I'm going to obligate it by drinking and holding shift all the and also moving the frame on the very writer going to rename this to sign up at this weird things happening again. Just going take one moment and then here we go again. And, um, let's just copy the text that right here the I think that we're having some, um, loathing issues, so Okay, we're back in business, so sign up, and I'm going to rename this as well to sign up and the or here, we're going to just change the input fields just a little bit. So going, Teoh, bring this one down and I'm going to group this and, uh, of the a second option, which is the email because we always want two of the m o off people for the users who are subscribing to our services. So that's quite they come and brought this Now the chemo and again. Guys, I'm making all this up. So, you know, based on the company that on the project working out, maybe you want a repeat chemo for a repeat password featuring the sign up. Usually those are always good features to have. And so, yeah, let's, uh, sit out, probably going to want an option to the angle between the log in and sign up now, can't it? And they probably don't need the for belt password out this stage anymore. So let me do one thing and just the click and hold Alta and move the cursor on the continue button so that they can see that I have 41 pixels off distance between the password and the continued call to action and is essentially going to enable me to see how many have here. So it's 30 so I need to move this cultural action 11 pixels below. So that's what they just did. Now it's working just fine, our guys whole resolving the issue between dialoguing and sign up. So one thing that we can do is we can left the liner all this we can applicator these elements Destexhe elements and the weekend first of all, Dutch them from the symbol make it regular, and also other Anna past city off 50% so, as you can see, are actually even over so and rename the text, Of course. So over here, sign up. Logging by the way out. I don't like the fact that we have these big boxes around the taxi. So what I'm gonna do is I'm going to select all of the text and go over here and resized throughout with so that it's just going to take on a the amount of space which we actually need. So I'm gonna do like this, and I'm just going Teoh Ruthie's and center them. Actually, you're these for some reason that were outside the frame. So what they did that is just just bringing them outside of the frame and back inside. And once I have this blew out liner on my framer, I know for a fact about that the elements are being put inside of the frame, things like this, and I'm just going to copy these again and do exactly the same thing. So, being outside, bring them inside, center them, and we are good to go. Probably one other thing. Everything considers just making these smaller. And basically the idea here would be that only torture you can change. Um, go between these two maybe Another thing that we can also consider is having a, um, Lina in between us. So let's make this line a exactly a scene caller as the input fields. And, uh, as you can see, we have it. Now, let's make the, um, the blue out of line off. So I'm just going Just creating a topic eight. Gonna make the the height for big sales. Make this say, color blue. Actually, I rather prefer having free peak cells, and I think this is going to work even better. Let me just center this right here. I'm center it. The more allies ride here. So what I'm gonna do here on the right is just going to, um, the applicator this. I'm going to copy it directly over here. So as you can see, I pretty much hover the same elements. I'm going to go here and change the text to sign up. And, uh, this tax is going to be log in perfect. So going on group, this one thing one cool trick that I'm gonna do over here is a dentist. Like the visa. Two elements and gonna use it. This small arrow as more circle as you can see over here. I'm just going to swap it. So this is going to make it easier, Teoh, Simply, like, swap these two elements to make the blue lying Gonna bring that to the right And over here , going to center these elements. And here we go. We have our a us, um, working and sign up. Screens are ready. So into falling videos, we're gonna work on the following screens. 40. iOS Project - Part 2: this video. We're going to continue creating this iris up from the base off the U. S. That you like it. So we left off with the log in and sign up and let's move on to created the forgot password screen now. So what I'm gonna do is I'm simply going to cop it. This and I used that shift, that plus all the Nora too, and just Drager and drop it over here. And I'm going to get rid of all the teaser elements below the sign up. Dexter, I'm going to center. Sign up Dexter and going to center. Align it right here. And I'm going to change in the text to forgot password. Now, usually on this kind of screens, you would have a enter Imo address and basically just a call to action bottom blow to send the me a new boss word. And we're gonna keep it as, um all the small caps over here. So I think we're good to go when it comes Teoh to this screen. The baby could consider bringing the bottle upper, but I'm actually okay with this layout since it's consistent with the other one. Whoever Another time really counted on, maybe out. I could consider just playing around with the heightening between a So we're keeping every single input the distance between the input and the bottom 41 pixel. So okay, let's just keep it like this. By the way, guys, keep in mind that usually this area is easier access to the thumb on mobile. So different since definitely something to consider when you're working on your projects. Now we have the forgot password screen, Donna, and I'm going to change the text over here. Forgot password. And we're good with that. Now we're going to jump Barker onto the sf symbol or actually the else in both panel and we're going to look for a alert model. So, as you can see, we have it right here. So just go on views er, and select the this top one Go back into design. We're going to copy this again by using shift plus out, and we're just going to draw, get on the very writer and that we're going to add the Allard in the very middle and that also apply a overlay in just a moment. So we're just going to write some Dominic fix here to sanction address, which you provided is no recognised by the system. So I'm just going to say to close, and at this point, we have our alert model and we need Teoh. Apply an overlay. So I'm going to create a rectangle right here, and I'm just going to make this wrecked and go go. And the field, the entire space that we have available in the frame mostly going to bring it one layer backer so sent backwards not back because you don't want it to bring it. You don't want to bring it all the way to the back, going to give it a color of white, and then we're going to make the capacity yips for accident. I selected the entire frame. I just want us like that, the rectangle and we're just going to make the overlay out 92% so and probably want to give just a enter off a drop shadow to this to this element. So I'm just going to add a little bit of blur and that reduced the opacity just that we can have like us more winter of a drop shadow. And here we go another thing that we could consider. It's making this feel blue if it wanted more colorful. For some reason, actually, I think I changed the background. So let's go on directing girl. They can feel click on the color change and as you can see, we can help this different color variation. I'm just going to keep it like this since, ah, like the variation. And here we go these next two screens, or Donna and the following Wana is going to be the home screen, which we're going to design A in the next video. 41. iOS Project - Part 3: this video, we're going to create that the home screen A for this up. So let's go ahead. And the let's adopt vacated the forgot password screener and again, shift plus outer and let's drag it very right, and I'm going to enter it tax such as Hi, Andrew! And this is going to be the very first thing that they're going to see. And we're going to have a few elements and let's go ahead and create them now. So these elements are just going to be a number off individuals with some informations. Let's pretend that this as a social app of some sort. So that's what we're going to do. I'm going to duplicated thes search field, and I also in grouped it by selecting it and using Shift, cowman and G. And now I just stop vacated the rectangle and I'm going to bring it right here. Now this is going to be a profile picture. So we're just going to around this supper all the way. Teoh 87 or even more basically all of these edges or around the topper for the maximum. So we have a circle now, since we're already talking about black Guinness that we can go over here and we can use content real in order to fetcher some powerful pictures. If you don't have concentrate already, feel free to go on the video where we're talking about black gins. We can simply go on the manage Baggins browser Baggins and then on the top, right? Just start searching for content and you're going to see it right here. Content riel, Microsoft and just insulted and you'll be ready to go now as we're going back here. Let's go on plug ins again, content Rio and just liked it, and it's loading up sticking moment. Usually it's instant about again. Sometimes that's how it works. And we're going to click on avatars as we have a peace circle selected. And I'm just going to click on a random person here, and this profile picture has been applied to the element. OK, this is looking good just going to move this element right here, and I'm also going to click on minus what? We don't have a stroke element around the picture. Now let's go over here and they re use content. Riel, your to just come up with some, uh data. So we're going to his full name and the like the wall, and this is going to make more sense in just a moment. I just want you to get familiar with for this blagging, since it's ah really useful in order to get some ideas really faster. So we're actually some content. And let's go ahead the end out the some currency. So let's pretend that these air salespeople and daughter working for injury. So basically, this upper is a cells tracking upper and much, much more. If you want to expand on that and let's go over here and make this actually, let's give it a name, a melt name, this one and I'm going Teoh unlinked the tax, the select boulder. And I think I'm quite happy with this order. Hub. This unit of measurement groups move conduct real right on the left. Let's make this unit off measurement a positive value with a green, a toucher to the amount and lets out a plus. So all right, birth like so we're just going to move this one on the left. Let's create a doctor, get version. That's a link that Baxter, since it's still length to the you like it and the let's change the text right here. So how angry Year is your you must summary. All right, I think I'm going to make it just the Dutch, less less bold. So we're going to change its regular Bring it right here, and I'm going, Teoh, bring the card on the top. Maybe we're just going to bring it a little bit here and that This looking perfect. So far, let me have a look around and see. There's on the elements of which we could potentially use. But I think that so far maybe you can use this class Aiken about some sort of interaction in D Card. Let's go on the very top page here again, Let's click on copy and paste it in. So I'm just gonna move this content riel here and I'm going to move the bottom to the very top. Some reason it's not showing you just like this again. Let's bring it out, OK? For some reason, the bottom is still not working, going to deep select in this case, and I think I found the daesh It was a symbol or sometimes, uh, has some. We could potentially have some issues. But let's just leave it up, Doctor, And I'm going to create a plus real quick. So I'm just going to draw a line a. And then I'm going to create another line, are rotated, group it all together and used the K, which is the scale toe. Let's make the stroke 1.5. As you can see, it's not the perfect yet, so probably need to move, move around and scale this one up just a little bit. And I think we got it. So okay, that's perfect. I'm just going to use the same exact color as the line, but I'm having an issue because it's too lighter. So let's make it just a hint darker. So it's so you can see it more easily. And, uh, perfect. Quite happy. With the result going to remove the cultural action here, then going Teoh, select all of these elements. Bring them down. Now I'm going to shift the altar and the select this. Move it down all the way here, and they're going to use common be in order to copy Visa. And as you can see, we created a nice summary screen I'm going to leverage content real again, since we have it opened right here. And I'm going to go on avatars again so that I can have some more powerful pictures. So let's go here. That's like this one, and it's gulping it here. And I'm going to like this one, and I'm going Teoh select the this one here hips. And as you can see, I can, uh, odd this some images really fast. And let's did same for the name style. So just going to slate, the his name here and ah, just going to quit the select some of visa, uh, names. And let's, ah, just have a few different values going to do the same of four the units since ah, this is making my job so easy. As you can see so you can differently leverage thes elements. These content riel pre defying the elements. Teoh. Speed up your work and don't have to Gasser or are really come up with some content. Old time. So this one I'm going to make a difference. It's red. So that's it says For some reason, this guy literally performed the note as well, and I want some variety in design and let's change at the very top name. And I think we're good to go. So curio we have also home screen. And, uh, is this for this video and I'll see you in the next one. 42. iOS Project - Prototype: the moment you have old being waiting is here. We're now going to create a prototype out of this I us up. So let's get started by first to cleaning up some of the layers and some of the groups because, as you're going to see in just a minute, creating the prototype is actually really dependent on a the organization off the inside layers and things like that. So we're going to do this on the go. So let's going into prototype mode, and the first thing that we want to basically create it is the interaction between the log in and sign up. So once I click on Sign Up should be redirected to the screen once I click a log in this greener if you'll be redirected to the logging one. So let's go and prototype Moder and let's go over here and selected the log in the Texter and I'm just going to drug drag and drop it on to sign up, and I'm going to make it the animation, um, de solver. Let's give it a try, and as you can see if I just like, log in and click on the play button off the very top writer you can see that we're now in prototype motor going to click on Log in. And as you can see, I'm having this this off animation. If you prefer having it another way, you can just change it from here about for the moment. I'm and quite hop of it and the Let's go over over this one here and let's get going. Logging. I'm going to do the same butting reverse, so basically, it's going to bring back Do the logging section. Now we want to also create the A connection between the forgot password Texter and the forgot password screen. So that's stouter. And we're going to do one more thing in the forgot password screener. We're going to add the A close bottom nerd to go back to the previous screen, So let's go back in Design Motor. Since your to create this, we need to go back in design mode, and I'm going to simply create a line a copy of the brain, get like this and probably wants this one to be one pixel more on the right and the game quite Hubble of it. It's going to do the job So let's make it just like the bet last off Baker and I'm going to go back into prototype moder and I'm going to basically, once they selected the, uh, the Xer, they cannot go back to the logging. So let's do data and we're going to create that connection between the continued Bolton in the sign up for Teoh, basically this alert model. And when it comes to the alert model, once they click on the closed section, the alert model, they're going to be brought back here to the home. So let's give it a shot, er and lets us see this live. Oh, if this is all working out. So I mean log in, go to tea or actually, um, mean log in and for some reason to sign up, it's not connected. So as you can see for having this issue, of course, because we have always like the logging and know the sign up in the first place. My bad. So let's like this sign up than logging. And then if I click on forgot password, I'm going to be redirected over here. If I close it, it's going to go here, and I'm going to brief the figure out the sign out, Don't continue have this small little which for some reason makes sense in the south of guys. So that's Ah, just keep the data and I think we're good. Another thing I want to show you is Ah, in case we have many of these elements, I want to have a version where basically it's scrolling, and but we're going to do it in the next year for this one. I just want to show you some of the options which we have over here on interaction. So, for example, we have the animations we have moving. We go back to the original one, you can see how this one is going to essentially move in the next cleaner. That's ah tried to move out as well, So I'm clicking on our in order to go back to the original one. This is crucial. And, uh, let's try. You can also change the easing and is out options. Are they around with both or the linear one? You can also change the speed at which the animation is occurring. So this case, we have 300 minutes seconds about, for example, we bring it down to 100 milliseconds and we go back. You can see that as we're clicking. The animation is very, very fast, but if we bring it to a value of 1000 minutes seconds, we go back. You can see that the animation becomes much, much slower. So that's the doubt. And let's try the pusher. Click Click. As you can see, this is the thing is the result. Let's give it a try with the slidin. And of course, we also have the slide out option. So as you can see, we have quite a few options when it comes to the animators and stigma and, ah else's part animated the matching layers. And again, if you simply like that anywhere outside off the campus, we can actually change the device set things. So if I wanted, for example, to be space gray, you can see that the device is now changed. The also change the device type over here, but you know it. It really depends on the type of a frame you have, because if I use a iPhone X a frame, for example, you can see that we have this additional space so we need to make the frame higher. So yes, that's Ah pretty much it. We also have the background options, but these are things that we discussed also in another preliminary video on the prototypes . But it's always good to have a refresher on these very concepts, so this is pretty much it. One more thing I want to mention is the fact that if you're dealing with treaty layers and the things that are not easily clickable, you can always create the erecting. Go on top of that year and just give it a capacity off like 1% and maybe make it on your black or white. So it's still going to be a clickable elements. You can loop it to anything you want. That's a small hack if you wish when dealing with certain type of the elements and brought a lives, things that you learn on the go. So yeah, this is pretty much it with our brought a diaper will be enjoyed. This video seeing the next one 43. Scrolling Behaviours: There's one more thing I want to show you when it comes to prototypes. Now want to show you how to make this a live gallery, which the user can scroll through on an easy way? So let's go over here and let's just take all of these elements. Let's go back into design mode and I'm just going to drug then on the the writer. So outside, off the frame now almost going to click on Commander so I can deep select and I'm going to other a feel off white over here since we're currently facing it and I'm going to the applicator a ah, a few of these guys to this bottom section, And now I'm going to come on Gene so I can group them all together, and I'm going to bring them back into the frame, which, as you can see from the Blue outline we have done successfully just going Teoh center it the clicking here and at this point we're going to go back into prototype mode, and as you can see, we don't have any special options over here, apart from the ones that were ready. So however, one thing that we're going to do is we're going Teoh like this group and then frame selection. So basically a frame has been that created inside the the home framer. And as you can see on the writer for actually clicking on the on the frame, we can see the over overflow behavior. And now it's going to actually worker. If we click on vertical scrolling Now, I want you to click commander on your key border and at the same time move this section all the way to the top. So basically, by using Coleman, you're not going to resize or move this layer, just going to resize the third area in which the constraint is. And if he selected the home section, we click on play. Now you can see or actually I still have the old iPhone excellence changes to iPhone eight and let's go back right here, as you can see as a scroll. Now I'm going to be able to see the other three other elements. So this is essentially a life scroll, so they should. That we're facing now is that they're these air covering the layers above, and this is not something that we want. So we're going to create a small hacker if you wish you were going to create a wrecked and go here, which we're going to bring down together with different. Now it's important that both the frames and directing go is down, and I'm also going to change the color of this rectangle. Since they wanted to be white, I was. You can see the rectangle is on top of the frame so that because if the opposite situation will be true, there's going to be an issue. The frame It would still be seen, but let's go back to the prototype for And as you can see now as I'm scrolling up and down Visa or working totally fine. So yeah, that's ah pretty much better. So you can see how these scrolling behaviors can really help you out when you're trying to create prototypes which feel like the rial life up 44. Q & A: is in this video, we're going to go through a few questions, which I've been asked by my students in the pastor when it comes to using a stigma and collaborating with fig MMA. So the very first question is from Marker. And the question is warranty afraid that the clients might steal your designs? That if you've shared that stigma, links Now that's a very valid point and something that a lot of designers fear off when, especially when first starting to use a stigma. Now, the way I usually structure it in my business is in the following way. So if I'm working with a new client for the very first time, probably only going to give them, um, the J. Paige's or I'm only going to share, maybe ditch Apex with envision or It Zeppelin or one of those Softwares. So I'm not going to give them the FEMA file load directly simply because I want to sort of test the waters and see if there are good client and the first the, um, period of time well, which were collaborating and working together. It's positive. Well, in that case, I will simply continue, and I'm going to share the links directly. And you know, another way that you can do it is ah, the type down it in the past days would only shared the design proposals initially via a screen sharing. So he's gonna come useful. Nervous too. No, uh, in order to avoid having the potential problem off a client seeing your work. But again, if you vet your clients properly, you shouldn't have issues when it comes to to these things, and especially if you go for this first dry run if you wait, as they just explained. So that is definitely going to help. No, the second question is, Ah, what if my clients start editing, defeat my file and you're wearing my designs? That's obviously one of the other concerns that a lot of designers has, uh, and one that they have myself. And I guess it all comes down to setting expectations. With declined. By the way. This is also true when working with other designers, you want to set the expectations as to what they can. They can edit, and, you know, it's a little of balance when it comes to these kind of things. So in order to avoid having fines from your in your designs. You simply have to tell them, Teoh, avoid touching them. That's the the short answer. Um, but yeah, again, if I see that, for example, the client is going to is starting toe I did heavily designs that I was simply politely tell him that, you know, this is not the best approach to go to go after this. And I would suggest, you know, the the better approach, always in a comma and professional manner. So that's it when it comes to the second question. Now let's jump onto the 3rd 1 which is ah, which design softer you prefer to most Now I usually use Sigma for the most part these days , um, with some clients, I also use sketcher and other B X d as well. Now, my standard on ah, which designed the software prefer the most, has changed over the years. But I would say that at the moment I don't really have the one favorite design softer. I think that each design softer between this free, which I just named of. Ah, they're pros and their cons of however debase. Um, it's a similar. So you know in order to create designs, they think that they're all very efficient. And some of them have, Ah, some more positive aspects. And some of them, uh um the shining in other ways. So I would say if you're starting out toe if you learn a eider fig MMA sketch for adobe X T , I think that you should be totally fine with it by just sticking with one going without one because they're all pretty popular these days. Er and they are require said that the can all the, um, accomplish your goals didn't design goes in a very efficient way. Now, another very cool thing about learning and mastering one of these design Salter's is that you want. Once you do that, you're going to master the other ones much more easily. So you feel if you know how to use Sigma very efficiently. We're also going to pick up sketcher faster and the same for the 60. So yeah, that's ah, that's the answer. So let's go to the next question, which is Ah, aren't you afraid the off security by having everything like louder? So I guess you're referring to the fact that the thing my files or by default on the cloud is saved on the cloud. Now I eat trusted guys with thick MMA. You know, they have very for Buster security systems and the very pastor infrastructure. But one thing that I do usually monthly is ah, on top of that just because I want to be extra Sure, for whatever reason, I like to savor my design files, my figment design files in a dropbox folder so that just in case anything happened, um, I can have an extra way to enter, like back out the my my design files. So yep, that would be a little bit, but usually it z going to be really, really robust. I wouldn't worry about it too much. Now the fifth question is there water? What about if you want to work on flying now that's like, That's a good question. Who fit with Sigma? You can work off line. And so if you have a file on design file opened and your don't have Internet, um, you can continue working on it. The only down fall off out, of course, is that it won't think I won't be able to save the file and the fire was going to be saved the only once you connect back to injury. So let's say that want to work on a plane a doing during a flight? Er, you can open the file before hope, hoping, hoping on the plane, and you can work in it. And then once you land and you get your Internet again, you can say that the about time rock treats simply going to save it automatically at that time. So, yeah, so be it. But usually I'm always connected to Internet while working. So it's not something that I really thought about it too much about. Yet. There you go. You also have. This is extra option now. The next question in the final one is to collaborate efficiently with developers, other designers and clients and figment. Now that's a great question. It's also divided into three parts because at the end of the day, when it comes to collaborating efficiently with developers, um, it's very easy. Usually send them over a Loom video where I explain the project so showing them in the Sigma shared screen actually do this video loom and the then I literally teach them how to extract the CSS code to extract the assets. And I made myself available in case they have any questions or, you know, and I usually also discussed this over the cold, but I like to also created the video. So if I'm discussing it over call, I'm recording it. Um, if we're not having a call with the developers because maybe time zone or whatever, Um, I would just record a video to basically, uh, living there as a reference that they can the reference later on. And this is really useful, especially for working with a team of developers. You know, sometimes I'm working with teams off 10 20 developers and this, uh, approach of honey a video can really be useful in saving times. Otherwise up. I would have to make a lot of meetings, were explaining the same things, So that will be it when it gets to be developer sides. Now, other designers is just about talking the record designer and figuring out what is the best approach, especially if you having design systems. So it's all a costume it so little. Maybe if you atia, you need to figure out the solution which worked for both parties. And when it comes to apply, answer. And I always say it's It's all about setting expectations, figuring out the work for which which works for both parts. Sometimes it's useful to have ah, causer and edit the Sigma file in a real time off for some small tweaks. Or maybe it's for brainstorming wire framing those kind of things. And other times it's just better to send them a jape bag on on a slacker to for a quick idea. Other times it's envision. Other times it's the fig Malinckr, if we really depends on the more practical and what the client needs are so I would say it we depends about for all these free Got to go off off people who you're going to collaborate with. I would say it's really important to set expectations. Be clear with that, and that's definitely going to help you out. So I hope you enjoyed this smoke you any session and that this help the that I will see you on Expedia 45. UI Kits & Design Assets (Free & Paid): Creating designs from scratch could give you the freedom to basically create anything that you want with your specific and design rules. But sometimes you might want to leverage templates or you like it in order to create a Kickstarter project faster or maybe two. Worker on a proven structure, which is seamer to with project, which you want to achieve. So in order to do that, there's a many options in fig MMA. The very 1st 1 is that you can go on the signal official website and you can find a few templates when it comes to things like, as you can see, flow charts, wire frames, mood boards and, uh, many more. So feel free to have a look at this page. And basically, if something sparks your interest in clicker, for example, wire frame, you can click here on the try figure for free. Basically, what is going to happen is that, uh, the website is going to create a copy of this project in your I think my calendar so you can have a Luca, and this could be really useful for, you know, I kick started a project. You can, for example, take a navigation bar and then, uh, go over here and take one of these elements. And of course you can. You can tweak them however you desire. So this is my first. Their recommended research. Ah, for you to have a look out. The 2nd 1 is that you? I started out designer, and as you can see, we have Ah, quite a few design resource is for sigma, and you know, you can feel free to just have a look around. And once a something is twice your interest, you can click on it and you can go and download for figure right here. So basically, you can have access, for example, to this mobile upper and this can we help speed up the work Very few, creating something simmer and you want to just have a reference. Another great researcher is Think my freebies. So think my freebies is ah, quite specific to figment science compared to the biggest one. And yeah, overall, with research wants, something sparks your interest, simply click on it and the you can download the freebie some of these a like it's or going to be previews off completely, like it's the paid ones and I think that, you know, for the most part, there's a lot of value when it comes to the for you. I kids. But if you want to go one step further, always consider you a A to don't matter, which in my opinion, is, ah, the best place to work to find the premium you like it. And I also have several products and hear about anyways, there's so much choice on your eye, Yater and you can really find anything that you want. Really. And my suggestion is if you're looking for a ticket on you, I ate have to go here and the be sure to select the big mama filtering. Otherwise, you're just going to see products off all other off all the software. So if you click on think Mom, you're going to sort by you. I kids, which were specifically designed for Sigma and again, for example, search on the very top of for dash Bird. And as you can see, we have a few dashboards specifically designed, available in the figment. Now, one more research of which use all the time and that this is kind of hockey if you Atia is using sketch up resources which, when it comes to free visa to free designs, it's one off the most popular websites out there. And I I think it's It's one of the best ones and the the only catch here is doubt that these freebies or for sketch and, um however you can totally import them into fig map just noted out since they were originally made for a now the resign softer, some dying, the expert option, the import corruption are not going to be, um, are not going to reflect exactly. But for the most part, you can totally use it, and the leverage it beating it will need some are some cleanup. But here you have really a lot a lot of options. So this is pretty much it for this video on my kids and our Zion assets in Sigma and also you in the next one 46. What to do when you need Help in Figma: we're going to talk about what you can do if you need the sound, My extra help in a thick by if you're no, don't remember where on item is a run element and basically we're just going to cover this world quick, so let's get right into it. So when you need some help with for anything in fig mounted, do you remember something I would just to go here on the top, right? Help or alternatively, you can use it. The top left the menu item in order to search for something. So, for example, I don't remember where some layer options or I can simply started clicking, typing layers, and you can see that these elements were going to appear on the go and the Let's do the same here for components. As you can see, I'm seeing a different components and that the best thing is that I can even see exactly wearing this manual item. I'm going to find that the result off about the search query So this really useful And the other thing that you consider doing is going on. Ah, simply Google Figure Helper and the very first research is going to be the help without figment of comma. And basically over here you can search for all sorts of things and that you're going Teoh basically be redirected to articles and the relevant the documentations and even community questions and answers, so you can sort it by old type articles in community from here. And as you can see, for example, in components, I click here on name and organize components not being redirected to. Ah, very comprehensive page. We're recovering moster off the elements here now. Another cool thing to consider is you could use to join the defeat my community. So if you go on a spectrum dot charters lash stigma, you're going to be redirected to this screen where which is essentially a FEMA community. It's very active. There's at the moment 200 members of line. There's 26,000 plus members, and it's a really cool way in order to access is some ah information and troubleshoot. You can access the different channels by simply clicking here on the very left side menu. As you can see their questions and answers that, um, the community has given, and that has added, so it's really useful and Of course, you can also feel free to join a Facebook groups about usually these o r more than enough. And, um yeah, that's pretty much it for this video was helpful and to see in the next one. 47. Final Project (Your Assignment) : Now you have all of the tools and knowledge at your disposal in order to tackle the final project, which is going to be this website designer or actually this Web site redesigned because we're actually going to redesign a this website off bass client. So as you can see over here, we have the actual website in the Sigma creditable version, So basically you can literally crab off the elements. And, by the way, the front, which I used the latter, which is a free Google Web faughnder. If you don't have lotto, it's actually going to be very easy to get it, because you simply have to search on Google for Lotto. And, as you can see, the very first result, it's a sponsor dot google dot comma, and you can simply go and click on the download family bottom and you're going to the Lord Lotto. And there you go, you have it for free. So as you can see, we have the different sections and also added some J picks off the Dutch birds off this client. So basically you're going to redesign a each and every one off these sections in a way that may not is better and that you feel it's actually better version off the current website. And as you saw in the brief, you can see all the details off this project and the client of things that this website is too flat to want to bring it to the next level and make it more exciting and pope out more . Now on the writer, you have the exact same website, but this is going to be a J beggar. So if you prefer having working with TJ bigger on the side and it's totally up to you, I also added this art border on a very writer. So this is going to be your version. But feel free to adjusted and basically a doctor the project as you wish, and I'm very curious to see the end result. So after you finish this designer exposed ulna, the dedicated skill share area, and we'll go from there