Prototyping

[00:00:00]
>> One last thing to talk about, and that is this idea of speaking of putting things in front of customers, prototyping, right? Used to be in the days of Sketch, you'd build all your fancy UI in Sketch, and then you'd go to Zeppelin or something else to build a prototype out of it.

[00:00:19]
In Figma, you can actually make an interactive prototype in the same tool that you're designing everything, right? And there's a bunch of different ways that you can do this. Let me go find one of my old buttons from earlier. Do we think this one has all the states?

[00:00:41]
Yeah, it does. Okay, so let's go to the main component in this case. So you have two ways of doing this. You can wire up the moving between frame and frame, but you can also make the components interactive. But the caveat is that you can basically only swap between the variations, right, of a given component, the variant states, right?

[00:01:03]
You can't swap instances on the fly, but you can toggle between the different variations. So if I go back to this button, where is it? It's over here. If I click on it, you can see that I can style it, all that kinda fun stuff. But if I switch over to this Prototype tab, you can see that actually, what I can do is I got this little fun thing over here, and I can click it, all right?

[00:01:36]
Go to that one. And I can say on hover, this is one of the questions from earlier, on hover, change it to the hover state, right? And then once they're hovering, on click change to the active state. So now you can kinda simulate, and you can do an animation as well, like dissolve.

[00:01:54]
Smart animate will, if you have a toggle, it'll try to figure out what it should do with the toggle, and stuff along those lines. And it might not be perfect, but you know what? It's still pretty impressive. And then we can dissolve as well. And so now if you had this button in a prototype, as they click on it, you'll see all of these different states.

[00:02:14]
You would also consider doing that to your base component as well, cuz then all of them will inherit it, and if you change any of these properties, right? So if I made this into a bunch of variations as well, then theoretically, I can do it in one place, cuz I have the problem that I had before, which is, yeah, this button now does that, this button does not.

[00:02:32]
So can you reverse engineer some of this stuff, sure. Is part of the process of spending our time together figuring out what you do at the very beginning? It's like, can you refactor your code? Sure, of course you can. Can you also do things in the beginning that make you happier later?

[00:02:52]
Absolutely, right? So having a base component that has some of these basic kinds of states, having it in your checkbox on click. And then having all the different instances that you can swap between derived from that base component becomes a very powerful concept here, right? And combining a lot of these strategies that we kinda learned in isolation into larger pieces that you can pose out of these strategies is incredibly powerful, as I said.

[00:03:17]
So we can do that. And let's go back to this Prototypes page, and we'll kinda just toss it in there for a second just to see it. We'll kind of just put in here for a second, and we'll find out some other problems with this prototype as we do that.

[00:03:37]
Now, this one, I'll probably have some of the other frames in here that I have to deal with in a second. You'll see Enable interactive components. So that's what we did. I might end up with starting from one of these other frames. We'll handle that in a second.

[00:03:53]
So Figma's building a prototype for me. As you can see as I hover, somewhat subtle. I get a little shadow. And as I click on it, it becomes active. And there's also as I'm pressing it down, and stuff along those lines, and I can create a state that when my mouse leaves, it goes back up.

[00:04:10]
You can kinda create all the interactions and wire it up. But while we're looking at this, there are some other problems with this UI, right? It's a prototype, sure. But what if we wanted this bar to be sticky at the bottom, right, or this one be sticky at the top?

[00:04:26]
But normally, these little help things that just kinda float there forever, right, there's some other problems that we need to solve on top of wiring up all the additional states for this button. So let's kind of just look at that real quick. This has its own tab, so you can always just go back to your designs as well.

[00:04:42]
You can see its got a little play symbol, which is awesome. So let's just remove that button for a second. There's a bunch of different strategies that we can use. You can see we have another problem over here, which is where we're gonna wanna do the back and forth scrolling.

[00:05:00]
Or if we had our data table, and you know how sometimes it's not always great on mobile, and so I didn't put one in here. But you might have a table that has some rows, and you can scroll just the table itself, an infinite scroll table as well.

[00:05:13]
We have one of those in the temporal UI, where it's kind of like, yeah, it's bound to a box, but if you need to scroll in that little viewport, you can as well. And the same strategy will kinda work for multiple pieces. So what we'll do real quick together is kind of look at some of the strategies here as well.

