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 the 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 color models.
  5. Copy values for an object's Shadows (inner and drop shadow) and Borders (stroke).
  6. View the details of any prototyping Animation, including the trigger, action, and destination. You can also see the animation, the easing curve, and duration of the transition.
  7. View CSS, iOS, and Android Code for your selection.

  

  Select objects in view-only mode

  There are a few ways to select objects in a file, but for collaborators with can view access, the experience is a bit different.

  When you make your selection in the canvas, Figma will:

  1. Outline your selection using a solid purple box.
  2. Outline the parent of your current selection using a dashed purple box.
  3. Show the name of the selected layer(s) at the top of the Inspect panel in the right sidebar.
  4. Show the Parent Component underneath the selected layer in the Inspect panel. Click the in the Inspect panel to select the parent component.

  

  Copy selection 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 prototype animation values

  The Animation section of the Inspect panel shows you values for prototype animations for the selected frame. This includes:

  1. The animation's trigger
  2. The prototype action and a link to the destination frame when using Navigate to, Swap with, and Open overlay
  3. The prototype's animation type
  4. The animation's easing type
  5. The duration of the animation

  

  View component details

  Anyone with can edit access to a file has the option to add a description and link to external sites for component documenation. Anyone with can view access to a file can a selected component's:

  1. Name
  2. Description when provided
  3. Link to external documentation when provided

  Learn how to add descriptions and documentation links to components →

  

  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.
• Add comments to files

  Before you start

  Who can use this feature

  Users on any plan can use comments.

  Anyone with a Figma account can leave comments. You will need to have at least can view access to the file or prototype.

  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 or prototype.

  Add comments to files or prototypes in commenting mode. You can @mention you collaborators, as well as add emoji to your messages.

  Click the comment icon in the toolbar to enter commenting mode.

  You can't make any changes to objects in the canvas while in commenting mode. Select another tool in the toolbar to exit comment mode and continue editing the file.

  Learn more about commenting on prototypes.

  Add a comment

  Add a comment to any location on the canvas. If you comment on a specific frame, group, or layer; Figma will attach your comment to that object.

  1. Click the comment icon in the toolbar, or press the C key.
  2. Your cursor will turn into a location icon. Click on the location in the canvas you'd like the comment to appear. 
  3. Type your message in the field. Click the emoji icon to add emoji or type @colleague to mention a colleague or collaborator.
  4. Click Post to send your message.

  Mention a collaborator

  @mention collaborators in comments by entering the @ symbol and typing their name. This allows you to include a collaborator in the discussion, or draw their attention to a specific part of the design file.

  In a team there are some general restrictions around mention behavior:

  • Collaborators that have the same roles on a resource can @mention one another. For example: team members can mention anyone else who is a member of the team.
  • Team members can also mention collaborators who only have a role on that specific file or project.
  • Collaborators that only have a role on the file, and not the team or project, can only mention collaborators that are members of the team. They can't mention collaborators that are only added to that file.

  Outside of a team you can mention anyone you "know" in Figma. This includes:

  • People who are on the same teams, projects or files as you.
  • Anyone you have invited, or has invite you, to a file.

  Add a mention to a comment

  Mention a collaborator when you add a new comment, or reply to an existing one. 

  1. In the comment field, enter the @ key to trigger a mention.
  2. Start typing in the person's name or email. Figma 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. Figma will show mentions in blue text.  Complete the rest of your message and click Post.
  5. Figma will send an email to the collaborator with the details of your comment and a preview of the design. If they have in app notifications enabled, they will receive a notification in Figma too.

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

  Add emoji to comments

  Add emoji when adding or replying to comments. Figma uses the Apple emoji collection.

  1. In the comment field, click the 🙂 smiley face icon.
  2. Choose from your Frequently Used emoji or browse through the catalogue of emoji.
  3. Or, use the Search bar to find the exact emoji you're after.
  4. Click on the emoji to add it to your message. This will appear in short-hand :thinking_face:, not as the emoji. Don't worry, your emoji will appear when you click post!
  5. Click Post to add your comment to the file or prototype.

  Note: You can add up to 100 comments per hour. This includes new comments and replies and applies across all your files and prototypes.

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