Day 88- Building Basic Screens in Figma Prototyping - 100 Days 100 Skill Booster Sessions

Take out open your Figma screen and log in with your Gmail id Or maybe whoever is first time opening anybody is like that very first time Jagdish. I don't know what is Figma? Maybe I'm starting new. Somebody's like that. I don't think it will be like that. Most of the people would be using it one or the other way I guess so can you confirm it? If you're brand new, type Yen in the chat box. If you are brand new, if you're brand new type in in the chat box. Oh, who is that?

Okay.

Anju, Karan, Kanda. Everybody's okay? Only two people. Okay, great guys, fine. Other people are a little bit knowing about it. Just a second. I'm just putting out in the group.

Okay? Okay.

Have you guys opened? So what I want you guys to do is before we start, okay, before we start take any one screen which you are very comfortable from the online.

Okay.

Take from the Google or maybe from the online reference. Whatever you feel Yagdish. I feel like this I can build maybe a little practice for me. I believe Jagdish. So something like that. If you can, if you can take one screen, okay, one screen. I will tell you what to do with it. Please select fast and send it to me in the chat box like this. I'm okay to build with this, okay? Because sometimes we need to act as a graphic designer to start building the screens and we need to be fast at it.

Okay?

This is one good skill which you can learn. But the point here is many industries are trying to make us do only this.

Okay?

That is my only worry. But we will have to learn it, we'll have to master it then and only we can able to work with the team tomorrow we will be able to build lot of screens quickly and get the work done with the other team as well.

Okay?

Tomorrow you'll be having a graphic designers in your team. You'll be having UI designers, you'll be having what you call developers. So we should know the softwares very well so that we can interface at all point of the projects and move the things very seamlessly, okay? Because Adobe xt, Figma and all these tools are are used by industry.

Okay?

I'm not sure about Sketch because I have not heard about it and in fact in our industry we don't use Figma. I've learned it to just teach our students. Okay? We use Adobe XT because it's a protected firmware. I already told you but it is not a point any Tool, you guys can learn it but get the basics. How do we have to do a prototype? Some. Sometimes tools is needed, sometimes a paper prototyping is needed. The communication is the main point here. Please understand that, okay? Not about the fancy tools, it's about the communication. If you wanted to create any really fancy graphics and communicate it effectively, these tools will help you better. Rather than just saying in the mouth, just putting out in the words. So these tools will help you communicate better as well. As compared to three years before now the transition to the development is much faster because of the options what is being given. We have a development mode in Figma and then we can convert that code in Adobe XD very easily into development. So, so that people can understand what color codes you're using, what gradients you're using, how the designs, what you're creating. Raw can be converted as a development in just one go, in just one second. So that much of seamless options has been there. So that is why it is very vital to understand like what is possible, what is not possible with this tool, what your developer can comfortably develop and what is not possible.

Okay?

From the day one, if you are very clear about it, if you are able to understand it, then you can deliver a better project. Okay, fine. Everybody has taken. Give me the. Give me in the chat box. What did you take? I know Jagdish, but I'm not. But I'm not new to this tool. That is okay, fine, okay, okay, fine. Type out your screen. Guys, what did you, what did you guys choose? Show me that, show me that.

Fast, fast, fast.

Dayal Shankar showing some screen.

Okay?

Take very simple one. Dayal Shankar, okay? Even if you're a, even if you're experienced guy, it's okay, fine, but what happens is we are going to do a timer activity, okay? We're not do a beautification activity, we are going to do a timer activity. Okay? Dial. This is a little better.

Okay.

Something like what you call. I would say don't take very complex screens, very simple screens. What do you, what do you feel could be taken? Guys.

Okay.

Meanwhile I'm just putting out in the. Yep, yep.

Huh.

Who else? Only D has sent. What about others? Guys, take any screen which is okay for you.

Quick.

I wanted you guys to try it out on your own comfort.

Okay?

Current. This is better. Okay, okay, okay, fine. Guys, listen to me.

Okay?

Anybody who is still having problem in opening the Figma or something like that, please log in with your gmail or use any other email ID to start creating an Account. Open that.

Okay.

I'm just sharing on the screen fast. First listen to me, okay, first you have to get the basics. Okay, so what are the objective of building the prototypes? Figma is a one tool, okay? You can do it with any tool. You can do it with Adobe xt. Mostly big industries will use Adobe xt. Okay, so the interface is not much difficult or complex case.

Okay?

Please try to look very closely. Most of the option, 90% options are same. Okay? If you start using one Adobe tool, you will be able to use many of the other, what you call illustration, Photoshop and all these tools easily because the language and the interface is pretty much common for all these things. Okay, so same like that. If you use Adobe Extent, if you know Figma already, it will be easy to adopt the other two. Okay, so practice it by breaking down the screen. I'm going to be giving you this activity. Just wait. Okay, so the main purpose is to understand the core features. Like let's say we don't have to learn advanced feature. Tomorrow we'll go a little advanced feature. But first let's start with the basics one now, okay, we'll try to copy a particular screen. We'll try to practice it. We have to know how to put our ideas in our mind into some visual solutions. You, you guys are understanding. So we need to know, okay, if my user has to communicate this interface, what should I do? How do, how does he understand? First he process here. Like what is the interaction? He will be able to get it. Okay, so my objective for the user is to make the payment happen. So how does this particular interaction help him? So that is the core thought process which you need to have before using the feature. You should not use the feature and think reverse. With this software, how do I communicate my user? No, that is a. That is a very, very. That's not a correct way of doing. I will tell you what will happen if you do that. You will only stick to this tool. You will not stick to the goal of the user.

