Related Videos

• Use the Inspect panel

  Before you Start

  Who can use this feature

  Users on any team or plan.

  Users with can edit access to a file can access the Design tab of the right sidebar.

  Users with can view access to a file can only access the Inspect, Export tabs, and the Layers panel in the left sidebar.

  The Inspect tab lets you and your collaborators view and copy the existing code and values for your designs. Copy single line items or entire sets of values to make the development process easier.

  Editors can access both the Design and Prototype tabs in the right sidebar. Viewers only have access to the Inspect and Export tabs.

  View property values

  Use the Inspect panel to view and copy values for your selection.

  1. Properties include values for an object's dimensions and constraints
  2. View Content in a text layer
  3. View the Typography values for a text layer, including font, weight, line height, and more.
  4. Use the Color section to view values in Hex, RGB, CSS, HSL, and HSB formats.
  5. Copy values for an object's Shadows and Borders.
  6. View your selection's Code in CSS, iOS, and Android.

  

  Copy values

  Each section of the Inspect panel lets you copy individual values or entire sets of related properties.

  1. Select an object or layer in the canvas or Layers panel.
  2. In the Inspect panel, hover over the section you'd like to copy values from. For example, select a text layer to copy the Content or a layer to copy its Color or Shadow values.
  3. Click the blue Copy button to copy all values in the section, or click a single line item to copy a single value.
  4. Paste the copied value(s) anywhere.

  

  Export assets

  You or a collaborator may need to export your designs as part of the development process. Figma supports the following export formats: PNG, JPG, SVG, and PDF.

  Learn more about exports in Figma →

  To export your assets:

  1. Make your selection and click in the Export section.
  2. Access the export options in the right sidebar:
     • Collaborators with can view access can access export settings from the Export tab of the right sidebar.
     • Collaborators with can edit access can can find the Export section in the Design tab.
  3. Apply export settings to your selection.
  4. Export your current selection.

  

  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 > File > Export.
  2. Use the keyboard shortcut to open the Export list:
     • Mac: ⇧ Shift - ⌘ Command - E
     • Windows: Shift + Ctrl + E

  Learn more about exports in Figma →

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

  View code

  The Code section of the Inspect tab shows you how to express objects in code.

  1. Select an object to view its properties in the Inspect panel. Use the Select Parent keyboard shortcut to jump to a layer's parent frame:

     • Mac: ⇧ Shift - Return
     • Windows: Shift + Enter

  2. Choose between the following formats:

     • CSS (CSS only, no HTML)
     • iOS (Swift)
     • Android (XML)

  3. Switch between  Code view and  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 content of a text layer
  • 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 the CSS notation for any colors

  Tip! When you have the Inspect 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 to see a list of all properties applied to a layer or object.
  • If the font style 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.
  • Figma shows CSS positions in pixels. To show these as a percentage of the viewport, apply scale constraints to your objects.

  Notes on iOS

  • Figma only displays 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 view, you can export any asset at a density of 1x, 2x and/or 3x.

  Notes on Android

  • Figma uses 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.
• 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.
  
  

• Adjust comment notification settings

  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. 

  We will notify you when you receive new comments on your files. You can turn email notifications off or on, for each File. 

  Email notifications

  Note: If you are the owner of the File, your notification settings will be set to All comments by default.

  If you're not the owner of a File, you'll receive notification for Only Yours by default. The first time you comment on a File, we'll notify you of your settings and give you the option to Manage them.

  1. Click the Edit icon at the top of the Comments Panel:
  2. In the modal, select which Comment threads you want to be notified of. There are three options:
     1. All Comments
        This is the default for File Owners. This setting will notify you of:
        
        • Any Comments made on that File.
        • Any @ mentions that specifically mention you.
        • Any replies to threads you've created or participated in
     2. Only Yours
        This is the default for Collaborators that comment on a File. This setting will notify you of:
        • Any @ mentions that specifically mention you.
        • Any replies to threads you've created or participated in
     3. None
        You won't be sent any email notifications for new comments. You will still receive an email for any @mentions, even if you have None selected.
        1. All comments
        2. Only Yours
        3. None
           
  3. Click the "X" to close the modal.

  Depending on your settings, you may also receive a notification in the Figma app. You can turn off notifications for all "Activity from other users" in your Account Settings. Learn more in our Stay in the loop with Notifications article.

  Slack notifications

  You can also set up Slack notifications for Comments. This allows you to receive notifications for any Comments made on Files in a given Project. You can choose which Slack channel to send notification to.

  We won't notify you via Slack if a collaborator @mentions you in another Project. Only Projects with Slack enabled will send notifications for mentions. Learn more in our Receive comment notifications in Slack

  Note: You can also receive in-app notifications for any Comments, @Mentions or Activity from other users. You can enable or disable these in your Account Settings. Learn more in our Stay in the loop with Notifications article.

• 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!

• Optimize design files for developer handoff

  Before you Start

  Who can use this feature

  Users on any team or plan

  Users with can edit access to a file can set up files for developer handoff

  Users with can view access to a file can only access the Inspect 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.

  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 Main 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 prototypes

  You can invite collaborators to a prototype, or to the file itself.

  • Share a prototype
  • Invite a collaborator to a file

  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 Inspect 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 components via the Go to Main 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.

  Learn how to view code for your designs with the Inspect panel →