Sharing Figma Files: Commenting, Testing, Developers, etc.

Topics covered in this Figma tutorial:

Sharing a Figma file, Sharing a Prototype, Commenting on shared files, Viewing a prototype for user testing, Specs for developers

Exercise Preview

Exercise Overview

In this exercise, you’ll learn how to share Figma files with clients, users for testing, or developers.

Opening or Uploading the File

1. If you still have Pulse - Prototyping Done.fig open from a previous exercise, skip the next section (about sharing). Otherwise open it as follows:

   In Figma, if you’re not on the homescreen (file browser), do the following:

   • In the Desktop app: Click the Home tab (Mac users can also choose File > Open File Browser).
   • In the Web app: Click the Main menu button and choose Back to files.

2. If you previously uploaded the file, double–click on Pulse - Prototyping Done to open it.

   If you have not uploaded the file, click Import file (may be an icon near the top right). Then navigate into Desktop > Class Files > Figma Class > Pulse and double–click on Pulse - Prototyping Done.fig to open it.

Sharing a Figma File

You can share Figma files or prototypes, which are 2 different things! Let’s start by sharing a file.

1. Make sure nothing is selected.

2. At the top right of the window, click Share.

   Here you control who will have access to this file. Your capabilities depend on what plan you have. For example the free Starter plan has limitations explained at tinyurl.com/fig-plans and tinyurl.com/fig-sp

3. Set the following:

   • The permissions should already be set to Anyone with the link but if it’s not and you see Only people invited to this file, change it to Anyone with the link.
   • To the right of that, set the menu to can view.
4. At the bottom left of the dialog, click Copy link.

5. In a web browser open a new incognito tab (so you won’t be logged into Figma) as follows:

   • In Chrome or Safari hit Cmd–Shift–N (Mac) or Ctrl–Shift–N (Windows).
   • In Firefox hit Cmd–Shift–P (Mac) or Ctrl–Shift–P (Windows).

6. Paste the link into the address bar and hit Return (Mac) or Enter (Windows) to go there.

7. People who are not logged into a Figma account can:

   • View the file.
   • At the top right of the window, click the Present button . Some browsers (like Safari) may block the pop-up window unless you give it permission (in Safari an icon will appear in the address bar which you can click to open the pop-up).

8. People who are logged into their Figma account can do those same things plus:

   • Select elements and in the Inspect panel on the right, get specifications on the right (such as CSS), which is useful for coders/developers.
   • Select things and in the Export panel on the right, export that selection as you would if you’re using Figma normally (as we learned in the previous exercise).

   • Use the Comment tool (in the toolbar at the top left).

     They choose the tool and click anywhere to add a comment. They can type @ and then choose someone specific to mention in their comment.

9. Close the browser window.

Sharing a Prototype

1. Back in Figma (the Desktop app or the website where you’re logged into your account), close the sharing options if they’re still open.
2. Make sure nothing is selected.
3. At the top right of the window, click Present or hit Cmd–Option–Return (Mac) or Ctrl–Alt–Enter (Windows).
4. At the top right of the present window, click Share prototype.

5. Set the following:

   • The permissions should already be set to Anyone with the link but if it’s not and you see Only people invited to this file, change it to Anyone with the link.
   • To the right of that, set the menu to can view.
6. At the bottom left of the dialog, click Copy link.

7. In a web browser open a new incognito tab (so you won’t be logged into Figma) as follows:

   • In Chrome or Safari hit Cmd–Shift–N (Mac) or Ctrl–Shift–N (Windows).
   • In Firefox hit Cmd–Shift–P (Mac) or Ctrl–Shift–P (Windows).

8. Paste the link into the address bar and hit Return (Mac) or Enter (Windows) to go there.

   Unlike last time where you could see the whole file, this will only show you the prototype.