Okay?

Even in any 3D modeling software, in VFX, in Maya, in Blender, or whatever tools you take, I will tell you an important factor. Always remember, user is the centric of this whole design. That's called a user centric design.

Okay?

Whatever user needs, it's our responsibility to develop this by somehow, whether your software permits or not, that is our problem. That is designer's problem. That is manufacturer's problem. Right? We cannot say, hey, I have only four options in my. I have only few options in my software. That's a limitation. I'll develop this. It's okay, fine. User will adjust somehow. You're not going to be a great designer. Please understand that.

Okay?

So that is why many times we used to fight with the development team also to get the certain features done, get the certain things developed properly. Even though it may have a little little problem or maybe even though it may have a little issue, they will tell. No, this will. This will not. This will have a problem. We cannot develop it. These gradients will crash the screen. Sometimes these typefaces is not web optimized. We can use only two to three typefaces. We will find why, we will ask them, then change the platform, then go for something else. Use the Angular, Java or use any other platform like Qt or maybe whatever. I don't know about this development terminologies, but I will stand on only one point. My user is comfortable to use this typeface, this graphics, this interaction. You do whatever it takes. That is your job. Management doesn't know, right? Management doesn't know whether it's important or not. Management will always think about how I can get the final products done with the best cost. So they'll try to tell you, oh Jagdish, if it is not possible, try to do it. If the developer is saying it is not possible, you do it. Please. No, we should be very strong because user is a centric of this whole design process. That is why it is called user centric process. It is not designer centric process. Type type DC in the chat box.

Okay?

Ndc non designer centric process. We are not the center here.

Okay?

Please understand we are not the center here. Users are the center here. So always if you have a confusion, clash or anything with respect to making the software or initiation an option, think about user. Will the user will be able to do it? If the answer is yes, fight it and get it. If it is no, if it is not possible, then you will have to think something else.

Okay?

So that is the whole point of it. So I will be showing you the live demo and everything, guys. Okay, so what we will be doing is there will be key features which will be covering. Don't worry.

Okay.

Like the basic frames. How do we have to convert the basic frames into some basic interactions? What does it mean by components? Like? Let's say frames are something. Nothing. But the layout and artboards, we'll be seeing components, we'll be seeing few libraries. We'll be using certain basic shapes, gradients, typeface grids, constraints, prototyping and collaborative Tools. Okay, so these are all the basic things which we will be seeing. But first let me open the screen. Hold on. So what I'll do is you can take any picture, guys. Okay? Any screen. Can you, can you send me in the chat box? Whoever has the screen. Just a second, just a second.

Okay.

Many people are sent.

Okay.

Ndc. Very nice. Good, good. So I'll take this one. What our friend has said. What is this? What is his name? D. Shankar.

Okay.

Just watch what I'm doing guys.

Okay?

Just try to observe this particular screen. Okay? What has been taken with respect to you. Whatever you take it is whichever is comfortable for you. Again, don't get confused. Just, just start with the basic primitive shapes.

Okay.

You can see my screen, right? One second.

Okay.

So I'm just creating a small picture of it. I'm just dragging and dropping. What I'll do is I'm trying to create, I'm trying to break down the screen. Okay? Just watch me. You guys are going to do it a rapid speed.

Okay?

So press F if you want to create frames. Okay? See, figma has only few options. If you wanted to make a frames like let's say Artboard in Adobe xt, we call it as Artboard.

Okay.

So we have to create some kind of frames. What is this frames? The frames is where we will put all our interactions and then we'll connect multiple frames, which is called wire frames. You connect it with the dots or you connect it with some kind of a wire. So this is to make us understand where and how the users are going to navigate. So in that frames we have to add some interactions or we need to create some options where the users will come and interact. We may be seeing mobile, we used to see mobile and everybody knows mobile web interfaces and all. But what goes beyond is what we are building in the frames will actually come as an interactions over the time. This is also one way to communicate, see directly. Also you can develop these things in HTML, CSS guys, but it will be very difficult. That is why the two things are happening separately. The front end development, the back end development in that front end development as well. So first we used to give a wireframes. First we build the interfaces.

Okay.

First we think about the user centric principles, interaction, everything. And then we develop it. I mean we design it. And then what happens is the development team takes over this and develops this properly and then the interface meeting will happen and then they'll say 100% it has not come, only 80% has come. Why? So some kind of interface meeting will happen. I don't know in your organization whether the interface meeting happens. There'll be something called interface meeting. Interface means what is the interface which is happening in the screen and the development team, what are developing? Are they really matching or not? Lot of clash will be happening in the interface meeting only. Okay, once the interface meeting goes well, then 80 to 90% of the things will get developed for them. You will have to communicate very, very clearly what you wanted to do.

Okay.

For that, what you have to do is like let's say if you're thinking about building your solution. Okay, let's take this. Let's press frames. Okay? If you press F, guys, screens will come.

Okay?

If you don't have any other frames, you can go to this prototype and then you can take this options like let's say if you want to use any particular device, if you're building an application for that, you can take that. The dimensions and everything will be there. There is no problem. Okay, or simply you can go to this design. There is two options here. Guys, can you see if you're in the design mode, you can, you can do like a designer. It's like your canvas. You can do whatever design you want. If you wanted to do prototyping, you can use this prototype. Okay, so this is a basic option and here is another option. One is like a section. If you want to create small, small sections. I don't want a big board like this. I want to create a small section. You can use it. Okay, this is used for overlays and other options. There are many use case for it, but basically this is used for that.

