Icitify Inspire Graphics Week 7 lesson 2
Icitify Solutions
[{'start': '13.813', 'end': '22.889', 'text': ">> Icitify Solutions: Hear me.  Okay, good afternoon.  >> Aishat Bello: Second. Here  you   >> Icitify Solutions: So let's  just wait for about three, four  minutes. We have. A lot to do  today.  Based on the syllabus today, we  are supposed to start with the  basics of You are UX design. So  these are another branch of  provinces and quite different   from what we've been doing. And  I think I said it last week that  will be using figma for this.  So A design.  software is basically used on  the Web on like I do for this  job. You know, we had to  download Photoshop. I use it on  our phones. Sorry, on our   laptops. Figma is quite  different, so you can use figma  right. Only work, And we are we  going to be using Sigma right  now? And we're going to be  seeing how you can, you know,  some similarities with other  Photoshop and some  differences. So trust me I do  figma is quite simpler. So use  that I do Photoshop, but it has  way less features than other  food. So I don't Photoshop is  basically just by normal  graphics designer because, you  know, in creating mammographics  design   >> Adelakun Victor: That I  >> Icitify Solutions: In  creating your designs, you are  basically creating screens. And  so if you need you know,  something more complex. You have  to go for software's like  frema and webflow. Although both  framer and webflow are also  web-based you can use them on  the Web, but  Um, Sigma so figma.  As both feet free and play page.  Russians. But did the free  version can, you know, basically  do most of what we want to do.  Although it has some limitations  eliminations is not what we are  really going to be touching in  this course, because you don't  have much of time. Limitations  is basically one, you have some  limitations in using  the variables and creating what  we call it design system. So,  and  disaster system is not part of  what we talking about in this  course. So there are no  basically going to be you know,  frequently I went to. Need a  debate version of Figma. So how  do we use figma? You can access  figma on your phone, but you  cannot. edit stops on your  phone, because figma also, make  sure makes sure that you have to  be on the laptop because   Apparently working on design.  It's got no be really done on  the phone, even on the tablet  is going to be very difficult  unless you are using the tablet  as you're drawing part, maybe  you're working on a Google  straight on, it's your darling  part. So basically, you really  need to have a system to  continue. So I'll be sharing my  screen right now. so, Let me  just. so,  yeah, so this is our figma's  website looks like But first,  let me share and ask screen for  those that don't know where  figma um, URL Sigma. So,  so,  URL is just figma.com otherwise  just you can just go to Google  Voice. You can go to  Google.com. I don't.  And from here, you can search  figures so, but That's going to  take My.com direct, is basically  what you need.  so I'm going to be using a free  account for this because this is  not where my you know, Gmail is  So this is Audio website, looks  like and this is basically a  sneak peek to figma. I always  looks like  They're not going to be going  through most of the basic  because it's very similar to  other Photoshop but I'm still  going to show you a little bit  of the basics. Because I'm  going to be working with the  real features of  A figma. So this is how down  page looks like. So if you have  not created any account on  figma you can just use this  button or this one so guess  started. Let me just sign in  with Google.  so you can also continue with  Gmail and Password or any You  can just basically choose any  one between each of them. So,   It's very fine, you capture?  So this case you take a few  minutes, I guess.  and you start thinking,  So, it's as verified. Yes, it's  not going to be like this. Do   Is going to go once and for all.  I'm very sure about that. so,  This is an because I'm opening  any application so it's asked  me. What's my name? Let me just  choose I said five solutions.   So continue. Um, let's just  save your learning design. And  we are. That's just the  students. Something else.  So, we're not going to be adding  anybody for now. I've used  figma products if I'm not easy  to know. So let's say this is my  first time.  So I was talking about, you  know, paid and free edition. So  this is what looks like. So we  have a starter edition which is  actually free. And you see they  said it's free but it's limited  to features because one very  good thing about Figma and one  selling points of figma is that  Figma enables, a lot of  collaboration and You know,  while working on big teams, you  really need to collaborate with  other people like designers  developers and other people like  that. So you really have to  collaborate with them and that's  one of the selling points that  figma, you know?  people who prefer female over  other software. So another  software is used to do something  like This is I don't HD. So, if  you prefer to use Adobe XD, You  can just, search for Adobe xd.  It was created by Adobe. I  don't know, I don't know if they  are still. Is using up is a  free one actually. But  obviously is free.  Adobe Xd is free so but it  doesn't have that collaborative  feature and, you know many  designers don't really like it.  So, let's just continue like  this. so yeah, I was going to  let's just keep  So this is how the draft file  like your home page. So when  actually open figma, he just  goes to the file and this is how  everything looks like. So, we  are going to be using this one.  The design there's something I  would call fig jam on slide.  Slide is just basically the   Microsoft PowerPoint version of  this one. So like Google Slides.  So, just for presentation, and  this is basically what we're  going to be using the most. So  you guys in a free version, you  are going to have a limited  number of files that you can  create on and for the shop, So,  I'm going to cancel this one.  I'm, I'm sure everything like  this show. You just because I  selected out, not you speak now  before, so,  there's just so this is how it  looks like unlike I don't  Photoshop, you know, when you  create a new file and other  Photoshop, we are going to see a  canvas. You have to select  sizes and different stuffs, but  Big Night is quite different.  You are going to be the one to  select it once you get into the  file. So you can  remember far from here. Let's  say, first you, I designed Like  that. And for you to be able to  start  I want to zoom out a little bit  like this. Okay. So for you to  be able to start any, you need  to select a canvas. A canvas is  just basically what we work with  the size of our design in order  and I don't. So this one is  more, like the ad support for  style that we have been using.  Because, you know, when you are  working on UI designs is most  likely going to not going to be  one screen. You're going to  have multiple screen so you can  see most of the apps that we use  you know, they have multiple  screens and those screens are  most likely. I've been   implemented by a UI designer.  You know, a product designer  before it was been developed by  software engineers, so,  There is actually an aspect  here. You can see this dev mode  like this. You can  toggle, you can see. So this is  one of the limitations for, I  don't feel free you guys in the  free version. You cannot use Dev  mode so we really don't need   dev mode because we are going to  be this. I go. We are the  designers. So Designers, I just  go to design engine over mode,  but devote mode is going to   allow developers to be able to  follow the design. so, let's  just go back to Design mode  like this. So how do we start?  We're going to start by creating  what we call it free. So it is  called like an adboard in. I  look for the shop or here, it's  called a frame. So for you to  create a frame, you're going to  come over to this side. You can  see frame with the shortcut. F,  they click on f, on your  keyboard. Now, you  can see some options here, you  have frame for phones, we have  friends for tablets, your  friends, for desktop, you have  presentations, you know, you  have for watching. You have for  people social media also, And  for Figma community. So  These are basically what we've  been eating. So if you are  designing, ui's is  definitely going to be probably  for an app for desktop or, you  know, for other devices like  watches. So that's why you have  this set of  And you can also create custom.  So you can also create a custom  frame. It's not That is not  compulsory for you to use the  previous find set of frames here  unless you are designing with  the particular, I'm sorry. So   I'm going to be creating a frame  for let's say, desktop now.   something like this, so consume  To it. So I'm still going to  have to give you kind of like a  ar's, um, cheat sheets because  the one for I do for the shop is  very different from the one for  Figma. So, Let's just zoom into  this one now. so, this is a  frame, just like an advert in  ado for the shop, you can create  multiple by using the alts. You  know. I, I think I used the odds  in Um, I look for the shop  also. So you can use all to  create multiple. Of them. So  don't mind this purpose.  Like, that's so you can create  multiple frames and you can  delete them.  So you can also rename them  because, you know, one good way  of knowing good designers is  you have to name your friends.  So  maybe this is going to be the  landing page of the websites.  Let us say landing page. That's  so stocks like this, you have to  maintain them just  Sorry, I shall believe you can  omit yourself. Is there any  problem?   >> Aishat Bello: not visible. We  can't see this one.  >> Icitify Solutions: Sorry, is  there anybody that has? A  problem like that. Can you see  my screen?  So if you can see my screen just  signify please.  Okay. Um,  I shall believe so I think you  should just look out. I be leave  the meeting I just join again.  Because apparently others can  see my screen. Okay. so, This  is the London page. Now.  you can, yeah, I love options  here that you are seeing, but,  you know, we're going to be  talking about them one after the  other. So at first,  This is just talking about the  type. That is a frame. You  don't need, we are going to also  going to talk about this sites.  This one is to market as ready  for delve.  basically marking, as ready for  Dave is just telling the  developer, Okay, yes you can go  ahead to, you know, develop this  side because stops that we do  mostly on figma are going to be  implemented by idea. You know,  it's going to be implemented by  software engineer mostly. So  that's if you are working on an  official project. So you are  working in a practice projects  you really don't need to make  it Australia as for them. So  yeah, alignment is just very  similar so I don't for sure,  but we can't eat it. Now you can  see. Everything is But we're  still going to talk about it  later. Position this deposition  on the X axis and position on  the wireless and  irritation. So you can rotate  it, you know. Anyhow you want  just so the layout is going to  tell you the size and this  option click content is going to  make sure that, you know,  content inside the frame is,   Not overflowing. So just  basically like an overflow of  eating. so,  we have the appearance, you  know, the opacity. You can make  it a big like that and  So I'm if you over on this side,  you're going to see an arrow. So  just drag it to anywhere you  want. If you want it to be at  100, drag it to your right? And  if you want to reduce it, drag  is your left. So same thing as  color radius, basically all the  options on figma as that   feature except for, you know,  all these ones that require you  selecting colors.  So we have the few. So the field  is white, you know there's a few  And we have the stroke we have.  So I'm not going to be talking  mostly about this ones because  this one's are something that  you should be able to be able to  do in order for the shop. And  so when you are in figma, you  can just find your way around  this stuff. So Now, I want to  talk about where you get ideas.  So  You, when you as we have said  that as graphics designers,  there's really nothing.  Absolutely new. Like something  somebody has not done somewhere  before something relating to  what you want to do. So if you  want to start creating  something, you need some places  to get. Inspiration. So, Same  thing. As for normal designers,  you can get your inspiration  from pin I said that it's as  very verse number of, you know,  Niche. Because it's not only  niche down to Inspiration for  Graphics Designers, Almost  everybody uses Pinterest. So one  plus you can use very  frequently is  Dribble. So dribble as actually  three bees. So it's not, you  know, my dream like  which double B. So you can just  check through.com which three  bees And it's going to take you  over to the sites.  You can sign up or sign in but  basically, we are just looking  for something to recreate, you  really don't need to sign in and  sign up so challenge. Searches  are, let's just say, we want to  create a landing page. Now so  once you click on Landing page,  you are going to see different  number of what other designers  has done. So you can see this  is something from a designer.  So, so once you also make  designs is very good for you to  just create an account on   Create an account on view and  you can stop posting. On  dribble also. So, you can see  that there are different. This  is just from one person. As it  is also from another person.   so,  so, You can check this out on  your own, so,  last one side, the other side  I'm going to talk about is  Behance so you can check  through Behinds.net. So the  hands Like that's just check  it. And Beyonce is actually  owned by. I don't Photoshop.  Also, sorry is owned by Adobe.  Balance is owned by Adobe. So  the creators of ado for the shop  another illustrator and other  adult application. So here, you  can also search for landing  page or any other thing you want  to create. You can search for  it. So you can see you have  Very large results. Here, you  have 10,000 results so you can  just steal from multiple people  and There you can create  something unique for yourself.  So, let's just go back to Figma.  And let's continue talking about  other tools. So, As you can  create a A frame. You can also  create a section.  A section is basically something  that houses different frames.  You can see that once I draw  the section over this frame like  this. The frame automatically  gets inside the section. You can  see something like that. So,  what's the section A section is  basically, you know, a way to  organize your files. So maybe  you are designed you, you can  have it have, you know,   different functionalities, maybe  as a part for the users and you  know, a part for the admins. So  you can just say Okay this is  for the users.  Users like this and this is for  the admin. so something like  this so is going to be very good  if you use this to Organize  your files.  So that's basically what this  section is. So you can just  check through. So you want to  check for advance, you can check  for admins and you can check for  users also. So Yeah, using  section makes sure that your  files are very organized. So  let's just delete that off. And  let's just create a new frame.  so, the other parts are  You can see it's basically as  also, some of the tools, you  know, look for the  shop lovely rectangle. We have  the line. We have arrow have  ellipses. That's circles. We  have polygons. We have stars. So  basically, The functionality is  almost the same as what is in  order for the shop. But one  thing I want to talk about is  let's talk about the circle.   so, in ellipses and figma do,  there is a little bit of  flexibility, which was you can  create. So  In figma, you don't need complex  ways for you to create. Let's an  arc. So that's basically the  difference here. So if you want  to create an arc, Once you  create this circle, just click  on it like this. You're going to  see that once you over inside.  You see a circle that says Hack.  I hope you can see my screen.   Signify, you can. Okay.  >> Aishat Bello: All we're going  to.   >> Icitify Solutions: Okay, so  You can see the hack here. So if  you click on it and you start  dragging, let me do that again,  click on it, you hold it down  and you start driving. So This  is something you can't do in  other Photoshop. Just like this  for you to do something like  this. In order for the show, we  need to use. Let's say the Pen  tool and some other tools  together for you to create  something like this. So,   because you know, figma you can,  yeah. Going to be using it to  draw. Lots of charts. So that's  why the island this feature for  you to be able to create ax. So  it's going to make your work,  very flexible, you know, when  you're creating something like  a dashboard for applications.  So if you are creating Dashboard  for applications, you can  actually use this. This feature  to create. Guys to create arcs  and so, just,  Um as again to be talking about,  I think. Yeah ways that we  calculate how to make sure you  act is perfect on to mix up 100%  but That's not something for  today.  So next up we have basically we  have depend to and depends you  to. So not much of it to here.  You only have the pencil that is  used to draw, you know, normal  cost like we used to do in Ado,  for the shop is an essential  tool. So I think all design  apps most of it so because you  need to create custom ships when  you are working on. Any kind  of design physically. so that's  why it's also has you know, this  Um, so it does the text just  normal stops like I don't for  the shop, you can change the  typography style from here, but  one thing about figma is it  gives you  more flexibility. As I said, If  you are in the Internet, you can  access different fonts. That is  not on your system. So, If I  want to us access phones, there  is no. My system. Figma has like  a database of different phones  that you can use. so, Although  it's going to add all the funds  on your system also, it's going  to add them to It's going to  add them to the database of the  fonts here. so Umar I forgot to  tell you that signal also has an  app Right? But the app is just  basically like, um, this one  also. So all the features are  here also on the up. So that's  why they really don't try  budging you. I'm telling you to  download up. So now one parts  that makes feed my very is  Figma is going to be able to. I  talked about. I talked about the  collaboration aspect. So  Because since we've been working  with other Photoshop, I find  myself wanting to share files  with you, like wanted to share.  Okay, the design I make and  share if I was with you and  say, Okay, maybe we should go  and make something like this or  maybe we should trace something  like this, but with I don't, for  the shop, we have to manually,  send the file and the file can  get every and some might even   reaching about 5.  700 MB but which figma is very  cool feature here called s***.  So once I click on it like this  You can see this. You can see  this popup. So you can copy the  link here. Right. And you can  invite people.  But there is one level to this  side. So here  You can either choose, Let Me Go  Back Monster. yeah, so here  we can control the access like  you can control as access to  your files, so if you want,  everybody does the link to this  file to be able to see what's  inside the file. So you can  leave it like this so they can  only view. Right? So, but you  can allow them to edit. but,  For them to edit, you have to  use the pro version. So for  collaboration, to work you have  to be on the paid version of  Figma so I won't be able to do  that because I'm definitely on  the free version of Figma. So  like I share the link of  anything I create for you to see  and you can see how stuffs have  been done. You  can even copy. I think I even  copy, I'm shifts from there and  you can even create your own  edition of what I sent you. So  we're going to be talking about  that so Let's dive into  creating UIs. So, let's just  look for something we can easily  create on. Dribble.  But before we proceed, if you  have any question, you can not  meet yourself and speak.  I'm looking for something that's  going to take much of our time.  So I think we should be able to  do something like this.  Let me see how the image looks  like.  Okay. Yeah, so I think because  it's something that we currently  creates but let me just import  it down to other Photoshop. So,  how do we import? I'm sorry.   Let's import it down to figma.  We can easily import by just  dragging and dropping it into  figma like this. So we have  successfully imported the file.  So, we're going to be working  about, we're going to be working  on some parts of them because  this one is something that  really simple. But one thing I  would  like to tell you is that in  creating designs  he you really have to follow.  What's the brief? What's your  clients? Ask you to do, you  cannot just go and create but  I'm going to give you one this.  there's a way that you can  improve your your excuse by  creating so  If you keep creating stuffs on  your ex, okay, maybe you see  something online? you bring it  to figma, you decrease it, bring  it to feed my you created. It's  going to, you know, give when  you it's going to give you an  upper edge because you are   going to be able to think about  the designs very fast, and it's  going to make your skills very  sharp. So.  You can learn by doing so one,  very cool way of learning very  fast. Is just keep creating  something. Don't just stop. so,  While we are creating this one,  we're going to be talking about  some really cool features on  figma. And the first feature is  creating what we call a  components. So,  The, the time components is  actually something borrowed from  software engineering because,  you know, in software  engineering when they are  creating let's say I want to  create a website like this. So,  we have to break the websites  into different components. And  we now couple the components  together, so,  A component is basically the  most basic form of a section of  a design. So,  You can see for this website.  Now I can come out some  components for you. So the   first component is going to be  this This navigation. So you  can see that. We have the logo.  We have some Navigations. So  it's going to definitely be a  component on figma. So how do we  create a component? Let's say we  want to create a menu for this  one. I think there's no memory  actually, so  Let's use this one as an  example. This ad. But  Let me just reduce it. We can  give it a particular heights.  Let's say we want to give it  120. 120 like this. and the  name of The office fits me. So  let's just get started. Then  So, let me use. so,  Before you move on. So if you  click on this arrow here this  one  So you can see the Scale tool on  the untold, so you can basically  use the answer to like, when  you it's just like, when you  click on spacebar on your um,  another Photoshop and you can  actually move the adboard to the  section, you want to design,  maybe something is like this and  the other is like this. And I  want to just move it to see  what I'm doing. So that's  already is for. But the scale   tool is used to scale. Anything  basically, anything  proportionally. So  if I you can see it as the  borrows like this, you can see  unlike so this is basically  like, you know, in a look for  the shop when you click on, a  shape like this is not  automatically going to give you  the selection tools because you  have to click on Control C or  just use the free selection to  That's different in Figma in  Figma. Once you click on it, the  tools are already if you want  to scale it up,  You cannot use the Ordinary Move  tool to scale. So if let's try  scaling it, you using the Move  tool.  So you can see that is really  not scaling because you need to  use the Scale  tool. So, a shortcut for the  Skill, tool is K and here you  can see an option to  scale. So if you want to scale  it by 10X, you can skillets By  5x.  So stuff like that is very  useful. All you just keep on K  like this and you start scaling  anyhow you want to so you have  to take control of that. So,  let's continue.  Let me give it. so now, One of  the benefits of figma like one  of the edges, it has overload  for the shop is figma is  designed for you to be very  consistent in your designs. So  what I  mean by consistent is if you  take a look at the apps that you  are using on, on daily basis,  you can see that there is a sort  of uniformity because you can   you're going to notice that if  the other blue color, the blue  color that we're using  throughout, the app is going to  be basically the same and the  styles the font size is the  corner radius. So if you are not  a designer, you might not   notice that. But as designers if  you If you work, if you use  apps that they are  inconsistencies, they are going  to definitely notice. So If  you use figma unlike I don't  Photoshop we are going to be  able to minimize   inconsistencies by using  something that we call the  styles. So you have two ways of  using of creating consistencies  is either use  Is that I use the styles, the  stars is just shutting from for  design styles or variables. So  we are not going to be able to  explore this variable very much  because we are paid version  although we can create some you  know, some variables for color  number string and other stuff,  but Let's just start using  design styles now. So, Design  Style, If you click on, so you  have to make sure that you are  not selecting any output. So  just click out. So yeah I'm  figma. You can just find it  blank spot to click out onto. So  you're going to be left. Just  this for you can  see the page, the variables, the  stars, and exports, so, You  have to click on styles if you  click on Add so you can see. Now  we have  An option to add text. So, text  is those basically. Maybe, you  know, we used to  have something, I'll call the  best text that's like 16 pixels.  And basically we use text This  something deep, so we in  development. We like to style  text in multiples of eight. So  if you are going deep into   design, you're going to  understand that you have  something like a base. Text   does like 16 pixels, you have 24  pixels, you have different  stuff, so this text you can use  to ensure if anything so I can  select the fonts, you can select  the text and you can create a  style. What, let's first start  by creating For colors. So   Let's say, decided two colors.  We want to use, we have a great  color and a dark color. So,   Let's create a color style  first.  So we can use this one selected  by I guess. This is the color   Let's click. It's you have to  add a name for it. So let's say,  Basically. I guess so you can  already description if you want  to see.  Is breaker.  And you can create the style  like this. You can also create  another one. Let's see the  black. Or the black. So let me  out. What do you want to answer?  The black.  O d. 1 2 3. Yeah. So Let's  increase it to presents. So you  can say this is our base black.  and if you want to add the  description income, add it so   We have successfully created two  design styles like this. so,  You can also use variables. If  you click on this site, you can  use variables. Um, One thing I  want to mention is if you're  using a paid version, Yeah, a  lot of more advanced features  because You know, we can create  variables for some modes because  in development when you are  creating an app you know there  are some there's a feature  called Lights Mode and Dark  Mode. You have a way of talking  between last-minute dark  mode. So in figma there's a way  we implement, the design tokens  that you have a value for the  light mode and you have a value  for dark mode, but you can only  implement this if you are using  the paid version. So, I'm not  going to be able to use that  now. So let's create. Another  one for the white. Let's see.  One, two, three, four, five,  six. And this. so, Let's call  it our piece White. It does.   So, we can create some for the  text, right? So you want to  create for the text, you just  click here text. so, let's say  text these Select. Poppins.  like this and let's just base  let's say 16 Plus I said it  should be in multiple of it,  most likely is what you'll be  using  so you can set the line height  if you want, but let's leave  that for now and create. So you  can see text styles you can see  color stars. So basically they  all design styles. so,  Let's continue creating because  in hand, we wanted to create  something that we call a  component. so, After we have  this, I have to change the  background color of this one.  if you want to use the design  styles that you have created,   If you click on this place, you  know, we want to edit the field.  The field is out if now that's  why you're going to click on  this three boxes like this. So  here you can see The stars that  you have created. So if I choose  basically, you can see that I   have agree and you want to  remove it. You can subtract it  like this. but, Let me add,  let me create a new style  actually. Something like this,  and I call it the so if you  have edited a color and you want  to use other style, You can  just click on this plus like  this, create a new style of  variable, just click on the  plus click on Style here, want  to create this style actually   So, you can say the background.  Background. Gray.  Um, one of our design styles. So  Here we can separate this one  into two actually but let's try  it. So the base gray and this  one. We give each of a base  block. Something like this. So  Zoom out and we have to create  the menus. So the minutes is  just what we can navigate into.  And start with creating a  rectangle.  so now we can now start  exploring the alignments, you  know, I talked about the   alignment for adult Photoshop  that if you want, you know,  something to be aligned  vertically. So here it is  grouped for you. This one's are  for the already. I for the  horizontal, you want it to be  horizontal, you know? So the   idea description. Yeah. So he  says Alliance A line, horizontal  center and it has shortcuts at  age. And so this is for vertical  side. And you can now explore   that on your own. I want to  give you the design style. Let's  say, I want to give it our  basically. Oh, Alternatively,  let's give it white.  Alright, yeah, so how to add the  corner? Radius? Also  oh, so this is where variable  comes in, we cannot create you  know design stuff  for corner radio sizes but we  can create a variable there, but  let's not go down. Let's just  say we want 16 pieces, Let me  zoom into it. and say, let's  say we want 32 pixels so that's  Six.  Okay.  Now, and there's also something  called the auto layout. The  other layout is a way of making  sure that, you know,  spacing Inside our components,  we can add other layouts to our  frames, and we can add it to,  you know, basically shapes like  this for you to add to layout  you can just right Click here  and but before that, let's just  start creating Some text. Let's  say, Oh,  I can reduce this to like, it's  six pixels and I can use it to  create a style like this addits  So this guy that's basically  will for you to create styles.  So, you can make this also in  the center like we're doing  another Photoshop. so, one  thing about figma is  You can get, you can easily get  the spacing between two elements  by holding on the ALT key. And  If you want to get the spacing  between this one, let me change  this one to pricing.  This. So if I want to get the  distance between the two of  them, if I hold on to  one like this and I over this  one is going to tell me it is 22  pixel. So, If we enable  actually out. Now, let's do  that. Right. You are able to  lay out like this. So you can  see something called the  alignment. so, if you want it  to be aligned at the center like  this,  So that is direction. This is  basically for  Is a little bit tricky to  explain, but the this direction  is for the direction. what I  wanted to spend horizontally or  vertical so you can see there's  something called the first  cooling out, everything is going  to start above each other and  the horizontal layouts. So if  you choose, let's just use the  horizontally out for this one.  And let's put everything in the  center. So let's  let me zoom out a little bit and  starts adding the menus into it.  So you see what you have to do.  So this is the home then add it  inside here. This. Okay, what  happened was basically. It's  created a frame but I want to   Let's just eat some confused.  Yeah, so first thing I want to  do is to make this rectangle  frame. Before I add authority  items with. So if you want to  make this a frame, just right  click and frame section like  this. So it's already a frame  now.  You can delete this off actually  and you can give this the  background of white. That's the  frame. so we can basically of  frame inside frames actually, so  let's just give it the base  whites and give it some corner  radius of 42 pixels. Then you  can add the Auto layers to this  one.  So right, click and add Auto  layouts. So remember, I told  you, it's going to span  horizontally and  So I double click actually, so  this means it's got everything  is going to be in the top left  ball. I want everything to spawn  in the center, so just double   click on this one. Like this is  going to ensure that they have  equal Gap. So this one ensures  that I have Equal gaps, like  all the elements as equal gaps.  And This one means it's going  to be in the center. So let me  write, you can see align center  so everything's going to be  aligned to the center. So those  that took the Web development  course might have, you know, a  little bit more idea on this  because these are basically CSS.  So, let's start creating them.  So you can see that once I add  the home inside it, it's one to  the center. And the present  also inside a frame. You can  see now. No, let me know. Add  another one. Also that's  duplicate this one.  So, for you to duplicate this  control, D, you can see  everything is now in the center.  So if you wanted to be sent a  center, let's just click here.  Click Just double click on this  side, you can see. Everything is  now in the center. So there is  a way to add a pardon or a gap.  To everything.  So, a pardon is basically.  So because Sigma is designed to  be implemented by developer so  they make sure  they tried to mimic, you know,  working on basically HTML and  CSS. So let me basically do  some conversation so I able to  follow me. Is anybody that's  following me here?  so if you are and you have any  problem please kindly signify  please  So, let me I want to take that  all over again. I'm just decide  and  We can just create a frame like  this because we want to use  something called the auto  layout. so auto layout, from  the name you can see it's  something just called like it's  going to give us an  automatically an automatically  out and automatically ours is  basically, they're just telling  us there's going to ensure that  the spaces are equal either, we  set this person to be vertical  horizontal. Everything is going  to be perfect. so, Another way  an alternative way from using,  if you don't want to, you know,  right. Click on the frame like  this. You can just click on this  side. Like this use you can see  use Auto layouts. Like you can  see the options came back, let  me click on Countryside and  click on it. Again you can see  the options came back, let's add  a few. Click on this side.  Let's use our base white. And  let's use 42 pixels again. So,  I  said, I want everything to be  online to the center, right? So  just click on this place, It  says Align center. So everything  is going to be in the center.   So, let's start creating text.  If you create a text here, let's  say hello. Oh, let's see home,  This and just put it inside the  frame. Let's change the color.  so, we can also use Base black  for this one, also. so, You  can set.  Which if I want to do it to be  bigger, you can increase the  width from there actually. So  let's just leave it at 715. or  let's say, 700 700 So let's  reduce the text. And let's use  24 pixels. Like this. So  something like this, okay?  so, you can duplicate this with  control Z control, D, and it   Ar, The number of times is just  the number of the controls that  you press. So I want to say  pricing, Say products. so,  just like another Photoshop, if  I want present before products,  I can just drag it over like  this, so this once in the Auto  layout enables. So if it's not  like this, the elements is not  going to be moving because if  you are using Auto layout the   element is going to be designed  to make sure that it follows the  auto layers style, giving that  will give it. So this one  ensures that everything is, you  know, in the center and they  have spacing of 10 pixels. We  can increase this increase this  person from here. So, let's  everyone.  and then let me just change this  once to, So, if you want to  detach your style, you can see  here. detached style, Just  click on it so that that means  if you have attached install  and you want to detach it,  that's how you do that. and so,  You can change this one's to our  basically. oh, Anything.   Let's just Make this one.  It based. Like you got  something like this.  So to show that, you know, we  are actually on the home page.  so, Another thing we can do is  to create a button. So creating  a button now is going to, you  know, take us to another  section. So, let's see.  so, preferably they, you know,  if you want to create a button,  you can use a rectangle but   For flexibility. You should use  it a text. So I'm going to say I  am going to turn the I am a  button now. So you can say a  button like this Right. Just  right, click and so once you  frame it like this, you can now  So, you can see. so,  And do that again. Let's see.  This is Mario, what? Text now.  so, You can add a few here. To  detect. And you can just,  Can add auto layouts to it like  this and it comes back rating.  So it's going to be very  flexible. So, You can now add a  background to this one. Let's  say we want to use our base  black here. And let's see once  204.  You can also add some padding.  So padding is the space between  the elements like the parent  element and the chart element.  So the frame is different to  this text. You can add  Let's say you want a 30 pixels  so it's going to have some  spacing. So let me zoom in,  maybe we can see it's very well.  So this is how it looks like.   Something like this. So You  know, different action require  different types of button.  Although we're talking about  that in the next class. So, but  I want to quickly show you how  we create something that we  call a component. If this is  your element like this, let's  say this is our button. Let's  give it a name of the button.  so,  You can now create a component,  just click on the button and can  use this. Press component.  so you can see that the color  has changed and you know, as we  move out and creating your  designs, you're going to, you  know, find it's very good in   creating components because it's  going to save you a lot of  repetition like time that I'm   going to be using to create  stuff and you're going to see  save you. You can just create  there's something I will call  creating variants. You can add  different variants. So for  different modes, maybe some  colors are going to use the   lighter, you know, gray color.  I can change that from here.  And there's something that we  call a property also. So I think  I'm still going to talk about  this in detail. Let's just  continue like that.  So there is a way of adding  something that we call an  instance of a component.   because in Figma, Initially  don't have to touch your. Base  components, once you've created  them. Let me just align this to  the center and to the center. So  once you create a component like  this, Right. You can, there's  two there are two ways to To  use the instance of this one,  you can click Assets here.   Right. You can search for your  components. Let's see Button.  So this is the button that we  created here. You can see  And you can insert an instance.  So this is an instance of this  is the component and this is an  instance of it. I can edit the  instance, I can change the text  of instance and it's not going  to to affect so,  Right? We can You can create  another instance. Also, by using  the ALT and dragging it out. I  can change the text of this one  and is not going to affect the  component. So it's going to save  us a lot of time and we are  still going to be talking about  it. Father, let's say, Contact.  Contacts.  So maybe is something I want to  have on our page can just drag  it over.  So, let me show you something.  So You can see.  So we can say, we have  successfully created the top  nerve navigation. And so, now  we have to create, we have to  make sure that this is also a  friend because sorry, this is a  component because At some point  we might need to add some more.  I need to add some other  navigation menu. So let me show  you one of the reason why we  need to create it. so, If you  click on this and we have  created a components, let's just  give the name. Let's say it's  menu. And let's create. A From  here. Let's see. Once use this  macbook here here, so I can  come here and search for my  menu.  So I'm going to talk about  something now. So yes, I  instance. So it is an instance  and put it inside here.  let me make sure most  So this is what I was saying  this. I'm talking about. So,  you can see.  we have added the components  into this from now. So let's now  say that we want to add so,   let's add it and put so now  I've created two pages now, I  want to show you one of the  reasons why is going to use a  component. Now, I've created two  pages, right? And maybe a senior  engineer now told me that we  need one more  One more navigation menu here,  so I can go ahead and start  changing it, but  One thing that is going to be a  big problem for me is so let's  assume I'm working on Facebook,  Um, UI design. And they have  like, 100 pages And I just want  to make a change to just this  navigation bar if I'm not using  a component, that means I'm  going to have to start changing  the navigation one after the  order until I get to page  hundred bots if I'm using a  components I can just come to  my components here. Like this.  And I can add one more. so, As  you continue.  So, I have added and remove the  underlying.  So let me just do it.  so, yeah, I've I've added  another one, so I've made some  changes also to the size.   Unless this is contact us.  So you can see, I basically  edited the components. So let's  check out this pages that I've  created here.  So as you can see, now you see  that I did not edit this site. I  only went over  to the component and I edited it  and the changes was made to  everything. So this is one word  that's creating components is  going to save you a lot of time  while editing. So I'm actually  a designer stick a lot of time.  If you don't know how to create  components and they just creates  customs elements and that's  going to ensure that there is a  lot of inconsistences your  design so mostly. So once we we  are working on figma, got to be  creating a component. Although  you don't have to create a  components every time because  there are some components that  you only need wounds and you  would not need them anytime or  you not need them in any other  section, on your way, on your,  on your design. So if you are  creating that kind of  components, you don't really  need to use. AR creating that  kind of you know style um oh  elements you don't really need  to  use components. But for  something like buttons for input  elements for navigation for  photos, you a lot of things need  to be in, you know, component  form. So that's it's going to  be able to be easily edited.  So I I think we have run out of  time. So, do you have any  question before I leave?  Okay, so there's no question and  I'm going to catch you up in the  next class, you are going to be  talking more about components. I  wasn't talking about variants  because, you know, we can create  various, maybe you have another  sub domain done. It's to use  that same navigation,  components, we can create   something called a variant, if  that's just like, you know,  variation another type of, you  know, a component. So in the  next class, we'll be talking  more about, you know, you are  and you. So thank you very much.  But before I go today I said I'm  going to be sending some briefs  for the flyer designs. So in  total, I'm going to send in  about four, five briefs for   everybody. So you have to create  something unique and Sent your  inputs to my mail.  I I think I sense the picture on  application, the link to its in  the last class. so you'll be  able to use icons also. So And  I said We'll be working.  Let's see, I've spoken to the  organizers for extension of them  but let's hope they will give  us additional time. So, thank  you very much."}]