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:
parent
7fd0ca2243
commit
7d52b55d21
6 changed files with 48 additions and 4 deletions
BIN
docs/img/layers/copy-css.webp
Normal file
BIN
docs/img/layers/copy-css.webp
Normal file
Binary file not shown.
After Width: | Height: | Size: 12 KiB |
BIN
docs/img/styling/copy-properties.mp4
Normal file
BIN
docs/img/styling/copy-properties.mp4
Normal file
Binary file not shown.
BIN
docs/img/styling/copy-properties.webp
Normal file
BIN
docs/img/styling/copy-properties.webp
Normal file
Binary file not shown.
After Width: | Height: | Size: 12 KiB |
|
@ -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>
|
||||
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Add table
Reference in a new issue