Okay.

Slice is actually something. I have not used this feature, but it is not going to be connected with the prototypes. Okay, so frames to frames, you can connect and create wireframes and create multiple, what you call a prototype. Like let's say with one or two sequence, with even one or four sequence, or even you can create hundreds of screens. In Adobe XD we used to create hundreds of interactions and it looks very, very complicated. But while you're sharing to the people, you should only share the shareable file. Which people can open and see that? I mean, I've seen many people, they are just sharing the figma file, just like scattered hundred screens. Who do you think they will zoom out, zoom in and see what is the interaction. You create a story and then you communicate that properly. Okay, I'll talk about the share option at the last. Because a lot of people don't know how to even share the Work whatever they're creating. So it's very important. So now let's come to this screen. This is a frame. So what is this particular screen about? So this screen is having some kind of a search bar, a small, small tags, like let's say an options to choose and then some destinations they have given some kind of a picture. Right? So if I have to break down that screen into small, small wireframes, this is what you guys are going to do. Okay, so what I can do, I can create some basic shapes of this. Like let's say if you press R you can able to get a rectangle. Okay, you can move the screen, guys. Okay, you can just keep it next to next so that you can just copy this. Okay, so what I can do, there is an option called, There is an option called Hand tool, guys. Okay, if you use hand tool, you can move your entire screen. It will not, it will not get selected. If you use a scale, like let's say you can resize, you don't have to change all of the components. Okay, you can just resize it entirely and it will go up. Okay, and if you use this particular tool called Move, then you can move all of these elements. Can you see? So you can use this tool, whatever is your comfort accordingly and then you can try it out. Okay, if you use this option called Shift and then if you, if you, if you move this like let's say. Wait, hold on. Okay, so this is like a normal option. When you, when you go and click on any sides, like let's say there'll be option available here. You can do it, but when you hold Shift, it will move on equally on all the sides. If you want to do get a constraints of it, like let's say no Jagdish, I want this to scale equally. Then you have to press Shift.

Okay?

So Windows people please try to take whatever is the thing, I'm just talking about command and shift so that you can resize the element with respect to one axis X and Y. Okay, if you wanted to do it manually also you can do. There is an option called position here. Okay, so mostly what will happen is you will not have a freedom to draw your own box. You will have a restriction. You will have, you will be told like, okay, we need to construct with this. See if I have to give an option like this like many times, what will happen? Like we'll have to create a. Like let's say we have to create this particular thing into wireframes, right? So what I will do is I'm just trying to draw on top of it. Then I'll try to match this. If you pull this corners, it will look like a radius. See, that's it. So the dimension is 540, 554into 3920. You guys are getting it. That's it. Okay, so what we can do, we can just go and place it here, right? So this is somewhat similar to what our screen is there. Okay, so you guys are also going to do like this only. Okay, so just try to create it. Just two pictures.

Okay.

And also. Okay, where is the search bar? So we can draw another rectangle here. I'm just trying to be as close as possible. It is not really required to do exactly the thing.

Okay.

So I'm just trying to create one. I'm just breaking down the screen into a small, small wire frames.

Okay.

And then after few minutes we'll do the breakdown of the screens. Into building this exact screen. We'll do up, we'll do reverse.

Okay.

So that we can practice it fast. So you can insert this text. If you want to insert text, you can put T automatically. T will come.

Okay.

What is this? You don't have to write good morning. You can write xxxxx.

Okay.

You can increase the typeface by going here. Like let's say if you want to increase it to 300. Okay, whatever, you can do it. Okay, you can again resize this. If you want to change the typeface, you can do it. Whatever you want. Like let's say if you wanted to use any different typeface, let's say if your brand language is calling for some of the typeface, you can call for it or you can insert a new typeface and then you can add it over there. Okay, I'm just, I'm just creating. This is fine guys. Enter itself is fine.

Okay.

And there is one option which came have you seen here, like let's say a curved option.

Okay.

When you click it automatically, it rotates. If you wanted to rotate it to a 45 degree. Okay, you can press shift. Look at, look at this. It exactly moves in the orthogonal plane. Okay, 45 degrees, 90 degrees, 270 degree, 360 degrees, something like that. If you hold, if you don't hold shift, you can move it to whatever size you want. Okay, so always use this options like shift, alt command. Because this will help you resize your components very easily. When you're working on multiple screens. You can do it really fast. Okay, so use this particular options.

Okay.

I'm just Creating this. So there are two types of test available. One is this. Good morning. Another is a name of this. So what I can do, I can. I can keep this one as like let's say 250. Okay, I'll keep it like a 250. No, it's still higher. We'll keep it like a 175.

Okay.

Somewhat closer. And then I'll duplicate it. You can press command D. It will automatically duplicate. And there is another text which is very, very small. Right, so we can put 550. No, we'll put one. Okay, so this is how it will look like. So you're just breaking down the screen and then you're trying to create some kind of options out of it. Okay, so here there is another option for location tagging and something like alarm. Okay, so you can press O. O means oval. Okay, you can create it very easily. Again, if you wanted to put shift automatically, this will resize into a proper circle. If you don't use Shift. See, it will squeeze like anything. Okay, so use it accordingly. There is two options here.

Okay.

