Design for DeFi, DAOs and Dapps: Figma Essentials for Web3

Transcript

Ndukwe Anita: Good evening, everyone. Ndukwe Anita: Hello! Good evening, everyone. I'm Anita, and I'll be like taking this class on Ui and Ux. So I will like try to like do most of the things that prepares for today. Because I'm having like a bad network, I think because of the weather or something like that. So 1st I'll be talking about Figma. I think we'll talk about the we'll go through like the basics Ndukwe Anita: and some interface, and where you can get inspirations from where you and us designs. And recently, I updated some things like in the last class, because I did some variables. So also, like go through like design systems and how it can help you like faster your design. You can easily switch from light mode to dark mode. So I think I'll try as much as possible to like. Have everything like in this class. So yeah, I'll be sharing my screen.

Ndukwe Anita: Hmm. Ndukwe Anita: oh, good! Ndukwe Anita: Wish I can see who I'm sharing to. Okay, I think. Ndukwe Anita: Oh, okay, okay. I think. Can everyone hear me? I don't know if everyone is hearing me. Zeenat Ayub: Yes. Abena General: Yeah, we're here. I hear you. Ndukwe Anita: Okay. Okay. Very good.

Eric Asante: Yeah. Ndukwe Anita: Give me just 1 min. Ndukwe Anita: It's on. Abena General: Okay. I think she's trying to share her screen before she joins back.

Abena General: Right? I just want us to talk briefly before she joined. So everyone is not quiet. I want someone to meet. abena.eth: Cindy Cindy, did you give her their permission to share. Abena General: Yes, she has it, but she's no longer on the call. Yeah, she's no longer on the call. Abena General: so she'll probably join back again. Abena General: Yeah, she's joining. Zeenat Ayub: We have some network issues. Abena General: Hmm! Abena General: She's joining. I can see how she's joining. Abena General: Okay, Anita.

Abena General: Anita, can you hear us? Can you hear me. Zeenat Ayub: Maybe, Cindy, you can go ahead with what you were saying by the time she. Abena General: Okay, yeah, I wanted us to discuss like, briefly, however, use some kind of like 3 pro products and to see how difficult it is to navigate Abena General: right? Like it's not. Abena General: How do I put it? It's it's just. It's not giving. Most of us are used to web 2. For example, I'm used to a lot of web, 2 products, right? I use it every day my routine so not, and transitioning into like web. 3 few years ago it was difficult for me to navigate some some kind of product. That's why I want to ask I this anyone can unmute right and speak and share your experience, how using, like your 3 products, how it has been for you.

abena.eth: I think. It. It kind of makes sense, since we have 2, exists longer. So the competition there is higher. Abena General: Hmm. abena.eth: So. Hence you need to have high compelling ux. Otherwise you lose customers. You get me. But since Web 3 was a niche, by all means. It's like we had to fight ourselves through Metamask and all this stuff because there were no big alternative. But now, since the industry is becoming more and more mature like, for example, Metamask, like phantom, has really increased. And now people are using phantom wallet. So it's like, I think the competition is there, and with high competition abena.eth: we are by all means forced to improve Uxui. So I think we're on the right track. But I agree with you. At the beginning it was. It was not only a battle of

abena.eth: getting the web, 3 knowledge, but on top of that it was also rumbling with the ux ui, which was which was a nightmare. Abena General: I like. I thank God I'm not the only one. Zeenat Ayub: Transitioning can relate. Abena General: You see, Zeners can relate as well. I'm so sure. Persons that are muted. Priscilla Bernice, Jacob Johnson. Abena General: Who else can relate? Yeah, this is like a conversation that we can all mute and actually speak. Oh, Johnson is laughing. I can see that you're laughing so, Justin, on mute. I've got you. Abena General: so can you Abena General: meet and speak and share your experience? Anita said we should give us some time, so please just not meet and share your experience.

Johnson "JHNSN" Kuzagbe: Yeah, I think it's actually me Johnson "JHNSN" Kuzagbe: like relatable. I don't know. It's just funny how competitive this thing has become. I mean, previously, it was mostly like the web, 2 developers that were like seen, as like the ones doing all the work. But now you see that when you are not able to design properly in Web 2. You're hardly even given the chance to like. Prove yourself. Johnson "JHNSN" Kuzagbe: I don't know. You are just fired left, right center, and things like that become really, really competitive in a way to space for Web 3. I have not really Johnson "JHNSN" Kuzagbe: been into that field like seen things in that field for myself, so I can't really speak for that one. But for over 2 years, actually very, very competitive.

Abena General: It is, it is so. Yeah, see, we all did this. We all in this conversation. I'm so glad that okay, this is not just trying to cook something up together. I'm so glad this is actually solving a problem. Right? So I'll pause here temporarily and see Anita, are you ready for us? Ndukwe Anita: If my, if I like, you can see the screen I'm sharing. Abena General: It's blank. I don't know. Yeah. Zeenat Ayub: I need to share something, but it's blank. Ndukwe Anita: Oh, yeah, let me try and like, see if I can. Okay, share this one. Okay, I've seen it. I've seen what I'm looking for. So I'm trying to like navigate this easily. So like, can everyone see the screen I'm sharing right now like presentation. Abena General: Yes.

