Inspect designs
At Penpot, you can inspect designs to get measures, view properties, export assets and get production-ready code.
How to inspect designs
You can activate the Inspect mode both at the View mode and at the Workspace.
At the View mode
Go to the Inspect designs at the View mode section to know how to activate inspect mode at the View mode.
At the Workspace
At the Workspace, select the Inspect tab at the right sidebar to enter inspect mode.
Inspect mode provides a safer view-only mode so developers can work at the Workspace without the fear of breaking things ;)
How to get distances and measurements
You can easily get measurements and distances between an object and other objects or board edges.
To get distances:
- Click on an object or select it at the layers panel.
- Hover over other objects to see the distances between them and the selected one.
- Hover over a free space on the board or the area around it to see the distances from the object to the board edges.
How to get properties info
At the Info panel you can see specifications about style and content of an object. Different types of objects can have different sets of properties.
How to copy properties info
You can copy the value of one property or full sections of properties pressing the copy buttons that are shown at the right when hovering. For example you could copy all the layout properties or only the width.
How to get code
Press the code tab to get actual code snippets. Select an object to get ready to use code for markup (SVG and HTML) and styles (currently CSS only but more are coming).
How to export assets
Export option is available at the bottom of the Info panel. The same export presets that have been set at the workspace will be available at the View mode inspect. New export presets can be added at the Code mode but will not persist. Read more about exporting assets.