Okay, there is two options here. There is two options here. And this frame looks particularly little bigger. Okay, maybe we'll concise into a little smaller one.

Okay.

Okay. Somewhat. Okay, now I have to draw tags. Okay, what I can do, I can press what you call command D so that it will become a small. Okay, so I'll go and put the small tags here. Something like this we have a tax.

Okay.

And create. In Adobe XD there is an option called Windows R. If you put that, what happens? It will seamlessly scale like that. But in Figma also it is there. But I'm not sure what option is that. In XD it is very common. Like you can drag and drop horizontally as well as vertically. And equally you can space it. It's a very, very cool option actually. Okay, yeah, you can just duplicate this particular one. And they have created one big picture here.

Okay.

And they wanted to create another. Sorry, they want to create another picture also, which is like a little backdrop.

Okay.

And there is one more option here which is like this one. Okay, so. And you can use this command, you can use this shift. Look at this resizing equally.

Right? Okay.

And here we have a four option.

Like let's say drop here you can.

Create a different color over here.

Okay.

If you want to, you change the color, you can fill this. Or most of the time you will be given the RGB colors from your. From your developers or from your brand language or anything. So just use that okay, because sometimes we don't have the luxury to use all the CMYK colors. Sometimes we have to stick to a primitive screens. So based on your organization need, please try to use that. Okay, we'll not use much color. We'll use different.

Okay.

We are just trying to create some mockup kind of a structure. Okay. So we don't use much colors, gradients and all these things. Let's, let's create this, okay? So we can put some kind of a. Like let's say. So I'll use shapes, okay, I'll use shapes. Like let's say here my icon comes, that's what is my placement, right? So what I'll do, I'll use a different color here maybe.

Okay. Okay.

It came automatically. Okay, fine. So this is how my screen can look like, let's say when I break down that.

Okay?

So even if I have to break down that even smaller, you can press the option again command D by going into the frame or you can press alt and drag and drop. So automatically you will be getting a. What you got a duplicate of that screen. You don't have to multiple times redo all these things. Okay, so you can just create it. If I have to even make it primitive, what I can do and go to the stroke.

Okay.

What I can do, I can create only the boundary.

Okay.

See, only the boundary came, right? So like this, we are just trying to first build this one. Like let's say if, if it has to go very preliminary.

Okay. Okay.

This is how the screens will first look like first when we ideated or when we thought of putting out. Okay, here we can have some carousel effect. Here we can have some pictures. Okay, here we will have some options. Here we'll have the name, profile, id. So from this conception only we get into this. From this only we get into this, right? So what I'm asking you to do is now the time is 6:26.

Okay?

So you guys have to build this particular screen and break that into a little semi. Like let's say a semi. I would say a medium fidelity kind of thing. From this, you guys try to build this into a very, very primitive screen, which is the lowest fidelity frame. Okay, you can use a very, like let's say you can use a tool called pencil as well. Let's say if you wanted to add anything detail here. Okay, Just rough, rough, rough. You can just draw it. Okay, I'm just saying like, let's say you can also delete this. Like let's say in your conception stage. Okay, when you had the option of. Oh, sorry. When you had the option of putting like, let's say you can use this tool called pencil. Okay, you can use this. If you type P also it will come shift P if you put pencil will come. Okay, you can use this option. Okay, let me put my user profile here. Okay, so let me use my small icon here. It's a rough thought process, right? You're doing it in your pencil. So you can have a basics as well. From that we are building this. From that we are building this final solution. Okay, so now whatever examples you guys have taken, okay, Use this, basic shapes, whatever I gave you, don't think much.

Okay.

If you wanted to use a certain options like layers, you can also use this. In the left side you can have something like a Layers. So this is like a layer management system. When you use Photoshop and other Coral Draw and other things, like you will have a layer, right? Like let's say no Jagdish, I wanted to use this layer on top of this. Like, let's say if my color is like this, okay, I wanted to make it come forward. What you can do if you wanted to make it come forward, you can just drag and drop in the bottom. So what happens? It goes to the bottom. If you want to make it come front, you can bring out this. So layers are very simple. Just how the layers are being formed in the pages. Like let's say we have pages, right? Like let's say each and every layer. This is the first layer, second layer, third layer, same like that. The objects has been stacked. So what you can do, you can just spatially see which option is there. Jagdish, I'm getting confused which layer is which. Just go and click here. It will automatically see. You can just rename it. You can say box two. You can just rename it, okay. And then you can pay home. My box two has to go bottom. Let's put it. It's gone. Okay, so wherever you wanted to place your boxes, okay? It's up to you to put it. Okay, see now the box has come little bit higher. So whatever graphics you guys want, whatever layers you wanted to build, just try to build out that. But don't use any colors. I wanted you guys to just build it very, very basically. Okay, fine. Is everybody clear? Just use the basic options. Don't use much. Like let's say I use the basic shapes, I use the basic colors.

Okay.

I use the typeface. I used the pen tool, I used the frames, I used the text. Okay, so try to stick to that and try to break down them. Can we try it out? It's a very simple option. Let's go. Even if you are experienced guy, it doesn't matter. Just start with basics. Cool. Can I get a confirmation that. Will you guys try it out? Yes. Yes. Do it fast. Yes. Yes. Yes. Guys, please switch on your camera.

Okay.

And do it live in front of me. So that I'll know that how you guys are doing it fast. Let's see who's really doing fast. It's not about perfection now. It's about fast. You're just taking your screen. Take a simple screen.

