Related Videos

• Add comments to files or prototypes

  Before you Start

  Who can use this feature

  Users on Any plan can use comments

  Users with at least View access to a File can use comments

  Comments takes collaboration to the next level. You can use Comments to respond to feedback, tweak your designs and iterate faster. All from the original design File.

  You can add Comments to Files or Prototypes.

  To enter Comment mode, click the Comment icon in the toolbar:

  

  Note: You won't be able to make any changes to Objects in the Canvas while you are viewing Comments. You will need to select another tool in the Toolbar to continue editing a File.

  Add a comment

  You can add a Comment to any location on the canvas. This can also be a specific Frame, Group or Layer.

  1. Click on the Comment icon in the Toolbar, or use the keyboard shortcut: [C].
  2. Your cursor will now appear as a Comment icon: 
  3. Click on the location in the canvas you'd like the Comment to appear. A Comment field will appear that allows you to enter your message.
  4. Type your message in the field. You can add Emoji or Mention collaborator's in your message.
  5. Click Post to send: 

  Mention a collaborator

  You can " @mention" or "at mention" collaborators in your Comments. This allows you to include them in the discussion, or draw their attention to a specific Frame or section.

  In Team Files you can mention anyone else who is in your Team.

  In Files outside of Teams, you can invite anyone you "know" in Figma:

  • This matches the collaborators that you can add via the Sharing Modal.
  • This includes people who are on the same Team, Projects or Files as you.
  • Anyone who has invited you to a File.
  • Anyone you have invited to a File.

  Add a mention to a comment

  You can add a mention when you are adding or replying to a Comment.

  1. Add a new Comment or reply to an existing Comment.
  2. In the Comment field, enter the "@" key to create a Mention. Start typing in the person's Name or Email Address. We will suggest collaborator's based on your history: 
  3. Click the Tab or Enter key to select a collaborator. Or, click on the person's name in the list.
  4. Complete the rest of your message and click Post: 
  5. We will send a notification to the person via Email, as well as in Figma (if enabled).

  Note: If you'd like to Mention someone who is missing from the list, then you will need to invite them to the File first. 

  Add emoji to a comment

  You can also add Emoji to your Comments. You can do this when adding or replying to Comments.

  1. When you are adding a Comment, click on the smiley face icon: 
  2. You can then:
     1. Use the Search bar to find the emoji you're after.
     2. Choose from your Frequently Used emoji.
     3. Browser through the catalogue of emoji.
  3. Click on the emoji to add it to your message. This will appear in short-hand, not as the emoji. Don't worry, your emoji will appear when you click Post!
  4. Click Post. Your emoji will be included along with your message: 
• View and manage comments

  Before you Start

  Who can use this feature

  Users on Any plan can use comments

  Users with at least View access to a File can use comments

  Comments takes collaboration to the next level. You can use Comments to respond to feedback, tweak your designs and iterate faster. All from the original design File.

  You can add Comments to Files or Prototypes.

  To enter Comment mode, click the Comment icon in the toolbar:

  

  Note: You won't be able to make any changes to Objects in the Canvas while you are viewing Comments. You will need to select another tool in the Toolbar to continue editing a File.

  View comments

  You can access a File's Comments by clicking the Comment icon in the main toolbar.

  From here, you can view Comments from a few places:

  In the Canvas

  Comments will be shown in the canvas where they have been added. 

  Click on a Comment icon in the canvas to view the Comment and any replies.

  From the Properties Panel

  All the comments in the file will be listed in the Properties Panel, on the right-hand side. 

  Click on the Comment in the Comments Panel to open it in the Canvas.

  Sort and filter comments

  All the comments in the file will be listed in the Properties Panel, on the right-hand side. 

  Comments are grouped by Date. Any comments made in the Last 7 days will be shown at the top, followed by any Earlier comments. 

  Within each date group, we also sort comments by Page. This follows the same order that your Pages appear in the File.

  

  The Filter at the top of the panel allows you to select which comments you'd like to view.

  1. Click the dropdown next to the All setting: 
  2. You then have two options:
     1. Choose All to view all Comments on the File.
     2. Choose Only Yours to view the comments that are relevant to you.  This includes:
     1. Comments you have ben tagged in.
     2. Comments on threads you've replied to.
     3. Comments you've created that collaborators have responded to.
  3. You can also decide if you'd like to Show resolved comments. Click on the setting to turn it off and on.

  Tip! You can also open a Comment from the notification. Click the link in your email to View Comment. If the Comment was made in Editor view, the email link will direct you to the Editor view. If the Comment was made in Presentation view, the email link will take you there instead.

  Reply to comments

  Anyone can view, add and reply to Comments, including Viewers.

  1. Open the Comment:
     1. Click on the Comment in the Canvas. 
     2. Select the Comment in the Comments Panel.
  2. The Comment box will appear with a Reply field attached. Click Reply and start typing in your message. You can add any Emoji or Mentions, as required. 
  3. Click Reply to add your Comment to the thread: 
  4. You can add further replies to the thread as needed.

  Tip! You can also reply to the Comment notification in your email inbox. We'll add any text you reply with to the thread in Figma.

  Resolve comments

  Once the feedback has been taken on board, or a resolution reached, you can Resolve the Comment. 

  This will hide the Comment from both the Comments Panel and the Canvas.

  1. Click on the Comment in the Canvas or Comments Panel to open it.
  2. Click the checkbox in the top-right corner to mark it as Resolved: 
  3. We will hide the Comment from both the Comments Panel and the Canvas.

  Note: If this has been done accidentally, you can click the checkbox again to Unresolve: You will need to turn on the Show Resolved Comments setting to view those Comments again. Learn more in the View, sort and filter Comments section.

  Delete comments

  You can also delete any Comment you post. If you delete a Comment with replies, this will delete the entire thread.

  Delete a single comment

  1. Select the Comment in the canvas, or from the Comments Panel.
  2. Click on the three dot menu next to the Comment in the Comment box: 

  

  1. Choose Delete Comment from the options:
  2. The Comment will be immediately deleted.

  Delete an entire thread

  You can also choose to delete an entire thread. This will delete both the initial Comment and any replies. 

  1. Select the Comment in the canvas, or from the Comments Panel.
  2. Click on the three dot menu next to the Comment's title.
  3. Select Delete Thread from the options:
  4. Click Delete to confirm: 
