Building Prototypes for Development

[00:00:00]
>> The last thing I want you to say about prototyping is building prototypes ready for development. Coz I see as somebody that has a background in development if you go fight back far enough I I look at some of the stuff that's handed to developers by designers and it makes me want to weep.

[00:00:27]
I feel so sorry for developers with the appalling stuff that you guys get given by designers sometimes. And we end up making life so much more difficult for developers, and it's because a lot of designers don't understand the basics of how web pages are built. So I want to give a little bit of advice about that, about how you can prepare your Figma files in a great Way that's going to help developers a lot.

[00:01:01]
Again, Steve will go into this more, I'm sure, in his Figma for Developers course. But I'm talking more to designers in this situation that don't use Figma as well as it should be used for developers, so I'm advocating for them. So the first thing is always use AutoLayout, right, seriously, guys, that is, AutoLayout is how websites are built, right.

[00:01:28]
They're built using the CSS box model, so they have padding, they have margin, they have gaps between them, they're left aligned, right aligned, vertical aligned, etc. So the minute you start dragging elements around, just dropping them on the screen, you're instantly breaking the fundamental way that websites are built.

[00:01:50]
So in my designs, if you look at my Figma files, there is nothing that is not in auto layout format, right. And everything is grouped within, if I have multiple columns, those multiple columns are an AutoLayout. And if I have components inside of one of those columns, that's all auto layout, etc, all the way down, right?

[00:02:16]
Yes?
>> How do you approach the layers naming? Because I was utterly out as well, a lot.
>> Yeah.
>> But you have to be careful when you're building a more complex components.
>> Yeah.
>> How do you approach the hierarchy of the naming?
>> Now that's really interesting because that is very much personal preference, right.

[00:02:36]
And I would suggest you agree something with your developer over that. If you don't have regular, if you don't know the developer like I don't in most situations because I'm an outside consultant working with an in-house development team, I mark it up as if it's HTML, right. So my layers, I will call div and sometimes dot, whatever, a class name or whatever, or section, or heading, I will mark it up like it's HTML because I like to suck up to developers.

[00:03:09]
So, but that's how I do it, but the key is consistency, isn't it? And not having unnamed layer one, unnamed layer two, unnamed lead three, etc. That's the biggest key, I think, but also having everything in AutoLayout because AutoLayout doesn't just help the developer, it will also help you, right.

[00:03:32]
Because a common scenario is somebody comes back and says, we want that up there, now if you haven't used AutoLayout, you have to shift everything down, right. Move everything down and move the element up and rearrange everything. With AutoLayout, you just drag it from one place to another and everything reformats by magic, right.

[00:03:53]
Also with AutoLayout pay attention, my cursor won't actually show, but if you see that there's three icons there. There's a down arrow, a right arrow, and a circular arrow, or a back on itself arrow. That back on itself arrow is under, people underestimate and they don't use it, that's a wrap arrow.

[00:04:16]
And that will mean that as you reduce the width of things, because everything can be fluid, it will wrap a column underneath itself just like it would in the browser, right. And that means that you can create almost fully responsive websites within a web apps within Figma. I say almost, because you can't have breakpoints in Figma yet, right, where suddenly everything reformats and repositions, which is really annoying, but you take what you can get.

[00:04:47]
So really, really use AutoLayout, can't say that strongly enough. The other little bug bit, I feel like I'm channeling every developer I've ever met at this point, but we'll keep going. Think about your states, guys coz otherwise developers will make something up and I swear they make it up terribly on purpose, just to punish us for not thinking about it ourselves.

[00:05:12]
So, think about hover states, active states, all of that kind of stuff. And if you don't know what state you need then either learn some HTML, or go and talk to your developer and they'll gladly tell you what you can do your states. And, so build those in components And so that the developer can just go and see, you can select the element and on that right-hand side in Figma.

[00:05:38]
It'll be able to see all the different states that it's in or go to the component and see all the different states that are available. Really worth the effort, so I highly recommend that. This is a bit of an optional one, but if you can include your animations to take the time to demonstrate how your animations would work.

[00:06:02]
So that the developer can simply copy what's there, really, and even generate some pretty ropey code. But it is a starting point they can mess around with, and if you want it to ease in and ease out. And if you want it over so many milliseconds, if you care about that kind of stuff, take the time to do it.

[00:06:20]
Otherwise, the developer is gonna have to make a decision over it, and they don't mind. In most cases, it's not that big a deal that they decide, but you just won't get to, and then you don't get to complain afterwards if it's not exactly like you want, that's my attitude anyway.

[00:06:35]
I'm hoping I can hear developers cheering everywhere my supporting them. Am I getting this, am I doing good all right so far? Yes?
>> So I can
>> Comes in the designer at this point.
>> Yeah [LAUGH] Because where I worked, we did all that in a spec sheet.

[00:06:52]
>> Yes, and I understand that, that that was the old school way of doing it, and there was a time before these these applications had all this built in, where that was the only way you really could do it. But these days you it's all built into Figma so just use it for crying out loud and and talking of that there you know there will be occasions when you can't create something or you can't get it working.

[00:07:19]
Right or whatever, and you get into the point of going, well, I can't spend too much longer trying to get this stupid modal to appear, right? So just put a comment in, great commenting built into Figma. So use your comments to explain to your developer how you want the interface to behave.

[00:07:35]
And it's all there, nicely packaged up for them together And it works a treat. And they can see exactly the element that they wanna change, etc.
>> They don't have to go to two different sorts.
>> Exactly, yeah, it's about being polite [LAUGH] And handing over a quality product to the people that have got to make the thing work.

[00:07:56]
And there is so much complexity in development, and there's so much that they have to do that you don't wanna put any more on them. Their developers' jobs are pretty sucky, in my humble opinion a lot of the time. They do have the advantage that nobody ever cares what their code's like.

[00:08:14]
well, everybody cares what our design works like, so they get off light on that at least. Yes? One more Two, I think one thing that I personally appreciate is having color codes in HSL as a means of just kind of translating things more closely to a color wheel.

[00:08:29]
And I think I learned that from Sarah Drasner, who's here last time was just like hex and RGB are just so intuitive from
>> Right, okay.
>> Okay, colors, but HSL is nice cuz it just does, translates better to a color wheel, it's a lot easier to understand.

[00:08:43]
>> Yeah, see, I always because I'm old is always hex values for me, but no, I see where you're coming from, makes sense, okay, I can accept that. I'll add that to the presentation in future, so let's let's wrap that up then. So basically when it comes to product typing, this is going to Schottky.

[00:09:02]
Prototyping is a powerful tool for both testing and communication. You have learned something new today, I bet you didn't know that coming in. However, it does the careful planning the correct choice to the client right kind of prototype at the right time, and how much depth to go into your prototype.

[00:09:20]
If you do need to reach a point of going I'm overworking this now? [LAUGH] Let's just move on. So yeah, and then I want to rattle through fairly fast testing your prototype. Obviously I carried carry this cover this in a lot more detail in the cold side did on research into testing, but we will just touch on it here as well.