Okay?

If you're very doing complex, don't take complex. Simple. Try to break down. Try to break down. Analyze it closely.

Okay.

If you are able to bring as close as possible, it's better. Any doubts is there? Do ask me.

Okay.

Don't use much complex options. Use very very simple options. As of now.

Okay.

We'll see prototyping and we can see this resizing of components, auto layouts and all these things tomorrow or day after.

Okay.

First let's start with basics. Akita, Sumana, Sangeeta. Are you guys doing Shan, Jandani, Gokul, Anju.

Up.

Who is that? Up? UP is an animation film, right? Oh Urvi. I. I understood.

Okay. Nishit.

Ramraj, where are you? Mountains are only there. Can you. Ramraj, are you good in figma? Okay. I'll tell you once. This is only for Ramraj.

Okay.

Try to build the same screen. What is there in behind you? The mountains. Can you do mountains in the figma? Just copy that. You have a white thing there. You have a layers there.

You.

You are a vfx. I mean you are already an artist. An animation artist. So try to create that. Let's see your skills. How it is? People who are good in figma. Try little complicated as well. People are little basics. It's okay. First you do whatever we have discussed. Try to create a primitive shapes of this mountains. Try to use the different colors there. Let's see how it is. People who are completely stuck. They can rise your hands. Maybe I can explain you one more time shortly. Yes. Sumana. Yes. Chitra. Yes. Sri Balaji. Good. Jangita. Yes. Were you able to do it? Just share your screen. If you have done it, won't. It should not take much time. That's the point. Any difficulties, do ask me. I can clarify. I can explain.

It. It's.

Yes. Time is up guys. We should. We should not take much time. Fine. Just a basic one. I'VE not asked you to build a very detailed screen. Just a breakdown of the primitive one where you're able to do it. Can you just give me some screenshots? Maybe work in progress. Screenshot. It's okay. How many of you are from design degree background? Design. Proper design background here. Anybody? Shashank, where did you study? You're in mute. So it's a small college in Bangalore called National Institute of Creative Communication. Oh, right, right.

Okay. Okay. Yeah.

So they are tied up with Bharatir University, Coimbatore. Oh, that's interesting.

Good. Good. Yes. Okay.

Current. Excellent. Current. This is what I'm looking for. Excellent. Look at this guys. A basic idea, right? A basic primitive knowledge. Like let's say the placeholders. They call it like a placeholders, right? Where is my objects really coming from? Like how am I breaking this down? Manipal and Rishihood Shajan. Excellent. Shrujan. The point, what I'm trying to tell you is my design college or any design college. Like there is one institute called National Institute of Design in Bangalore. They have a course called User Experience and User interface Design specifically.

Okay.

None of the colleges in NID teaches you these tools and all those things because they will give you the perspective, they'll give you the problem solving ability. Because tools keep evolving, keep changing. So they will ask you to practice on your own. So try to practice it on your own because the more you are attentive towards each and every options and how it is being used, you will be getting better at it.

Okay.

Sometimes if you're new, you will not be able to get it fast. But. But operate it with a little patience. You will get all the options. Okay. Don't get frustrated. As well as you can use this YouTube channel, guys. Always. This is my favorite. I learned from this guy. Only bring your own laptop. How many of you know this guy? Daniel Scottman. And there is another guy.

Okay.

I also like this guy. His name is Flux Academy. Very, very humble. I mean this. This guy is really cool. He has a two, three people who is working with him in Flux Academy. They also. He's actually a web developer. Web designer basically. But he will also teach you this figma and all this options and everything.

Okay?

You can learn it from there. Sharad. Cool.

Here.

This is really nice. I really like your perfection. You also try to use grids. That's interesting. Good, Good. Ramraj.

Okay.

You can make it a little more better also. Ramraj. That's okay. No problem. Fine. Flux Academy. His name is Ran Siegel.

Okay.

I'm Just typing out in the chat. See any doubts is there? Guys, there are two ways you can operate it, okay? First is you can go to the YouTube video and watch it. You will get a complete breakthrough or anything about the software. Second is you can use ChatGPT to get the specific options. Like let's say if you have to. If you have to create some components and you have to use it multiple times, maybe it will be difficult to find it in this big video because these people have a big, big tutorials. Okay, I just typed out in the chat. But what you can do is you can go to the ChatGPT and ask a specific option. So ChatGPT will give you step by step answers. Any AI tool would do that. And then with that knowledge, you try to practice on your own. And also you can watch some YouTube videos to get some understanding.

Okay?

Because this Daniel Scotman and all, they have a proper tutorial. Try to learn it when you come to that stage.

Okay?

I. I mean, I don't know. There. There are many people who say if I complete Figma, then I am good designer. Guess Figma is a small part of the whole equation. It's a tool. Please understand very carefully, okay? Tools can be learned. Like there are many options to learn for you guys. You can keep on practicing it like this timer, activity and other things. Okay, but what about others? Guys, only two people have sent me. Karan and Sharath and Ram Raj. Three people. What about others? It's a time sensitive activity, guys. If you sit on the screens, fancy things will come. We will keep on dragging it, but we'll have to stop at a point of time.

Okay?

Okay. Excellent. Dial. That's good. But this is too long here for you guys. It is too long. More than 10 minutes we have been given.

Okay.

Chitra. Okay, good. Fine. Better.

Okay. Okay.

Daran. It's good. Fine, fine, good. I don't put text. Exactly, Daran.