Zeenat Ayub: Yes. Ndukwe Anita: So before this, I think, okay, let me just start with, and how we can like log into figma for people that don't understand that how we used the Figma software before. Ndukwe Anita: So actually, figma is like a browser based uix to use for wireframing, prototyping interface design is also popular in Web 3, due to its collaboration features, rapid iteration, support and compatibility with design system. So actually, it's like a software that actually allows. Like. Ndukwe Anita: you can easily like share the file to someone else, and the person can actually work on it. It's actually easy in the sense that you can actually even make your comments and everything. The person can actually also work on it while you're working on it. That's 1 of the best thing about figma. I think I was using like Photoshop or something else, before

Ndukwe Anita: I migrated to like figma. And that has been like the best software for me since. And the fact that I can also use it for like graphic design, I think that's 1 of the best about figma. If you actually know how to use the software very well, you can use it for your graphic design. I don't think it's actually rare for me to like use Photoshop recently. So next thing. Now, I think we'll talk about is Ndukwe Anita: how to load into figma. Ndukwe Anita: Hmm, I think I'm trying to get this there right now. Ndukwe Anita: Okay, so there's another thing I understand that there are people that Ndukwe Anita: that always want a paid figma, because there are more features on the paid figma like the design system. I was talking about the variables for you to be able to switch from light to dark mode. You need something like a paid kind of figma. So my understanding. Is not everybody have the resources to also pay for the figma file. So the best thing you have to do is to go back to like, I think that's the part I will talk about, because that is even the part that matters more figma education.

Ndukwe Anita: I'll share it. Don't worry. Bring my education. I just realized that Ndukwe Anita: when you just click configure, education, it will bring you to this. Ndukwe Anita: So everything. Ndukwe Anita: phigma education you just go to like get verified. I think everybody. I hope everybody's seeing it right? Ndukwe Anita: Just like, so we get verified. If you click on this, get verified, we can. Ndukwe Anita: I'm actually verified. So that's 1 of the reasons. Maybe you might not see my own book if you want like. If you don't have the resources to pay for a paid figma, you go through the figma education, you can either choose Boot Camp. I think another one is education or something else that you pick it up. Then you can be able to like assess figma and other features that you cannot be able to assess on, on paid figma

Ndukwe Anita: software. So now, the next thing we have to talk about is like the base about Fema will now go through the basics and also like, get to know how about the design system the variables. I will try as much as possible to like Ndukwe Anita: cover all this. I might not really like, explain it in full detail, but you will see how it works. So I'll show you how it works, and the importance of actually having this design system, and how easy it should be for you as if you start. If when I started actually like designing, and someone told me about oh, very rude! It will make my work easy. Blah blah! I will not be able to like. I will not be doing from light mode. I'll start designing again for dark mode. Ndukwe Anita: My life would have been easier like when I started. But earlier, later. Anyway, it's better like late than never.

Ndukwe Anita: Someone like taught me. Oh, I have to do variables, design systems, the components, and how easy it will be for your designs, no matter how many screens you have to design to just make your work so easy. So you actually will see how I'll actually switch for Ndukwe Anita: from some from light to like dark mode. Sorry. So yeah, let me just come back to this part. Ndukwe Anita: But the priest who ran upon it forced us to play the next thing like Ndukwe Anita: Let me just talk about the the focuses we have today is the decentralization. That's the wallet, the trust wallets, the user onboarding for blockchain iterations, security cues and warnings.

Ndukwe Anita: So yeah, like, I was talking about the Figma layout figma key features for 3, the frames and layouts. If I'm fast also let me know, so that I'll try as possible to like slow down. I'm actually like trying to like talk fast because of these network issues and things I want to like, talk about before it starts affecting it again. So yeah, the frames and layouts is like one of the important parts of like Ndukwe Anita: the design, because before you start a design have to like use the frames and the layout you have to like, have a frame definitely in either websites. Ndukwe Anita: Is it our website or mobile view that you have? So yeah, so let's go back to the frames.

Ndukwe Anita: Wait! How did you manage to see? Ndukwe Anita: So I hope you can see my figma screen Ndukwe Anita: my screen. Rather rather the stigma design. Abena General: Yes, we can. Ndukwe Anita: Okay, yeah, you can see here, this is a design that I made. So Ndukwe Anita: this is a mobile view. This is frame. So how do you get this frame? You come over to this part, this where you get your frame when you click on it the right side. Ndukwe Anita: Here you see the different frames you use. So the best thing I like telling everyone how easy for you to be, so that in case you want to like test your design is to like, use the size of your phone so that you can be able to like check it out to see how it looks like on your mobile phone. Also, if also for tablet, when you're design, you have to make like make like 3 or 4 design. I think. So. Yeah, the mobile view, the tablet view and the desktop view. So

Ndukwe Anita: this is like for website design. Ndukwe Anita: So this is the website. Let me like zoom out a bit. Ndukwe Anita: So yeah, these are like different designs. There, this is for websites. So Ndukwe Anita: this is about what is it called frames on layer. So one of the things about Ndukwe Anita: design is also about having your grids. Most of my design. I use grids I'm trying to like. See if I can shift this so that able to see, okay. Ndukwe Anita: you see my grids, I just on my grid. Now, right now, let me like zoom in. So one thing about grid is, actually helps you to keep your assets on the design place, so it will like be all over the place. And that's 1 of the reasons I always use grid. I can be able to like measure it, or whatever you see here, all these shapes here, like

