Day 89- Figma Tutorial Building Prototypes II- 100 Days 100 Skill Booster Sessions
Jagdish walks through building prototypes in Figma, covering design systems, components, auto layout, and color palettes. Part of a 100-day skill series focused on UI/UX design fundamentals and practical tool techniques.
Please do switch on your camera. Guys, I wanted you guys to.
Okay, okay, hold on.
Yes guys, we'll be going live. Yes. Pay close attention and please do switch on your camera. I request everybody to come in the camera please. Fast, fast, fast. Okay, fine guys, so I wanted to ask you first one thing.
Okay?
Kanda Anju Dharan, Shree Balaji, Jayanandani, Sumana Tripti, come on the camera. Just tell me like did you guys try yesterday? How was the, how was the experience? Did you, were you able to make one prototype, one screen or were you able to build it? Is that the options? Whatever we taught, was it easy? See, figma is not a very difficult tool. If you keep on practicing it, it will become easy.
Okay?
It is. It is not. It is. It will become difficult once you leave the touch.
Okay.
See Adobe XT is little easy for me because we used to, we used to at least see that every single day in our organization and our team uses it. And I mean we don't do any screen building activities in our office.
Okay?
There is a graphic design team who does it, but we are the only people who give the inputs to them.
Okay?
We do the usability part accessibility but audit study and then we give them the input.
Okay?
So they do develop it in many well established organizations. This is what happens.
Okay?
But it's your responsibility to also know what is really happening in this. What are the software, what is the capability, how what you can do, what you cannot do. So it would be much easier when you interact with the people over the time in your organization. Is it? Fine. So that is one reason you have to learn it. Second is if you have the possibilities of knowing this is what is the options I can operate. You can also sometimes instruct your, your graphic design team or the other team. UI team, sometimes the organization will have a UI team.
Okay?
So they will be building this on their own.
Okay.
So you will have to guide them. Many times you have to say, hey, no, this is not the option to do. There is a better option to try it out. Why don't you do it? Why don't you try it out? So that kind of option and that kind of possibilities, when you guys tell, they will also come to know. Okay, this is like this is possible. So for that option, that reason you will have to go a little deeper into it. Okay, so yesterday I'm just sharing the screen. Hold on, hold on, hold on. I'm just sharing the screen. Okay, so yesterday we saw just basic options like let's say when you have to take Figma, what we saw yesterday, we saw introduction. All these things is fine. So the key features, what we saw yesterday is frames.
Okay.
So I think a lot of people would have worked on the frames, right? It's not a very difficult what you call option. You just have to create on basic frames and artboards and then you have to start doing your canvas work, whatever is there.
Okay.
And then we saw about little components, but by combining two, three elements, how we can use the components and this can be completely reusable again and again and again. Because when you're building multiple screens, it is actually a very good option to do. The third is automatically it goes and saves into your assets, libraries and everything.
Okay.
You can download many library assets already and then you can copy, paste and use it, or you can save it as a separate library component so that you can be used for other elements. Like let's say when you're building a design system, this will be very, very useful for you.
Okay.
On the fourth is shapes. Okay, we, we told you about little shapes, like let's say rectangle, like let's say ellipse. And also we did interpolated shapes by using Boolean equations. So these are like very, very basic option. Guys, even if you're a ground zero beginner, I don't know anything about this particular tool. This is good way to start with because you have to get little comfortable on how these things are happening. Okay, so colors, we saw a little bit about colors, but we'll see little bit about gradients today. Okay, so that's the first thing which we'll see. And the second is typeface. Okay, so we used a little default typeface yesterday, which is like inter or anything. But I would say many times it will be a brand call, like let's say your brand organization, whatever you're working for. They will have something called style guide. They will have something called brand language. Okay, Brand guidelines.
Okay.
They will have something like design system. How many of you know the difference between style guide, brand language, design system? Tell me.
Like this.
All are same here. Why are you confusing me? Tell me what is the difference? What is the difference between style guide, design system, brand guidelines? One word. Tell me the one word difference between these three. Somebody is typing. Okay, Kanda, no problem. Let's just try to switch on.
Yeah, okay.
Yeah, tell me the difference, guys, fast, because we need to understand this. Then only the terminologies will, will go very easily into, into us and then we can start creating some. Okay, so style guidelines is all about the Elements how they look and feel. Branding sets the tone for overall what I would say the mood or the vibe of the company. Okay, so the other one, what you are asking is Design system. Design system is something which incorporates both. So how that's good. Things work. Good, good, correct. Whatever Kanda said is perfectly correct. But if you put it in a proper definition. Design systems. Let's talk about Design system. Last. Style guide is actually a very small interactions. Like let's say you create some kind of a page or you create some kind of a small, small attention to details. Like let's say a small button, a small interaction, a small typeface, a small graphics, a small icons. So you go very, very small into a particular detail to create those style guides. What is that? The name itself has a thing called guides. It will give you a guide in order to create certain styles. You can have hundreds of different style guides inside your what you call your product, whatever you're building. But brand guidelines can be only one. Brand guidelines tell you what is the colors which you can use, what is the discipline which you can have. See the name itself shows it's a discipline. It will have some kind of what you call a proper way of like let's say if the banners have to be put, the brand guideline should only reflect these two colors. And this is the RGB colors and this is a CMYK colors. So you cannot deviate that. It's like a rule book. It's very simple.
Okay, okay.
Then what is design system Jagdish? Same like what Kanda said, it encapsulates everything. Design systems is not only to keep you rules and regulations and dimensions and everything. Design system is mainly to scalable. Like let's say if you're building a similar product like this today and tomorrow, how do you have to do from the ground zero? If you're working as a team lead, you will know the difficulties of design system. Because design system is ultimately everything. Many design organizations don't have this more than 50% design studios don't have this. Only studios who have the capable who have the thought process towards hey, we need to build a product scalable. We need to build the product same. See Google has how much products? I think close to 100 plus products. They have any product. If you go and take in Google, it will look same. It's because they have built the design system in a way. Even if any developer across the world in the Google develops a product for Google, it will still look like a Google product. I think I've took a Very detailed study. Also in the earlier skill booster session about the design system, please go and watch it out guys, okay? Because if you understand the design system and then if you come to Figma to start building the screen, you will have so much of time saving, you will know a proper way of learning. Because what happens is many people, they just make some fancy buttons and then they come here in Figma. No, this comes very later stage guys, even if you don't do, there are graphic designers in your team who will do this. Don't be worried about this much, okay? Understand why it is coming. The reason for you being a designer or a product designer or a UI UX designer is to understand this basic fact. What is the difference between style guide, brand guidelines, Design system? Why? Design system is very vital at your organization at a scale when you're building some Product from version 2 to version 3, design system is the most most important thing. Particularly it captures the history of your designs versions. That is the major objective of using design system. If you have design system in place, okay, 200 people working at 200 different locations of you will be able to develop a 200 same product. But the 200 products will look same. Yeah, the functionality will be different. It will be used for mobile app, it will be used for E commerce, it will be used for Edutech platform. But have you seen Amazon Prime? Have you seen Amazon? Like, let's say you don't take Amazon, Amazon is okay, Design system is there. But I would say you can take Microsoft Word. Have you seen, have you seen Microsoft Word? Microsoft ppt, Microsoft Excel, all the options will be same. If somebody knows Microsoft Word, they can also operate Microsoft Excel. They can also operate Microsoft ppt. Are you guys understanding it? It's because of the design system what they try to create. The language, the options, the way in which the recognition happens for the user, it's much easier. Okay, so before you come into the Figma and other screens, it is very vital to understand this one basic element of design systems. Okay, so let's go back. So next is grids and guides. We'll see about it today. No problem. How we can able to align your systems properly and this is constraints. So how you can ensure your things scales responsibly, okay, which is called adaptive response and screen, which takes little time for you to when you're building a lot of screens. And then you have to make it adaptable across all the screens like let's say responsibly. So you will have to use this particular thing called constraints and Then we need to create some kind of a prototypes. Like let's say hey Jagdish, I need to know how will my user interact from one screen to another and what are the response you will be getting. So you create a prototypes using the wireframes and then you link it and then you show some kind of a navigation. The next is collaboration tool. How do you collaborate in Figma? Let's say by sharing the options. Like let's say you can share the development view. You can share let's say the open preview mode. Let's say people can see your open Figma file. So three ways you can share your screens so that the viewer can understand what is the expectation output what you're giving. Many people are sending only one view. I don't know why. If I open that, there will be some 200 screens will be lying here and there. Always when you're sending to recruiters or somebody show the preview mode today I'll tell you how to do that. If you show the preview mode only people will come to know what are you trying to do? Nobody needs like let's say do you expect somebody will zoom in, zoom out and see what is happening. Nobody will see. I told you already more than one minute nobody is going to spend for your project portfolio or anything. Please think about it.
Okay.
Okay, so this is a little basics of yesterday what we saw and you guys can little bit practice it to know more about it. Okay, so we'll see some more options today. Like let's just call coolers. How many of you know this site? How many of you know this site? How many of you have heard about this? Hey Jagdish, I don't know about this. Okay, that's great. That's interesting. I would have told you inside the. What you call the programs itself. What happened. Okay, so you can just click this link. It's a. It's a. It's a. It's my favorite tool. It's really, really nice. And day by day it keeps increasing its features and other thing coolers co. I'll just put it in the chat box. Please do, please do use it. Okay, try to create a free account and use it. Yeah, so what happens with respect to this tool is. Just a second guys. Let me put my view this way. Okay, fine. So you can, you can create a sign in of whatever. If you wanted to do a Google sign in and then you create it, that would be better. Okay, so can you see it here? There are many options which you can do. You can browse gradients. You can create gradients. You can also create a palette. You can use image converter mainly you can use for font generator. Okay, so font generator and all recently added. But this is like very, very common features for this tool. Okay, so what you have to do is go to this tool option and see the gradients. Like let's say how much gradients are you guys getting? Yes, yes, yes. S Meghna Perfect. Okay, See these are like well proven gradients. It's been proven across the globe and it's been liked by a lot of people. And they also have the capability to like let's say responsively use in all the screens. Like let's say the mobile app, the web. And also these col works good because some colors don't really work good in terms of mobile app or web app or tablet or anything. This is also well proven gradient. There are three gradients available here. So you guys can use this particular gradient. Like let's say, hey, if I want to use this particular option, okay, you just have to do one thing. Just click here automatically. The color code is crappy. If you guys wanted to open an editor to know about its details, you can do it. Or if you guys wanted to copy the CSS code, many people would need that developers. Okay, you can use that and you can download as an image also for reference, if you're building a big color palette, okay, like let's say for your particular design system, whatever you're designing. So you can do whatever you want. Okay, like let's say if I open an editor, look at this. So you can also do some kind of a mixing like same like how you do the color mixing. Know in your, in your color what you call when you, when you paint some drawings or something, you add whatever colors you want, right? So same like that you can able to add some colors here. See, look at this. So you can say, hey, this is better for me. Hey, you can just play around with this. Like let's say you can take a position of 40%. You can see this how it happened. You can take even, let's keep it 100%. This is really a proper well mixed.
Okay.
If you, if you create only this 20%, you can see only the. A particular region has a concentrated color. So it's better to have a 100% spread or you can able to create a radial view. See, look at this. Are you guys getting it or not? So you guys can get a very good preview of what's going to happen in your, in your designs when you do like this. See, look at this, look at this.
Okay.
And you can copy this. Copy this.
That's it. Okay.
And then go to your Figma screen. Like let's say if this is your. Can you see my screen, guys? Figma screen type yes in the chat box.
Okay.
No, can you see now? I hope so. Where is my zoom?
Oh my God. Okay, fine.
Okay, fine, guys. Okay, so now we are actually having a frames here. And then we are trying to build some kind of options. Like let's say if you're. If you're using. Yesterday we were doing some wireframes, right? Today we'll go a little deeply and then we'll start building some kind of a. Like let's say colors. Like let's say if you have to put some kind of an options here. Okay, like let's say why don't we, why don't we use a colors. Like why don't we use the colors like this? Okay, so just we are creating some colors here and then we are adding some kind of a text here. Like let's say the text could say, like sir, this is one of my favorite colors. I am using this cooler's gradient tool in order to generate all the RGB and CMYK colors for my design systems. You can just increase the typeface like let's say 40 or something.
Oh no, it's too big. Okay. Okay. Yeah.
So previously when Figma was started, guys, this, this typeface doesn't have so much of options.
Okay.
But right now, oh my God. Like it has been evolved over time. Like anything crazy, you can literally go and click this typeface and you can see so much of options available. Please do explore these options. Okay. And also you can save your own styles. You can also create your own what you call styles of typeface particularly. And then you can save it so that you can later use it. Okay, this is called style, guys.
Okay.
So small, small things. Okay, so something like this we are having. Let's. Let's keep it this way. Okay, fine. So you have some options here and also what you can do, you can able to try to use some base color here. Like let's say if you want to click this option, there is an option called plain colors.
Okay.
There is an option called gradient. Can you see here you can able to use this option. There is an option called im. Say if you want to bring an image itself here you can just drag and drop from your gallery. It's okay if you want to bring a video here, but don't put videos the reason being it will take a lot of time for the people to load and see it.
Okay.
Unless until your video is so optimized for all the web and mobile and your developer is also accepting that this will play seamlessly across all the device, generally you have to use videos.
Okay.
Imagine gradients is. Okay, now let's go to the gradients. Okay, so look at this. What happened? So previously we were having some kind of a plain color. So now what happened? Some gradient came. Right. So I'm just asking, I'm just opening this and what I'm going to do is I'm going to change this color. Like let's say can you see some color code happening? I'll just copy paste whatever I did here, look at this. What happened? It's not coming.
Wait. Okay.
Let'S pull radial.
Okay.
So we'll go to the coolest. Where is that?
Coolers. Okay.
Try to copy this guy.
Okay.
And then we'll take the other color. What are the other color? Look at this.
Okay, we'll take this guy. Okay.
Okay, got it. So now you're not very happy about it. Hey, Jagdish, I want little, what you call little, little widespread here. I really don't like this gradient. I wanted a little more like let's say a linear Vala one.
Okay.
Yeah, better you can change it.
Okay.
And also you can try angular, diamond, whatever that is. Like all like it's up to you. How, how is your brand really telling about this? So you can go about it. So the point is you can widespread it using this scroll bar. You can also add many colors. Let's say Jagdish, I want three gradients. Use it. Just press this arrow. Use it.
Okay.
Jagdish, I wanted to create it like an inclined shape. Do it. So whatever you want, you guys can play with this.
Okay.
And if you are not happy about it, you can try to take one more iterations. I would say when you're playing colors, when you're doing multiple screens, try to put lot of iter. Because if you give two, three options, it won't be enough. You have to give at least 20 to 30 options to your developers or maybe your organization so that you are getting better at it.
Okay.
They will be only understanding okay, this much of possibilities is there. So let us see that. Okay, so now we are having some options here. And now I'm going to create some kind of an effect. Like let's say see, look at this, there is some drop effect available here.
Okay. Okay.
So here you can see there is one more option. Guys, like let's say if you needed to really scale it up yesterday I told you about this. Let's say when you're designing something really responsive and also you can create a very good seamless auto layout around it. Like let's say, hey Jagdish, I wanted to create a even gap with this components. Like let's say if I have to change this, you can do this. Guys, let's say if you are putting some icon here and then you wanted to move this icon to the third manually, it will take a lot of time for you. You will have to move it like this way. You'll have to put shift option again. You will have to do alignment again. I mean there is an option called alignment. Like let's say you will have to arrange it. You will have to mid arrange it. You will have to do so what is this to avoid? There is a very simple option here. The moment when you select this automatically. Can you see this point? If you just click it, it will move. Even if you have icons inside, even if you have text inside, it can still move. Okay, so this is how you can able to use this scalability in a very, very faster way for multiple options. And also you can increase the space between it. Yesterday I think I told you this. So the kind of uniformity what you will have is much clearer here. It won't be like manually doing it manually, it will take a lot of time. Right. So think about it. Okay, so you can select it and you can do it. So you can also add some drop shadow here. You can add some inner shadow or if you want to add more depth towards it.
Okay.
No Jagdish, I want a little different color here. I want a little like let's say this color here.
Okay. No, not good.
This color here. Okay, I want two. I want a blur of like let's say 30.
Okay.
No, it looks very shabby. 10.
Okay. 5.
It's better. Very subtle. Maybe I'll put 20.
Okay.
So I'll just keeping a small interaction. No, the inner shadow doesn't work. Okay, we'll have a drop shadow. That would be fine.
Okay. Okay, fine. Okay.
So I'm just keeping a small depth so that it has been perceived as a button so people will know. Okay, this is. This is meant for interaction. Or if you don't want this, you can remove this.
Okay.
No, I don't want this. You can just. Just press this minus option. So it automatically removes the options from here. Okay, super. So now we can explore more colors as well here. Like let's say, where are the options? Like let's say if you, if you are, if you're not comfortable with this, you can also choose any other gradient same. You can copy, paste and use it. And now when you go to the tools again, there is another option called create a gradient. This is a wonderful option where you guys can add your own colors here and then you can try to do a mix match here. You can click here, you can click here and you can automatically go to a color wheel and then you can change it here. Look at this one is you can use proven one. Another one is you can create your own gradients. Okay, so this is one option and there is another option. Go to the tools and there is something called color picker. Please understand this is really a good option. Okay, like let's say when you go to this color picker, you will have multiple options to do it here. Can you see something like variations? Can you see something called Color Harmonies Blind Simulator Contrast Checker. I would suggest you go and read this full page, guys. This is a wonderful tool because there is a reason why certain colors has been used for blind. There is certain good contrast which works for the industry well. So you will have to understand what why these things are happening. Like let's say if you are doing a documentation in your project. Like let's say if you want to use one particular color with respect to that gradient. You guys don't have to break your head much. Just keep this color tint.
Okay?
Just keep it open. Copy. Okay, I'll use heading for this color. Okay, like let's say if I have to build a Like let's say if I have to build a blue colors. Okay, I'll go for this blue color. Maybe I'll try to use a different blue. Okay, this one I can use. Like let's say if I have to use blue color with the tints. Like let's say when you add white to a particular color, it is called tint. See, starting from the pure white, if we had a little bit, this much comes 20%, 30%, 40%, hundred percent. If you remove the white automatically, blue will come. If you extract the white from here automatically it will become this. So when you add whites to a color, this is called tints. When you add black to a color, that's called shades. Are you guys getting this clarity? We'll see in the color module detail. But for now get get the basic understanding. Okay, so you're just copying this tint and Then you're trying to create some kind of a colors here. Okay, like let's say, let's go for this one. Can you see the color code? Just copy this. Okay, so we are going to get a little color out of here. Okay, so this is your particular option in your. What you call this. Okay, fine. So now you wanted to build another search bar which is like a, just like a search option.
Okay.
Let'S have something like this. Okay, let's call it, let's create a different color. Or maybe we can have this as a pure white.
Okay.
And have this as a subtle gray.
Okay.
Half white, A little bit. Okay, so you're adding a text here inside. What are the text type at least 100 characters, something like the conditions you have. Okay, so you can just reduce this text to 15.
Okay.
You can also reduce it to a little half white in color. So it's very subtly available.
Okay.
Okay, so now you can go and resize the components like very detailed guys. Like let's say if you want to match this radius, you can still do it. See, look at this. So all these options you can try to play around but please be little mindful of what is your brand language really telling.
Okay.
Once if it is aligning to this particular radius and the option, make sure you do that. You don't take the option or decision to do it because every time you have to stick to the organization and then you align the text here. You can also use grids and systems to use it. But that's like very, very nitpicky when you have to do a very, very detailed, what you call building of the screen step by step. You can use this grids and system. So that will guide you properly in order to create it.
Okay. Yeah.
So you have the option to type some 100 characters and then you're showing this is your option. Okay, so now what I'm going to do is I'm going to add little colors over here. Like let's say if I have to add more components here.
Okay.
I'm going to show some variety of colors. Like let's say, like let's say here I don't want this stroke.
Okay.
I wanted the color to be something like red.
Okay.
Not maybe red, a little whitish red.
Okay.
Here I want to add another color which is like, I don't want the stroke. I want to add little like let's say blue, little bluish color.
Okay.
And here I wanted to add. Okay, you can bring this layer here. Okay, you can add something like pink, whitish Pink.
Okay.
I don't want the stroke I can remove.
Okay.
I'm just adding some color option. So I'm building one one, one, one one palette for our team so that they can also green. I'll use this white.
Okay, so use the stroke.
But I would add more white. Can you see? The more whiter I go, it's actually called tints. The more blacker I go, it's called shades. Are you guys getting it? Okay, it's already available there. You can also go and drag and drop whatever colors you want. Okay, let me do the blue itself, because we are doing the blue palette.
Right?
So let's see the gradients over here. Okay, so I'm just going and copy, pasting my gradient. Enter. Okay, copy paste the second one.
Okay.
Okay, copy paste this fourth one. Okay, look at this. And also this fifth one. I'm just randomly picking so that you guys can understand it. Okay, so from here, what you can.
Do.
You can use it for all of your components again and again and again. But just understanding this is the exact variations, whatever you have. Okay, I can remove this font again.
Okay.
You can see here, like, I'll take the purest white here.
Look.
So now if I have to really build a particular color palette for my organization, or if I have to follow this. So right now I have two options like this. So I can also go with a darker blue, a lighter blue, more and more and more whites. So you can reuse it again and again and again. Since you have this ready with you, even if you're building a design system properly, you guys can take this color code and build a palette similarly like this. Or you can just take a screenshot and keep it there for your reference first, and then you can slowly build it. Okay, so once you are building like this, then you will also know, like, how to play with your colors, how to play with the backdrops, how to use these colors for a different purpose. Like, let's say if you need a heading for this page. Like, let's say if you want to build a heading.
Okay.
Like, let's say choose colors.
Okay.
I wanted to have a different color here.
Okay.
So I'm just going to this particular thing, and then I'm also creating a. Like, let's say what color really does work because it's a complementary wheel, right? Like, already the green is in the background. So what do I keep as a complementary? Should I keep yellow? Should I keep blue? I think blue works better. So what I'll do is I'll. I'll Try to use the same blue, whatever is available here. I'm just using the color picker. I'm using it, it looks better. Maybe I can reduce the opacity a little bit so that the options are fed. No, no, it's better. Maybe I can use it little bigger. Okay, so choose colors. So while you're using this particular application, you can mention the option called choose colors somewhere. Somewhere like this.
Okay, you can.
Right see, look at this. So now you are building the screens in order to know, okay, this is what is a color what we are following. So people will get an understanding. There is some consistency here in terms of like let's say I'll also make this radius normal guys. Okay, it doesn't look actually aligned to this language, but yeah, this is somewhat little sweet spot. Okay, so make sure the colors, what you're choosing and the language what you're having and the typeface, everything should have a proper consistency. When you're building multiple options. Like let's say for one screen it is okay if you're building multiple options. Like let's say if you're building another screen where I have to go and type it here so that you guys are putting some kind of options here in order to show. Okay, type your 100 characters here when you're typing it.
Okay.
Please type elaborate. Okay, so when somebody presses here, automatically this command changes.
Okay.
When you're doing interactions, you will come to know what will happen happen for this.
Okay.
When you create some smart animations, you will come to know this options going up and down. So that creates a little what you call an interaction also for the user, like a micro interaction so that they will come to know something is happening. Okay, so this is colors per se. You can use lot of colors. You can use gradients. You can also create a palette around it and you can use the stones. Use temperature, whatever you want. If you want to use a blindness simulator, if you want to use contrast checker. See, white and blue really goes well. Can you see here? This is poor. Don't use black as a background. Okay, so if I use white here, it will be much better. That's what they're saying. Okay, like let's say instead of this, if I use this white.
See.
It looks better, right? So according to my contrast, this looks really good. So what are the white background they have? You can just click this color color picker here and then you can use this white as well. It looks much cleaner. It looks much better. So think about how the color interaction happens compared to this. Option. This option is better, okay, because this plays in a single language. So you guys can also try to explain that in a way, okay? And you can please read all these things, guys, because lot of option is available in this website, okay? And there is a whole new different thing called font. I'm not going to teach more about it, but you guys can please try to take whatever fonts you want and you can copy and you can use it, okay? It's very simple. Okay, fine. So this option is clear. Now let's go to the other option which is called components. Like let's say when you're adding a lot of complex. Like let's say if you want to build some kind of a small interactions for this, okay, Components. Like let's say when you're building some small options, okay, I'm not using shift. That's why it's going really nasty.
Okay.
You can use another option also, guys, like let's say if you wanted to create a new component again from the scratch, you can just create this, okay?
Okay.
You can also make this little bigger.
Okay?
No, I'll use a rectangle itself. Okay, like let's say if you're creating this kind of a rectangle, okay, you want to use the same radius, like let's say same depth, same option. Like let's say even if you have strokes in this, you still can do that. Can you see it here? Can you see some border which is coming out here? Okay, like let's say whatever option is available here if you still want to reuse it in your screen, you don't have to do this again from the scratch. For this you just have to click this. Click right. There is an option called Copy copy properties. When you're able to copy properties and then when you're able to do this, like let's say paste properties. Can you see all these elements? Whatever color I've picked here, the radius, what I've given here, the options, the depth and everything, the border, it has been copied. So this saves a lot of your time. Please do use it again and again. Okay, this is a very good option. When you're doing multiple screens. You can, you guys can able to try to use it in a what you call faster way.
Okay?
Okay, I'll try to use the same text here. Apply for selection. Okay, let's say you guys are applying for the selection. Something like you are, you're choosing some colors and you want to know whether. Okay, here I don't want stroke. Let's say I want to keep it parallel okay, something like this, I want to create a little difference here. Apply for selection.
Okay.
That this radius really looks good. Looks common, seamless. No, to be honest, it is very different. Okay, fine, let's keep it. But, but you need to match this radius guys, or else it will look really, really ugly. As well as you should. You should be able to create a grid so that you can draw it in that way so that it is perceived as an elements together when you're seeing multiple options in a place. Okay, yeah, like let's say if I'm having this option, apply for selection. Okay, so if I have to really create a component around it. Yesterday I told you, you guys can create a component around it, you guys can add it. So when the pink color becomes component, you guys can try it out. Okay, like let's say if you have to build a duplication out of it.
Okay.
And instances. I told you, right? You can create multiple components around here and you can try to use it here as well. Like let's say hey Jagdish, yesterday I told you like let's say if I have to change this option, so all of these things will change, right? Imagine if you don't want that to happen. I wanted the component to be same Jagdish, but I want only the change in this option. Like let's say, I want to keep. Like let's say choose for selection. Can you see here nothing will happen because you're not going and editing in the main component. Can you see the sub components are coming inside this? Are you guys getting it? So you, you guys can able to try to add more options in your particular screen with respect to that retaining the same color, the same type is the same border, the same depth, the same shade and everything. Whatever you want, you have to keep it same. But only the text have to change. So you will have to use the components very effectively. See, look at this. How this has been arranged in that it is all going inside it. And if you want to scale this, you can scale this. But if you want to take the main component, look at this main guy. The four dots is the main guy. So this is one small information. What you can able to try to use it across your multiple screen. If you wanted that change to happen, if you wanted to touch the main component, you still can do it. Like let's say can you see main thing has changed. Please understand this. Okay, so you guys can multiple times use it for your requirement. Sorry. Yeah, so this is like you can use the components better. There is something called Override. I told you about this. Okay, you can also insert some shapes. Like let's say if you guys wanted to use any kind of a shapes here. Like let's say if you want to increase this shape. Can you see this? The shapes has been changed. It's not only the text, it's also the shapes. And also if you want to retain this one, but only this to be changed.
Oh.
I'm just choosing this option. Why is this not allowing me to change? Hey, come on. Yeah, you guys can change only this one. Look at this. So independently also you can do it override. Also you can do for all the option. Okay, so this is one information which you can implement in your work immediately. So now I'm going to give you a small activity guys, where you guys are going to use some colors, at least two or three gradients. You guys are going to use at least two to three components. And then you guys have to create something like this scalable one. Like you'll have to create a resizable one. Like let's say if I have to create.
Okay.
Add auto layout. Okay, Maybe you guys can try to use this one. Like auto layout. Something like this. See, now it moves very, very seamlessly, right? If I have to create it very. What you call good, like no, Jagdish, I wanted to replace this one option like this. Like let's say. Hold on. Hey, come on, what's happen? Okay, look at this. Maybe I'm not able to point out the exact thing. Hold on.
Little tricky, huh?
Look at this. So if you wanted to move a small resizing, try to show me like how are you resizing it? See, now it looks little even, right? If you want to still change it, you can also go and do this. Wait, like let's say if you guys want to change this option. See, look at this. You can also bring it to the back. So show me one what you call layout where you can resize it and you have the freedom to do it.
Okay?
Will that be okay? So try to implement these three things immediately, guys. Okay, I'll tell you when to start. Just wait. This option is fine. And add one more option. Like let's say copy paste. I think I told you about the properties. Copy. And then you can also use frame copy. Like let's say. Hey Jagdish, I wanted to use the same option. Like let's say, like let's say if you have this particular option here. But Jagdish, I want the same screens to be happening here. The button if I Have to manually do it. Like let's say if I'm duplicating this, I don't know whether this is straightly aligned or not because when I do some interaction it becomes nasty. So how do I do this? Jagdish, you can just copy this. Guys, if you go and click the frame copy paste automatically it comes. I don't know the components really go in this way. Okay, let's take this option. Okay, let's take this colors. Like let's say you wanted to place the colors same in the next artboard or a frame Also in this manner you will have to just click here and just copy this first and then go to this frame paste this automatically. It will fall in the same XY dimension. See 82 153. You can see 82 153. This will be much helpful when you're doing multiple screens. Like let's say hey Jagdish, I want to copy this one to copy this one. I want to copy this one. This one, this one, this one. Copy this. And when you are building a frame like this like let's say if you're. If you're not keeping this option. If you still want to keep same. See, look at this Exactly. It came in the same places. So try to use one or two components in a way so that it can be exactly placed in the same manner how you guys placed it. Okay, like let's say if you're building any kind of a small home button. Like let's say your home icon is like this. If you're going to this home here is home option. Okay, like let's say if you want to build this home. Okay, but you guys wanted to use it in the same place in the same time in the same artboard like this. Keep it how much ever times you want. You guys can use will exactly come in the same place. Are you guys getting it or not?
Okay.
What are the color code? We can pick this. Are you background why it is happening in the fill? Why it should happen like this?
Okay.
Oh, this is where I have to change. Maybe I have to remove this design system and then I have to add it separately I guess guys.
Okay. Ah.
No, let us do it later. Ah, remove the fill color. That's it. Wait one second. You remove it. No, no, no. I'm asking this pink color. I'm not able to. Yeah, okay. I think detach it, right? Have to detach it. Detach the variable.
Yes.
That's cool. And then you guys can able to. Yes, yes, that's what I. Yeah, you can change this color because you have this blue option. Oh, sorry. You have this blue option, right? You have this blue option so that you can. Okay, you guys have this blue option. So it's better to use the blue option everywhere because it looks very seamless.
Okay.
Right, I'll go back to this.
Yeah.
Where is the blue? Where is the blue?
Okay.
Yeah, this blue is better for me.
Right.
So now you can replace across all of your screens with the same icon because you're using the blue as a consistency. Right? So try to create one or two consistency which should be seen across the screen. You choose orange or red or whatever. But use this website, okay? Use this website to find out whichever colors you want and then try to have some rational behind it. Don't use your own gradients, please. Okay, can we try this guys? I think three options. I told you. One is you can use gradient little bit one or two components. You can use one or two resizing elements. You choose for anything if you wanted to build anything.
Okay.
If you want you can add image also. It's totally fine. Use this copy and paste properties and then we can try to do prototype. Can we do this guys? Can we try ourselves little bit? It's easy. Can I see some what you call work from you?
Okay.
How much time do you need for this? Two minutes, five minutes? Okay. Jagdish, you took a lot of time to do do it guys. No problem. Five to seven minutes will give you. Okay, so try to use the same thing. I'm just keeping the screen open so that you guys can again don't try to copy this one. I'm asking you to try it on your own.
Okay.
So just use this components. Try to use some gradients. Try to use some type phase which is variations. Try to use the copy paste option, whatever. I told you to copy properties. Try to create some consistent elements across your screen.
Okay.
And use this auto sizing also to show the different options and move it. Cool. Guys, everybody's doing anybody who has a problem in doing it. Like let's say where you're not lagged in the laptop, something please do join in the laptop and do it guys.
Okay.
Were you able to do it? Kanda? Okay, Kanda is already building Daran is. Is it okay? Urvi Akshita. Can you guys do one thing? I'll open the option called multiple share option.
Okay.
Everybody can share their screen. I'm. I will just open and each and every one of you and see it.
Okay.
You don't have to worry much. I, I, I'm just opening it parallel to see it.
Okay.
Can you all open share the screen at a time? I will have multiple windows open. I'll just go and see how you guys started doing it.
Okay.
I need to just get little confidence. Is it coming? Guys, I gave you the option of multiple participants. Please do share me your screen so that I can also see that. Karana Shed. Thank you. Yes Sumana. Sumana, I'm going to give you 300 points today. Yesterday also we. Okay fine. Yes Dayal. Excellent current. Good current. Start building. Yes Dayal. Yeah, if you want take reference. No problem dial but use the four things. Whatever I told you. Okay, that is better. Daran is just getting started.
Okay.
Yes Daran. Super. Oh you're taking the standard screens of iPhone. Good, good, good. Use it.
Okay.
You guys wanted to use the standard one also. It's totally, totally fine. But what about the other guys? Guys, only four people are showing me.
Okay.
J. I'm seeing her.
Okay.
Good, good, good good. Superb. Who else? Who else? Thank you Karan. Thank you D. Thank you Daran. Thank you Jain. And what about others? Come on guys, you guys can do it. I'll just stop sharing the screen. You guys can do it. Use the keyboard shortcuts effectively. Guys, if you want to learn any keyboard shortcut or cheat sheets can somebody take it from Google and put it here in the group in the daytime? That would be better for everybody. Gar, will you do it? Cheat sheet all the commands in figma. I don't know. People would have already created. I guess so put this shortcut options so that we can try it out. There is one guy in my batch.
Okay.
He doesn't even touch the mouse. He does everything in the keypad in figma. I don't know how he does it. In fact not only here he does all the softwares like that. Only solidworks also he does it in keypad. That's a crazy option. Like you guys. You guys can try it out. Like let's say if you use keyboard as a full interaction that would be also much faster. Yes, I can see your screen. Good Giridhar. Very good visual arrangement. Now try to add gradients. Try to add colors. That's good. That's good. Good, good. You are moving the pictures here and there. That's great. Superb. What about other people use this? Coolers guys coolers. I think website I've pasted in the chat box. You guys can take that. Okay, I'll. I'm pasting again to you.
Okay.
Please don't use random colors. Go and analyze this website and take it out. Please.
Okay.
I highly, highly recommend. Yeah. What about Akshita? Akshita, come on. Anju, are you doing Chitra? Are you doing Meghna, Are you doing Ram Raj? Where are you?
Okay.
Sangeeta, how are you doing? Ram Raj? You got a confidence. He's already good in Figma. He's doing it. What about others? Sangeeta, that's great.
Yeah.
Superb. Superb. You're extending the gradient as well. Great. Giridhar. Making it very subtle. That's good.
Yes.
The fast rocket speed. Giridhar. Do it. Do it. Excellent. Okay, fine. Akita, no problem. But practice in the home here. Don't leave it.
Okay. Okay, okay.
Urvi, Are you doing it? Urbia, Is it relatively new for you? Where you able to comfortably do it? Tell me. Sangeetha. Sangeetha.
Great.
You're taking the reference now. Good, good, good. Do it. Do it. Superb. Superb. Iconify. You're running the plugin. You're traveling. Chitra. Okay, fine. Is the one who always switches on the camera today. Understood? She's not switching on the camera. Okay. Traveling.
Okay, fine.
But practice in the home. Guys. People who are traveling, don't. Don't forget it.
Okay.
And send it to me in the WhatsApp. Like the screens what you guys are building. I'm not keeping well today. Oh, no problem. Please take care.
Okay. Okay.
Good. Good. Good. Fine. Sangeeta. Okay. Kanda, are you doing? I think Kanda will be able to do it. Kanda, just guide your team. In your team, whoever is building the screens and other things, just guide them if they are freshers. And most of your projects. Guys, if you are good in Figma, don't do the options or the project with the figma when it comes to that stage.
Okay?
Give your teammates who is not good at it. Okay. Give your teammates who's practicing, who is beginners. You already know this, right? So you can guide them. You can tell them. Hey, you try to do the basic options and come back. Hey, you try to do the wireframes and come back. If two, three people are not doing this in your team, Kanda, you can just tell them. Hey, why don't you just build this solution? Meanwhile we'll be wireframing it.
Okay?
Because you said you wanted to learn Figma, right? You're also a little bit learning it. So ask them to do it. So that. That will be a little practice for them as well.
Okay?
Yes, yes, yes. Good. Good, good. Sangeetha. Good, good. Do it. Excellent. Giridhara. Superb.
It's. It's.
Yes, fine guys were able to do it. Seven minutes is up. Can you send me a screenshot? Will that be okay?
Okay, show me.
Show me any screens. Can we see? Can't able to hear class properly. Okay, okay, no problem. Fine. Ram Raj, you don't have to type this here.
It's okay.
Fine. Should we give more time or because the time is up 7 o' clock today a little bit extended so that we can practice it. I thought. Okay, I'll also tell you some little more options in prototyping then you guys can try it together. Is it okay? Just send me one screenshot of your work in progress. Is it fine? Can you. Can you just send one screenshot of what you guys are doing? I'm not able to see anything. I'm not able to see anything. That's good Gir. Excellent. So did you use that resizing giraffe? I think you used it right. That's good. So did you use that components reusable like copy properties and paste properties. That's good. That's great. Okay, so there are many options guys. It's not only just two, three options. There are many options which when you go and start working on each and every components and libraries and start creating assets, you can reuse these components how many ever times you want. Like let's say if you guys are creating the components for it. Like let's say. Hold on, I'm just showing you another option. Like let's say. Look at this. Like let's say if you guys go to this assets.
Okay.
Can create this recent. You can see this. We have used this recent assets created in this file. You can see this apply for selection. So whatever you created as a component, it will appear here. So how many other times you want you can able to replace it. Okay, that's a great option for you guys to just go along. Whatever components you create, this will all be listed here. The typeface, the buttons, the kind of. Let's say if you want to create a specific icon like this, hamburger icon, home icon, whatever you want, you guys can able to add it. It will automatically add it. You don't have to do anything. Okay, the moment when you create component. Okay, like let's say I told you, right? Create component.
What's this?
Okay, like let's say the moment when you create components. Like let's say this component automatically it gets added over there. You can reuse it again and again and again. Okay, so fine guys, so now what we can do is we can do some kind of a small interaction. Can you guys give me any idea how to interact, how to create one interactions for this? Can we just click this to apply selection? Right? So what we will do is once the user clicks this automatically, it has to show the. Like let's say what are the choose and colors. Okay, like let's say some rearrangement has to happen. Like let's say this has to go here or maybe this has to come here. Let's put that one. Okay, like let's say. No, no, no, let's keep it this way. Okay, so how do we do like let's say out of these colors. Like this is the selected one what we get?
Okay.
Maybe I can, I can use this one. Okay, this is a selected colors. Whatever. We are getting it. Okay, I'm just giving you a small understanding. Like let's say if we have to do a control D. Okay. And you can, you can, you can do a copy pasting over there as well. Go to the frames copy paste it. It got right? So apply for selection and you can type this as a done. That means this selection is done. Like this is the exact color what you got? Okay, maybe I can put the colors here. What do you guys say? Okay, can add the colors over here. Fine. Will it be okay? Or maybe I can also add one more color here.
Like let's say okay, so I can.
Add the colors over here. Okay, so this is the selected colors what we got out of this whole palette. Like let's say if you're designing some kind of a color palette generator for this, okay. And after this done option happened, so what your user has to do is it has to go and apply in all of your places. Let's say if you're designing a software like this, okay, so you'll have to show some kind of a status bar for this particular people. Okay, like let's say what we can do for status bar. We can create something like a status something like this, right? You can create it. Okay, how do we do? We will have to create it like this. Guys, please be in mute.
Okay, fine.
Okay, you can just create it the moment when the done is happening. Like let's say automatically there would be another prompt. It will automatically go and apply in all the places the moment when you give done. Okay, so for that you need to show some kind of a status, right? So what you can do as a status, you can create more option more frames like this. Okay, you can create a small bar like this. Like let's say what you can do with this. Let's say I'll keep a little blue like this. Okay, Let this be pure white. Fine.
No, no.
Okay, something like this, it is going to happen. Okay, so the moment when I'm. When I'm creating this, I am also going to copy the same frame.
Okay?
So the moment when it's applying. So what happens is I need to increase the bar like this, right? So I'll just try to do a small animation here. Okay, let's say it goes like this. Or maybe I'll keep a gap here so that it knows that the status is happening. Okay, so what you guys have to do is you will have to now go and do a prototyping. Whatever we have seen now guys, this is called design. Okay, There is an option called prototyping. The moment when you click it here, when you go to the prototyping automatically, you will see many arrows happening. You see already some arrow is put here. So the moment when you click it automatically, it will show options what to do. Like let's say should I drag it? Should I just click it? Should I just hover it? I will just keep on tap. Because when you click it automatically, it goes there, right? You can also keep hover. Whatever option you asked, you guys wanted to create it, you can do it. So once this option is there, like let's say then you can choose action. You want to navigate it or you want to set variable. You can also constrain two, three elements into one place so that you can create a small change in animation with respect to that state. That's like little higher options. We will see some other day, but for now this is good. Basic prototype we can create. You can create variable mode, you can create some conditions, yes or no. So previously doing prototypes this much of options was not there. But right now it is there. Previously there is only one option, Open overlay swap. That's it. If you guys wanted to create any overlay, like let's say the closed bar, or let's say if you want to build any kind of overlay saying hey, can I submit it? Is it okay? You get an error message, something like this. So that's called overlays. But now in Figma there are a lot of options which is coming. Try to explore this one. But I'm just doing a basic option, navigate now. So what should it happen? Which frame you should go? It should go to the frame called frame two. We've already corrected it with the arrow mark how it has to go like let's say push. Which push? Right side or left side? Okay, you can see the preview happening here. See? Okay, fine. Now this is good for me if I want to animate matching layers. Yeah, I can still do that, but it's okay for me. Look at this. Okay, Some kind of a small animation will have. Now let's go to the frame two. Like let's say I'll delete this one. Maybe I'll do it fresh for you guys.
Okay. Do you.
Just delete only this interaction? Yeah. Fine. So now I'll go to the frame two.
Okay.
See here, you can't edit it. You're ultimately in the prototyping mode. If you wanted to do any kind of edit, go to the design and change it. I would highly, highly recommend.
Okay, yeah.
So go to the prototype option and then click the frame. What do we do now? So let's add this here.
Okay.
When the done option is pressed here, it should automatically show the status of doing this particular progress bar. Okay, like let's say we can also use the same option. Like let's say slide in. Okay, you can use this option. You can give a little time delay maybe to show little animations. Okay, so play around with this guys, whatever option you want. If you want to create the same option, I mean if you want to create the scroll position as same and you're building a big screen out of it, you can just click this automatically. It will reset to the same position where you started. If you don't want, you can do it.
Okay.
Yeah, there are many options in it. Please do try it out. And you can go to the frame 3. You can create another option. So here there is a catch. If I have to know the status about it. Like let's say this particular bar has to move from this place to this place. I can use the option called who are. Can you see here who are? Okay, if the user moves the screen, moves the mouse over there automatically, it will navigate to the screen 4. In the screen 4 how it is happening. We can put smart animation, like let's say you can see this ease in. You can create this ease in and ease out. Okay, maybe I can use 5000. Can you see? Oh, it's really slow. Okay, fine, we'll keep 3,000. Okay, you guys can create it. Okay, so what is the smart animators? It will create to try to create the same icons and the options inside your entire screen. And it will only move the changes whatever is happening. So previously we used to do it manually, but now because of the Smart animate option. It's very, very possible to do it. Okay, so you guys can set some trigger as well. But for now this is basically good. Okay, so now what's happening? The moment when I press it here, it should go and fill the status here. Okay, what happens to the back? Like let's say even if I'm pressing here automatically it has to go back, right? So I have to create one more interaction here which is to loop back here. See? Ease in and ease out. Smart Animation 3000. Got it. So now let me go and check it out how it's going to happen. Okay, I'm going to press this prototype option. How it's going to happen in real time. So you guys can do one thing. You guys can just take out this option and then you can put it in the side by side. So whatever changes you guys are making here, you can able to see it live. See, look at this. This is a prototype option. You guys can see if, if you guys also make some change, it will automatically change, but don't do changes. Okay, do the prototyping properly to know it. Like let's say if I'm pressing it here, look, the timing is very fast. Maybe you can change the timing. Look at this, look at this and move the timing to maybe thousand.
Okay.
Look at this. Okay, look at this option. It's going very smooth, right? This is what we want. Again it goes back to the status. Even if I'm moving here as a hover, like let's say in the top of it, automatically it goes. See, look at this, right, this is one option. Okay, this is how the first screen is. And whatever we've created the option now look at this. Now this is moving very smooth. Earlier it was very fast, right? So try to play around with the time. Whatever you are, whatever it is comfortable for your interaction, what you wanted to make your users do and do it. Okay, so once you press the done like let's say automatically it shows the status. Oh, it is going and applying in all the places. So play around with this whatever animation and interaction you guys are thinking about your product for your user interface, you guys try to do it. Okay, Jagdish, if I have to move it like let's say still the smart animation option goes. I wanted to go and apply all the changes here. Yeah, use two, three icons here, use two, three colors here, let them go and slowly populate over there. So you guys can do whatever animations you want and show the interaction. See, this is a mock up tool. Guys, please understand See all these options, whatever I showed you, this is also can be done in Photoshop. The only difference between Photoshop and Adobe, I mean this Figma is you guys can try to prototype it and show it to your client, to your boss, to your team. Okay, that is not possible in Photoshop. That is where this new tool came in. Or else you have much more liberty to do this colors and gradients and everything in the Photoshop itself. Right? So why are we ultimately doing it here? Because we need to show that wireframes how the step one to steps two progresses. How from the step two, how does this progress and come back here. So we are creating a loop around it in order to show the user. Hey, this is what is really happening. And also you guys can try it out. Like let's say, like let's say if this is the option, you guys have to move this option here. See this is also lively happening here, right? If you wanted to do, you don't have to click multiple times to go preview this, that and all you guys can able to change it here and automatically it changes over there as well. Okay, like let's say hey Jagdish, I don't like this radius here. It's okay fine, it came. Maybe something else is there in the backdrop. Okay, remove it. So this is how it automatically changes as well. Okay, so you can keep the preview mode next to next and you guys can able to change it in the option. Okay, so this is one option. What are the other one which I was trying to say Prototype micro interaction. I think I showed you a little. Okay, okay, there is only two things guys, which is called call out feature. If you guys are collaborating into your screens. Like let's say if you wanted to add more options here, you guys can use this option called call out. Like let's say hey Giridhar, look at this option. If you guys wanted to interact with your team to share this prototype. If you want to give any instructions, hey, look at it and confirm whether displacement is okay or not. You can do it in Miro very easily. But in Figma previously it was not there, but now it is available. Okay, you guys can try it out. So what happens automatically it went actually yeah, you can add the name something like this. Okay, you can add a particular option. Like let's say you can type that email, right? Whatever the email of that person at Gmail or whatever you type it automatically it pins and also when the person opens they will see a small call out there. If they click it, whatever type comments you had you can able to, I mean let, let. They will see it. Like let's say if Giridhar is saying no for this, he can also reply here.
Okay.
Like let's say if you want to add a picture or anything for reference to show it, just send it. That's it. See J means my name is Will come. Okay, so Jagdish has said. Hey Giridhar, look at it. Hey there. It doesn't look good.
See.
So previously if I have to change it, I need to get some permission or it's not good to change anybody's book. It's good to comment on that if you're working as a team. Yeah, then you can change it with the permission of others properly and that history will be tracked here with respect to whatever changes you guys are making. Okay, so this is a very good option and there is another option called sharing which I'll tell you lastly. Okay so are you guys okay with the small animation? Trying to understand the interaction or not? So now use your creativity for your use case properly to try to do whatever animation you want. Okay and when you are sharing this option to your clients or somebody, use this. Share. Use this share. This will only open up a lot of figma screens for you. That is not a very, very correct way to do. Okay, so you can click the share option. You will see there is something called embed code. If your developer asks this in order to inspect certain colors, certain CSS code, certain RGB values and everything. You can share that development mode for coding and everything. But if you want to share the viewable file and just click it here. Okay, the moment when I do it, look at this. Okay, the moment when I do it, like let's say if I'm opening an incognito tab, I'm just copy pasting this. See? See? Automatically only my screen comes see here. Now the user will be able to guide only to see what's happening. See, look, see this is what I wanted my user to see, right? Rather than that what you know people are doing, they're just doing some nasty things. What is this? They're just sharing this particular option. I don't know. Look at this. If you give your screens like this, what will happen? People, nobody knows. What are you trying to say? What are the interactions you planned? Do you think they will go and prototype it and see it? That's not their job. Right? So you will have to create a very good experience for these people so that on the first go itself they will be able to see the screens Properly. And then you can embed this in your PPT. You can embed this in your. This gamma PPT as well. You can embed this in your PowerPoint PPT. You can embed this in your Miro file. You can. Because Miro has a backend plugin. I'm not sure whether PowerPoint has it, but Miro has this plugin. So you guys can do it in whatever you want. Like let's say if you're building a website in WIX or anything, you guys can embed that. So automatically when people are seeing in your website, they will only come to see this option. This. Which option? This Copy link. Okay? Be. Be careful about it. See, look at this. Yeah, look at this. Try to share it very carefully wherever you are sharing this.
Okay?
And when you're sharing, just make sure you give the option for whoever you wanted to do. I don't know as much options is not there. Okay, you can create this prototype link. See, you can use these settings and you can create the option whatever you wanted to change the owner, everything. And then you can publish to Community if you wanted to do it in Figma and get the embed code. Or maybe you can take the development link, you can share it with the people. They will be able to see and they'll be able to know all the color options, what you choose, what are the gradients, what are the RGB code, what are the movement, what are the dimensions? Everything they can see. Because if they have to develop it, they need all these details.
Okay?
It's called development handoff. They call. But for now, this much is enough, guys.
Okay?
So I wanted you guys to take this forward and build at least three to four interactions and show me I am comfortable. Even when you're doing a project, it is okay. In your project, you guys are working Kanda and other people. Girith, you are also in your project. Yeah. If in your project, try to utilize all of your team's effort and try to build multiple screens and you guys build a little complex interactions because you guys are doing a project right? Tomorrow or day after. And then just show me. Hey, Jagdish. We are able to create 3, 4 animations. We are able to create 3, 4 interactions and we've added little options, colors, gradients, shapes. So use these options and show it to me, guys.
Okay?
Is this okay for you? Fine. Giridhar Kanda Dayal It's a very simple thing, guys. Don't. Don't feel Jagdish. How should I do it? If you guys are Feeling completely stuck. Don't worry, just go to the Daniel Scottman YouTube video and do watch it. I would highly, highly recommend you to watch it because that's a one stop solution for many people.
Okay.
And if you use Figma, what you call community, you can also find many options and assets and files there. And if you use Figma YouTube channel, I would say that's the best option. Guys, you will see all the options inside so that you guys can able to understand all the options step by step. Because guide videos are there. And if you still wanted to know more, you guys can go to chat GPT and type this particular command. How should I use it? So charge. It will give you specific command shortcut and everything. And then you guys can practice it.
Okay.
If you are not able to do, if you're not able to locate the things properly, okay, so do the screen building activity, Break down the screen and you guys build it yesterday and rebuild the screens, whatever you guys did. And use all the elements. Like let's say I gave you many options, let's say just to recollect quickly, try to use all of these things. Use frames, use components, use libraries, use shapes, use gradients, particularly typeface grids and guides. I've not covered much of grids and guides. You guys can try it out. It's very simple. Go to constraints and try to resize and create some kind of what you call small auto layouting for you. Like let's say you can also add icon to it. I did not show you that, but you can try to do it. Okay, maybe we'll do some other day in a little advanced way of prototyping. Okay, and then you can use this collaborative tools and then you can use these other features. Whatever I told you. Like let's say this components this copy paste this layout this prototyping, micro interactions. So many places you guys can able to do a small, small innovation based on the project, what you have. Okay, and what is the thing? Okay, case studies is not the point. Okay, Chunking breaking designs into smaller parts enhances retention. See guys, when you are building any elements with the smaller parts is there you and your team, when you're collaborating this Figma files, they will be able to understand better. When you're doing this instead of just putting it in one file where the recruiters needed a one file to be seen. But when you're sharing with the developers, make sure the design team or other team, make sure you break it out into small, small elements and then you show it. Hey, this is the Colors. Hey, this is the type is hey, this is the elements. And then when you show the work in progress file they will be understanding better. So know it better who you are really sharing it for. Okay so that's. That's really important. And same goes for the other way around. Don't share the fragmented figma file to the to the recruiters. They will get super overwhelmed. So make sure you communicate carefully, okay. And it guides the user attention improvement. This is really normal stuff guys. If you wanted to use ChatGPT to also get some kind of an information, use this. But I think you guys know about it already. Okay so but anyway people who are completely brand new who are stuck, they can also try this. And I'm pasting this link in the options use it. Okay, fine. I'm just pasting out the YouTube live link as well so that people who wanted to watch it again they can able to watch it. Where is the option? Yes. Yes. Sigma.
Yeah.
Yes guys. Fine. So is it okay? Can we try it out? Can we try and show me like today evening or tonight? Today end of the day Giridhar and team Jain and Dayal will you guys implement all these things do this first consciously all this option before you try any advanced option.
Okay.
Just show me that you are very confident and because the basic option is enough, you guys can able to build a decent communicatable screen and then you can slowly, slowly learn and improve it. Okay, so that would be better. Oh God, I have some network need to leave. Okay fine. Oh wait guys, we have enough time. Okay, I want everybody to go to your learning management portal and. Hold on, hold on, hold on. I'm giving you guys don't worry attendance because yesterday I forgot totally. Okay, so people who attended today's session they're going to get 300 points. Go ahead guys, come on. Mark your attendance. Go to the feed section, refresh it. Hey Kanda, wonderful year. Really good. Kanda has used shapes. Kanda has used many. What you call this? What you call this? Yes, shapes and all. Excellent. Kanda superb. And you also used this interactions. Excellent. You used gradients. Superb. You used this small what you call resizing. That's good. And you also used picture. That's interesting. You used backdrop as a gradient. Wonderful. Kanda excellent. Mark, please mark it for Mia. Okay, make now I'll add you points, don't worry. Okay see guys, manually we can add provided if you are in the call we get the data we can add you. Okay, Yesterday I added Sumani some points.
Okay.
Make now where Is make now.
Okay.
Make now. Enjoy. I'm giving you 400 points. Yesterday you were attended the session, right? How do I add points for you? Yes, Meghna, 400 points. Meghna, enjoy. Meghna was consistently coming to the classes.
Okay.
Anybody else like that consistent attendance. I would give Kanda also that point. Because the reason being Kanda also has been there. Kanda. Whoever wants the points now just tell me guys. Because you guys are there live, right? No, genuinely, I know like you guys are coming. That's the reason I'm. Okay, I'll give Kanda 500. Because yesterday also I did not give you points. Yes, Kanda. Good. Enjoy. I think I marked the attendance yesterday. That's good. No problem. No, what happened is day before yesterday I think Sharath and a lot of people really got pissed off. Jagdish, you did not mark the attendance. See guys, this will make a big difference. I'll tell you why. Because when we are playing the level up in the Sunday, when you're uploading this lot of people will not have the option to upload itself. Because there is a minimum criteria which will be activated once you guys are using this. What you call this level up portal. Okay. So at that time you guys will come back and then follow me. Jagdish, activate. Activate. Okay, I'll try to do it. See guys, the thing is to be very honest, this level up platform is very expensive. We can only provide for few people because our hands are also tight. If we start giving for all the people, it's a crazy subscription. We'll have to pay for it a lot.
Okay.
And once we are also making it for all the people. See, that comes with a lot of accountability as well. People who are playing with level up, that comes with a habit tracker. That comes with an accountability. That comes with the assignment, upload, attendance, everything, quiz. Because if people are very serious towards taking that forward and they are meticulously following this for the 20 to 30 days consistently then and only this is going to make sense. That is why even for us also when we decided this platform, like let's say four to six months before when we decided to bring out this platform, same like me, many coaches have also bring out that. Like let's say financial coaches, like let's say yoga coach and fitness people. I'm teaching design, right? So we designed this particular option. We thought about it a lot. Because this cannot be given for everybody then people will take it so granted. And it's also very expensive. A lot of backend work has to go for this levelup is altogether a separate product. It's not a feature, it's a product altogether. A separate team is working. That's why manual changes. It can't be possible. Even the games points we can add but the level up. I mean I did not tell you enough about the level. But you guys will come to know about it slowly.
Okay.
So if anything is there points try to grab as soon as possible. Because system will automatically enable the people whoever is having the points and. And they'll be given accordingly. Okay, fine. Okay. So what I'll do is. What I'll do is okay. What I'll do is okay. I just activated for some time being. Let's see how this is.
Okay fine.
So who else is there? Guys can you. Can you just tell me your names fast so that I can able to immediately. Yeah, Giridar. Let's mark G. Giridar. Guys please tell your name. I'm in the screen now so I can able to add your points accordingly. Yes, Giridar. Super. And who else? Jaya Jay has been marking attendance. There is no problem. I'll only add for yesterday that leftover points.
Okay.
200. Okay. What about Chitra? Chitra has been also coming to the classes.
Okay. Okay.
What about Ramraj? What happened? No, for the earlier attendance I'm saying okay, certain days I have not marked you. And who, who else? Who else? Daran.
Hold on.
Darren Gokul. Am I right? Enjoy Daran. Oh 4000. I put. There is one guy in our program. Okay. Last time when we played this level up, I told him to get 10 replies in LinkedIn for his message.
Okay?
So I said for each of the reply you guys will be getting like let's say 100 points.
Okay?
This guy got 10 reply in LinkedIn. He messaged in a way so that people are going to reply him. See when points is coming people will play differently when some kind of a drive is there.
Okay.
So that. That plays very different. Anyway I wish you all the best guys. I've added the points for you.
Okay.
And yeah, if any discrepancy is there, reach out to me will help you.
Okay?
Please practice this and let me know. I wish you all the best. Have a great day. Bye. Gurude, Jayanandini Dayal, Urvi Kanda, Sangeeta, Chitra Mekna, Anju, Karan, Suman.
More from Jagadeesh
Comment “ME” if you want to join the next upcoming hackathon — we’ll send you the registration link.
Comment “ME” if you want to join the next upcoming hackathon — we’ll send you the registration link.