[00:05:32]
One of the things I will also point out is that if you would like to see it in various different devices, that's also a thing that you can do as well, and I'll put a nice little phone frame around it too. So we've got two strategies here, and these are also how to do the data table, which we'll kinda see in a second, just for the funsies.

[00:05:53]
The interactive component is all documented down here as well. But let's also look at how to wire up some of the other pieces of this. So for instance, if we wanna move between frames, so let's say we wanna move from, if they click this one, I wanna move to this frame here.

[00:06:06]
You'll notice that when I am in the Prototype tab, I have this fun little thing here. Now, if you are in design, you won't see it, so you're wondering where's my arrow draggy thing? That's super fun. You have to be in the prototype view. But I could say well, okay, when they click on this first one, I wanna move them to this frame, right?

[00:06:27]
Cool, and we can do what the animation looks like. So we can do the iPhone kinda slide-in thing. We'll put that in place. And when they hit the Buy Now button, We wanna move them to the cart, right? And the slide is once you've picked an animation, we'll usually just choose to kinda keep doing it.

[00:06:53]
And we'll figure out a better way to do this in a second, which is to have maybe the cart do that, but let's not do that just yet. And we'll wire that up in a second. The other thing we wanna do is have those sticky headers and footers.

[00:07:12]
That's also relatively easy to do. Go find the thing you wanna make state. Under Constraints, fix position when scrolling. This only does anything in the prototype view, but you can do fix position when scrolling. Let's do this for all of these. Fix position when scrolling. All right, so let's see.

[00:07:38]
Let's also do it for that Help button too. We talked about that as from earlier. So we can do that. And now you can see that the header and footer perform like they should, as if you did position sticky in CSS. If I click this, we kinda go into the view.

[00:07:58]
I can scroll down, hit Buy It Now, we go into the cart, right? Could I wire up each of these buttons in every frame? I could. I don't want to, but I could. The other option here is to grab this, Make it a component. And let's say in Prototype, We're gonna say home, goes to the homepage.

[00:08:32]
I don't actually have anything for the heart. We could say that the cart goes to the cart page. All right, and then what I'll do is I will remove these, And I will bring in my new version. Again, this is what happens when you don't organize your components.

[00:09:02]
So let's see where it is, let's go for footer, sweet. And you can see this one is technically wired up the same way, that its main component was as well. And the nice part is if you ever changed what that main component is doing, it'll change all of the instances as well.

[00:09:35]
So now we can put them all in there. I'm pretty sure I have to reset that fix position scrolling. Also, let's zoom in a little bit and get these straightened up. Let's see, make sure that was actually in the frame. All right, sweet. And so now, theoretically, cuz they all inherit from that one that has the interactions wired up.

[00:10:08]
That one's up. I didn't make them sticky again, but let's see. Let's see what I missed with that cart. I mighta, Think I missed one of those arrows there, so put this one in place. Cool, navigate to that one as well, number three. So you can always change these as well, just with that menu.

[00:10:50]
But if we start from this one, for instance, Scroll down, Whoop, figure that out in a second. My touch targets are a little off here, but I can have the carts, and they'll all kinda wire up where they're supposed to be. And I can move through the UI like that, and so you can begin to, again, create these prototypes.

[00:11:19]
What we do is, we have basically before we build the UI temporal, Canvas basically makes mock-ups that, honestly, by the time we're done with them, look shockingly like what I'm about to build, right? In this case right now, I've built the UI, but she's got some new features that she's also showing.

[00:11:38]
So we're using the Figma mock-ups. And in a lot of cases, sometimes the people we're interviewing don't know that this is the mock-up and not the UI that we currently have in beta right now that you can pull down and use, right? So we meet up with the customers of various companies that I can't name, and we show them these mock-ups, and we kinda talk them through it.

[00:11:57]
We let them like, what happens if I navigate there? And we've got a lot of this worked out. And then for some of these new features, after we're done interviewing the customers, then we go ahead, and I'll go ahead and have my team build the actual UI, making sure that it kinda behaves the way they want.