Ndukwe Anita: online, they are not out of the line. That's 1 of the best thing I like doing, because I like like measuring my things. Sorry to be like right inappropriate like this thing appropriate sizes. Ndukwe Anita: So the next thing. Ndukwe Anita: God, I'm trying to like navigate this thing so easy so that Ndukwe Anita: so the components they are reusable ui elements like body, the number. The models Ndukwe Anita: use variants for different bots in States, the hover state, the active state, and the disabled state. So yeah, about these components, I think I was like, sure everything I will have to like confusing for people that are new.

Ndukwe Anita: Let me let me zoom in. Okay, let me zoom in. Ndukwe Anita: We hope that will also be seeing. Ndukwe Anita: Yeah, these are my components for this design. You see. Ndukwe Anita: these are my company for the nav bar. Ndukwe Anita: You see it over in this design here. This is the design that I'm design here, and that's for the nav bar. So I can easily like change here, then, actually designing again. This is active state of home I can actually like, do like inactive. I think so. Yeah. Ndukwe Anita: inactive. I don't need to come and start like looking for icons again, because already I have placed the components already, so there's no need of me like looking for what is it called the icons, or whatever going back and forth again. So that's 1 of the

Ndukwe Anita: easiest thing about using components. So I can like switch it back to home. So that's 1 of the things about having a component when you're designing. It's not like you have to have all your components before you're designing while you're designing. You can still like, go Ndukwe Anita: still like, come back and like, create your components. So along the line you still like be creating your different components. So people think that. Oh, maybe before they start designing, they'll do their company. No, because sometimes you might not really figure out all the features you want to do, for you want to use for your design. But along the way you figure out the features you want to use come back. You create your components. So yeah. Ndukwe Anita: let's go back. So we have it. The this design tokens define define, define colors.

Ndukwe Anita: typography, spacing and grid system. I've actually like, explained the grid about grid system, spacing and typography. Now, plugins plugins is one of the best things about you and us design. If you don't know about plugins, you're actually missing out because we actually like slow you down on your design. So yeah, I also like, come back here to show our plugins. Ndukwe Anita: These are like my favorite plugins here for this design. Now you see the different like icons. These, like my icon pack, mean cute icon material symbols, the type skill. I use it, for my typography like these are like the best. I would have like gone more. But if I'm going more now to make it look like I'm going to teach about just what is it called plugins, because Ndukwe Anita: it's like a full thing. But if you get what logins are, you actually make? It will actually make designing so easy. So you can actually like write this down for yourself. I say, iconify. I know that a lot of people use iconify for their uis design. But you can actually like test out these other icon packs and type skills so that you know.

Ndukwe Anita: use. You don't like, do all these things manually. That's 1 of the best thing about clothings, because it actually helps to fasten your work down, do you? Ndukwe Anita: Some of the works you do manually. Ndukwe Anita: So I think the next thing we have here is a okay. Let's just come back. Ndukwe Anita: We have 3 specific ui elements to design in fema wallet connects elements, wallet connect designs, transactional models, transactional models. That's where like that shows you your gas fee. Your wallet addresses on one. Let me show you this through. The dial interface, the voting. I don't know if anyone participated in doubt votes in here. Ndukwe Anita: You see how the cars looks like. If you have participated in voting in those like and also for the 3 specific ui elements. You also have the connect and disconnect clear wallet status indicators and actions these like, oh, if you want to connect to this wallet, if you are disconnecting to this wallet, so before we go back to prototyping, I think, is to be best to show this.

Ndukwe Anita: So here you will see the different wallets, and how they look like the warnings. Ndukwe Anita: So one thing about what 3 wallets. How? Why, you have to be like, you have to be specific about some things. A lot of people, a lot of people are like new in this space. And if you don't have the right warnings or the right instructions, people can be. People can actually like do the wrong things, because I've seen a lot of people like lose money because they didn't actually read. I've seen people click on links because they thought, Oh. Ndukwe Anita: is the right link. I've seen people connect to the wrong listing Ndukwe Anita: to the wrong website. And so that's 1 of the reasons about making clear warnings Ndukwe Anita: on web 3 wallets. So here over here you can see like a lot of what we are talking about. This is like the model, this, like the model part that we talked about having, like the directions of what to do. The the wallets, the blockchain that people can connect to. And also here, you see, like

Ndukwe Anita: this, one has the nft transaction. That's 1 thing about wallets right now, because earlier before now, some of these wallet didn't have like. You cannot be able to like. Buy these nfts from these wallets you just have to like. You cannot buy it directly from the wallet you have to like, connect to opus directly, so you can be able to like make these purchases. But right now a lot of the wallets have embedded that you can be able to see your nfts also in their wallet, which is one of the amazing things right now. Ndukwe Anita: and that's 1 thing about ui design. Don't actually be in one space. Try to evolve over the time looking at different wallet, looking at different products so that you can be able to like what is it called improve? Ndukwe Anita: You don't have to be like the same login pattern every time that you're designing every time you just have to like check different products. One of the things I do is like sometimes when I say product, I like, I download the product. I go through the different stages of the login, the flow. If I like the flow, I go through all the stages. So that next time, if I'm making a design that I like that, I think that okay, this flow can go with it. I can actually make it easy, because one of the things I will design is that