• Move or edit comments

  Before you Start

  Who can use this feature

  Users on Any plan can use comments

  Users with at least View access to a File can use comments

   Comments takes collaboration to the next level. You can use Comments to respond to feedback, tweak your designs and iterate faster. All from the original design File.

  You can add Comments to Files or Prototypes.

  To enter Comment mode, click the Comment icon in the toolbar:

  

  Note: You won't be able to make any changes to Objects in the Canvas while you are viewing Comments. You will need to select another tool in the Toolbar to continue editing a File.

  Edit comments

  You can edit the content of any Comment you've posted. This is handy if you've noticed a type, or want to add a clarification or Mention.

  1. Select the Comment in the canvas, or from the Comments Panel.
  2. Click on the three dot menu next to the Comment's title in the Comment box: 
  3. Select the Edit... option. You will then be able to edit the content of the message.
  4.  You can add Emoji or include additional Mentions if desired. Click Done to save your changes: 

  Change comment locations

  You can also change where the Comment appears on the Canvas. 

  This allows you to draw attention to a specific part of the canvas, whether this is a Frame, object or layer.

  Keep in Mind

  • If you Cut and Paste a Frame to a new location, Figma will disconnect the Comment from that Frame.
    
    While you will still be able to view that Comment in the  Comments Panel, there will no longer be a link between that Comment and the canvas.
  • If you move a Frame or Layer with Comments applied to it, we will also move the associated Comments. 
    
    If the Comment has been applied to the Canvas, not the Layer or Frame itself, the Comment won't be moved. 
  • If you duplicate a File, Figma won't copy Comments to the new File. Comments are only kept on the original File.

  1. Click on the Comment icon to view the Comments on the File.
  2. Click on the Comment icon in the canvas.
  3. Drag the Comment to its new location.

  Tip! You can move an Object with an associated Comment to another page. Right-click on the Object and choose Move to page.
  
  

