mirror of
https://github.com/penpot/penpot-docs.git
synced 2024-07-06 05:41:47 +00:00
✨ Inspect content
This commit is contained in:
andy
Andrés Moya
parent
3a37814e11
commit
2a240dcd4b
BIN
img/inspect-code.png
Normal file
BIN
img/inspect-code.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 383 KiB |
BIN
img/inspect-copy.gif
Normal file
BIN
img/inspect-copy.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
BIN
img/inspect-info.gif
Normal file
BIN
img/inspect-info.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 479 KiB |
BIN
img/inspect-workspace.gif
Normal file
BIN
img/inspect-workspace.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 544 KiB |
BIN
img/viewmode-inspect.gif
Normal file
BIN
img/viewmode-inspect.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 488 KiB |
|
|
@ -1,3 +1,42 @@
|
|||
---
|
||||
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/#viewmode-interface">View mode</a> and at the <a href="/user-guide/the-interface/#workspace-interface">Workspace</a>.</p>
|
||||
|
||||
<h3 id="inspect-viewmode">At the View mode</h3>
|
||||
<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>
|
||||
<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 at so developers can work at the Workspace without the fear of breaking things ;)</p>
|
||||
<p><img src="/img/inspect-workspace.gif" alt="inspect" /></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 and board edges.</p>
|
||||
<p>To get distances:</p>
|
||||
<ul>
|
||||
<li>Click on an object or select it at the layers panel.</li>
|
||||
<li>Hover other objects to see the distances between them and the selected one.</li>
|
||||
<li>Hover a free space at the board or the area around it to get the distance from the object to the board edges.</li>
|
||||
</ul>
|
||||
<p><img src="/img/codemode-measures.gif" alt="inspect" /></p>
|
||||
|
||||
<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>
|
||||
<p><img src="/img/inspect-info.gif" alt="inspect" /></p>
|
||||
|
||||
<h2 id="inspect-copy">How to copy properties info</h2>
|
||||
<p>You can copy property values individually or full sections of them 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>
|
||||
<p><img src="/img/inspect-copy.gif" alt="inspect" /></p>
|
||||
|
||||
<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 styles (currently CSS only but more coming) and SVG markup.</p>
|
||||
<p><img src="/img/inspect-code.png" alt="inspect" /></p>
|
||||
|
||||
<h2 id="inspect-export">How to export assets</h2>
|
||||
<p>Export option is available at the bottom of the Info panel. Export presets set at the workspace will be available at the Handoff. 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>
|
||||
|
|
|
|||
|
|
@ -90,7 +90,7 @@ title: 02· The interface
|
|||
<li><strong>Rulers:</strong> Sometimes you need coordinates to design. You can also drag guides from the rulers.</li>
|
||||
<li><strong>Design properties:</strong> At the Design properties sidebar you can find and edit the properties of a selected shape. The list of properties shown varies depending on the type of element. There are some common properties always set (like size and position) and others not set but available to be added (stroke, shadow, blur...). <a href="/user-guide/styling/">More about styling</a></li>
|
||||
<li><strong>Prototype mode:</strong> Penpot allows you to prototype interactions connecting boards. Once selected the prototype mode at the right sidebar, select an element to drag a connection to another board. You’ll be able to see the interactive prototype in action in the view mode (access by clicking the play button at the top right). <a href="/user-guide/interactions/">More about prototyping</a></li>
|
||||
<li><strong>Inspect mode:</strong> Penpot allows you to get measures, properties and production-ready code from your designs. Also, inspect mode provides a safer view-only mode and other improvements. <a href="/user-guide/inspect/">More about prototyping</a></li>
|
||||
<li><strong>Inspect mode:</strong> Penpot allows you to get measures, properties and production-ready code from your designs. Also, inspect mode provides a safer view-only mode and other improvements. <a href="/user-guide/inspect/">More about inspecting designs</a></li>
|
||||
<li><strong>Viewport:</strong> An infinite canvas to design without limits.</li>
|
||||
</ol>
|
||||
|
||||
|
|
|
|||
|
|
@ -24,47 +24,10 @@ title: 12· View mode
|
|||
<li>Click on the page name to display the <strong>pages</strong> menu. At shareable links the available pages can be configurable. <p><img src="/img/viewmode-pages.png" alt="viewmode" /></p></li>
|
||||
<li><strong>Zooming options</strong>. Zoom in <kbd>+</kbd>, Zoom out <kbd>-</kbd>, Zoom to 100% <kbd>Shift+0</kbd>, Zoom to fit all <kbd>Shift+1</kbd>, Zoom to selected object <kbd>Shift+2</kbd>, Full screen.</li>
|
||||
<li>Activate the browser <strong>fullscreen mode</strong>.</li>
|
||||
<li>Activate the <strong>Handoff</strong>.</li>
|
||||
<li>Activate the <strong>Inspect mode</strong>.</li>
|
||||
<li>Activate the <strong>Comments mode</strong>.</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<h2 id="viewmode-handoff">Handoff</h2>
|
||||
<p>At the Handoff you can inspect your designs to get specifications such as object properties, measurements and distances. You can also get code snippets for styles (currently CSS only but more coming) and SVG markup.<p>
|
||||
|
||||
<h3 id="viewmode-handoff-activate">Inspect Designs</h3>
|
||||
<p>You can activate the Handoff from the View mode. Click the code button at the middle of the navbar. Then you will see two sidebars:</p>
|
||||
<ul>
|
||||
<li>On the <strong>left sidebar</strong> you can see the layers tree. Select a layer to inspect it.</li>
|
||||
<li>At the <strong>right sidebar:</strong> you can switch between Info and Code tabs to get design specifications or code.</li>
|
||||
</ul>
|
||||
<p><img src="/img/codemode-activate.gif" alt="codemode" /></p>
|
||||
|
||||
<h3 id="viewmode-handoff-measurements">Distances and measurements</h3>
|
||||
<p>You can easily get measurements and distances between an object and other objects and board edges.</p>
|
||||
<p>To get distances:</p>
|
||||
<ul>
|
||||
<li>Click on an object or select it at the layers panel.</li>
|
||||
<li>Hover other objects to see the distances between them and the selected one.</li>
|
||||
<li>Hover a free space at the board or the area around it to get the distance from the object to the board edges.</li>
|
||||
</ul>
|
||||
<p><img src="/img/codemode-measures.gif" alt="codemode" /></p>
|
||||
|
||||
<h3 id="viewmode-handoff-info">Info panel</h3>
|
||||
<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>
|
||||
<p><img src="/img/codemode-properties.gif" alt="codemode" /></p>
|
||||
|
||||
<h4>Copy properties</h4>
|
||||
<p>You can copy property values individually or full sections of them 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>
|
||||
<p><img src="/img/codemode-copy.gif" alt="codemode" /></p>
|
||||
|
||||
<h3 id="viewmode-handoff-code">Code panel</h3>
|
||||
<p>Press the code tab to get actual code snippets. Select an object to get ready to use code for styles (currently CSS only but more coming) and SVG markup.</p>
|
||||
<p><img src="/img/codemode-code.png" alt="codemode" /></p>
|
||||
|
||||
<h3 id="viewmode-handoff-export">Export</h3>
|
||||
<p>Export option is available at the bottom of the Info panel. Export presets set at the workspace will be available at the Handoff. New export presets can be added ath the Code mode but will not persist (won’t be found at the workspace).</p>
|
||||
|
||||
<h2 id="viewmode-comments">Comments</h3>
|
||||
<p>You can activate comments at the View mode by pressing the comments icon at the top navbar.</p>
|
||||
<p class="advice">At the View mode only boards are shown so the comments that are placed outside boards will not show here.</p>
|
||||
|
|
@ -83,6 +46,7 @@ title: 12· View mode
|
|||
<p><img src="/img/share-prototype-flow.gif" alt="sharing" /></p>
|
||||
|
||||
<p><strong>Manage permissions:</strong></p>
|
||||
<p class="advice">Allowing to share a "view only" workspace is in our plans and will come soon.</p>
|
||||
<p>You can create a different link for each set of permissions. Click on "Manage permissions" to edit the link permissions.</p>
|
||||
<ul>
|
||||
<li><strong>Pages shared</strong>: Select the pages that will be availble at the link.</li>
|
||||
|
|
@ -90,4 +54,12 @@ title: 12· View mode
|
|||
<li><strong>Can inspect code</strong>: allow code inspection to users that are not in the team where the file belongs.</li>
|
||||
</ul>
|
||||
<p><img src="/img/share-prototype-permissions.gif" alt="sharing" /></p>
|
||||
<p class="advice">Allowing to share a "view only" workspace is in our plans and will come soon.</p>
|
||||
|
||||
<h2 id="viewmode-inspect">Inspect designs</h3>
|
||||
<p>You can activate the Inspect mode from the View mode. Click the code button at the middle of the navbar. Then you will see two sidebars:</p>
|
||||
<ul>
|
||||
<li>On the <strong>left sidebar</strong> you can see the layers tree. Select a layer to inspect it.</li>
|
||||
<li>At the <strong>right sidebar:</strong> you can switch between Info and Code tabs to get design specifications or code.</li>
|
||||
</ul>
|
||||
<a href="/user-guide/inspect/">More about inspecting designs</a>
|
||||
<p><img src="/img/viewmode-inspect.gif" alt="codemode" /></p>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user