Ndukwe Anita: you have. It has to be user friendly. So every time there's always an upgrade on wallets because they are trying to make it user as user friendly as possible. So now we go back to prototyping. I always prototype is one of the best thing about it. Ndukwe Anita: U and ux Ndukwe Anita: prototyping is one of the best thing, because that's actually shows that was shows the flow from. If I put my my email, what's coming next after after my email, if it's the homepage that's coming next after my homepage, what am I doing next. That's 1 thing about prototyping. Prototyping is actually one of the things that makes. I think I will actually share from for my friends this thing. But I don't know. My network is actually bad, because I would have shared for my fema to show some prototypes. Ndukwe Anita: That's 1 of the reason I cannot like share right now.

Ndukwe Anita: even if my sister can open Ndukwe Anita: can access my computer right now. So like, I was saying, if you actually understand how prototype works, especially from the smart anime delay Ndukwe Anita: top. Ndukwe Anita: It's actually easy, and that's the best thing that would be like. That was one of the things that encourages your like your clients to be able to like love. What you're doing. I don't know my stuff because it makes the clients understand what you're doing from this screen to this screen, what what the user would do. Ndukwe Anita: So the best thing you have to do while you're actually learning how to design, learn how to prototype. So

Ndukwe Anita: sharing Amanda. Okay, let me see what I'm sharing. Okay, yeah. Ndukwe Anita: The death mood. Ndukwe Anita: One of the is not everybody that actually use the figma to this thing. So one of the things this developers is they like copy the assets and like, go back to the software that they are using to like, actually build the software, build the software here, let's say, software, yeah, build the products. Rather, they copy the they copy the file. Ndukwe Anita: go back to the software that they are using to build the product and like build from there. Because that was one of the most things the developers does. I think most of the developers I've worked with. I'm not even seen them use the Sigma devolve actually like Ndukwe Anita: show where the figma there is.

Ndukwe Anita: I am so sweet Ndukwe Anita: work my hard. Ndukwe Anita: No, see you again, we don't. Ndukwe Anita: So the next steps Ndukwe Anita: how to explore the web. 3 ui kit on figma community. If you're looking for inspiration. The figma community is one of the best place to like. Look out for both. Another place. Another amazing place to look out for is actually using Mobin, I think I'll write. That's another website. I think I even share the website. Right now, let me share the website again Ndukwe Anita: on the website. I know a lot of people use pinterest to like look for inspirations. But moving is like one of the best place. Like to look for inspiration, because it will guide you, let me share that. Let me share it. You can actually copy each any of these screens and paste on your figma.

Ndukwe Anita: Yeah, for today. This is the screen that's available. I think. Aa, you can pay like $100. Ndukwe Anita: So you see how it works here Ndukwe Anita: when you click on this flow, I think is when you click on. Ndukwe Anita: because I think it's when you click on flow. They don't have that again. Okay, yeah. See the flows there when you click on this flow. You will see from the login Ndukwe Anita: to the last screen.

Ndukwe Anita: That's 1 thing about using this mobile websites. So these like websites, are actually like, recommend perfectly for anyone that's trying to like. Learn your Us. Design. You don't need to like this thing Ndukwe Anita: I think the best thing you have to do is to redesign any ui screen, you see, try as much as possible to redesign. It's not like just redesign. Look at. Look at the screen like very well. Look at the grid, look at the alignment, look at the color that is used. Why is it that color? Question yourself so I can be able to like, understand why the design is like the way it is. So yeah, like, I said, try and use mobbing. Ndukwe Anita: I know, like I think they like, updates it every 3 days or 4 days. So you try as much as possible to design as much as you can, look at the flows as much as you can, so that you can be able to like. Get the design the way you want it, and be able to like

Ndukwe Anita: upgrade from there anyway. Ndukwe Anita: So like, you can see now, these are like different screens they have like, maybe if it's like 200 screens that this particular app has. They will show all 200 screens. So like, I think pinature doesn't really have that won't actually give you that PIN interest will just give you, maybe one or 5 or 6 screens, 10 screen. It will really like show you like, the different flows like this particular app is showing you. So yeah, try as much as possible to come over to Mobin and like, Ndukwe Anita: use the use, the website and and Ndukwe Anita: the design the design, because every like, I think every 3 or 4 days they like change the designs that they have posted, because it's also like a paid website. So they change the design. You have to like pay to see the one you actually design.

Ndukwe Anita: So Ndukwe Anita: so designing for gaps, dial dials, and defi platform requires a thoughtful approach that balances. Complex conf Ndukwe Anita: functionality is clarity and trust for users. Ndukwe Anita: So, like, I was saying earlier, you have to like you work through design. You have to be careful as much as possible, because Ndukwe Anita: we are every time we are trying to like on board a lot of newbies in this space. So you have to make the design as user friendly as possible. That's 1 of the reasons, like people, why they don't want to upgrade. Sometimes because metalmax is kind of updated. You see people shifting to 0 and everything because it's more user, friendly. And I think, yeah, there are other new wallets, anyway. But Ndukwe Anita: the other new wallets. Sorry other new wallet is the. There's always an upgrade like I said earlier, you have to try as much as possible so like

