Use the Inspect panel

Who can use this feature:

• Supported on any team or plan.

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

• Anyone 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.