How to inspect layers

Contrast allows you to click on any design layers and view their CSS properties, including padding and margin. To inspect a layer while in the Canvas:

  • Open any project in Contrast
  • Click on a layer in any frame
  • On the right-hand sidebar, you'll see all the data associated with your selection

What data is shown in the sidebar?

What's displayed when nothing is selected
  • Project and Page name
  • All people who are invited to that project
  • Integrations connected to the project
  • All comments within the project
What's displayed when you select a frame
  • All comments that have been left on the frame
  • All Linear issues that have been linked to the frame
  • Background color of frame
  • Width and height of frame
  • Ability to export
What's displayed when you select a design element inside a frame
  • Layer name
  • X and Y position
  • Width and height
  • Any copyable content/text (if present in your selection)
  • Component name, library, thumbnail image, and any subcomponents
  • Saved Style Name
  • All CSS properties
  • Padding and margin
  • Ability to export

Still have a question? Email us at support@contrast.app to let us know!