Ndukwe Anita: to be updated. Why does it if you with 3 designer, if you're also like, if you design for Sas products, because I see a lot of people that want to design, because that's what a lot of users are using these like. So you have to be. Try as much as possible to be careful when you're designing that, because if I lose money I will also come for you. So that's just how it is. Ndukwe Anita: and especially the warnings. The warnings is the main thing there you have to guide them. How to like. Oh, this is how this is how you put your seed freeze, save your seed phrase, if you don't save your seed phrase. Sorry you lose it. So all those clear instructions are like, very, very important. So this is like the principles of like design. I think I was saying earlier that actually like.

Ndukwe Anita: write down some books. That's 1 thing a lot of designers don't read. But you have to read anyway, because you have to like understand the principles. When I started my mentor, like I was like, I'm not getting design thing he was like. First, st I should go and read the design and understand what you are seeing, the colors and everything. So this is like the principles of design. Ndukwe Anita: simplicity, transparency, trust signals, the modularity. This is exactly the things we have been talking about. You have to like. Show the risk, the connections. Everything has to be detailed when you're designing a web, 3 wallet or any web. 3 product. Everything has to be as detailed as possible, because if Ndukwe Anita: if you don't detail it when someone comes back to the designer even before they push the product also

Ndukwe Anita: the this thing. If the product manager doesn't understand what you're designing, you have to like redesign the product. So that's another thing. You don't like to like review work that you have like, spent your time doing so designing for that Ndukwe Anita: land. Okay, yeah, these like most things you've been talking about wallet connect flow, the Meta mouse wallet connect. So I think I will show like a design for this. Ndukwe Anita: because this is where I'm to show what is it called? The variables Ndukwe Anita: is where I'll show the variables and how easy for you to like design all these things, because the same thing we are talking about defi platform, the same thing. We are talking about the dials, and it's the same thing that we are talking about in web 3 wallets.

Ndukwe Anita: So that's like almost the same thing, because all of them are like the same. The only difference is, maybe this one you are voting here. Why, we have 3 wallets. You are like trying to like make transactions. You're trying to like make trades. So those are like just the 3 different invoice to the same Ndukwe Anita: same. What is it called the same principles? That's what you're using for all of them the same breed, the same if you are using if it's a mobile you're using like what is it called? I will show you. Let me. I think it's better. I show you the components and components rather, and everything. So like I said the variables. One of the reasons Ndukwe Anita: one of the things you have to look out for when you're designing right now is using variables, because that's 1 of the things that makes your design as easy as possible.

Ndukwe Anita: Sorry I'm trying to like someone using my phone with me. Ndukwe Anita: So right now, I'm sharing the screen and I'll I'll share variables. Variables are like, Ndukwe Anita: It's also like you like designing your design system. I don't know if anyone has a design system that makes it easy for for you. That's like a primitive, and your tokens, or the primitive is like the main, let me say, like the main thing, why, your tokens is like the things that Ndukwe Anita: you actually go from a primitive primitive is like the main components. Why, the tokens is like the the difference.

Ndukwe Anita: Will, I say I want to like, break it down as simple as possible. So everyone understands. Then, actually like, show how easy that Ndukwe Anita: I want to like, break everything down in case there, there's someone you that not like, use this. So Ndukwe Anita: sorry. Ndukwe Anita: Okay, thank you for my end.

Ndukwe Anita: Sorry from my end. Ndukwe Anita: Okay, okay. Ndukwe Anita: So you see how I'll easily switch from my lights Ndukwe Anita: mode to my dark mode here. Ndukwe Anita: I didn't have to like start designing these trees again, or whatever. Ndukwe Anita: because I have the variables. Now, this is the variable. I know that. Okay, I see the variables. Yeah. Ndukwe Anita: these, the variable. I I will also share Youtube video. Let me just share the Youtube video, because

Ndukwe Anita: that will help you to understand and build your variables as easy as possible, and you can use this for any design you want to do Ndukwe Anita: any design you want to design again. You don't need to come and start looking for. Oh, how will I do my light mode? How will I do my dark mode ever again. You don't need to come and look for the colors. Blah blah, except like, Okay, yeah. The company have their own color. You just add the color the company gives you like their own like color. You just add it here. Okay, this I'll show you. If I want to add the color. I'll just like shift return. Ndukwe Anita: If the if the company gives me their own color, I'll add the color here. So you don't need to like. Come and start stressing yourself Ndukwe Anita: and be like, oh, you do this thing again like this I've done. I'm using it for all my designs. I don't have to like. Come and bother doing the design systems again. Let me delete this, please.

Ndukwe Anita: and that makes my work easy. If you give me a design, I know, I know, like what my background is. If I just go to the background, I'll actually show you. Anyways, I think it's better showing it. Sorry I want to like Delete that. Ndukwe Anita: you know. Complicated. Ndukwe Anita: Let me let me use my frame. Ndukwe Anita: This is my favorite, and I want like. Ndukwe Anita: based on already. I already have my variables. I just click on my background. Surface primary. This is it now Ndukwe Anita: based on it. I'm really like, I can switch to black this for the dark mode now.