• Follow Along with Observation Mode

  Before you Start

  Who can use this feature

  Users on Any plan

  Users with View or Edit access to a File or Prototype can use Observation mode

  Whenever you view a File or Prototype, we will also add your avatar to the toolbar. This allows everyone to see who is currently accessing the File.

  If you click on a person's avatar, you will enter Observation Mode.

  Like screen-sharing, Observation Mode shows you what's happening on their screen, in Figma.

  This allows you to follow along with their actions and track each movement they make in the canvas. This includes actions like zooming in on the canvas, or switching between pages.

  You won't be able to see actions with the toolbar, sidebars, or anything outside of the canvas.

  Note: We won't tell someone if you follow them in Observation Mode. We do still show your cursor's location when you're in Observation Mode. If they have Multiplayer Cursors enabled, they will be able to see your cursor in their viewport.

  Use Observation Mode in a File

  You can use Observation Mode when you are view a File in the Editor. This allows you to track another user's actions as they move around the File.

  You can use this to:

  • Walk-through designs with remote collaborators
  • Present designs during a design crit
  • Demonstrate tasks and specific actions
  • Reference a particular part of the File when talking with collaborators
  • Remove the need for screen-sharing when you have a slow internet connection
  • Follow students as they complete exercises

  Whenever you access a File, we will add your avatar to the toolbar. This allows everyone to see who is currently accessing the File.

  We will give each collaborator's avatar a color, which we use when you are in Observation Mode.

  1. In the toolbar, click on a person's avatar to enter Observation Mode:
  2. We will show a border around your canvas, in the color of the person's avatar. You will see a confirmation at the top of the screen that you are "Observing Team Member".
  3. You can now see their actions as they move through the Prototype.
     • We will mirror what they can see in their viewport. This includes their location, zoom level and page.
     • We'll include their cursor so you can see exactly where they are.
     • We don't show any interactions they have with the Figma UI (Tool bar and sidebars). You can still see their cursor's location as they interact with the Figma UI.

  Looking for more creative ways to use Observation Mode? Check out our Figma feature highlight: Observation Mode.

  Use Observation Mode in a Prototype

  You can Observation Mode while you are in Presentation View. This allows you to follow along with a user while they interact with your Prototype.

  You can use this to:

  • Walk-through Prototype Interactions with remote collaborators
  • Track what actions a user is performing during a usability test
  • Switch between presenter views during a presentation
  • Remotely control a presentation from your phone

  1. Open the Prototype in Presentation View.
  2. Hover over the top of the screen to show the menu bar.
  3. Click on the user's Avatar in the menu bar to enter Observation Mode:
  4. You can then see their actions as they move through the Prototype. We'll include their cursor so you can see exactly where they are.

  Tip! If someone has logged in to Figma, we will show their profile picture and display name. If they aren't logged in, we will show a question mark icon and an "Anonymous" name.

  Exit Observation Mode

  To exit Observation Mode, you can interact with your screen in the following ways:

  • Selecting an object in the Canvas
  • Zooming in or out
  • Navigating out of the current viewport e.g. pan around the canvas

  In a Prototype, you can exit Observation Mode by interacting with the Prototype. This won't affect what the person you were observing sees at their end. Although, they could choose to now follow along with your actions!

