Prototyping

[00:00:00]
>> So real quick, we're not gonna talk too much about prototyping, but I will show it to you, because I think prototyping is a really powerful tool in Figma, but also, I know how to write JavaScript. So a lot of times, if I wanna prototype something, I could just build it, but it's kind of an interesting concept here as well.

[00:00:20]
And so with prototyping, we can kind of create mockups of the UI and put them in front of customers. And ideally, this one only saves me work because work I don't have to do is a lot faster than work I have to do, right? So in this case, we can go ahead, and I'll just kind of show you real quick with like one or two things.

[00:00:45]
We can create one of these viewports, let's go ahead and take the frame tool. Let's say iPhone 14, great, cool. We can go ahead, and we can begin to put together something that looks like a UI, right? So I've got some pieces in here. And this is where our constraints come back to help us, like some layout guys would probably also be super helpful for getting everything in place.

[00:01:16]
So we've got that, we can give this one like we saw before, constraints that's left and right and top because I pull these out of a working version. They forgot them when they left the frame, but then remember them when they go back in. So these are now very similar to what we had before, great, awesome, seems good.

[00:01:37]
We can go grab some of these as well, put one more frame in here, I'm gonna take this frame, and I'm gonna say get big like that. Take up this area, I'm gonna make this one an auto layout. And what I'm gonna do is, I'm gonna say this width is fixed, but hug the contents, right?

[00:02:10]
Which means be the width of the viewport, but how tall you are, let's see what's in you first, all right? We'll keep the default padding, I could use my cozy padding if I wanted to. Yeah, let's do that to bring it all together. Cozy padding, let's say 8 between them two.

[00:02:29]
Awesome, and so what we'll do is we'll grab some of these posts, we'll drag them in, Right? Is that inside my frame? Cool, so that kind of snapped in there, we'll say, yeah, fill and be your fixed width, that's perfect. We'll take these other ones as well, Go inside the frame.

[00:03:00]
You can see that it's bigger than the viewport at this point, which is totally fine. We're just gonna put that, Behind the different navigations, let's grab one more for good effect. My aim isn't so great. Cool, so we've got that in place. And now, what we can do is we just need to do a few more tweaks for the prototyping piece here, all right?

[00:03:32]
What we're gonna do is switch over the prototype tab, and we're gonna say for the top nav, we're gonna say fixed, stay in place. For the bottom nav, we're gonna say fixed, stay in place. And for this one, the middle we're going to say, Hold on, I grabbed, yeah, I want my frame, Let's see how that works real quick.

[00:04:03]
Overflow vertical. So now I can go in here, You can deal with that with in a second, I think maybe I picked a viewpoint that wasn't exactly the same as the device that I picked. But you can see that, failing to adjust for that a second, I do get something that feels like a UI, right?

[00:04:29]
Let's go ahead, I could share the prototype as well. 14 and 15 max and was my prototypes that too, I said yeah, I don't wanna max, I want plus, plus seems good. So we have the product is working, we just had an issue where as I was dragging stuff around, I changed the size of things, right?

[00:04:55]
And so you can get a feel, and if I had hover states over buttons, you would see that as well. I mean, maybe not on an iPhone because hover and touch, you know what I mean. Like try doing that in the Chrome DevTools too, but like theoretically. The other really interesting thing that you can do is, let's say we made a clone of this, right?

[00:05:16]
And we took out the contents of that intermediate frame, and we just said instead we're gonna drag in, Like a few of these, Go ahead, duplicate that a bunch of times and keep that going too if I wanted to. And then, I could theoretically grab this in a victory lap to pull this all together.

[00:05:56]
We can grab a bunch of the different avatars, can I select them all? We'll find out. But I can use that content real, grab a bunch of these just manually, I can content reel them all in place. And I can even replace names and stuff like that, but let's just go with the avatars.

[00:06:24]
Let's go with photos, that's a new one, I haven't tried that one yet. Those don't look AI generated at all, sarcasm. The session card that I used earlier, that was an AI generated picture from Midjourney. It was like person thought leader giving conference talk, and A JavaScript or something like that, and that's what we got.

[00:06:43]
Cool, cool, and what's really cool about this, and we'll even just do one more real quick. We'll go ahead and close all those and delete them, and in this case, what we're gonna do is we'll grab one of these. And one of these, Let's see, I will just leave my desk for a second, cuz that's not the point I'm trying to make.

[00:07:33]
We'll go ahead and duplicate that a bunch of times. And what's really kind of cool about this, take one of these and just, cool. Is that, then you can actually set up flows in between the different screens, right? So I could theoretically grab this message icon here, and we'll go to prototype, right?

[00:08:01]
And you can see this little plus sign, we're gonna drag it here. And then, we'll just say with this one, grab this plus sign, and we'll drag it here. And now, if we go to our prototype, you can see it starts over here. You can start to build out the entire experience, we're in the wrong place.

[00:08:29]
That's what happens when you talk in prototype. We'll go right here. And I can tap the message thing, and then I can see the screen tab on the first person. And you can even, go ahead, you click here and there is Instant, we're gonna do Move in, And on this one, we'll also say move in, and we'll go back to this frame here, and we'll do the prototype.

[00:09:08]
And so here, if we click this messages, we kind of get what feels a little bit like an app, right? There's ability to do a back button and stuff along those lines as well. And so, you can kind of like figure out the flow and get all those things in place, which is also somewhat helpful, like there are times depending on what we're working on.

[00:09:26]
Like as if it's something straightforward like hey, we're updating this table? No, right? But if there are other interactions like a lot of times along with the design, I'll get the prototype to kind of get a sense of the interactions and feel of a given feature. Depending on like, we don't do it for everything, but we do it for some of the things, right?

[00:09:42]
And like you can kind of get all the way there. But the important part is there a lot of like, I think as Figma grows, especially more true than when we did this two years ago. Stuff like the variables and the ability to generate the tokens for a design system, right?

[00:09:58]
Stuff like those responsive components that kind of like change their layout with that flex wrap and min and max heights, those are all new too, right. And there is more of an ability than there was, not too long ago, to actually primitives in the design, that can very cleanly translate into the primitives in the development piece, right?

[00:10:19]
That said, kind of tried to pause in the beginning here, it is kinda somewhat on us to kind of then play a collaborative role, right? It is one thing to kvetch about the amount of work it takes to implement a design, but I do think that there's a lot that we can do kinda, knowing on both sides of the flow of.

[00:10:40]
Here are some abilities that actually makes the whole developer design interaction easier. Also like I said before, you could be in a startup, or you could just be working on a site project, it is a lot easier to prototype something and then implement it on my own than to be like, get a nit, right?

[00:10:58]
Like create react app, let's go, that always sounds great on a Saturday morning, and then I don't know what I'm doing by the afternoon, all right? And so, get a lot of that in place early I think is also a developer's regret because a lot of times like the thing where it just start styling stuff all the time without a real plan bites me almost every time.

[00:11:17]
So I think being able to use these tools are incredibly powerful as well cuz like, you can be able to like stitch together a prototype is super cool. But I think a lot of stuff around the variables and the modes and creating stuff that very cleanly maps to what you might see in the code.

[00:11:32]
And like yeah, we saw we can change the values. Like I would love to tell you that like, developer mode makes everything super easy. It's a nice starting point, right? To have like the, if I go to one of these, for instance, like to get a sense of like, if I output it all these variables like, could I grab this code?

[00:11:54]
Sure. Is there a lot of times a lot of code I don't want to grab? Almost always, right? So you're like one cannot just defer to it, but getting the colors cleanly listed, getting at least a starting point, it's an inspiration, but it doesn't always solve everything.