1 00:00:00,580 --> 00:00:04,550 Often times you'll need images of your designs for things like email, 2 00:00:04,550 --> 00:00:06,890 print, PDFs and so forth. 3 00:00:06,890 --> 00:00:12,740 We can do this in the inspector by adding an export under the DESIGN tab. 4 00:00:12,740 --> 00:00:17,765 So if we switch over to a DESIGN tab, and then just click anywhere 5 00:00:17,765 --> 00:00:23,363 in the blank area to select the canvas, if it's not already selected. 6 00:00:23,363 --> 00:00:27,970 And then in the Inspector click the + button next to EXPORT. 7 00:00:29,010 --> 00:00:34,080 There are several settings here, you can export this at 1x resolution. 8 00:00:34,080 --> 00:00:37,260 Or if it's needed at a higher resolution, or 9 00:00:37,260 --> 00:00:41,080 even a lower resolution, there are several additional options here. 10 00:00:42,100 --> 00:00:47,790 Then, you can add a suffix, which will be added to the end of the file name, 11 00:00:48,910 --> 00:00:53,140 and finally, there is a drop down for the file format. 12 00:00:54,160 --> 00:00:58,390 This will default to PNG but it also has options for 13 00:00:58,390 --> 00:01:03,800 JPEG and SVG depending on what file format you want. 14 00:01:03,800 --> 00:01:07,700 If you are not sure what to pick here, PNG is most likely what you want, 15 00:01:07,700 --> 00:01:11,530 because it won't apply compression to the image, like JPEG. 16 00:01:12,770 --> 00:01:17,690 SVG is a vector format, which is useful for display on the web. 17 00:01:18,870 --> 00:01:24,900 Then, just below the EXPORT settings, there's a Preview drop down, 18 00:01:26,060 --> 00:01:30,020 so you can see what this is going to look like once it's exported. 19 00:01:31,040 --> 00:01:35,858 And, there's also a button just above that, that says Export Prototype, 20 00:01:35,858 --> 00:01:38,580 which is actually just a name of this file. 21 00:01:38,580 --> 00:01:41,215 So it says Export, and then whatever the file name is. 22 00:01:42,918 --> 00:01:48,543 And if we click that it will ask us what we want to export, 23 00:01:48,543 --> 00:01:53,573 and we don't need these smaller icons we just want 24 00:01:53,573 --> 00:01:58,603 these prototype, and then we can click Export and 25 00:01:58,603 --> 00:02:02,832 it will immediately download the image. 26 00:02:05,465 --> 00:02:09,436 So there is our prototype saved as an image. 27 00:02:12,275 --> 00:02:18,025 So we can export the entire canvas, but we can also export frames. 28 00:02:18,025 --> 00:02:19,684 We'll select each one of these frames. 29 00:02:22,919 --> 00:02:30,210 And then, with all three selected, on the right side, we can add an EXPORT. 30 00:02:32,079 --> 00:02:37,989 And then if we just select one of these, it will show us a preview and same thing, 31 00:02:37,989 --> 00:02:43,655 we can click this button, Export Sharing, which is the name of this frame. 32 00:02:43,655 --> 00:02:45,638 And if we click it on a frame, 33 00:02:45,638 --> 00:02:50,530 it will just immediately download that image that we've specified. 34 00:02:51,840 --> 00:02:54,060 However, if we just download images, 35 00:02:54,060 --> 00:02:57,300 they don't have any of the interactivity that we created. 36 00:02:58,430 --> 00:03:01,785 To share that, click the Present button in the upper right, 37 00:03:01,785 --> 00:03:06,060 to go back into presentation mode. 38 00:03:06,060 --> 00:03:10,051 And then once you're in presentation mode click 39 00:03:10,051 --> 00:03:13,955 the Share Prototype button in the upper right. 40 00:03:13,955 --> 00:03:17,599 And right now, anyone on my team can access this prototype. 41 00:03:17,599 --> 00:03:24,168 However, we can change this to public by clicking Enable public access. 42 00:03:26,729 --> 00:03:32,360 Now, anyone with the link to this prototype can access it. 43 00:03:32,360 --> 00:03:35,670 If you click on the hyperlink that says the link, 44 00:03:37,420 --> 00:03:40,560 it will be copied to your clipboard. 45 00:03:40,560 --> 00:03:45,595 And then you can paste it into something like an email to a client. 46 00:03:45,595 --> 00:03:51,880 Now let's go back to the file view by closing this presentation tab. 47 00:03:51,880 --> 00:03:58,736 And another way to share files is to click the Share button at the top of the screen. 48 00:04:00,155 --> 00:04:05,727 And then invite other people from your team, you can also set their permissions, 49 00:04:05,727 --> 00:04:09,358 by default they'll just be able to view the file, but 50 00:04:09,358 --> 00:04:11,634 you can also change this to edit. 51 00:04:11,634 --> 00:04:15,617 So let's say that we have another person on our team and 52 00:04:15,617 --> 00:04:18,137 we've invited them to this file. 53 00:04:18,137 --> 00:04:24,400 Let me show you what it looks like when two people have the same Figma file open. 54 00:04:24,400 --> 00:04:28,240 To do that, I'm going to copy the URL to this file. 55 00:04:29,590 --> 00:04:32,815 I'm going to open a new browser window and paste it. 56 00:04:37,201 --> 00:04:40,844 And then I'm going to move these two browser windows so 57 00:04:40,844 --> 00:04:44,179 that they are side by side, as best as we can here. 58 00:04:46,089 --> 00:04:50,071 And now, if I'm over in this window, 59 00:04:53,154 --> 00:04:58,026 You can see on the right side that I'm also able to see the cursor of 60 00:04:58,026 --> 00:05:00,695 the person that I'm working with. 61 00:05:00,695 --> 00:05:05,623 So on the left side in my own view if I move something around, 62 00:05:05,623 --> 00:05:11,538 the person I'm sharing it with on the right side can see those changes, 63 00:05:11,538 --> 00:05:14,314 so I'm just going to undo those. 64 00:05:14,314 --> 00:05:16,185 And close this second window. 65 00:05:18,256 --> 00:05:24,337 This type of real time editing capability is best paired with a voice chat or 66 00:05:24,337 --> 00:05:25,505 a video call. 67 00:05:25,505 --> 00:05:29,630 In addition, once a design or prototype is shared, 68 00:05:29,630 --> 00:05:32,834 anyone can make comments on the design. 69 00:05:32,834 --> 00:05:37,720 So at the top, let's click the Comment button. 70 00:05:37,720 --> 00:05:40,360 That looks like a little cartoon speech bubble. 71 00:05:42,290 --> 00:05:48,640 And then we can click anywhere on our designs using this orange cursor. 72 00:05:48,640 --> 00:05:54,450 So I'll just click on the gallery here, for example, and when you do this, 73 00:05:54,450 --> 00:05:59,850 a text box appears allowing to you to write a comment for everyone to see. 74 00:05:59,850 --> 00:06:05,450 So lets write a comment and post it, I'll say, 75 00:06:05,450 --> 00:06:12,315 let's talk about this gallery view, and I'll hit Post. 76 00:06:13,940 --> 00:06:17,588 And so now, I can exit that comment view, and 77 00:06:17,588 --> 00:06:22,590 if I'm just editing normally, I don't see those comments. 78 00:06:22,590 --> 00:06:24,951 But if you hit Show Comments, 79 00:06:24,951 --> 00:06:29,400 it will show you where there are comments on the canvas. 80 00:06:31,066 --> 00:06:35,565 So if I click on this, other people can reply to it or if we're all done 81 00:06:35,565 --> 00:06:40,880 talking about it, you can click the Resolve button to dismiss it. 82 00:06:40,880 --> 00:06:44,662 This feature is real useful for giving feedback on a design, 83 00:06:44,662 --> 00:06:49,484 because people can write their thoughts and associate them with a particular 84 00:06:49,484 --> 00:06:52,760 part of the design rather than the design as a whole. 85 00:06:52,760 --> 00:06:57,520 There are many more features in Figma, but that covers the highlights. 86 00:06:57,520 --> 00:07:01,883 Like I said at the beginning, you don't always need to create high fidelity 87 00:07:01,883 --> 00:07:04,215 markups like this with interactivity. 88 00:07:04,215 --> 00:07:08,770 Sometimes a pen and paper or a simpler tool will work. 89 00:07:08,770 --> 00:07:13,330 However, Figma is a really great option when you're getting closer to writing 90 00:07:13,330 --> 00:07:17,617 code, or if you have a client that's having trouble visualizing how a wire 91 00:07:17,617 --> 00:07:20,015 frame will look, as a finished product. 92 00:07:21,784 --> 00:07:26,264 I encourage you to keep going and try to prototype some simple apps or 93 00:07:26,264 --> 00:07:28,150 websites in Figma. 94 00:07:28,150 --> 00:07:33,450 Practicing now with an idea in mind, will help prepare you for the real thing.