penpot/penpot-docs
1
0
Fork 0
mirror of https://github.com/penpot/penpot-docs.git synced 2024-08-03 09:48:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

📚 Updates to User Guide

Browse Source
This commit is contained in:
Paul Schulz 2021-12-08 19:08:44 +10:30 committed by Andrés Moya
parent f63709e41a
commit 8803de7b49
1 changed files with 5 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
user-guide/code-mode/index.njk
View File

@ -1,14 +1,14 @@
---
title: 15· Code mode
title: 15· Code Mode
---
<h1 id="codemode">Code mode</h1>
<p class="main-paragraph">At code mode 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>
<h1 id="codemode">Code Mode</h1>
<p class="main-paragraph">With code mode 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="codemode-activate">Inspect designs</h3>
<h3 id="codemode-activate">Inspect Designs</h3>
<p>You can activate Code mode from the View mode. Click the code button at the middle of the navbar. Then you will see two sidebars:</p>
<ul>
<li>At the <strong>left sidebar</strong> you can see the layers tree. Select a layer to inspect it.</li>
<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>