[00:12:13]
Rather than ship something into production, and then wait for people to either complain, or file bugs, cuz as frontend engineers, bugs are an interesting thing. If something doesn't go into the database in the back end, that's a bug. If somebody doesn't know where the pagination is, is that a bug?

[00:12:34]
If the pagination doesn't work, I need to put a ticket on my team's backlog. If it's like, we've moved something around, and it's confusing for our users, right, cuz it made sense to us, cuz we were intentional about it. For them, we sprung it on them, right? It's super tricky, right?

[00:12:47]
And that's not necessarily a bug, per se. It might still result in work for my team, but that is different, and we need to kinda figure out how to triage those things. So finding those things out before we ship, right, even though we're still in beta, is super, super useful in this case.

[00:13:01]
And so Figma allows you to kind of put together these screens. And again, yeah, it's like, don't make fun of my son's artwork. But generally speaking, you can get to a pretty compelling high fidelity prototype fairly quickly, right, as well, cool. And so like I said, we've got a little piece on the interactive components.

[00:13:24]
I'll just kinda show you the data table piece, which is all I did was I took that data table that we had before. And it's funny, step two is there is no step two, right? All I did was I took this initial content in here that was overflowing.

[00:13:37]
This is the one that has way too many things in it as I expand it, and I just go to Prototype, and I say Horizontal scrolling, or I'm sorry, Vertical scrolling. And now they can scroll through this table. Let's actually implement it in this view right here real quick, and this will be kind of our last little hurrah.

[00:13:56]
I wanna have it so they can kind of flip through things, like you kinda see in a lot of different interfaces. So this component, as you can see, it expands, right? What we can do in this case is we'll say horizontal scrolling is now a thing. Yeah, let's do this one, horizontal scrolling.

[00:14:17]
It had the larger parent component. So we can just say that okay, this should be able to scroll horizontally, even though it overflows the frame, so it's clipped, right? And you can't see it, but there is more content here. You can kinda see the hint. And then ideally, as they kinda flip through it.

[00:14:32]
And there is a Figma mobile app where you can literally deploy this to your phone, thumb around on it, and trick your friends saying I built this out this weekend, whatever. But ideally, you could also pass it around to figure out does this interaction make sense? I think for side projects, this is super useful too, right?

[00:14:49]
Cuz one of the things I did when I was in education was we'd build these things for students and teachers. We start with these prototypes before we build a thing of put in a classroom, does this actually make sense is super useful before you build a whole bunch of stuff, cool.

[00:15:07]
[LAUGH] One of the jokes in the chat is just ship the prototype. I wish, and then I can go back and just chill. So here we can scroll over. We'll hit this.
>> What I did was I went to the frame four, added a horizontal scrolling to that.

[00:15:33]
And then I resized the box, so it has something that scroll, the frame container.
>> Yeah.
>> Cuz otherwise it's completely expanded. So when you go-
>> I had to do that.
>> Yeah, exactly, the container has to be smaller, but-
>> Yeah, I shrunk the container down.

[00:15:50]
>> Okay, and then you enabled the scrolling on the container, and yeah, there you go.
>> [LAUGH]
>> That feels good. [LAUGH] I'm just gonna do this for a few minutes. So the idea that we can have things that we interact with and scroll. To make it more for a realistic prototype experience beyond just moving between frames and having buttons that we can change the state of, and doing all these interactions.

[00:16:21]
We can see in the prototype anything that has a certain amount of overflowing of its container, we can actually go into that prototype, find the part that we want to scroll. It does need to overflow, right? And we basically can turn on either vertical or horizontal scrolling. Or if you're gonna simulate a Google Maps experience, you can do both, and they can like pan around.

[00:16:43]
It will be limited by the bounds of whatever the fictitious map that you have in there, but again, this isn't a real app. This is the thing you're putting in front your customers if they're trying to go all the way from Minneapolis, and continue scrolling to Paris, yeah, depends on how big your image is.

[00:17:01]
But you go in there. In this case, we took the content of that data table we made in a previous exercise. We turn on vertical scrolling. And now you can see in the prototype that I can kind of sit there and scroll through it as well, and we could add in a whole bunch of interactivity.

[00:17:14]
Again, this is no replacement for our real day jobs, but the ability to add certain pieces of interactivity to your component and be able to use them is incredibly powerful.