Okay.

You're just building placeholders. That means you should have some empty text, dummy text.

Okay?

Okay, fine, fine, fine. Kanda. Excellent. Kanda, you started putting colors itself. Okay, fine. Okay. See when you're making some initial, what you call the placeholders, we will not be able to use certain colors or anything.

Okay?

What will happen is. Have you seen physical mock ups and prototypes in the. In the workshops and anything. Have you seen those guys? It will all be in black and whites. Why have you seen. Have you seen it all be in black and white? Because we have to perceive the form of the product first. Like let's say If I'm building this particular product, okay, like how does it look like the cap will look like? I will not put golden color for this cap initially. I'll put there is some cap. Okay, so I'll try to put some basic mock up. So this white and black colors is predominantly being used because the form has to be perceived same like that in wireframes. Try to put the placeholders in a way so that it is perceived as its basic elements. If you add colors, what will happen? The team who's developing that are designing it from the day one, they'll be getting the same idea. Put blue. Let's put blue. Okay, it looks good in blue. Oh, it doesn't look good in blue. Maybe the concept is deleted. Maybe some of your boss says no, this orange color, this concept is not good. But the idea may be good. The frames and placeholder options is much easier for the user. But because we started using colors, what happened? It started conveying a different meaning. Okay, so in the frames level, in the basic ones, you will have to use the primitive options which is already available for you. Okay, guys, now look at me. See you can make little complex shapes as well. Like let's say if you wanted to overlap certain shapes. Like let's say if I'm. If I'm building another screen here.

Okay.

You can press F again and you can create option. Okay, something like this. Okay, like let's say if I'm creating some kind of a shape like this, okay, you can use this option called Alt. If you use Alt, only one side comes. Have you guys seen, I don't know in Windows you guys can try it out. Okay, yeah, but if you use this again, it will again when you press it out, when you double click it automatically it goes away. And you can use this four sided. Okay, so whatever you want, you guys can use it. So okay, now we can able to primitively break down this into some detailed shapes. Okay, now I'm doing it. Like let's say I wanted to use one more option here. Press O, you'll be getting that. Okay, like let's say if I wanted to. What you call. If I wanted to use this option, I can use some shapes also here. Like let's say drop shadow. Can you see a small subtle, what you call shadow which has happened. Maybe it is not very predominant. You can just click it. So what happens is the interaction will have a depth. So, so what is the meaning of creating depth? It is acting as an affordable signifier that this is going to be a touch object. This is going to be a movable object. This is going to be an interaction object. Right. So we are trying to find the differentiation in the screen once when we are seeing some kind of a basic depth or change in the gradient or color. Right. So we are trying to use that. Let us use the shadow position. Like let's say can you see here and you can use this blur option. Blur means it will scatter or maybe it will be very scintillated in one point. You can use this option.

Okay.

See, now it got little blur. So when I'm building this particular screen, like let's say if I change it to a different color.

Okay.

Like something like this.

Okay.

See now it looks like little.

Like.

A button or maybe your design system will call for any kind of a dimension. Try to use that.

Okay.

And then you can scale it up using the scale option.

Okay.

Or you can just select it all and then you can, you can, you can press and you can scale it up. It will anyway come. But using the scale option would be better because when you are scaling hundreds of screens at a time, or maybe hundreds of options at a time, scale would look better. One or two elements. You can do it with shift. If you don't hold shift, this is what will happen.

Okay.

Use those things properly. Fine. So now I'm getting to see some kind of a. What you call interaction here. So what you can do, you can also create something like this. If I wanted to switch on, maybe I can able to create a text here like on. Okay, I'm just creating a on option here. When I'm on, it is going to be happening here.

Okay.

If I'm able to press here. So this has to go bottom of this. Okay, so what should I do? I have to look at this on and then I have to just put it in the back. That's it. It went away.

Okay.

It should not be visible here. Off should come. What I'll do, I'll try to create this duplication of it and then I'll put shift. If you hold shift also you can move it in the same line. If you don't hold shift automatically, it will come if you hold shift. See, it's all in the same line.

Okay.

So use these options for your better productivity. Use this. So here what I'm going to create, it's like off. So off should look little like let's say a difference in color. Right? Because it is off. Same interaction. If you give same color, people will get confused. So what I can use, I can use this Opacity option.

Okay.

And use this opacity and use 50%.

See.

No, I'll use even more lesser, I'll use 20%. See, it's off. Okay, you want to create an option. It will automatically come.

Okay.

You can also play a small animation with it. But don't worry, we'll do it little later. Okay, so now you can create some shapes around it. Like let's say. Oh no, Jagdish, I wanted to create a small cutout here.

Okay.

But it is not possible with the primitive shapes. How can I do it? Jagdish, you can do it. Like let's say it's a very, very simple option. If you wanted to just create from the beginning. Okay, if you want to create a small notch here, Jagdish, I wanted to create a small notch here. How do I do? Because it is not available here. See, when you go to the shape, you will have a rectangle, you will have a line, you will have an arrow, you will have ellipse, polygon, star, everything. You can even bring images. Same like what I brought, video, everything. But if you wanted something different shape, like, let us say in your interface there is a small option which you have to give here. So what you can do is you can just select this option, whatever you wanted to do something and go to this three dots. Can you see here there is an option called Boolean. Okay, many people might learn might know about this. Like let's say if you wanted to join these two components, you can press an option called Union. You just look at it carefully, you will see the option. If you want to subtract from this, you can use an option called Subtract. If you want to create an intersection, like let's say Jagdish, I wanted to overlap these two things. But the overlapped region I want, you can create that. You can exclude if you overlap these two objects. See, when you select two options, only this will be getting enabled. With one object. You can't do boolean. Okay, like let's say if I'm giving subtract. Look at this. It is not possible for you to create a shape like this. Generally because it is a. It's a rectangle and then it made a complete radius and then we carved and then we cut it using this Boolean option, right? Like, let's say if your interface is calling for this option, you can create it. Yeah, maybe some interactions will be there or something. Okay, I'm just creating it. Okay, I wanted to add this Jagdish. Now just Create a union. See it become one shape now. So you can, you can use your creativity to create whatever shape you want with this basic primitive option.