• Share designs with Developer Handoff

  Before you Start

  Who can use this feature

  Users on Any Plan can use this functionality

  Users with Edit access to a File can set up files for developer handoff

  Users with View access to a File can only access the Code panel and the layers list

  While handing off designs to developers frequently happens after a major project milestone, here are some things you can do earlier in the design process to set up your files to improve handoff:

  Check out our Developer Handoff video to see this feature in action.

  Want to learn how other companies are approaching Developer Handoff? Check out our blog post: A Guide to Developer Handoff.

  Set up Files for Collaboration

  There are lots of different ways to collaborate in Figma. We've rounded up a few tips that we've used ourselves, or seen in action.

  Files

  • Right-click any Frame and set a Custom Thumbnail so you can identify Files at a glance. The Thumbnail can also include information such as the Project's current status.
  • Link to Figma Design Files in your project specification documents or project plans.
  • Create "Sticky note" Components and add them to the canvas to explain or draw attention to design decisions.
  • Apply Export Settings to Frames, Components and Assets your Developers may need to export for the final production build.

  Pages

  • Name Pages descriptively to let others know what's ready for development.
  • Create a single page with Instances of all your Components. Collaborators only have to check this page, as you make changes to your Components.
    • Right click on a Component and choose Move to Page or check out the Component Page plugin.

  Styles and Components

  • Give Styles relevant and descriptive names.
  • Add Component Documentation to your Design System. Collaborators can use Go to Master Component to learn more about how to use it.
  • Name Layers and Components based on their IDs
  • Add meaningful descriptions to Components:
    • When and how collaborators can use them
    • Any variants or states
    • Accessibility and contrast guidance

  Want to a bit more detail? Check out our Tips for a better developer workflow post.

  Invite Collaborators to Files and Prototype

  You can invite collaborators to a Prototype, or to the File itself.

  • Invite a Collaborator to a File
  • Share a Prototype

  Note: If you share a Prototype URL with a collaborator, they will be able to access the underlying File via the URL.

  When inviting someone to a File, you can choose to give them access as a Viewer or Editor. In most situations, inviting a collaborator as a Viewer will be enough.

  Viewers can:

  ✅ Select layers from the Layers Panel or Canvas
  ✅ View properties of selected Layers in the Code panel
  ✅ Copy text content from Text objects
  ✅ Measure distances between objects in the Canvas
  ✅ Add or reply to Comments in Files and Prototypes
  ✅ View Prototypes in Presentation View
  ✅ Access Master Components via the Go To Master Component link

  Note: You have the option to Allow Viewers to copy and share the contents of a File. If you enable this, Viewers will not be able to explore or export assets from a File.

  Use the Code Panel

  Editors can access both the Design or Prototype tabs in the Properties Panel. Viewers only have access to the Code tab.

  The Code tab allows you to see how to express objects in code.

  1. Select an object to view its properties in the Code panel. 
     
     

     Tip! Use the Select Parent(s) keyboard shortcut to jump to a layer's parent Frame:

     • Mac:   Shift Return
     • Windows:   Shift Enter
  2. Choose between the following formats:
     1. CSS (CSS only, no HTML)
     2. iOS (Swift)
     3. Android (XML)
  3. Switch between a Code view and a Table view using the toggles:

  The Code view shows you snippets of code based on the language you selected. These may serve as a useful reference while you're implementing a design. This includes:

  • Names and Descriptions of any Components
  • Names and Descriptions of any Styles
  • View the text within a Text object
  • Any alternative values available for the selected object

  The Table view shows you a list of attributes for that object. This includes:

  • The X and Y co-ordinates of the layer based on its position on the Canvas
  • The Width (W) and Height (H) of the object
  • View detailed information about Text properties e.g. Font Family, Size, Font-weight, Line-Height etc.
  • A swatch and color profile of any Colors

  Tip! When you have the Code tab open, you can quickly measure distances without using the modifier key:

  1. Select an Object or Layer
  2. Hover over nearby Objects to view the distance between them

  Notes on CSS

  • The CSS option only shows CSS. There is no way to export full HTML code.
  • Switch to the Table view yo view a list of all properties applied to a layer
  • If the font-weight is set to Normal this means it uses that Font's default font-weight
  • If you are missing some text attributes, check that you have the same Font installed. If not, you can Use Local Fonts with Figma Font Helper.
  • We only show text styles and properties that you have applied to the entire Text object. If you have properties applied to some text (e.g. link styling), we won't show these.
  • We show CSS positions in Pixels. To show these as a Percentage of the viewport, you can apply Scale constraints to your objects.

  Notes on iOS

  • We only display colors in RGBa format. This is because iOS uses UIcolor which is based on RGBA values. This results in an 8 hexadecimal value, where the last two values represent the color's Opacity (a).
  • Our Frame Presets and iOS code are set in Points, not Pixels. This allows you to create assets for screens at multiple Pixel Densities. While you can't access these variations in the Code panel, you can export any asset at a density of 1x, 2x and/or 3x.

  Notes on Android

  • We use the ARGB color profile for Android Code. This results in an 8 hexadecimal value, instead of the usual 6. The first two hexadecimals will refer to the color's Opacity (A).
  • Our Android Code output takes into account the recommended 24dp height of the status bar.

  Copy Text

  We've made copying Text as a Viewer quick and easy.

  1. Select the Text Layer (in the Layers Panel or Canvas)
  2. Copy the text using the keyboard shortcut
     • MacOS: Command C
     • Windows: Ctrl C
  3. You can now Paste the text anywhere.

  Export Assets

  You - or a collaborator - may need to export your designs as part of the development process. We support the following export formats:

  • Export to PNG
  • Export to JPG
  • Export to SV
  • Export to PDF

  To export your assets from Figma you need to:

  1. Make your Selection
  2. Apply Export Settings to your Selection
  3. Export your Current Selection from the Properties Panel
  4. Export all Assets from the Export List

  To speed up the process for developers or engineers, you can do the first two steps yourself. This will add all those assets to your Export List. The developer/engineer can then export all those assets at once via the Export List.

  You can access your Export list from a few places:

  1. Go to the Menu (☰) and Search for the Export setting.
  2. Go to the Menu (☰), select File and then Export from the options.
  3. Use the Keyboard shortcuts to open the Export list
     • macOS: Shift Command E
     • Windows: Shift Ctrl E

  Learn more about using the Export List in our Getting Started with Exports article.

  Note:  You can also add your own Export settings, on top of the original settings added by the designer. We won't update these for other Viewers or Editors on the File.