Use the Inspect panel
Who can use this feature
Supported on any team or plan.
Anyone with can edit access to a file can view, edit, and copy properties in the Design, Prototype and Inspect panels of the right sidebar.
Anyone with can view access to a file can view and copy from the Inspect and Export panels in the right sidebar.
The Inspect panel allows you and your collaborators to view and copy properties, values, and code from your designs. Copy single line items, or entire sets of properties, to help streamline the development process.
People with can access can view, edit, and copy properties from the Design and Prototype tabs in the right sidebar. People with can view access can only view and copy properties using the Inspect and Export tabs.
Select layers
There are a few ways to select layers in a file. The default behavior for selecting layers depends on your access. Learn more about default layer selection →
For people with can view access, the defaul behavior is different to those with edit access. When viewers make a selection in the canvas, Figma will:
- Outline the selection using a solid purple box.
- Outline the parent of the current selection using a dashed purple box.
- Show the name of the selected layer(s) at the top of the Inspect panel in the right sidebar.
- Show the Parent component underneath the selected layer in the Inspect panel. Click the in the Inspect panel to select the parent component.
View property values
Use the Inspect panel to view properties and values for any selection. The properties you will see here depend on the type of layers in your selection. View basic layer properties ↓, prototyping interactions ↓, and code output ↓.
Layer properties
- A View the layer name and type.
- B View layer dimensions, auto layout properties, or any constraints.
- C View any Color styles and values in Hex, RGB, CSS, HSL, and HSB color models.
- D View effects, like inner and drop Shadows, as well as stroke properties (Borders).
- E Text layers: view the text Content and any Typography values; including font, weight, line height, and more.
- F Components and instances: view the name, description, and a link to any external documentation. Click to view the component library file. Add style and component descriptions →
Prototyping interactions
The Interaction section shows you values for prototype interactions for the current frame. This includes:
- What trigger starts the interaction. Depending on the device, this could be a mouse or touch interaction.
- The prototype action and a link to the destination frame when using Navigate to, Swap overlay, and Open overlay
- Animation type. Animations create smooth transitions between screens in a prototype.
- Animation easing curve. Easing determines the acceleration of the transition between a starting frame and its destination.
- Duration of the entire animation, in milliseconds.
Code output
The Code section of the Inspect tab shows you how to express layers in code.
- Select a layer to view its properties in the Inspect panel. Use the Select Parent keyboard shortcut to jump to a layer's parent frame:
- Mac:⇧ ShiftReturn
- Windows:ShiftEnter
- Choose between CSS (no HTML), iOS (Swift), and Android (XML).
- Switch between Code and Table view.
Code view
The Code view shows you code snippets in your selected language. These may serve as a useful reference while you're implementing a design. This includes:
- Name and description of any components
- Name and descriptions of any styles
- View the contents of a text layer
- Any alternative values available for the selected object
Table view
The Table view shows list of attributes for that layer. 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
- Any text properties, including font family, size, font weight, line height, etc.
- A color swatch and the CSS notation for any color values
Tip! With the Inspect tab open, you can measure distances between layers without a modifier key. Select a layer or object, then hover over a nearby layer to measure the distance between them.
Additional notes
- 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.
- 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.
- 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.
Copy properties and values
To copy a property or value, hover over the section you want to copy.
- A To copy all values in the section to your clipboard, click Copy next to the section header.
- B To copy a single value, click on a single line item.
Export assets
You, or a collaborator, may need to export layers, assets, and designs as part of the development process.
You can apply export settings to layers to define the format and any other export settings. Figma supports the following export formats: PNG, JPG, SVG, and PDF. Learn more about exports in Figma →
