mirror of
https://github.com/penpot/penpot.git
synced 2025-12-11 22:14:05 +01:00
84 lines
4.8 KiB
Plaintext
84 lines
4.8 KiB
Plaintext
---
|
|
title: Dev tools
|
|
order: 5
|
|
desc: Learn how to inspect designs in Penpot! This guide covers distances, properties, code snippets (CSS, SVG, HTML), & exporting assets for seamless collaboration.
|
|
---
|
|
|
|
<h1 id="dev-tools">Dev tools</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-design">Inspect design</h2>
|
|
<p>You can activate the Inspect mode both at the <a href="/user-guide/first-steps/the-interface/#interface-viewmode">View mode</a> and at the <a href="/user-guide/first-steps/the-interface/#interface-workspace">Workspace</a>.</p>
|
|
|
|
<h3>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/prototyping-testing/testing-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>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">Get distances and measurements</h2>
|
|
<p>You can easily get measurements and distances between a layer and other layers or board edges.</p>
|
|
<p>To get distances:</p>
|
|
<ul>
|
|
<li>Click on a layer or select it at the layers panel.</li>
|
|
<li>Hover over other layers 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 layer 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">Get properties info</h2>
|
|
<p>At the Info panel you can see specifications about style and content of a layer. Different types of layers 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">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="copy-css-properties">Copy CSS properties from layers</h2>
|
|
<p>To copy CSS properties from layers:</p>
|
|
<ol>
|
|
<li>Select one or more layers.</li>
|
|
<li>Right click to show the layer menu.</li>
|
|
<li>Press <strong>Copy/Paste as... > Copy as CSS</strong> in case you only want to get the CSS properties from the selected layer/s.</li>
|
|
<li>Press <strong>Copy/Paste as... > Copy as CSS (nested layers)</strong> in case you only want to get the CSS properties from the selected layer/s and all the contained layers.</li>
|
|
</ol>
|
|
<figure>
|
|
<img alt="Copy CSS properties" src="/img/layers/copy-css.webp"/>
|
|
</figure>
|
|
|
|
<h2 id="inspect-code">Get code</h2>
|
|
<p>Press the code tab to get actual code snippets. Select a layer 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">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/export-import/exporting-layers/">exporting assets</a>.</p>
|
|
|
|
|