Sharing Designs7:34 with Nick Pettit
In Figma, there are several different ways to share designs with other people. You can share static images, but you can also share your interactive prototypes.
Often times you'll need images of your designs for things like email, 0:00 print, PDFs and so forth. 0:04 We can do this in the inspector by adding an export under the DESIGN tab. 0:06 So if we switch over to a DESIGN tab, and then just click anywhere 0:12 in the blank area to select the canvas, if it's not already selected. 0:17 And then in the Inspector click the + button next to EXPORT. 0:23 There are several settings here, you can export this at 1x resolution. 0:29 Or if it's needed at a higher resolution, or 0:34 even a lower resolution, there are several additional options here. 0:37 Then, you can add a suffix, which will be added to the end of the file name, 0:42 and finally, there is a drop down for the file format. 0:48 This will default to PNG but it also has options for 0:54 JPEG and SVG depending on what file format you want. 0:58 If you are not sure what to pick here, PNG is most likely what you want, 1:03 because it won't apply compression to the image, like JPEG. 1:07 SVG is a vector format, which is useful for display on the web. 1:12 Then, just below the EXPORT settings, there's a Preview drop down, 1:18 so you can see what this is going to look like once it's exported. 1:26 And, there's also a button just above that, that says Export Prototype, 1:31 which is actually just a name of this file. 1:35 So it says Export, and then whatever the file name is. 1:38 And if we click that it will ask us what we want to export, 1:42 and we don't need these smaller icons we just want 1:48 these prototype, and then we can click Export and 1:53 it will immediately download the image. 1:58 So there is our prototype saved as an image. 2:05 So we can export the entire canvas, but we can also export frames. 2:12 We'll select each one of these frames. 2:18 And then, with all three selected, on the right side, we can add an EXPORT. 2:22 And then if we just select one of these, it will show us a preview and same thing, 2:32 we can click this button, Export Sharing, which is the name of this frame. 2:37 And if we click it on a frame, 2:43 it will just immediately download that image that we've specified. 2:45 However, if we just download images, 2:51 they don't have any of the interactivity that we created. 2:54 To share that, click the Present button in the upper right, 2:58 to go back into presentation mode. 3:01 And then once you're in presentation mode click 3:06 the Share Prototype button in the upper right. 3:10 And right now, anyone on my team can access this prototype. 3:13 However, we can change this to public by clicking Enable public access. 3:17 Now, anyone with the link to this prototype can access it. 3:26 If you click on the hyperlink that says the link, 3:32 it will be copied to your clipboard. 3:37 And then you can paste it into something like an email to a client. 3:40 Now let's go back to the file view by closing this presentation tab. 3:45 And another way to share files is to click the Share button at the top of the screen. 3:51 And then invite other people from your team, you can also set their permissions, 4:00 by default they'll just be able to view the file, but 4:05 you can also change this to edit. 4:09 So let's say that we have another person on our team and 4:11 we've invited them to this file. 4:15 Let me show you what it looks like when two people have the same Figma file open. 4:18 To do that, I'm going to copy the URL to this file. 4:24 I'm going to open a new browser window and paste it. 4:29 And then I'm going to move these two browser windows so 4:37 that they are side by side, as best as we can here. 4:40 And now, if I'm over in this window, 4:46 You can see on the right side that I'm also able to see the cursor of 4:53 the person that I'm working with. 4:58 So on the left side in my own view if I move something around, 5:00 the person I'm sharing it with on the right side can see those changes, 5:05 so I'm just going to undo those. 5:11 And close this second window. 5:14 This type of real time editing capability is best paired with a voice chat or 5:18 a video call. 5:24 In addition, once a design or prototype is shared, 5:25 anyone can make comments on the design. 5:29 So at the top, let's click the Comment button. 5:32 That looks like a little cartoon speech bubble. 5:37 And then we can click anywhere on our designs using this orange cursor. 5:42 So I'll just click on the gallery here, for example, and when you do this, 5:48 a text box appears allowing to you to write a comment for everyone to see. 5:54 So lets write a comment and post it, I'll say, 5:59 let's talk about this gallery view, and I'll hit Post. 6:05 And so now, I can exit that comment view, and 6:13 if I'm just editing normally, I don't see those comments. 6:17 But if you hit Show Comments, 6:22 it will show you where there are comments on the canvas. 6:24 So if I click on this, other people can reply to it or if we're all done 6:31 talking about it, you can click the Resolve button to dismiss it. 6:35 This feature is real useful for giving feedback on a design, 6:40 because people can write their thoughts and associate them with a particular 6:44 part of the design rather than the design as a whole. 6:49 There are many more features in Figma, but that covers the highlights. 6:52 Like I said at the beginning, you don't always need to create high fidelity 6:57 markups like this with interactivity. 7:01 Sometimes a pen and paper or a simpler tool will work. 7:04 However, Figma is a really great option when you're getting closer to writing 7:08 code, or if you have a client that's having trouble visualizing how a wire 7:13 frame will look, as a finished product. 7:17 I encourage you to keep going and try to prototype some simple apps or 7:21 websites in Figma. 7:26 Practicing now with an idea in mind, will help prepare you for the real thing. 7:28
You need to sign up for Treehouse in order to download course files.Sign up