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

Topics Covered in This Figma Tutorial:

Master the essentials of Figma collaboration: sharing files securely, distributing prototypes for testing, managing comments and feedback, conducting effective user testing sessions, and delivering precise specifications to developers.

Exercise Preview

Exercise Overview

Effective collaboration is the cornerstone of successful design projects. In this comprehensive exercise, you'll master Figma's sharing capabilities, learning how to securely distribute files to clients, coordinate user testing sessions, and provide developers with pixel-perfect specifications. These skills are essential for modern design workflows where seamless handoffs can make or break project timelines.

Opening or Uploading the File

1. If you still have Pulse—Prototyping Done.fig open from a previous exercise, skip ahead to the sharing section. Otherwise, open it using the following method:

   Navigate to Figma's file browser if you're not already there:

   • 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 haven't uploaded the file yet, click Import file (located near the top right). Then navigate to Desktop > Class Files > Figma Class > Pulse and double–click on Pulse—Prototyping Done.fig to open it.

Sharing a Figma File

Understanding the distinction between sharing files and prototypes is crucial for effective collaboration. Files give access to the complete design system, while prototypes focus specifically on the interactive experience. Let's begin with file sharing.

1. Ensure nothing is selected on your canvas.

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

   This opens Figma's permission center, where you control file access. Your available options depend on your current plan—Starter plans have specific limitations regarding team sharing and collaboration features. For the latest details on plan capabilities, reference Figma's official documentation at tinyurl.com/fig-plans and tinyurl.com/fig-sp

3. Configure the following sharing settings:

   • Verify permissions are set to Anyone with the link. If you see Only people invited to this file, change it to Anyone with the link for broader accessibility.
   • Set the permission level to can view in the adjacent dropdown menu.
4. Click Copy link at the bottom left of the dialog.

5. Open a new incognito/private browsing window to simulate the recipient's experience (this ensures you're not logged into Figma):

   • Chrome or Safari: Cmd–Shift–N (Mac) or Ctrl–Shift–N (Windows)
   • Firefox: Cmd–Shift–P (Mac) or Ctrl–Shift–P (Windows)

6. Paste the link into the address bar and press Return (Mac) or Enter (Windows) to navigate to the shared file.

7. Visitors without Figma accounts can perform these actions:

   • Browse and examine the complete design file
   • Click the Present button at the top right to view prototypes. Note that some browsers (particularly Safari) may block pop-ups initially—look for permission prompts in the address bar.

8. Logged-in Figma users gain additional capabilities beyond basic viewing:

   • Select design elements to access detailed specifications in the Inspect panel, including CSS properties, dimensions, and styling details—invaluable for developer handoffs
   • Export selected elements using the Export panel, maintaining the same functionality as standard Figma usage

   • Collaborate using the Comment tool from the top toolbar.

     Simply select the tool and click anywhere on the design to add contextual feedback. Use the @ symbol followed by a team member's name to ensure they receive notifications about your comment.

9. Close the browser window to continue with the next section.

Sharing a Prototype

Prototype sharing creates a focused, distraction-free environment perfect for user testing and stakeholder presentations. Unlike file sharing, this method eliminates design clutter and presents only the interactive experience.

1. Return to your main Figma window (Desktop app or logged-in web session) and close any open sharing dialogs.
2. Ensure no elements are selected on your canvas.
3. Launch presentation mode by clicking Present at the top right, or use the keyboard shortcut Cmd–Option–Return (Mac) or Ctrl–Alt–Enter (Windows).
4. In the presentation window, click Share prototype at the top right.

5. Apply these sharing configurations:

   • Confirm permissions are set to Anyone with the link. If you see Only people invited to this file, update it to Anyone with the link.
   • Set the permission level to can view in the adjacent menu.
6. Click Copy link at the bottom left of the dialog.

7. Open a new incognito/private browsing window:

   • Chrome or Safari: Cmd–Shift–N (Mac) or Ctrl–Shift–N (Windows)
   • Firefox: Cmd–Shift–P (Mac) or Ctrl–Shift–P (Windows)

8. Paste the prototype link and press Return (Mac) or Enter (Windows) to access it.

   Notice the key difference: instead of viewing the complete file with all its design elements, you'll see only the clean, interactive prototype—ideal for user testing sessions where you want participants focused solely on the experience.