Okay?

If you want to create any intersection of it. Look at this. Only the intersection part came. If you want to create a multiple shape with your art, you can do that.

Okay.

Okay, Jagdish, so I'm not even satisfied with this. Like let's say if you want to use exclude. See, look at this. Okay, maybe you can put a small information here or anything you want to communicate. That's totally, totally up to you.

Okay?

No, Jagdish, I'm not very happy with this. I want something even more artistic. You can use a tool called pen.

Okay?

You can use whatever you want. Can you see there'll be splines available with that spline anytime. When you go and double click it, you can able to operate it. See, you can use the splines to play around and create whatever shape you want. Because sometimes you will have to develop an organic shape. Okay, so these are little what you call level two options. Like let's say if you are basically comfortable with building this kind of screens, then you can play around with this, whatever is your interface calling for. You can able to try that.

Okay.

And then you can also close this loop and then you can create a shape around it. You can create a depth around it. Whatever you want, you can able to do it. Okay, so this is one good option which mostly this Illustrator and other option Photoshop and other things will have. But they have brought it in Figma as well. In the start of the Figma it was not there. It was only a primitive shapes. Even we can't use much complicated shapes here. But now over the time it came. Okay, so this is one option what we are getting like let's say. Okay, Jagdish, I wanted to use it like a component. What does this component say? Like let's say if you're selecting this entire thing and then you right click and then you create something like create component. So what happens when you create a component? Those four dots will come. That means this is a component. Like let's say if I want to reuse this interaction in multiple places. Like let's say okay, something like this we are using. Okay, so if you press this here, can you see option is getting selected component six, component five, component four. But there is one dot only for this guy. This is a mother component, like the main component guy. Okay, the beauty about this is option. If you change this one option here, everything will change. Can you see, let's say maybe some change happened in your design. You're just moving this here and there.

Okay.

If you, if you want to change a color, maybe if you want to build anything else, like let's say you wanted to change this to that, you can use this picker option. Guys, like look at this. It doesn't look good, but anyway, I'm just creating it. Okay, fine. So what happened is we are just trying to change in one element automatically. It happened in all when you're doing some hundreds of screens together, this option will be very, very productive for you.

Okay.

Okay Jagdish, this is one good option. So how do I bring some icons here? Like let's say if I have to see this particular search option. Like let's say let's explore. Okay, so I'm just deleting this one. You guys understood what is component? It is very simple, guys. It is to improve your productivity. You can also rename this component as a mother component. Whatever shapes you want, you can delete it, you can keep it and then you can replicate it. So find out that one main component, click that, change it. It will replicate to all the screens whatever you made in hundreds of options. Or else you'll have to do it manually. It's a time consumption activity. Clear. Are we guys clear about it? Type C in the chat box if you, if we are clear about it.

Okay.

Many people are now giving the screens. Okay, Sangeetha, where are you? Slipped and then came back. Sangeetha, fast. Okay, good, good, good. Fine. I think you, you guys will do it. But it's just because it's early morning, you guys are not able to do it. Okay, fine. So can you see some option when I'm, when I'm creating the same layouts here, can you see something here? Can you see some space here? You guys can resize it very effectively. If you wanted to do it in a very, very what you call a scaled up manner. Like let's say in your design system. If that. If the system calls for you need to have a space between the icons as 150 element, you guys can create it. If you want to add it manually also you can do it like let's say no 100 do it.

Okay.

Once you're select, once you're creating a 2, 3 options around it, automatically the UI will show. Previously it is very complicated, but now it has become so simple. See manually also you can change it by pressing this option. Can you see this red one option? You can operate it if you wanted. To do a resizing. You can do it. Cool. Got it.

Oh.

If you're pressing shift automatically, it will reskill. Okay, so like multiple components. If you guys are able to do it, it will be a much faster option to do. Okay, I'm just deleting this. Okay, now I'll tell you one more option. Okay, this is a. This is components per se. Like let's say if you wanted to build this particular option. Okay, I'll take this one itself. Sorry. Okay, I'm just taking this option and I'm just creating some kind of a colors around it. Okay, what color? We can have something like green. I don't know, green. Okay, so what we can do is if you want to create some kind of a gradient, you can use this option called layer blur.

Okay.

So you can use this layer blur. See, look little different. Right. You can also use this option like something like. If you want to build any option like this.

Okay. Okay.

You can just place it here. If you want to build any pure white option on top of it.

Okay.

If you want to add another color here. Okay, I'm just creating like let's say if you wanted to add any kind of a graphics here, you can do it like, let's say I'll keep it 50%. Okay, so it does look little gradient. Right. So you can also add lot more options. Like let's say you can bring a.

Okay.

