 So, basically what we're going to show you today is how we make a prototype extremely fast every single week. We're going to show you the tools that we use, we're going to tell you why we use those tools and compare and contrast a few other programs. Everybody, I'm Brittany and this is Rob. Hi everybody. We are from AJ & SMART, of course, because you're on our channel, that makes sense. So I brought Rob in because he is, yeah, yeah, exactly. Just because of that. He has two hands mostly, but he is prototyper extraordinaire. He is our sprint lead, so he's doing this stuff literally every week. So thanks so much, Rob, for doing this. No worries. I really appreciate that. So, basically, if you don't know, we do a lot of design sprints, meaning that we have to build a prototype in just one day. Now, obviously, we're doing this quite often, so we've kind of gotten a nice flow. We kind of know what tools to use, how to use them, but if you are out there and you're wanting to build a prototype for the very first time and you're wondering what tool to use, what's the easiest one, what's going to allow you to kind of just jump in and immediately start using the thing without having to look at a hundred tutorials, we would suggest using... Figma. Figma. Yeah, we're going with Figma. Yeah, going with Figma. All right. So what's kind of interesting maybe for you guys to know also is that we used to use sketch and envision. We were kind of like, we were very big into the sketch and envision. Yeah. It was great actually for a long period of time, it enabled us to do everything that we needed, but there became a point in time when actually no single one person is responsible for a prototype. We have normally like a team of two or three of us that kind of work together. So basically, Figma was an option for us because it meant that we could all collaborate on the same art board and actually then kind of create those interfaces much quicker. Whereas before if two or three designers were working on the same prototype, we'd have to kind of merge those files afterwards at the end of the day and typically when that's the kind of the crucial point where it's quite stressful because we want to get a link out to the client so they can see it. And actually forming those art boards into one was just super, super tense. Yeah. So yeah, it was a great option for us. Cool. Cool. So now we're using Figma and sometimes we're using it with Marvel, right? Yeah. So yeah, there's a difference. Why? From the summer, Figma enabled you to do prototyping within the actual tool itself. Okay. And I'll go into that more in a minute. But basically we have a couple of stipulations based on what it is that our prototype and what we want to get out from it. So typically we would use Marvel, for example, if we needed to show actual video maybe within the actual screen itself. Whereas if it's quite a simple like click, one click per screen and you're not really kind of showing a complete life cycle of a product, Figma is actually a really good option because you can just kind of like just click one click and it will take you through that flow that you're going to go through. Okay. So maybe you can just, we have an app up that we've been working on in Figma. It's called Make Time. I don't know if you probably may have heard of it. So maybe you can just take me through like a few of the features that you really like about Figma and like just the simple ways that we use it. Yeah. So basically there's a number of reasons I really like using Figma. So for example, if you're a designer and you're working in a like a really big team. So you have to maybe share your prototype with a lot of people. Basically those people can have exposure to this, this prototype and they can also kind of leave comments on it as well. So that's a really nice feature. So here for example, you just click on this little icon at the top and it gives you like this little nice icon that's quite contrasty. And then you can basically just go, yeah, I think this is great. Maybe let's look at some examples. Okay. So you can actually like you would drop that exactly where you want the comments. Yeah, exactly. And you can even like you can even post that to a certain person for example. Right. As well if you wanted to. So that's really nice. So then you can kind of just step away, leave that for example quite often what happens is that we involve our clients quite heavily on our prototypes. So for example, we will have a check in and then they're able to kind of spend the next hour of themselves writing up some comments. And then we can come back maybe after lunch and then we can kind of see what their feedback is. It could be something as trivial as maybe just copy changes or it's never anything too significant. But if you're using Figma in a larger kind of design capacity, maybe you can kind of expand upon that and actually have some maybe some creative direction from those as well. Cool. Okay. Can we like see, can you show me a few more of these screens? Like what does our, what does this actually look like? It's like. So this is basically just for the, this is a couple of screens that I've copied in. Oh, yeah. So this is on make time, which you'll obviously be seeing very shortly. And we have a notification pop up here and then this is really quite cool. This is our timer as well. So this is how we've mocked this up so you can kind of see the level of detail that we have here when you, and all these components are selectable as well. So you can kind of just see, you can kind of click into it and then move on as well. So yeah, it's pretty selectable and what I would say is that actually if you have used sketch in the past, if you're new to Figma, like don't sweat it, like you will pretty much learn the basics of Figma within like a few hours. Okay. And within a day you said you would be pretty proficient at it as well because a lot of the functions are quite similar. Okay, good. So it's quite an easy learning curve. Great. I would say. Yeah, that's cool. Okay, so let me, like what if, so you have these screens and everything and you've designed the, like the pop up and stuff. Yeah. What do you need to do? Like how does it work when you're wanting to like actually implement the, like the functionality like, like connecting screens or, like this is just a prototype, right? Yeah. So we would do all our, this is where we create. So this is like where, for example, if you're just getting started, I'll come to your question in just a second. I think it's good to start at the very beginning. If you're using this product for the very first time, there are plenty of templates out there that you can use to get you started. So for example, you don't have to redesign like the home screen on your iPhone. Right. You can kind of pull those devices in. And would you find the templates within Figma? You would want to just do a Google search for them and then within Figma's like ecosystem, you can find all these templates. People just tend to post things as well, just to help each other out. So you can pretty much find most things and that's actually how we often are able to get started really quickly. We can kind of use these templates just to kind of get going. Do we have templates now that we use like basically every week? Yeah, absolutely. We have several to choose from. Yeah. Like for example, if we're trying to mock up someone downloading an app from the app store, we would have that screen already made. So we basically just change the icon and the description and put these screens in. That's a really good example actually. A good time saver. Yeah. So this is kind of like the create phase. So what's really cool here is if I can just draw your attention to these three tabs at the top, we have design, prototype and code. So we very rarely use the code one. But for example, say you wanted to now link these screens, say you didn't want to use Marvel. We're going to go, you know, we're going to just go with Figma. We're going to link a few screens together. We can then just do it in here. So what you basically would do is select the screen that you wanted to link, just click done. So select the screen that you want to link. And you get like these little nodes here. And then what you can do is you can then just drag that to basically the next screen. Ah. So you could potentially go around this one and like attach it to the next one. Exactly. So you could just bypass that actually and then get straight to that one. How satisfying. Yeah. It's quite, I mean actually this is a really good like visual way of actually like linking some screens up. Because quite often when you're using Marvel, like Marvel's probably a little bit more of a complicated act to use. It's not difficult, but it's just slightly different. Yeah. I think if you're a designer, I'm a very visual person, so it's kind of nice just to see exactly how these screens would link like this. Yeah. And I'll come to Marvel in a minute. But yeah, this is a great example of, for example, like now we'll go, let's just move this one all the way up to like the pop-up, for example. Right. So then what you could then do is then go play. It's just loading it now. So then once you click on it, then it would take you to the next screen and you get that. I mean, there's obviously a screen job, it's not a real blow, but it just shows you exactly like. Right. What if you want it to be like that you press on certain things to take you to certain areas? Certain areas, yes. So again, so what we can do is we can go back now. So say you wanted to go to a component, as I was saying, so say you wanted to dismiss that, yeah? Yeah. So what we can do is you can actually click on that component and then actually go back and we could probably just take you to, let's go back to this screen, for example, for this example. There. Okay, so then we can play. So then when you click, it then goes. Cool. Yeah, so you can kind of link all these kind of components within your UI or you can just link screens as well. So just down to you guys, like how you need to work out the complexities of your prototype and what it is that you need to show your client. Yeah. And then you can kind of work out the simplest way of kind of executing that. Yeah, yeah. I'll make sure that that pop up isn't shown on. Cool. Rob just got an email from a client. Yeah. But we're not going to show you that. No, no, we're going to cut that bit out. We're going to cut that part out. Okay, that's really cool. So yeah, you can actually, you can link just screens or you can get these components as well. Yeah, that's cool. So I guess you don't have to make it so complicated or so detailed. Exactly. So basically one of the problems we find with Figma though is that although it's really great and it kind of streamlines our workflow, sometimes when we're kind of playing the prototype back and front of the client, it's you have to be really sure about where those clickable areas are. For example, in Marvel, you get these really nice kind of highlighted blue boxes, which are really nice screen cues. And we don't actually have those in the Figma. So as you'll notice that when I was showing you just now, you just need to know where it clicks. So if you have a lot of complexities on the screen, like maybe for example like a web landing page and you have multiple buttons that you need to click, sometimes it's good just to have those highlights, especially when you're guiding the user through for the very first time. Totally. Yeah, so you don't have to know remember exactly the flow. Yeah, exactly. Oh yeah, that's a good point. Exactly. Okay. So Figma is really great for, for example, say your team are working on PCs and in Macs as well. It's actually a web app so that you can actually just use the machine that you're most comfortable with. You don't have to conform to like either one or the other. That's the Figma. Yeah, that's the Figma. Actually, I'm in Marvel as well. So they're both web apps. That's a plus side for both of them. Yeah. How fluid are they like when you're using them? Like does it really feel like an actual app, like a real app? Yeah, actually it doesn't feel like you're on a website. Okay. It feels like actually like the desktop version as well. Okay. Which is really, really cool. Yeah. So I would definitely say that there's, I mean, there might be some performance issues for sure. Mm-hmm. So for example, say your internet drops that obviously there's going to be problems. Right. It's all about based anyway. Yeah. But if you have the desktop version, then you can still work. So another good thing about Figma is that as I mentioned before, like we can share the project between a number of people. Mm-hmm. So here you can see for example, like Fedor, Fedor's editor, he's obviously working on this component on this screen. Mm-hmm. And it's really, you know, it's really unintrusive as well. Like we've even been working on the same button styles together, for example. Really? And maybe just tweaking the Bevel or something. So it's really good that you can kind of have that exposure of what your colleague is working on and obviously what you have to do as well. So again, this aids the kind of speed in which your prototype will be made. Okay, so you're in design and then there's prototype. Prototype. And that's where you link the things up. Yeah, exactly. And code which we don't use. So code we don't use so with Oak we were working very closely with the developer. Mm-hmm. And actually they were able to just literally pull out, for example, like if you have this blue, for example, it's a hex color. Mm-hmm. They were able just to pull out those pieces of information from here. Literally every clickable component you click on it and it gives you the code for it. Fantastic. And then that obviously helps them kind of build things much quicker as well. Yeah, great. Cool. And yeah, so doing a hand over from Figma to the developers is actually a question mark. Yeah, it makes it really seamless because they work on different files. And like in the past, you know, we've just had experiences where they're trying to get like a color reading from a JPEG, for example. Right. Just you have all these kind of complexities as well. Yeah. So they have the same exposure again because it's web-based. They don't have to actually have the application on their desktop. That's cool. So it's totally, yeah, it makes it so much easier. And they can make notes on questions and stuff. Yeah, exactly. Yeah, that's really cool. So it kind of completes the loop, if you might know. Yeah, great. Okay, cool. So that's it for today. Thanks so much for watching. Please give this video a like if you enjoyed it. If you like seeing how we're working, what we're working on and definitely subscribe if you haven't already. Thank you so much, Rob. Thank you, guys. And have a wonderful prototyping day. Yeah, good luck. Bye. Are we classed? Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Are we classed? I have no idea. We're classed. We're gonna stop in. Are we gonna stop in? Are we gonna stop now?