Figma for Non-Designers | Max Brinckmann | Skillshare

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

7 Lessons (49m)
    • 1. Intro

      2:10
    • 2. The Interface

      24:14
    • 3. Interactive Prototypes

      9:43
    • 4. Sharing Files

      5:40
    • 5. Adding Comments

      4:45
    • 6. Feedback

      0:52
    • 7. Your Class Project

      1:41
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

276

Students

--

Project

About This Class

Are you working together with designers or have troubles using Figma? This course aims to take away all troubles when it comes to the basic usage of Figma as adding comments or working with interactive prototypes.

No matter if you have a background in copywriting, brand, communication, PM or really anything else (maybe even a designer who is just starting out with Figma!), you'll be able to confidently start your first tasks after taking this course.

In this course you will learn:

  • What is Figma
  • An in-depth look at Figma's interface
  • What are interactive prototypes
  • How are interactive prototypes in Figma built up
  • How to navigate through interactive prototypes
  • How to create your own interactive prototype
  • How to share files
  • How to access shared files
  • How to add comments
  • How to communicate in Figma

I have spent many hours in the preparation and production of this course, and I really hope that you enjoy it and are able to make the most of it for your career and professional life!

About Max: I am a Senior UX Designer and User Researcher and I am a huge fan of believing in never stopping to learn. I want to share my knowledge with you and give back to the community that brought me to where I am now.

Music by Joakim Karud https://youtube.com/joakimkarud

Meet Your Teacher

Teacher Profile Image

Max Brinckmann

Researcher and Designer

Teacher

Hello, my name is Max and I'm a Senior User Researcher and Digital Designer with more than ten years of professional experience. I love to write and to talk about UX related topics. Besides that, I am occasionally recording music.

Throughout my career, I was and still am privileged to work for many different clients from different industries like automotive, IT, food, healthcare, or life science. Having worked both for agencies and in-house, I am able to share from my broad set of knowledge that is based on successful projects of almost all possible places of action for UX and digital product design.

 

 