Or maybe Jagdish. I don't want this. Let it be like this. But I want to add some more gradient on the back end like this. Okay, where is this? Okay, I'll put it here. Okay, where is this option, guys? Hey, come front.

Okay.

Let'S say I wanted to add a yellow color here. Okay, look at this. Something like a green and yellow which you guys are trying to make. Okay, so here you can create one more option. You can go to this effects and you can create something like a layer blur. And you can create 300. No, I will create more 500.

See?

And you can reduce the opacity as well.

Okay.

Or maybe 30. Look at this. It will look very, very like let's say. See, you can play with the gradients sometimes. What happens if you're not able to find the gradients? You can go to a tool called Coolers. C O O L O R S. Okay. There are very well established gradients which is available. You can use the same RGB color code here. Copy paste it. I'll teach you tomorrow, day after tomorrow. Okay. Don't worry. There are many tools to do it okay, like let's say if you wanted to bring some kind of a very cool options here. If you wanted to add more search option. Like let's say I'm bringing a text over here. Okay, let's put explore, right? That's what they said. Okay, if you want to bring some icons, go and use the plugins, which is called like, let's say you can press right click automatically. You will be seeing plugins and widgets, guys. Okay, go to this icon scout and try to add little icons. Like let's say I will use this YouTube. Okay, I will use this search option. Okay, Just drag and drop limit reached.

Okay. Okay.

Use any other tools, guys. No problem. Limit reached.

Okay, fine.

So you can use another plugin if it is saying limit reached. Can somebody give me an icon in the chat box? I can able to. If you can go to Assets. If you can go to Assets and search. If you go to. In the design systems, I can take a. Yeah, just search here. Just search for search bar. Just type. Otherwise you can use icons 8. There you go. Just click it. Add, insert instance. It will come.

Okay, Scale it and. Okay.

Okay, just put it here. Okay, and what we can do is we can change the color options here. Whatever you want. Let's say if you guys wanted to use this, a different color, something like this. Oh, I'm just selecting around. Okay, so now it came like this. Right?

Okay.

But anyway, it came very. Let's keep it all way. Okay, so now we can add some actions and we can create. Okay, this is what it is. Let's explore. So they've used a different typeface. I think it's Poppins. Maybe you guys can try to use the same one. Okay, look at this. Okay, it is not bolded. You can just reduce it. Okay, 70. You can put some. 70. So something like this, you can go each screen by screen and explore this. Like let's say in the in let's explore option, you can see like this. Okay, again, there is one more option for the settings here. Okay, you can bring the same kind of what you call setting options, but you can give a little depth also here and make it little concentric. Okay, little concentric. As well as you can add some kind of a. What you call a drop shadow. Maybe I can create some inner shadow. Maybe this is also looking like a button for me. Right? You can press this to create this. No, no, no, it's not required. You can create this inner shadow. Once you click this inner shadow. You can also adjust the position if you want. To add 10. See, can you see here? So you guys can see that make the user feel like this is going to be acting as a, what you call a small interface where the depth is there, so people will go and press it out. Like, let's say you can add your icons, like settings. Okay, maybe I'll try to use settings. Okay, yeah, you can use this particular option. You can use this particular option to use settings. Like, let's say, and use this. Okay, whatever. Whatever you feel is comfortable based on the settings option, you guys can bring it out. Okay, if you want to create a new icon, you can use Illustrator to create your own icons. Save it as a. SVG file and bring it down here. Okay, just a second here. So I'm just connecting. Charging. One second. Okay, one second. Okay, fine. So like this, you guys can try to explore and dig deeper into one particular option and go with 100% perfection.

Okay.

Because once you know how to break down the screens, then you can also bring it back to the originality, the shape, the real reality of your screen, whatever you guys are making. Okay, so you can just create a small color around it. Maybe a little white color. Maybe a little 80%, 70% I can keep. Okay, that's good. Fine. So if you want to add a border to it, you can add a stroke to it, but this itself is fine. So our user needs to know that some kind of interaction is there for the settings. Right? If I keep it plain, white to white or something like this, different color. So that will convey a different meaning.

Right?

A small, subtle interface or interaction like this is enough. So people will know. Okay, this is an option to explore. Okay, this is where I have to type. Maybe once they're typing it, you can also change the state. Like, let's say you can reduce the color. Like, let's say you can make it into a very, very subtle color. Something like this. Okay, you can build multiple screens and you can show this kind of a change of the state so that the people will know once they are pressing it will become little, what you call less transparency will come. Okay, so whatever you want, you guys can take one screen and try to build it in a more. What you call very close to the reality, the high fidelity, what they call more, closer to the solution. Can you guys try with the same screen or any other screen? You guys can choose whatever option you want, no problem. Can we all try this? Like, let's say use some basic icons, use some colors, use some gradients. Or maybe you can use solid color. That's totally fine. And you can use this Boolean options if you want to create different icons or if you want to create different shapes based on the screen, whatever you have.

Okay.

And try to build as close as possible to the reality.

Okay.

Anyway, this call will end but I can also send you another link where we can discuss about the project. Fine. Guys, I want the team members to tell me what is happening in the project and we will do it. Okay, fine. Can I send you the link? Meanwhile you guys can try it out. Okay, maybe we'll join in that link and then you can. You guys can show me your screen how it is coming up. Just creating another meeting. Hold on. This call is going to end guys. So I'm just sending you the link in the WhatsApp. Please do join.

Okay.

If it ends go to the WhatsApp. The link will be there in that.