Note: If you have a different UI than in the course, you can change it back by clicking the '?' in the bottom right corner of Figma and select 'Go back to previous UI'. Happy Figma'ing!

Figma UI UX Design Essentials

Sharing & Commenting on a Figma file with Stakeholders

This lesson is exclusive to members

Course contents
SECTION: 10
Tips & Tricks 7:21
SECTION: 14
Working with Illustrator 4:16
SECTION: 19
Saving & History 5:42
SECTION: 24
Teams & Projects 5:19
SECTION: 27
Thumbnail update 4:10

Questions

You need to be a member to view comments.

Join today. Cancel any time.

Sign Up

Course info

114 lessons / 12 hours 29 quiz questions 22 projects Certificate of achievement

Overview

Hi there - my name is Dan Scott & welcome to Figma Essentials.

Together - you and me - are going to learn everything you need to get started working as a UX Designer using Figma.

You can try Figma for free by clicking here.

We’ll use this UI UX design tool to create beautiful User Interfaces and engaging prototypes. Most importantly... we'll cover the client expectations of you as a new UX designer. 

This course is aimed at people new to design, new to User Experience design. Even if you’re not totally sure what UX really means, don’t worry. We’ll start right at the beginning and work our way through step by step. 

First we’ll describe the brief & how to work with a UX persona.  

Then you’ll learn how to create simple wireframes.  

From there we’ll look at how to implement colours & images properly in your designs.

You’ll learn the do’s & don’ts around choosing fonts for web & mobile apps. 

You’ll learn how to create your own icons, buttons & other UI components. 

You’ll learn some pretty scary terms such as Components, Constraints & Multi Dimensional Variants. They are all really easy to understand once you know how. 

We’ll also make our lives easier by using free UI kits & plugins for Figma which will speed up our workflow dramatically!

We’ll build a simple Style Guide ready for client handoff. 

You’ll understand how to make both simple & advanced micro interactions, page transitions & animations 

Before the end of this course you will have made fully interactive prototypes 

You will take a project all the way through -  collaborating with other team members and exporting the right files ready to hand off to your developer or software engineer. 

We’ll be focusing on the software Figma but I’ll make sure to explain the techniques & terms used in the UX and how real world projects are run. You will develop a great understanding of the industry and will be able to manage your own UX projects.

I will be setting assignments through the course which will help develop your skills and enable you to create something special and unique for your own portfolio. 

Alright - it's time to upgrade yourself & go from Figma Zero to Figma Hero.

Daniel Scott

Daniel Scott

Founder of Bring Your Own Laptop & Chief Instructor

instructor

I discovered the world of design as an art student when I stumbled upon a lab full of green & blue iMac G3’s. My initial curiosity around using the computer to create ‘art’ developed into a full-blown passion, eventually leading me to become a digital designer and founder of Bring Your Own Laptop.

Sharing and teaching are a huge part of who I am. As a certified Adobe instructor, I've had the honor of winning multiple Adobe teaching awards at their annual MAX conference. I see Bring Your Own Laptop as the supportive community I wished for when I was first starting out and intimidated by design. Through teaching, I hope to bring others along for the ride and empower my students to bring their stories, labors of love, and art into the world.
True to my Kiwi roots, I've lived in many places, and currently, I reside in Ireland with my wife and kids.

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.

Downloads & Exercise files

Download Exercise Files

Transcript

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.

  • Powered by Marvin
  • Terms of use
  • Privacy policy
  • © Bring your Own Laptop Ltd 2024