Ndukwe Anita: So I did control. So let me type Ndukwe Anita: does it? I have my typography ready to hear, see? So I'll just type my typography. Ndukwe Anita: I choose the one I want. Ndukwe Anita: If if it's 2 here, when I switch to dark mode. Ndukwe Anita: even my typography and everything changes with darkness.

Ndukwe Anita: That's just how very remember. Let me just like, remember. So I'll share the Youtube channel. You can watch and have that. Even as a beginner, the Youtube Channel will actually help. So there's no need to like panic using it. Ndukwe Anita: I'll just share it after the class. Sorry? Ndukwe Anita: so yeah, I've talked about the resources. Anyway, I think I talked about this. So there were 3 white kids. Ndukwe Anita: the mobbings, the Jita Jita is another like lovely web software you can use. Let me. Yeah, let me let me share, Jita. Some people don't use like prototype. Some people use Jita. So people that cannot use prototype. They use Jita. Jita is like a simple website. You can be you can use to like. Do your prototype. It's like animation.

Ndukwe Anita: let me let me share this. Ndukwe Anita: If you have. Ndukwe Anita: it's the only way to say so Ndukwe Anita: let me see, for safe products here. Okay, share this. Ndukwe Anita: So you see.

Ndukwe Anita: true. There, this is an animation here is showing everything. So I think I should. This the design? Ndukwe Anita: Sorry this is the design digest. So now Ndukwe Anita: turn out and show all the players. Ndukwe Anita: So this design that you saw that I animated on Jita. Ndukwe Anita: Also, if you pay for Jita, there's paid Jita, too. If you pay for the Jita you can actually like. Also get it viewed here you can still like. See it here. It will be like your what is it called? Like your prototypes? You can use it for different screens. That's 1 amazing thing about Jita features. I think they always update it. So like, I said, every product actually updates because they know that you cannot be stuck on one like progress. You have to like, actually try to update because you're Ndukwe Anita: users won't like new things and new features. So they have. They always upgrade that product. I don't really use it every time, but

Ndukwe Anita: I would actually like still recommend it for any like even a newbie. If you also want to like, try out different softwares, try out jitter. And when you actually like, also presenting your work on Twitter, actually like fun like it makes like people like try to engage on your posts when you like. Make it lively, because it's not every time that you post something static. That's yes. One thing about sharing your work on Twitter. Ndukwe Anita: Sometimes. I don't just want to see the screens like this. I want to see like I want to see what is what is happening on the screen right now, you just understand that this thing that happened on Jita. If you actually have the live product, this is the thing. This is how it actually play out when you actually open your product. Let me see if there are other screens

Ndukwe Anita: right now, when you actually open the screen. This is how to play out, because it's not static or anything. So that's 1 of the amazing things about when you prototype your work don't just post everything you're posting something static. Sometimes people want to understand from here to here. Okay, if I open this up, is it just like this is going to look like. Is it going to be animated or something like that? Well, if you show okay, yes, it's going to be animated, or something like that. It makes it fun. People would like to like engage your work. You might actually even end up having a client Ndukwe Anita: there because they actually like what they are seeing, you know, there is not a lot of people that actually animate. So if you can be able to like show like the full work of what you're doing that helps. That actually goes a long way. So

Ndukwe Anita: aside dots. Ndukwe Anita: Okay, I think I'm actually going to conclusion. But I'll tell you. I'll dive in another thing before completing Ndukwe Anita: before this conclusion. Ndukwe Anita: So designing for platform requires simplifying complex blockchain, like I've always said, try to make it as easy as possible, if possible, make it phone. It's better that it's phone than Ndukwe Anita: but it's not like, it's going to be fun fun, because it's something serious. It's a serious business. Also, when you're designing the way the design comes out, makes people understand what you're actually design, because you cannot use like, you cannot use someone laughing, or something like that in the finance products, because it's a serious business. So even the this thing, the assets, the illustrations you use on your designs matters because you have to like, sorry you have to like, try as much as possible

Ndukwe Anita: to actually like, get the vibe of the product on products you are working, working on so interaction while building trust through clear, transparent, and user, friendly interfaces, using tools like figma with reusable components. Before we will end this. Let me show you my full components Ndukwe Anita: because one of the things you do is having your components. Ndukwe Anita: That's your food design system, your variables.

Ndukwe Anita: I promise you. You don't have to like you actually, even like, be fast, even if you start like designing like 3 or 4 months, or something like that, it should actually go a long way. You don't have to like every time you're looking for. Is this Eee? Okay? Is this fff? Okay for White? You start every time you're thinking about. Oh, this is not line is not aligning. If you have a design system. Ndukwe Anita: you actually go a long way in design. So Ndukwe Anita: okay, wait. Let me show you my full design. One of my full design systems. Sorry. This, my, yeah, my food design systems. This has my components. Ndukwe Anita: So Ndukwe Anita: so this is my components. These are my components.

Ndukwe Anita: You see, you see, it is a lot here. These are my components. These are my buttons, like, I was saying earlier. The buttons and everything you use on a design matters because there are some designs you cannot use. You cannot use this this one I'm clicking on. You cannot use it on, because it will make it look serious, especially when you're designing the kids up. Ndukwe Anita: Even the button. You use matters like the 100 second is better than when you're using something like this for your kids design. So these are like different components I use for different design. I don't need to come and start with designing buttons. Blah! Blah again. Ndukwe Anita: These are my input fields.

