mirror of
https://github.com/penpot/penpot.git
synced 2025-01-08 16:00:19 -05:00
68 lines
4.1 KiB
Text
68 lines
4.1 KiB
Text
|
---
|
||
|
|
title: 13· Inspect designs
|
||
|
|
---
|
||
|
|
|
||
|
|
<h1 id="inspect">Inspect designs</h1>
|
||
|
|
<p class="main-paragraph">At Penpot, you can inspect designs to get measures, view properties, export assets and get production-ready code. <p>
|
||
|
|
|
||
|
|
<h2 id="inspect-activate">How to inspect designs</h2>
|
||
|
|
<p>You can activate the Inspect mode both at the <a href="/user-guide/the-interface/#interface-viewmode">View mode</a> and at the <a href="/user-guide/the-interface/#interface-workspace">Workspace</a>.</p>
|
||
|
|
|
||
|
|
<h3 id="inspect-viewmode">At the View mode</h3>
|
||
|
|
<figure>
|
||
|
|
<video title="A video showing how to activate Inspect at the View mode" muted="" playsinline="" controls="" width="100%" poster="/img/inspect/inspect-viewmode.webp" height="auto">
|
||
|
|
<source src="/img/inspect/inspect-viewmode.mp4" type="video/mp4">
|
||
|
|
</video>
|
||
|
|
</figure>
|
||
|
|
<p>Go to the <a href="/user-guide/view-mode/#viewmode-inspect">Inspect designs at the View mode section</a> to know how to activate inspect mode at the View mode.</p>
|
||
|
|
|
||
|
|
<h3 id="inspect-workspace">At the Workspace</h3>
|
||
|
|
<figure>
|
||
|
|
<video title="A video showing how to activate Inspect at the Workspace" muted="" playsinline="" controls="" width="100%" poster="/img/inspect/inspect-workspace.webp" height="auto">
|
||
|
|
<source src="/img/inspect/inspect-workspace.mp4" type="video/mp4">
|
||
|
|
</video>
|
||
|
|
</figure>
|
||
|
|
<p>At the Workspace, select the Inspect tab at the right sidebar to enter inspect mode.</p>
|
||
|
|
<p>Inspect mode provides a safer <strong>view-only</strong> mode so developers can work at the Workspace without the fear of breaking things ;)</p>
|
||
|
|
|
||
|
|
<h2 id="inspect-measure">How to get distances and measurements</h2>
|
||
|
|
<p>You can easily get measurements and distances between an object and other objects or board edges.</p>
|
||
|
|
<p>To get distances:</p>
|
||
|
|
<ul>
|
||
|
|
<li>Click on an object or select it at the layers panel.</li>
|
||
|
|
<li>Hover over other objects to see the distances between them and the selected one.</li>
|
||
|
|
<li>Hover over a free space on the board or the area around it to see the distances from the object to the board edges.</li>
|
||
|
|
</ul>
|
||
|
|
<figure>
|
||
|
|
<video title="A video showing how to get Inspect measures" muted="" playsinline="" controls="" width="100%" poster="/img/inspect/inspect-measures.webp" height="auto">
|
||
|
|
<source src="/img/inspect/inspect-measures.mp4" type="video/mp4">
|
||
|
|
</video>
|
||
|
|
</figure>
|
||
|
|
|
||
|
|
<h2 id="inspect-info">How to get properties info</h2>
|
||
|
|
<p>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.</p>
|
||
|
|
<figure>
|
||
|
|
<video title="A video showing how to get Inspect properties" muted="" playsinline="" controls="" width="100%" poster="/img/inspect/inspect-properties.webp" height="auto">
|
||
|
|
<source src="/img/inspect/inspect-properties.mp4" type="video/mp4">
|
||
|
|
</video>
|
||
|
|
</figure>
|
||
|
|
|
||
|
|
<h2 id="inspect-copy">How to copy properties info</h2>
|
||
|
|
<p>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.</p>
|
||
|
|
<figure>
|
||
|
|
<video title="A video showing how to copy properties" muted="" playsinline="" controls="" width="100%" poster="/img/inspect/inspect-copy.webp" height="auto">
|
||
|
|
<source src="/img/inspect/inspect-copy.mp4" type="video/mp4">
|
||
|
|
</video>
|
||
|
|
</figure>
|
||
|
|
|
||
|
|
<h2 id="inspect-code">How to get code</h2>
|
||
|
|
<p>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).</p>
|
||
|
|
<figure>
|
||
|
|
<video title="A video showing how to get code" muted="" playsinline="" controls="" width="100%" poster="/img/inspect/inspect-code.webp" height="auto">
|
||
|
|
<source src="/img/inspect/inspect-code.mp4" type="video/mp4">
|
||
|
|
</video>
|
||
|
|
</figure>
|
||
|
|
|
||
|
|
<h2 id="inspect-export">How to export assets</h2>
|
||
|
|
<p>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 <a href="/user-guide/exporting/">exporting assets</a>.</p>
|