This lesson is exclusive to members

Figma UI UX Design Essentials

Sharing & Commenting on a Figma file with Stakeholders

Daniel Walter Scott

Download Exercise Files

Contents

Certificates

We’re awarding certificates for this course!

Check out the How to earn your certificate video for instructions on how to earn yours and click the available certificate levels below for more information.

You need to be a member to view comments.

Join today. Cancel any time.

Sign Up
Hi everyone, in this video we are going to be sharing our design, with our client, or one of our stakeholders. So we're going to share it first of all with Doug. who is Doug? Doug is fictional, I'm using Doug as a representative of a level of person, you're going to be sending it to. Doug is a simple creature, he hates computers, and logging in, and passwords, but we still need to get, you know, he's our client, I want to get him this prototype, this wireframe, at this stage, just to see if I'm on the right track, keep them involved rather than surprising him at the end. 

So it's really easy to share stuff in Figma, I'm going to use the Share button along the top, click on that, and we're going to start with a simple version, because what I'm going to do is just send Doug a link via email, that's all I'm going to do, I'm going to copy it, I'm going to close it down, I'm going to open up a browser, and I'm going to pretend to be Doug. 

So this is Doug, I emailed him a link, he clicked it in his email address and this is what he sees. The nice thing about it is that, Doug doesn't have to sign up or get passwords, or get a free trial, or all of that jazz, it just works, which is really cool, and he can kind of move around. He can't do a whole lot without logging in, but he can look at it, he can't comment at this stage, we'll do that in the next part, but he can look at it and go, "Oh yeah, that's cool, I like that," or, "Hey, what's this going on?", and give me some feedback at this early stage of my wireframe, just to make sure I'm on track. 

The other thing you can do is, this little Play button still appears here, so we can click on this, you might have to tell them exactly where it is, and you can go through and actually prototype it, without having to log in, he can see it, you can click on 'Learn More', he can realize you can't get from Learn More to the purchasing, so back to Home page. 

All right, so he can see all of this, which is cool. One thing that might confuse Doug, which it does for some of my clients is it's opened up a separate tab, you can't close this down and get back to it, you're like, you can click everything, but you actually just-- it's got a separate tab, that opens up when you hit this Play button, see along the top there, yeah, yeah. 

So yes, where this gets even cooler, like this might freak Doug out, it might freak you out. So he's working on this, what you'll notice is, I'm going to make Doug go over the side, so pretend this side is Doug, and this side is my regular old Figma, so let's put a gap in between. So this is him on his computer, at his house, and this is me on, you know, this is me working, like I did before, and what you'll notice is, he can see my arrow. 

Figma is a really amazing collaborative design tool, so it's probably, for Doug, he's not going to appreciate that, he's going to be weirded out that I'm following him around with my little hand. I can even see Doug, look, there is his hand, so if I move him over to, and click on this, anyway, you can see each other, that's the point. Let's say Doug's like, "Oh man, it's good, but what is that green?" I'm like, "Oh quick, before Doug sees it," I can be-- select all same color, go, and he's like, "I hate green, man, green's the worst color in the world," I'm like, "Ha, ha, what about pink?" He's like, "I hate pink more," what about red or orange? 

So what's happening is it's, this is live collaboration, so, it is amazing when you're working, with other designers and other creatives, because you're just doing something, and you can all work on it together, but at this stage you're just working with Doug, and yeah, he doesn't have to do anything else, he can just look, we don't have to be updating it in front of him, but it's a cool little bonus extra. 

Now let's bring Doug back, come on Doug, if Doug wants to use commenting, which is probably one of the really nice features, he can sign up free with either Google or sign up with his email address, and he'll be able to start commenting. So there's one thing that I might convince Doug to do, so you can actually use a little pin and actually start commenting on it. Let's show you a couple other things before we do commenting. 

So I'm going to go back to Figma, so forget about Doug, bye, Doug. A couple of things that you can do as a designer, is you can go into here, when you do go to 'Share', you can say, "I want a link to a specific frame", so let's say that we-- the homepage is wrapped up, there's just problems with the Product Details page, because there's no clickable button. Let's do this terribly, let's make that clickable, we can go to the Checkout. 

So what is it doing, instant, that'll do, so what I can do now is, I can select the frame first, and then go to Share, and then that option will work. It'll say, when I send this link, it'll actually link to the specific frame. This one here, it'll start there, if it's grayed out it means you've got nothing selected, and I go to Share, you can't tick anything, so that's one thing. 

Let me show you what commenting does, so let me upgrade Doug, wait there, so upgraded Doug, this is Doug now, before he could only do very limited stuff, now with his free login he gets, probably a little bit too many details for our poor old Doug, and he's like, "Why can't I see the CSS code?," but the difference now is, he's got commenting, so Doug over here is like, "I like this," you know, can't see my comment. 

So Doug's going to write, "Why are we not using real images?", signed Doug. "Doug, it's a wireframe, that's why." So he posts on his one, on my side I can see Doug now, there he is, and I can start seeing comments coming through, and I can see it there and I can see it's pinned, and I can see it's going there, and I can reply to Doug and say, "Doug, I've told you a million times, this is just a wire frame for testing." Send it off to Doug, I should put a smiley face in there. 

You can see, we can have this collaboration between my client and me, they can pin stuff, all the client needs is a free login, or they can just do it by email, I don't have to log in at all. So commenting is great, there's a couple of things, and for me, on my side, let's forget about Doug now, let's go, can you see up here, there's two D's, I should have called him Fred or something, but here's two Dougs now, so there he is there, he's the yellow guy, you can have loads of them along the top here, of different people looking at it, lots of different clients, lots of different testers. 

I'm going to go from my-- I don't want to be on comments anymore, because I can make comments myself, I want to go back to my tools that I know and love, and actually I can go back to Comments, and I can say, actually, this one here, I can click on it, and I can say, see it here, resolved. 

So it's one of those things that we are finished with now, I've kind of made the adjustments based on it, or at least I've replied to his, and I'm kind of finished that, and I can work as a designer, through the different notes, from my client, or tester, or Product Manager. So commenting is pretty nice and fluid, and in real time. 

All right, we'll wrap this video up, we'll do in the next one, how to kind of share for editing, it's going to introduce a different part of the Figma experience, which is Figma teams. All right, I'll see you over there, bye, Doug, bye, Dan, I'm Dan.