Ndukwe Anita: These are my 2. Ndukwe Anita: I don't go on redesigning again. You see it. This is me using, say, my impute for my login. I would just go and copy it and paste it, or you come over to your assets you look for imputes. Look for my imputes. Ndukwe Anita: So see this. How many consult, instance? Ndukwe Anita: These are the ones that come up. I will come, I will now come over to this part of it Ndukwe Anita: at seas.

Ndukwe Anita: These these I changed to. I don't want the active one I want default. Ndukwe Anita: That's you don't need to come and start redesigning every time every time you are redesigning. If your login flow. That's a lot of work, except you want to change the way the way the flow is going, which will take you much time. Since you already have some of these components, you can easily like change this component to another one. You can like, what is it called? Delete instance? Yeah. Detach instance. Ndukwe Anita: then you can easily like redesign the way you want the new component to look like the new design. Feel. So this is my nav.

Ndukwe Anita: This is my number already. You can see when you click on my is already prototype. Why is it prototype? Because when I click on this thing. Ndukwe Anita: you see, everything is actually when I click on home to take me to this one. This, like the interactions between my nav bar when he's on active mode and when he's not like inactive. So like this is the full interaction. I don't need to come and actually come and start redesigning my nav bar ever again. So one of the things I don't know if everyone actually understands how to like make like designs. Because Ndukwe Anita: the thing about this class I'm actually teaching like people that actually have a bit of an idea. That's how I'm actually going navigating the class right now, because now it's not everybody that actually gets these parts about this navigation. So that's 1 of the things I don't know if it's everybody that

Ndukwe Anita: get about prototyping navigation bar, how? Ndukwe Anita: how you can be able to like navigate from the active, the inactive mood, and I guess it's not everybody that does it. I know everybody have the different way they design, too, which is still okay. But these are like the easiest way you can design. When you want to like design, any website or anything, I can just come here, copy my component and go back to another like product. I'm designing and reuse it if I want to change it. If I want to like, make it okay. I don't want to use this again. I will create another component Ndukwe Anita: for you. That's how simple it is.

Ndukwe Anita: So you see also for this one this is the sidebar. This is the components Ndukwe Anita: I used right now, I'm not using this component. I think I'm using another work. Let me show Ndukwe Anita: the one I'm currently using. Ndukwe Anita: because this one I'm I'm trying to like design a game product. That's what we're doing here. So Ndukwe Anita: you see this, another like Sidebar, which is still okay. Because Ndukwe Anita: this is why I want for the design, because different products have different different design kind of thing that I want for it. There are different kind of few different kind of distinct appeal that you want for a different design, because this is like a game design. So the way it will look like will be different from the way the sorry wallets defy products will look like. So yeah, let me just go back to the design systems.

Ndukwe Anita: So yeah, you see, the toggle, the radio button, the checkbox. Ndukwe Anita: I don't need to like, come and be designing all those other things again, creating different components when I'm trying to like. Be fast in my design, because I already know I have all these things here. So the really best thing I do is just to come and copy them. So another thing is just that there is a reasonable components like different products have right now I know that there are people that they don't come and be designing this component, doing it manually. They just go back to these Ndukwe Anita: companies that have components already built and copied. But it's also like best for you to like. Learn how to like.

Ndukwe Anita: create these components. It's not like it's compulsory. But you don't know the company or the clients you'll be working for, and you end up having to like, do some work. Ndukwe Anita: and with them, and it will be like so absurd that you cannot actually like know how to design some of these components. Maybe like, oh, so you're not the one doing the design kind of thing. So. But it's not bad if you decide. Not bad. So these are the components. You see. Ndukwe Anita: everything's already here. Ndukwe Anita: This is the model board for this one.

Ndukwe Anita: So I'm gonna do that. Ndukwe Anita: See? This. This one is like a I think. Ndukwe Anita: it's like a shopping thing. I forgot what this, but it's just like a sample. Anyway, it's not like it's a food product. Here over here is like for the shadows. These are the shadows. So I come over here to like Ndukwe Anita: check right there. Ndukwe Anita: Alright.

Ndukwe Anita: the shadows I use. If I if I like any of the shadows I go back to where I'm trying to like, use the product. Best thing I just do copy to go back to the products and using paste over it. And I'll like check from here. You see, I checked Ndukwe Anita: just click on the click, click on the effects. Ndukwe Anita: When you click here you'll see Ndukwe Anita: the glow, the amount used and everything it comes out. Ndukwe Anita: This is for the notification Ndukwe Anita: successful, not successful, deactivated everything, so I don't come and start designing the best I can do. If I still want to like redo my notification. If I don't want this one I can actually like. Come over here.

Ndukwe Anita: let me like do a quick design, gotcha, that soon Ndukwe Anita: I feel like my one side. Here. Just be checking out this design for me. Just be like shook. Ndukwe Anita: Okay. Ndukwe Anita: this someone else might be like, oh, they want the stroke somewhere here. That's another thing you can do for your distinction. Everything just depends on you. Some people can be like, oh, they wanted glass, those glass effects. It still depends on you and anything. So you see this one also, like there are different, like shadows like right now I see this one Ndukwe Anita: different shadow and everything. If you want all your notifications like white and glass glass is another. I think. Yeah, glass effects is one of the nice things out here. People are doing like, I said, try as much as possible to like upgrade your design, upgrade the way you approach your designs, because different design, different approach, anyway.