So far, my online courses have been watched by 30,000 students across all channels. Sharing is caring, and ... See full profile

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. Intro: Hello, My name is Max and I am a senior user research and user experience designer. And throughout the last couple of years, I had the privilege to work in various industries and for a multitude of clients and their different user groups. And this is going to be an entry-level tutorial for Figma, software that has taken over the UI design market in the past years and pushed away their competition with a crazy momentum that I honestly did not expect. But it did not take long for me to start liking Figma and its advantages as cross compatibility on operating systems, a combination of multiple tools and won a great performance even with large files. And of course they're extremely well-made collaboration features. There are already so many great tutorials on Figma. So why would I think of creating yet another one? For the reason is that even though a lot of designers have picked thick mark already, still many, many people out there who have never used it before. Maybe not even being designers themselves, but people who are working together with designers. I want to make it easy for all of you to get into Figma and get familiar with its features. And whether it's design feedback, collaboration on copy content or grand ideation, brainstorming, whiteboarding. It really is no rocket science. In this course, I'm going to cover all the basics to get you up to speed. And we'll guide you through the different menus and tools and functions that you need to start off, we will also look at working on someone else's Figma files. How to add your comments and feedback and explain how to maneuver around an interactive prototype. After finishing my course, you definitely won't be troubled by Figma anymore. And you'll be ready to unleash your creativity or comments or feedback or what it is that you have to do. You will be prepared. So let's stop wasting time and let's start with the first chapter of this course. 2. The Interface: All right, so in this first chapter, the first thing I want to show you is the Figma website. The Figma application also is running in the browser, so you don't need to download an app. You can download the native app for Windows and Mac obviously, but you don't have to. Everything is working fully functional in the browser as well. So you can basically work from it from anywhere, as long as you have a browser. With the exception of mobile devices, there's currently no official native app for tablets are smart phones. You can only use these apps that are available for previewing the work you're currently working on. And there are third party applications. I at least know of one. It's called figurative. But as far as I know, it currently is facing some troubles when it comes to performance. So there's unfortunately no official native app for, for iPad Pros currently. So we all have to stick to the MacBook or Mac or Windows computer. What I wanted to show you is the Figma website, because if we take a look at it here, they have a video that shows the basic functionality and it's a great way to get an idea of how the app works. Because you see the top panel, which includes the toolbar. Here you can see how an interactive prototype looks like. So it's really has the feeling of a real app with animations and page States switches. Here's the toolbar here on the right-hand side in this panel, you can really configure all the details. And then there's also a panel on the left-hand side and which you can change the, select the layers and pages. And as you can see up here, those avatars, those are all the users that are currently in this file. So that means if they are working somewhere, you can actually see their cursors and they can see yours obviously. So this really brings collaboration to a whole new level. Many other apps now have picked up the same thing. But I think Figma, well, one of the first to really need this. And it's so great. You can see it here as well. This is basically how it looks like with the cursors and their names on it. Because you can really work together even if you're not in the same room or even in the same country, but you can really work together and you have an idea of what the other people are currently doing. So also be aware whenever you are being sent, for example, a Figma link to a Figma fire. Then you click on that link and the file will open up probably in the browser, and everyone will be able to see what you're doing, but you can also see what everybody else is doing. So this might be a bit strange at first, but you will quickly get the hang of it. So I would say let's switch over to the actual Figma file. And let's continue there and talk about what you can do inside of Figma. All right, So welcome to Figma. This is a demo project that I've sent out in order to show you what Figma looks like and how it works. I will start from top to bottom and explain you all the different bits. Alright, so this is the toolbar here. This is by the way, the native app, but then the browser, it will look just the same. Here on the left-hand side you have this burger menu icon, which shows you the main menu where you can do all the files selection, and where you can access all the different features and functionalities. They are all packed here. But I am actually not using this menu that much. I'm more a fan of direct access here in the toolbar. So the first feature of functionality here is the move tools as they call it, and the scale tool. So when the move tool is selected, this is just the basic arrow cursor. As you all know it, you can select items and you can move them around. Once you selected the scale tool, there's a hotkey, it's K for move its VI. You will be able to proportionally scale everything that you have selected. So when I do that by pressing Shift, then all the paths, for example here, will proportionally scale with all their options. So these paths here have a certain border width and this will scale as well. If I now revert what I did and switch back to the move tool and scale up. It will look like this. So you get the idea. Then the next feature up here is called the frame tool. And if you are familiar with Sketch, frames, are what they call here the airports of sketch. So this is a frame and you can, you can change the size of it. You can also select Presets here. So if you want to have a friend that has the size of the display from an iPhone 11 Pro Max. Then you just click here and it has the correct size. And then there's a feature for all the different shapes. So you can draw a rectangle, rectangles, you can draw lines, arrows, ellipses, polygons, stars, and place images. Most of the time you will probably not use this if you're just using Figma for feedback and communication. Obviously for designers. This is a very important feature. Maybe you will use it to highlight certain areas, but there's another way of really putting your content in and it's the comment. Feature, and I will talk about that in a few seconds. So let's just delete this rectangle and keep looking further. So here we have the pen and pencil tools. For the pencil tool, you can just draw lines here, freehand lines. And the Pen tool will help you drawing these Bezier curves. And you can do, you can create your own vector shapes here and export them as well. For example, in SVG format. Then we have the text tool. You can either click and then right, or you can draw a box and then write within this box. You have to use the right-hand panel for the different configuration. But I want to just finish the top bar before I switch over to the right, right panel. And of course before that the left panel. And we'll, of course, it's explained what you can do in either of these panels. So here we have the hand tool and what that does is it's just non-destructive. I'm moving around the canvas so you can click anywhere without moving our changing anything. So if you're afraid of accidentally changing something, then I would suggest use the hand tool to move around the Canvas. And then here we have a very important feature and that's the Comment tool. And with that, you can add comments to a very specific position. So everywhere you want to place a comment, you'd simply click. And then you can write something. For example, change the copy to hello and you can click post. Then it's there. If you want to tag someone on not advise someone who's working in the same file. You can mention them and they will get notified, for example, by e-mail depending on their settings. You would just have to type in an ad groups. And that's, and then if there were other people working on that file, you could just write their names and they will would appear here. I could have caused mentioned myself and then write something. And they have dedicated icon or emoji menu here as well. And then reply, and then it's going to be added here. Other people can, of course, also right here as well. So it's really just, you're creating a conversation. Whenever this comment is resolved as a button for that as well, by clicking here, it will disappear from the Canvas, but it will stay in the comments panel when you selected to show resolved comments too. So then it will reappear here. Usually this is not activated just to keep the overview clean. And you don't want to see other comments all the time because it can get quite crowded. Then here in the center of the top bar, you can see the folder in which the Figma file is currently placed. So all Figma files are usually stored and the Figma Cloud and not on your computer or hard-drive as you probably know from other software. But really you have a file browser and it's all happening in Figma itself. Then here this is the name of the file. Also. This is very advanced stuff, but you can show the version history, meaning all the changes that have been applied to this file are being locked and you can always see who has changed to what exactly. You can change the name, you can move it, deleted, replicate, whatever. Everything is going on here in this menu. And here, this is my avatars that I am the currently only user here in this file, but others would then appear here accordingly. And there's no interaction right now. If there were other uses as well, then I could of course, click on the heads. This would then bring me to exactly the view part they are currently I'm looking at so I could observe what they're actually doing in real time. Then this button here is also quite important as it provides you with the possibility to share the file. You can share it with anyone by adding in the email address here. And you can also just copy the link and share that link with someone you want to have in the file as well. If you then add an e-mail address here, Let's just use my email address. And then I can specify if they can edit or if they can just view. This makes a huge difference. If someone is, should just be able to comment on a file, then I will not give them the permission to edit the files. And then I would just say they can view the file and then they can obviously see what, what's going on. And they can add their comments, but they cannot change or destroy or delete anything. All right, here this Play button is for playing back interactive prototypes. If we click here, it's called Present mode, but this will just open up the interactive prototypes or once everything is made interactive and I will talk about that as well. You will be able to display everything here in this, in this view, you can click here, click there, this all, of course, everything of that needs to be specified by yourself. Let's go back. And here you can change the scale of the fire. You can zoom in, zoom out. And zoom to fit new Zoom to certain percent ages and different other options. You can display rulers, Grids, whatever, can activate, Pixel Preview. So meaning a few exploiting for NP, a PNG. So I'm pixel our files then you can preview how that looks like. Because sometimes the pixels and not at the same position as you want them or thought they would be. So this is just a preview which renders the pixel view. But there's also very advanced and probably not the first thing you wanna do when using Figma. All right, so that's it for the top bar. Let's go on with the left panel. Okay, so here you can see the different frames. And I mentioned frames earlier. They are the same thing as Artboards and sketch. So they are frames that contain different objects that you want to have within a group. Let's say you would use frames and order to create, for example, a certain window, let's say a screen for any device here. In this case, those are smartphone screens, but they could also be desktop size. They could be slides that you want to use in a presentation, whatever. There are also groups, but groups are used more often for just ordering and organizing your structure. Whereas frames also can be exported as one and help you to provide a clean file at the end of your design process, you can expand all these frames. And we'll see the different, the different objects that are within the frames. So in this case, fear, for example, we have a title which is just the Invest Now label here within the button. And when I click that, you can see that only this selected let me just zoom in by pressing Command and scrolling. And as you can see, that has a blue border around this label. Right now, I've selected the move tool so I can, when I go to these partners here, drag and move around the position. We just go back one and now pick the scale tool and the hotkey was k. We see that the arrow change to this double corners. And this will now scale up the text. And as you can see, we're still in the frame. So the text will not be visible outside of the frame as it's part of this frame. And here you can see that there are even other frames within the frame. This is just the, the situation that you might find when you're working on someone else's file. So you have to maybe understand what's going on. In this case, the person that created this fire wanted to group this, this icon here, these three lines within one frame and just use the frame as a group. You could also use groups as they are here. So let's take a look at this group. It's called Group three. The icon is also different than the one from the frames. And the group in this case is the main navigation on the bottom. And if we expand this group, we can see that there's a bunch of different objects inside. So there are frames, groups, single text elements, and even a rectangle, which in this case it's the background. So let's now switch over to the right-hand pane. Here you can see that there are three tabs on the very top of this panel. The first one being designed and we have prototype and then we have inspect. The Design tab provides you with all the different options to really configure each of the different objects you're currently working on. So if I'm selecting this text, text object here, we can see a lot of options to specify exactly what we wanna do here. We can change the color, we can change the typeface, we can change the weight of the font, the font size, the text alignment, and so much more that constraints you can pick how it behaves when you scale it. So it's a lot that you can do here. You can change the position on the x and y-axis. Change the width and the height, and even the angle in which it's rotated. So it's currently at 0 degrees. And I can just change it by clicking here and then moving the mouse on the horizontal axis. And as you can see, it keeps on rotating. Of course, I can also enter here a custom value like 45 degrees, and it will rotate the object to 45 degrees. If we take a look at the Prototype tab, this shows all the interactivity that has been specified in the fire. So here you can see these blue lines and they always show you the connection of some certain object and screened state. So for example, a frame. Let's take a look at this, at this close icon here. This, this acts on gray background. As you can see, here's the blue line starting and it goes down here to the screen. Here's the, the end of the arrow. And it already shows us that there is a connection between this icon and this screen. And if I click on this line, it will show all the details. It would show me the interaction and the end result of the animation of the event that's happening. So in this case, the D event that's been recorded or that it's been tracked is a click event. So we have to click on this icon. And then what happens is it navigates to and then the name of the frame, which is Homepage. You can also see the name of the frame above each frame here, and it's called homepage. So we can also select different ones and then the arrow would move. So if we said Crawford screen can see that it moved to there, but let's just quickly change it back. And then down here you can see the animation, in this case instant, which means there's no animation, it's just an instant. Switch or change between two screens. And then if we take a look at the Inspect tab, this provides you with information that you would need for implementing these designs. So front end developers can use this CSS code and all the information that are here, all these properties for their code and it makes them, makes the life hopefully if it easier when implementing the things that the designers came up with. And here on the Design tab as well, on the bottom. This is also very important. It's right under effects. And it's called x part. And this will enable you to export whatever you want as a file that you can share. So depending on if you selected an entire frame or just a single group within a frame or an object within a frame, you can always click on Export. By clicking on plus, you're adding one option of exporting. You can add multiple if you want. Can also delete them if you want. And then you can change our specify exactly what kind of file you want to have. So we have selected this close icon here, and we can now go ahead and say, do we want it as an SVG, which is vector-based fire? Or do we want to have it as a pixel-based file, for example, a PNG. And then we can say the scale of this object, should it be just exactly as it is here, which is 26.67 times 26.67 pixels. Or should it be scaled up twice or three times or four times r? Should the width be 512 pixels? All that can be specified here. And then you can click on Export. And in this case, it's called vector because the layer or the object has been called vector. Funny enough, because it's not a vector anymore. But you can of course change that as you wish and you will be able to save your file from here. Alright, so now the last thing in this chapter is the File Explorer that I wanted to show you. So by clicking on this figma logo up here, you can see all my highly confidential files. Maybe some of them are blurred, but as you can see here on the left-hand side, there are the different teams that you can be part of. So you can have your own private team, you can have shared teams with other people. Maybe your company has a dedicated team, then within that team that will be projects. So I have two projects here. They're called libraries and projects. And so the project is called projects. And within this project, there are the different files. And you can see the preview here, and you can see the name and when the last time was it has been edited. And I'm currently working on this file called Figma for non designers. So if I double-click there that I'm in the file, and that's just the basic idea of how it works. There's another way of accessing files and that is actually exporting your current file as a dot FIG fire. We'll give you a local file that you can then save as a backup or even share. And of course you can use the Figma community, but this is something that I will probably cover in another course. So that's it for taking a look at the interface of Figma. And the next chapter we will take a look at how to work with interactive prototypes and how to set them up. So let's go. 3. Interactive Prototypes: Cool. So let's directly can into Figma and take a look at interactive prototypes. So I already explained a little bit what's going on here. So we will be mainly working in this second tab called prototype. And I want to just give you an idea of how to create these interactive prototypes and how to work with them, how to play them back, and what you can do with it. In this case, I will just quickly remove some of these interactions here and then recreate them. And then we will take a look at the final prototype and see what we can do with that. So this is a basic app layouts for trading app. And we can have some basic functionality here, just to give you, give someone the idea of how they would behave in a real world scenarios or when it has been implemented and is a proper, proper native application. So the first thing that we can do here is connecting this module with this green state. And we can do that by simply hovering above that. And this group then will be highlighted. And as we are already in the prototyping tab, we can see that there's an NADH here and it has a plus. So we can drag and drop here and move this arrow to the, to the screen that we want to link it with. And if we do that here, up here, it's always going back. So that's kind of always the back navigation you can use if you're somewhere and want to go back to the previous screen, you can use that. But in this case, we want to go to this frame called asset page. So we'll drag it above and then drop the arrow. And this will already installed this first interaction and the event that we need is on click. So that's correct. There could be others as well while hovering or mouse enter. So meaning, if the mouse goes above this area, then something will happen. Or if I drag this somewhere, then that would trigger the animation. But in this case, onclick is totally fine. And we want to have open overlay. And then we can also specify the animation. So open overlay means that this frame will be treated as another layer on top of the current frame. And the overlay is going to be centered. That's fine. They have some presets here, mostly for navigation, I would say so top-left or bottom center, but we will just use center here. We don't need any specifications, but the animation as something that's very important. So let's take a look at how it currently looks like and then decide on how we could improve this. For that, we need to click here on present. And we will start at the first screen. So this is our homepage. And as we can see, hovering above this area that we already made interactive transforms the cursor and to this point and click hand cursor. And also if we click somewhere, and the Intel interactive area will be highlighted. So let's just click here and take a look at what, what's happening. And that's we can see it instantly move to this next frame. So that's exactly what we specified. We can also, we can always go back by just hitting the R key. So this is the animation part currently looks like for me, that's not really very nice, not very delightful. Also, when we take a look here, it looks like these are cards, so there should be some sort of movement indicating what's happening. So as we said, this is going to be an overlay. The animation should also imply that an overlay has been placed on top of our screen. So let's go back to the fire and change the animation from instant to move em. Now we have four different directions. And I want to move these the screen and from the bottom to the top. So we select this arrow here. And we can leave the ease out animation and just change the duration that the animation takes down to, let's say, let's say 200 milliseconds. And let's take a look how it looks like now. And that's much, much better. So you can see there's an animation going on. It's still a bit too slow. Maybe we can even decrease the amount here to 150 hits and go back. Press R and then click again. Yeah, and I think that's, that's already predefined. Now, always pressing R is not very natural. I want to make this is close icon here, interactive as well, and link it with the first screen so that we can go back in the natural way that we would also go by using the app on our phone. And for that, I double-clicked here to access this this frame. In this case, I can also select the object in the left panel as well. And here I have the same blue bubble that converts into a plus and I can just drag and drop it. And now I have different options here. I can do back and I can close overlay. And since we want to close the overlay and not just simply go back with an incident animation. I will select this one and drop it here. Close overlay as everything we can specify now. And let's take a look how it looks like. So we'll restart it by pressing R and Click here, click there. And as you can see for closing overlay, it took the same animation as far opening that we specified, but just reverses the animation. So that's very natural and actually exactly what we wanted to do. And now the last thing that we can do here or that I want to show you is making these, this bottom navigation interactive and linking the account icon with the account page. And for that, again, I'm going to click here and I'm just double-clicking, so it goes one level deeper. And again, I'm just dragging this arrow to this page. And in this case, since it's really just a switch of the screen, there's no overlays happening. It's just an switch off the main screen by using the main navigation, I want the animation to be instant. And also I want this icon to become this I can instantly so that I don't need any animation in this, in this situation here. So I will just select Instant, and I will select this back arrow here, and we'll drag it here. So that's interactive. And we can use that to go back to the homepage. And again, let's take a look at if everything is working as we intended. So by clicking here, we instantly move to that page, which is great and backtracking here we go back and that's exactly how we wanted to do it. And you can see how quickly we were able to make this interactive. And now, as you can see, we have this Share button here which enables us to share the entire file. We can also just share the prototypes. So these files are opened and shown here in the top area as, as tabs. And the prototype always has an individual and separate tab. And you can see that it's a prototype by this triangle shape here. So when we selected this as not share anymore but share prototype. And by doing that, we can copy the link and have the same possibilities and options that we have for the normal Share menu, but only for this prototyping and interactive views. So when we share this link, people who are accessing it will not be able to access the actual file, but only the prototype, which is quite handy in some situations. So that's it for this section about interactive prototypes. In the next section, I want to talk about sharing files more in detail and how you can work with other people when you have gotten or received a shared link. So let's move on to the next chapter. 4. Sharing Files: All right, Let's talk about sharing files. Why would you share files? Multiple different reasons behind that. Probably there are even more. But the most important one would be collaboration and feedback. So if I'm creating a fire and I want someone else to work with me, I can invite them by sharing the file with them. The second one, feedback. Of course, even with designers or non designers, is a very popular example. There are many different parties involved, usually when creating digital interfaces, products, websites, whatever, as brand, responsible people, or copy our product owners and everyone or developers, of course, they want to take a look at your designs. Maybe they need to work in the designs and change the copy. Or for developers, it's, it's so important as well to export all the different acids and get all the animations right and all that stuff. In this case, I would always invite someone else to take a look at the specific position that I am currently working at and need feedback on, for example, and I do that by selecting this position here so I can select a frame, for example, in this case the frame homepage. And if this is selected, and by selecting a frame, I can click Share and then I can add some one. And in this case they're still my e-mail address here. And there's a check box down here. It's called link to select a frame. If I deselect that, then I will just send out or get generic name to this file. But if I select this checkbox, people who received my link and click on the link will only be directed directly to the frame that I have currently selected and I'm currently working on it that I need feedback on. So that's very important and very handy. The other way to share something is of course by commenting and mentioning someone. So if I want feedback on this bell icon for example, I would also as a designer, plays a comment here and as in this case, myself or any other co-worker, of course. A question, How do you like this bell icon? Then I will post that. And in this case, the user would then receive a notification which would be either within Figma or an email notification with a screenshot of this area. And the question that I wrote in the comment. And then they would be able to access exactly this position in the file and provide me with an answer. And there's also another way of sharing or another purpose for sharing. And for example, if we take a look at design systems or think of design systems. For example, this is a design system that I've been working on in the past years. It's called liquid. And we started off by creating everything in sketch and then moved over to Figma. So we're still offering the sketch file for the design system, but it also figma fire. And here we have a preview button. And if I open that in the browser, we can see that it opens up the Figma tool within the browser and provides me with the possibility to actually move around this file here within the browser, and it was some kind of sharing. So I have publicly shared this file with the world by providing the link on this website. And now everyone can move around here, obviously non-destructive. They cannot change anything, but they can have a look at it. So it's very nice way of even documenting work, sharing work with others without even necessarily collaborating, but just inviting people to your file and letting them take a look at it. And the last thing that I wanted to show you is how sharing in a file looks like. So when I click here in Figma on File and then Save As dot FIG. Then this will open up this menu here, and it's just a normal file, just a regular file that you can save and placed on your desktop. And then if we take a look here as this fire, and it includes everything that there is an order to work with the file. So it's just exported really and compatible version of your file that you can send around. If you're not, for example, working online right now and you want to share it with someone else or you need to need it to work offline. Alright, so that's it for sharing. In the last chapter, we will take a deep look at commenting and what we can do with that, how everything will look like, and how the emails even workout. So let's move on to the next chapter and see you. 5. Adding Comments: All right, so in this chapter I want to talk about sharing and adding comments. So this is probably one of the most important tasks that you're facing. Adding comments to someone else's Figma file. So we will try to play through this scenario and add someone else to our fire than inviting the receiving the invitation and then working on the file and adding our comments and then finishing our task. All right, so let's try to invite myself. In this case. We can see the email address is already there. Can view is fine. I did not select any frame. I just want them to see that the entire file, and I will just hit Send Invite. And this already added an entry for this email address here. And the setting for the permissions can view, which is totally fine. So we can close that and the e-mail just arrived. So let's open the e-mail and as we can see, there's a preview of the file, which is quite small. And it says Max has invited you to view the file Figma for non designers. And it says Open and Figma. This is for demo purposes now a bit complicated because if I would click here, it would, nothing would happen because I'm already logged in. But I am just in this case, copying the link. And I will open it in a new and cognitive window where I'm not locked in pasted. And this will open the file as it looks like for someone who has not used it before. So here's even the cursor of my alter ego and the app itself. So now I'll go ahead and sign up and create an account in order to be able to collaborate here. So we'll say sign up with email and define a password. So check on account. Even if it's my name, max, to what kind of work? Design. I know I don't agree to join fake mass mailing list, create an account. And that should be already. See. Right now it looks a bit different, right? Here's myself. And now we can even show you how it looks like to view someone else's view, right, I click here, and this is exactly the, the viewport that I selected in the app. So this is just to show you what this looks like. But now I'm able to move around. I'm not able to change anything. But I can view. I can use the hand tool to move around and of course I can use the Add or Show Comments tool. So I can even see the comment that's already here. And I can see the comment that's already there. And now I can start adding my own comments. So let's say we want to and change this color to red. I would just then tag myself, in this case, my other self and say, let's change that to red shade. I would post. And then we can now switch over to my other account. And then we would see this new comment and probably even see the notification. So here you can see there's a red bubble. This shows there's a new comment I can click here. And then it shows there's this new comment, Number 3 frees up here. I can click there. And now, Okay, I see this comment. I'm the designer, so I will select this, select this shape here, and change the fill and pick somewhat more in the red spectrum, are right. Close it, select the comment again and say max2. Done, reply and resolve. And by that, the task is completed. And that's how you can add comments to Figma. 6. Feedback: All right, we made it through the learning part of this course. I hope you all enjoyed it and we're able to take away some insights from it. Now the thing is that I really want to provide the best possible experience for you that is humanly possible. But my problem is that this way of teaching is very one directional. I don't know what you liked, I don't know what you disliked. Norway, you had issues following my content, aware you may be felt bored or whatever your emotions might have been. And that's why I asked you to provide me with feedback so that my next courses will continue to provide you with great learning experiences and continue to become better and better over time. So tell me your thoughts. Rate this course. Give me feedback because it's much appreciated. Thank you. 7. Your Class Project: All right, So now it's time for the class project. And I really want you to take a look at the files and work with them. I will provide the Figma file that I've been working on in this course. As an asset for your class project, I will remove all the interactivity and then your task to add the interactivity again, just play around and mess with the file, make it your own. Because by playing around with the file as and I will provide it as a FIG fire. And by playing around with the file, you will really understand what's going on and how it works. That's the only way really to do it at interactivity. And then just for fun, if you have two e-mail addresses or you know, someone at yourself or invite yourself, or a friend, or a colleague or a family member and then start to collaborate. Just try out how this works with adding comments and all that stuff. Just get familiar with it so that you won't be troubled anymore. Whenever you get this invite at work, when you're starting to collaborate with designers or other people that use Figma because it's so much fun and it's so effective. So share your results with me. I'm happy to provide you with feedback and maybe give you some advice on things. And yeah, I'm looking forward to see what you came up with and I'm looking forward to your feedback as well. So thanks for joining this course and see you in the next one. Goodbye.