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.
- Properties include values for an object's dimensions and constraints
- View Content in a text layer
- View the Typography values for a text layer, including font, weight, line height, and more.
- Use the Color section to view values in Hex, RGB, CSS, HSL, and HSB formats.
- Copy values for an object's Shadows and Borders.
- View your selection's Code in CSS, iOS, and Android.
Each section of the Inspect panel lets you copy individual values or entire sets of related properties.
- Select an object or layer in the canvas or Layers panel.
- 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.
- Click the blue Copy button to copy all values in the section, or click a single line item to copy a single value.
- Paste the copied value(s) anywhere.
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.
To export your assets:
- Make your selection and click in the Export section.
- Access the export options in the right sidebar:
- Collaborators with
can viewaccess can access export settings from the Export tab of the right sidebar.
- Collaborators with
can editaccess can can find the Export section in the Design tab.
- Collaborators with
- Apply export settings to your selection.
- 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:
- Go to the menu > File > Export.
- Use the keyboard shortcut to open the Export list:
- Mac: ⇧ Shift - ⌘ Command - E
- Windows: Shift + Ctrl + E
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.
The Code section of the Inspect tab shows you how to express objects in code.
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
Choose between the following formats:
- CSS (CSS only, no HTML)
- iOS (Swift)
- Android (XML)
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:
- Select an object or layer.
- 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.