Ndukwe Anita: and time is actually running. So there are different different type of design approach to different things. There are different, even even like female data. There's like figma. Sorry there's glass effects. Ndukwe Anita: There's blast effects. Yes. Ndukwe Anita: So let me see if I can see the glass effect from here. Okay, when you come by, you see those. Okay. This is where it is. Ndukwe Anita: This is the glass effect. Ndukwe Anita: You can see the difference there. Ndukwe Anita: I'll be able to do whatever I want to do from here.

Ndukwe Anita: It's like the glass. You can see it here. You can see how it's mirroring everything. So yeah. Ndukwe Anita: even like iphone updated. So yeah, that's like the effect of the glass effect much as possible to up to date, whatever you're doing. Ndukwe Anita: See? It's just doing everything Ndukwe Anita: when you get inefficient. This is how you took. So yeah, try and check out these new features. To this glass effect is another like good thing figma did Ndukwe Anita: updated. So these are. This is like the model these instructions on the model. You see everything, the transaction successful and everything. This is like one of my 1st designs. So

Ndukwe Anita: we just have my components. Ndukwe Anita: Yeah. So you can see here Ndukwe Anita: all this. I don't have to redesign because I have the standard. I won't actually say it's a standard design system, but it has almost everything I need for a design system. So let me see my prototype works. Ndukwe Anita: I don't know if it's changing, anyway. Ndukwe Anita: So trying to see if some of the things can work. Because I'm having serious no such issues.

Ndukwe Anita: We just like you can just Ndukwe Anita: like, I said, with the use of the components. That's how all these things were achieved Ndukwe Anita: with the use of the components that are really like abuse. That's how most of my designs, anyway, because I don't have to go and start redoing them Ndukwe Anita: ever again. So if I just have to come here copy. So you're wondering like, Oh, if you see, like 200 design screens. Someone. Did you wondering how is the person doing that? Most people already have a built design system? So even if you give them 100 screens, they can be able to cover it, because already, like 5 or 10 is about. It's already like Ndukwe Anita: the design. The let me say they log in another. 10 or 5 is about the sign up, so the home screen can be another like 5 or 10, which already they have the component. They don't need to come and start wearing, or come and start redesigning, or whatever. So that's 1 of the best good things about, and especially all these like web 3 products, Saas products, e-commerce. They're almost like the same pattern of design, different colors, or whatever. But now, maybe different changes.

Ndukwe Anita: You might not want it vertical. You would like it. Horizontal. That's like most of the changes. So one thing we design always evolve and try to evolve as it does. Ndukwe Anita: And I think we'll be coming like close to actually for this class. Ndukwe Anita: If anyone has question, you can actually like start asking, anyway. So I will like, get like Ndukwe Anita: talking about everything before I start having network issues. Abena General: Thank you so so much, Anita. Thank you. This has been an insightful session. I must say so. Yeah, the floor is open. Everyone who has questions for Anita, kindly, unmute, and ask.

Abena General: do we have questions? Abena General: If you have questions? Is the best time to ask? Who has questions. Ndukwe Anita: Yes. Hello. Ndukwe Anita: Hello. Good evening. Abena General: Good evening, go ahead. Johnson. Johnson "JHNSN" Kuzagbe: Okay. Good evening. Everyone. Ndukwe Anita: Alright! Johnson "JHNSN" Kuzagbe: Because I wanted to know if we have in like any additional sessions with him, because maybe, like things like variables and things, I'm I'm a beginner in the space of Figma. So I'm not really proficient in those things. I wanted to. Maybe an explanation can be given. Maybe a preliminary explanation can be given, and maybe if we have other sessions we can hammer on such things. Johnson "JHNSN" Kuzagbe: Is it for us.

Abena General: Sorry I didn't get you. Are you asking if we were going to have other sessions for this. Johnson "JHNSN" Kuzagbe: Yeah, like to explain, like more detailed things like, you see the components she was explaining. Johnson "JHNSN" Kuzagbe: And like, there are other things that have to do with it like variables and things like that. Maybe if she could like, explain them in like those other sessions in case we have them, maybe if we won't have those sessions, maybe she could Johnson "JHNSN" Kuzagbe: choose a little icon. It's here. Ndukwe Anita: Oh, my God!

Abena General: Okay, okay, for the sessions. We will have to plan about that. But Anisa, can you quickly explain? Maybe, like briefly, the questions about variables that you talked about. Abena General: Okay, I think she just dropped a resource. Jessica, you check the and chat books. Abena General: She just dropped a resource that I think you can actually check out also the session for this. This session is being recorded. So it will be uploaded on Youtube tomorrow. Right? And I'm sure Anissa will also share Pdf with us. Yeah. And this session will be recorded tomorrow and recorded and uploaded to Youtube tomorrow. And I will share these links just in case you have further questions. But yes. Abena General: thank you so much. Thank you. Thank you.

Ndukwe Anita: So, yeah, I spent the Youtube link right now, you can actually like from the Youtube link, like, assess the, it's like a 2 class on variables to like. And it's actually like broken down as easy as possible. So try and like that link. So variables are like reusable components. Like I said, you don't have to every time trying to like design. What is there already?