0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-04-06 03:51:21 -05:00

📚 Add info for copy/paste options (#5803)

This commit is contained in:
andrés gonzález 2025-02-10 16:18:34 +01:00 committed by GitHub
parent 7fd0ca2243
commit 7d52b55d21
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 48 additions and 4 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

View file

@ -130,6 +130,16 @@ title: Shortcuts
<td style="text-align: center;"><kbd>Ctrl</kbd><kbd>Z</kbd></td>
<td style="text-align: center;"><kbd>⌘</kbd><kbd>Z</kbd></td>
</tr>
<tr>
<td>Copy properties</td>
<td style="text-align: center;"><kbd>Ctrl</kbd><kbd>Alt</kbd><kbd>C</kbd></td>
<td style="text-align: center;"><kbd>⌘</kbd><kbd>⌥</kbd><kbd>C</kbd></td>
</tr>
<tr>
<td>Paste properties</td>
<td style="text-align: center;"><kbd>Ctrl</kbd><kbd>Alt</kbd><kbd>V</kbd></td>
<td style="text-align: center;"><kbd>⌘</kbd><kbd>⌥</kbd><kbd>V</kbd></td>
</tr>
</tbody>
</table>

View file

@ -103,7 +103,6 @@ title: 04· Layer basics
<p>At the dropdown menu (right click on a layer to show it) there's the option "Select layer" that allows the user to select one layer among the ones that are under the cursor's location.</p>
<p><img src="/img/layers-select-menu.gif" alt="layers select" /></p>
<h2 id="group-layers">Group layers</h2>
<p>Grouped layers can be moved, transformed or styled at the same time. </p>
<ul>
@ -128,7 +127,6 @@ title: 04· Layer basics
</video>
</figure>
<h2 id="move-layers">Move layers</h2>
<p>To move one or more layers on the viewport you have to select them first and then click and drag the selection where you want to place them. You can also use the design panel to set a precise position relative to the viewport or the board.</p>
<figure>
@ -137,7 +135,6 @@ title: 04· Layer basics
</video>
</figure>
<h2 id="resize-layers">Resize layers</h2>
<p>To resize a selected layer you can use the handles at the edges of the selection box. Make sure the cursor is in resizing mode. You can also use the design panel where you can link width and height.</p>
<ul>
@ -204,6 +201,18 @@ title: 04· Layer basics
</video>
</figure>
<h2 id="scale-elements">Copy CSS properties</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="collapse-groups">Collapse groups and boards</h2>
<p>Groups and boards can have their contents expanded and collapsed. Click on the arrow at the
right side to toggle the visibility of their contents. </p>

View file

@ -181,4 +181,29 @@ title: 06· Styling
<li><strong>Saturation</strong></li>
<li><strong>Color</strong></li>
<li><strong>Luminosity</strong></li>
</ul>
</ul>
<h2 id="copy-paste-properties">Copy/Paste properties</h2>
<p>You can copy and apply properties, including fills, strokes, shadows, and others from one layer to another—or multiple layers with just a few clicks. You can do it using the layer's menu or shortcuts.</p>
<figure>
<video title="Apply blur to a layer" muted="" playsinline="" controls="" width="100%" poster="/img/styling/copy-properties.webp" height="auto">
<source src="/img/styling/copy-properties.mp4" type="video/mp4">
</video>
</figure>
<p>Using the layer menu</p>
<ol>
<li>Select one layer.</li>
<li>Right click to show the layer menu.</li>
<li>Press <strong>Copy/Paste as... > Copy properties</strong>.</li>
<li>Select one or more other layers.</li>
<li>Right click to show the layer/s menu.</li>
<li>Press <strong>Copy/Paste as... > Paste properties</strong>.</li>
</ol>
<p>Using Shortcuts</p>
<ul>
<li><strong>Copy properties</strong>: <kbd>Ctrl/⌘</kbd> + <kbd>Alt/⌥</kbd> + <kbd>C</kbd></li>
<li><strong>Paste properties</strong>: <kbd>Ctrl/⌘</kbd> + <kbd>Alt/⌥</kbd> + <kbd>V</kbd></li>
</ul>