mirror of
https://github.com/penpot/penpot.git
synced 2025-07-23 04:57:14 +02:00
📚 Merge penpot/penpot-docs repository
This commit is contained in:
David Barragán Merino
Andrey Antukh
parent
3932054ea6
commit
88296480ec
665 changed files with 17621 additions and 0 deletions
172
docs/user-guide/components/index.njk
Normal file
172
docs/user-guide/components/index.njk
Normal file
|
|
@ -0,0 +1,172 @@
|
|||
---
|
||||
title: 10· Components
|
||||
---
|
||||
|
||||
<h1 id="components">Components</h1>
|
||||
<p class="main-paragraph">Speed your workflow with the reusable power of components.</p>
|
||||
<p>A component is an object or group of objects that can be reused multiple times across files. This can help you maintain consistency across a group of designs.</p>
|
||||
|
||||
<p>A component has two parts:</p>
|
||||
<ul>
|
||||
<li><strong>Main component</strong>: This is the source of truth, a single object in which the main properties of the component are defined.</li>
|
||||
<li><strong>Component copy</strong> (also known as instance): These are duplicates of Main components that inherit its properties.</li>
|
||||
</ol>
|
||||
<figure>
|
||||
<img src="/img/components/components-main-copy.webp" alt="Components main and copy" />
|
||||
<figcaption>Mains and copies have different icons. Mains also have a title header at the viewport.</figcaption>
|
||||
</figure>
|
||||
<p>All component copies used in a file are linked in a way that updates made to the Main component can reflect in their component copies. You can override properties for component copies, so that you can manage singularities while maintaining properties in common.</p>
|
||||
|
||||
<h2 id="component-create">Creating components</h2>
|
||||
<h3>Create a component</h3>
|
||||
<ol>
|
||||
<li>Select an object or a group of them.</li>
|
||||
<li>Press <kbd>Ctrl</kbd> + <kbd>K</kbd> or right click and select the option “Create component” at the object menu.</li>
|
||||
</ol>
|
||||
<figure>
|
||||
<video title="Creating a component" muted="" playsinline="" controls="" width="auto" poster="/img/components/components-create.webp" height="auto">
|
||||
<source src="/img/components/components-create.mp4" type="video/mp4">
|
||||
</video>
|
||||
</figure>
|
||||
|
||||
<h3>Duplicate a component</h3>
|
||||
<p>You can duplicate a component <a href="/user-guide/layer-basics/#duplicating-layers">the same way</a> you can duplicate any other layer. When duplicating a component, you are creating a component copy that will be linked to its main component.</p>
|
||||
|
||||
<h3>Duplicate as main component</h3>
|
||||
<p>You can duplicate a component as a new main component from the assets sidebar. Just select the component at the library, open the menu with right click and select the option "Duplicate main".</p>
|
||||
<figure>
|
||||
<video title="Duplicate main component" muted="" playsinline="" controls="" width="auto" poster="/img/components/components-duplicate-main.webp" height="auto">
|
||||
<source src="/img/components/components-duplicate-main.mp4" type="video/mp4">
|
||||
</video>
|
||||
</figure>
|
||||
|
||||
<h3>Delete a main component</h3>
|
||||
<p>You can delete main components and its copies anytime <a href="/user-guide/layer-basics/#deleting-layers">the same way</a> you can delete any other layer.</p>
|
||||
<p>Deleting a main component at the viewport means deleting it at the assets library and viceversa, so be careful!</p>
|
||||
<figure>
|
||||
<video title="Deleting main components" muted="" playsinline="" controls="" width="auto" poster="/img/components/components-delete.webp" height="auto">
|
||||
<source src="/img/components/components-delete.mp4" type="video/mp4">
|
||||
</video>
|
||||
</figure>
|
||||
|
||||
<h3>Restore a main component</h3>
|
||||
<p>If a main component has been deleted and you have access to a copy of it, you can use the copy to restore its main. There are two ways to do it:</p>
|
||||
<ul>
|
||||
<li>From the <strong>viewport menu</strong>: Select the component copy of a deleted main component, right click and press the option "Restore main component".</li>
|
||||
<li>From the <strong>sidebar menu</strong>: Open the sidebar menu of the component copy and press the option "Restore main component".</li>
|
||||
</ul>
|
||||
<figure>
|
||||
<img src="/img/components/components-restore.webp" alt="Components main and copy" />
|
||||
<figcaption>Mains and copies have different icons. Mains also have a title header at the viewport.</figcaption>
|
||||
</figure>
|
||||
|
||||
<h2 id="component-group">Group components</h2>
|
||||
<h3>Create component groups</h3>
|
||||
<p>At the Components section from the Assets library, there are two ways to create groups in a components library.</p>
|
||||
<ol>
|
||||
<li><strong>Using slashes (/):</strong> Select one component and rename it as follows: "FOLDER NAME/COMPONENT NAME". For example, "Buttons/Alert Button".</li>
|
||||
<li><strong>Using the "Group" option:</strong> Select one or more components at the Assets library, right click to show the menu and then select "Group".</li>
|
||||
</ol>
|
||||
<figure>
|
||||
<video title="Grouping components" muted="" playsinline="" controls="" width="100%" poster="/img/components/components-group.webp" height="auto">
|
||||
<source src="/img/components/components-group.mp4" type="video/mp4">
|
||||
</video>
|
||||
</figure>
|
||||
|
||||
<h3>Ungroup components</h3>
|
||||
<p>You can ungroup the components the same ways you can group them, via the menu option ("Ungroup" in this case) or renaming them.</p>
|
||||
|
||||
<h3>Drag components to groups</h3>
|
||||
<p>One very direct way to move components between groups at the assets library is by dragging them.</p>
|
||||
<figure>
|
||||
<video title="Drag components" muted="" playsinline="" controls="" width="auto" poster="/img/components/components-drag.webp" height="auto">
|
||||
<source src="/img/components/components-drag.mp4" type="video/mp4">
|
||||
</video>
|
||||
</figure>
|
||||
|
||||
<h2 id="component-find">Find components</h2>
|
||||
<p>Where's my component? There are ways to find some components at the assets panel and at the design viewport.</p>
|
||||
|
||||
<h3>Find a main component at the assets panel</h3>
|
||||
<p>Select a main component at the viewport and then press "Show in assets panel" at the options of the right sidebar.</p>
|
||||
<figure>
|
||||
<video title="Show main component in the assets library" muted="" playsinline="" controls="" width="100%" poster="/img/components/components-show-asset.webp" height="auto">
|
||||
<source src="/img/components/components-show-asset.mp4" type="video/mp4">
|
||||
</video>
|
||||
</figure>
|
||||
|
||||
<h3>Find a main component at the viewport</h3>
|
||||
<p>Select a component copy and then press "Show main component" at the viewport menu or the right sidebar menu.</p>
|
||||
<figure>
|
||||
<video title="Show main component" muted="" playsinline="" controls="" width="100%" poster="/img/components/components-show-main.webp" height="auto">
|
||||
<source src="/img/components/components-show-main.mp4" type="video/mp4">
|
||||
</video>
|
||||
</figure>
|
||||
|
||||
<h2 id="component-update">Update main component from copy</h2>
|
||||
<p>You can push changes made at a component copy to a main component:</p>
|
||||
<ol>
|
||||
<li>Select a component copy that has changes that override one or more properties of its main component.</li>
|
||||
<li>Right click and select the option “Update main component” at the component menu. You can find this option at the viewport menu and at the sidebar menu.</li>
|
||||
</ol>
|
||||
<figure>
|
||||
<img src="/img/components/components-update.webp" alt="Updating a main component from a copy" />
|
||||
</figure>
|
||||
<p>If the component that is about to be updated is located in a different file which is connected to this file as a <a href="/user-guide/libraries/#shared-libraries">shared library</a>, a notification will be shown offering the options to update or dismiss.</p>
|
||||
<figure>
|
||||
<img src="/img/components/components-update-shared.webp" alt="Prompt shown to update a main component that is in a shared library" />
|
||||
</figure>
|
||||
|
||||
<h2 id="component-overrides">Component overrides</h2>
|
||||
<p>Main components represent the more generic information of an element in a design system. You will usually need to change specific things (like a text, a color or an icon) in a component while maintaining the inheritance of the rest of it properties. Component overrides allows you to do that in Penpot.</p>
|
||||
<p>Overrides are modifications made in a specific copy that are not in its main component. With overrides you can keep changes at the component copies while maintaining synchronization with the Main component.</p>
|
||||
<figure>
|
||||
<img src="/img/components/components-overrides.webp" alt="Components overrides" />
|
||||
</figure>
|
||||
|
||||
<h3>Reset overrides</h3>
|
||||
<p>Right click and select the option “Reset overrides” at the component menu to get it to the state of the Main component.</p>
|
||||
<figure>
|
||||
<video title="Reset component overrides" muted="" playsinline="" controls="" width="auto" poster="/img/components/components-reset-overrides.webp" height="auto">
|
||||
<source src="/img/components/components-reset-overrides.mp4" type="video/mp4">
|
||||
</video>
|
||||
</figure>
|
||||
|
||||
<h2 id="component-detach">Detach component</h2>
|
||||
<p>Detach a component copy to unlink it from its Main component and transform it into a group layer. Press <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>K</kbd> or right click and select the option “Detach instance” at the component menu.</p>
|
||||
<p>You can also detach components in bulk by selecting several components and performing the same action.</p>
|
||||
|
||||
|
||||
<h2 id="component-swap">Swap components</h2>
|
||||
<p>Penpot allows you to easily substitute component copies with other component copies.</p>
|
||||
<ol>
|
||||
<li>Select a component <strong>copy</strong>. You can not swap main components.</li>
|
||||
<li>At the right sidebar, press the component name to launch the swap menu.</li>
|
||||
<li>Choose the component you want to swap with and click on it.</li>
|
||||
</ol>
|
||||
<p class="advice"><strong>Tip:</strong> The first options shown to swap a component are the ones at the same level inside the assets library, so group them properly.</p>
|
||||
<figure>
|
||||
<video title="Swapping components at Penpot" muted="" playsinline="" controls="" width="auto" poster="/img/components/components-swap.webp" height="auto">
|
||||
<source src="/img/components/components-swap.mp4" type="video/mp4">
|
||||
</video>
|
||||
</figure>
|
||||
|
||||
|
||||
<h2 id="component-annotate">Annotate components</h2>
|
||||
<p>You can add text annotations to main components. The annotations are shown in every component copy. It is extremely useful to attach specifications that can be read at each component copy.</p>
|
||||
<figure>
|
||||
<video title="Annotating components at Penpot" muted="" playsinline="" controls="" width="auto" poster="/img/components/components-annotation.webp" height="auto">
|
||||
<source src="/img/components/components-annotation.mp4" type="video/mp4">
|
||||
</video>
|
||||
</figure>
|
||||
|
||||
<p>The annotations are also shown at the <a href="/user-guide/inspect">Inspect tab</a>, as another option to improve communication between designers and developers.</p>
|
||||
<figure>
|
||||
<img src="/img/components/components-annotations-inspect.webp" alt="Annotations at inspect tab" />
|
||||
</figure>
|
||||
|
||||
<h2 id="component-main-components-page">Main components page</h2>
|
||||
<p>If you find a page at a file called "Main components" this will probably mean that the file had assets with the previous components system and has been migrated to the current components system. The previous system didn't have the components as layers at the design file, only at the assets library, so when migrating a file to the new version Penpot automatically creates a page where to place all the components, grouping them using the library groups structure.</p>
|
||||
<figure>
|
||||
<img src="/img/components/components-page-main.webp" alt="Main components page" />
|
||||
</figure>
|
||||
37
docs/user-guide/custom-fonts/index.njk
Normal file
37
docs/user-guide/custom-fonts/index.njk
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
---
|
||||
title: 16· Custom fonts
|
||||
---
|
||||
|
||||
<h1 id="customfonts">Custom fonts</h1>
|
||||
<p class="main-paragraph">If you have purchased, personal or libre fonts that are not included in the catalog provided by Penpot, you can upload them from your computer and use them across the files of a team. <p>
|
||||
|
||||
<h2 id="customfonts-upload">Upload local fonts</h2>
|
||||
<p>To use a font that you have on your local machine, first you need to upload it to the Penpot team where you want to use it.</p>
|
||||
<p>You can find the “Fonts” section in the dashboard menu, at the left sidebar.</p>
|
||||
<p><a href="/img/customfonts.png" target="_blank"><img src="/img/customfonts.png" alt="local fonts" /></a></p>
|
||||
|
||||
<h3>To upload a local font:</h3>
|
||||
<ol>
|
||||
<li>Press “Add custom font”.</li>
|
||||
<li>Inspect your local files to select one or more fonts that you want to upload. <strong>You can upload fonts with
|
||||
the following formats: TTF, OTF and WOFF</strong>. Only one format will be needed.</li>
|
||||
<li>Change the font name if needed. The font name is the name that will be shown in the font list at the workspace.
|
||||
It is also what Penpot uses to group fonts in families. You can always edit it later.</li>
|
||||
<li>Once ready, press upload. That's it. The font will be available at the font list of this team’s files.</li>
|
||||
</ol>
|
||||
<p><a href="/img/customfonts-upload.png" target="_blank"><img src="/img/customfonts-upload.png" alt="local fonts" /></a></p>
|
||||
|
||||
<h2 id="customfonts-families">Group fonts in font families</h2>
|
||||
<p>Fonts with the same font family name will be grouped as a single font family. That means that at the font list that you will use at the files they will be shown as only one font with different variants available. </p>
|
||||
<p>If you want to add a font variant (eg: Light) to a font family (eg: Helvetica) you only need to ensure during the upload process that it has the same font family name.</p>
|
||||
<p><a href="/img/customfonts-families.png" target="_blank"><img src="/img/customfonts-families.png" alt="local fonts" /></a></p>
|
||||
|
||||
<h2 id="customfonts-edit">Edit custom fonts</h2>
|
||||
<p>At the right side of a font family of the custom fonts list you can find a menu that allows you to edit the name of a font family and delete it.</p>
|
||||
|
||||
<h2 id="customfonts-using">Using custom fonts</h2>
|
||||
<p>Custom fonts are added to the fonts catalog of a team and can be used at the workspace from the font list at the design sidebar.</p>
|
||||
<p><img src="/img/customfonts-use.gif" alt="local fonts" /></p>
|
||||
|
||||
<h2>Fonts Licensing and Usage</h2>
|
||||
<p>You should only upload fonts you own or have license to use in Penpot. Find out more in the Content rights section of <a href="https://penpot.app/terms" target="_blank">Penpot's Terms of Service</a>. You also might want to read about <a href="https://www.typography.com/faq" target="_blank">font licensing</a>.</p>
|
||||
73
docs/user-guide/exporting/index.njk
Normal file
73
docs/user-guide/exporting/index.njk
Normal file
|
|
@ -0,0 +1,73 @@
|
|||
---
|
||||
title: 07· Exporting objects
|
||||
---
|
||||
|
||||
<h1 id="export">Exporting objects</h1>
|
||||
<p class="main-paragraph">In Penpot you can setup export presets for different file formats and scales.</p>
|
||||
|
||||
<h2 id="export-howto">How to export</h2>
|
||||
<p>You can set up different export configurations to suit your needs. Each export configuration is called "export preset".</p>
|
||||
|
||||
<h3>Create export preset</h3>
|
||||
<p>To export an object you need to select it and at the Design panel add an export preset pressing the “+” button of the Export section.</p>
|
||||
<p>Export presets can be also found at the <strong><a href="/user-guide/the-interface/#interface-viewmode" target="_blank">View mode</a></strong> with the code tab activated.</p>
|
||||
<figure>
|
||||
<video title="Export presets" muted="" playsinline="" controls="" width="100%" poster="/img/export/export-presets.webp" height="auto">
|
||||
<source src="/img/export/export-presets.mp4" type="video/mp4">
|
||||
</video>
|
||||
</figure>
|
||||
<p>You can set as many export presets as you need for the same object. Set multiple exports to get the same object in different scales and/or formats with just one click.</p>
|
||||
|
||||
|
||||
<h3>Remove export preset</h3>
|
||||
<p>To <strong>remove an export preset</strong> you have to select the object and then press the “-” button at the export preset you want to remove.</p>
|
||||
|
||||
<h2 id="export-options">Export options</h2>
|
||||
<p>The options of an export:</p>
|
||||
<ul>
|
||||
<li><strong>Size</strong> - Options for the most common sizing scales.</li>
|
||||
<li><strong>Suffix</strong> - Especially useful if you are exporting at different scales.</li>
|
||||
<li><strong>File format</strong> - PNG, SVG, JPEG, PDF.</li>
|
||||
</ul>
|
||||
|
||||
<h2 id="export-multiple-elements">Exporting multiple elements</h2>
|
||||
<h3>Make your export selection.</h3>
|
||||
<p>To export multiple elements you first have to select the elements you'd like to export. If the selected elements already have export settings those will be included in the export. You can also add new export settings for multiselections.</p>
|
||||
<figure>
|
||||
<img src="/img/export/export-multiple.webp" alt="Export main menu">
|
||||
</figure>
|
||||
<p>You can also launch the export for a page from the main menu or using the shortcut <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>E</kbd>. This option will include in the export all the export pressets set among a selection or in the page if nothing is selected.</p>
|
||||
<figure>
|
||||
<img src="/img/export/export-main-menu.webp" alt="Export main menu">
|
||||
</figure>
|
||||
|
||||
<h3>Configure your export selection.</h3>
|
||||
<p>Before confirming your export for multiple elements you will have the option to check their names, sizes and formats and a last chance to deselect the export settings you don't want to go on this batch.</p>
|
||||
<figure>
|
||||
<img src="/img/export/export-selection.webp" alt="Export selection">
|
||||
</figure>
|
||||
|
||||
<h3>Check the export progress.</h3>
|
||||
<p>A popup will show the exporting progress and will show errors if any.</p>
|
||||
<figure>
|
||||
<img src="/img/export/export-progress.webp" alt="Export progress">
|
||||
</figure>
|
||||
|
||||
<h2 id="export-artboards-pdf">Export boards to PDF</h2>
|
||||
<p>If you have a presentation made at Penpot you might want to create a document that can be shared with anyone, regardless of having a Penpot account, or just to be able to use your presentation offline (essential for talks and classes). You can easily export all the artboards of a page to a single PDF file from the file menu.</p>
|
||||
|
||||
<p><a href="#pdf-note">Technical note</a> about the PDF format.</p>
|
||||
|
||||
<figure>
|
||||
<img src="/img/export/export-pdf.webp" alt="Export PDF">
|
||||
</figure>
|
||||
|
||||
<h2 id="export-technical">Technical notes about exports</h2>
|
||||
<p class="advice">
|
||||
Exported PDF files try to leverage the capabilities of PDF vectorial format (unpixelated zoom, select & copy texts, etc.), but cannot guarantee that 100% of SVG features will be converted perfectly to PDF. You may see differences between an object displayed inside Penpot and in the exported file. If you need an exact match, a workaround is to export the object into PNG and convert it to PDF with some of the many tools that exist for it.<br /><br />
|
||||
</p>
|
||||
<p class="advice">
|
||||
<a name="pdf-note"></a>
|
||||
<strong>Currently known issue:</strong>
|
||||
When exporting objects with masks, the mask does not work when opening the PDF file with some open source tools (e.g. evince or inkscape). This is not Penpot's fault, but <a href="https://gitlab.freedesktop.org/poppler/poppler/-/issues/1210" target="_blank">a bug in poppler</a>, a library used by many of the open source tools. If you open the file with an official Adobe viewer, or a tool like okular, or in a browser like Chrome or Firefox, you can see it properly.
|
||||
</p>
|
||||
280
docs/user-guide/flexible-layouts/index.njk
Normal file
280
docs/user-guide/flexible-layouts/index.njk
Normal file
|
|
@ -0,0 +1,280 @@
|
|||
---
|
||||
title: 08· Flexible Layouts
|
||||
---
|
||||
|
||||
<h1 id="layouts">Flexible Layouts</h1>
|
||||
<p class="main-paragraph">Penpot's proposal tries to get as close as possible to the final output that we will see on the web. Design and development speak the same language in order to embrace web standards and improve communication between roles. At Penpot you have unique ways to create and manage adaptative layouts that have all the advantages of CSS standards.</p>
|
||||
|
||||
|
||||
<h2 id="layouts-flex">Flex Layout</h2>
|
||||
<p class="main-paragraph">Penpot's unique Flex Layout allows you to create flexible designs that can adapt automatically. Resize, fit, and fill content and containers without the need to do it manually.</p>
|
||||
|
||||
<p class="advice">
|
||||
To help you learn the fundamentals of Flex Layout <a href="https://penpot.app/design/layout" target="_blank">here’s a dedicated website</a> where you will find a <strong>video tutorial</strong> and a <strong>playground template</strong>.
|
||||
</p>
|
||||
|
||||
<h3 id="layouts-flex-css">Flex Layout is based on Flexbox CSS standard</h3>
|
||||
<p>Penpot's Flex Layout is built over Flexbox, a CSS module that provides a more efficient way to lay out, align and distribute space among items in a container. There are many comprehensive explanations about Flexbox, if you are interested we recommend you to read the one at <a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/" target="_blank">CSS Tricks</a>.</p>
|
||||
<figure>
|
||||
<p><img src="/img/csstricks-00-basic-terminology.svg" alt="Flex Layout" /></p>
|
||||
<figcaption>Image from CSS Tricks</figcaption>
|
||||
</figure>
|
||||
|
||||
|
||||
<h3 id="layouts-flex-add">Add Flex Layout</h3>
|
||||
<p>You can add Flex Layout to any layer, group, board or a selection including any of these. Once Flex Layout Flex is added the selected elements will be contained into a board with the Flex Layout properties. You have several ways to do this:</p>
|
||||
<ul>
|
||||
<li>From the Design panel at the right sidebar.</li>
|
||||
<li>From the option at the selection menu (right click button).</li>
|
||||
<li>Pressing <kbd>Ctrl/⌘</kbd> + <kbd>A</kbd>.</li>
|
||||
</ul>
|
||||
<figure><img src="/img/flexible-layouts/layouts-add.webp" alt="Adding Layouts" /></figure>
|
||||
|
||||
|
||||
<h3 id="layouts-flex-arrange-reorder">Arrange and reorder objects to a Flex Layout</h3>
|
||||
<p>To add an object to a Flex Layout you can just drag it at the position of your choice. You can also create or paste elements like in any regular board.</p>
|
||||
<p>To reorder elements you can drag them or use the <kbd>UP/DOWN</kbd> keystrokes.</p>
|
||||
<figure>
|
||||
<video title="A video showing a layer being dragged to and moved through a flex flow" muted="" playsinline="" controls="" width="100%" poster="/img/flexible-layouts/layouts-flex-arrange.webp" height="auto">
|
||||
<source src="/img/flexible-layouts/layouts-flex-arrange.mp4" type="video/mp4">
|
||||
</video>
|
||||
</figure>
|
||||
|
||||
|
||||
<h3 id="layouts-flex-properties">Flex Layout properties</h3>
|
||||
<p>You have properties for direction, align, justify, gap, padding, margin and sizing. Those are the same properties that you can use with CSS Flexbox. You can <a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/#aa-flexbox-properties" target="_blank">read here detailed explanations about Flexbox properties</a>.</p>
|
||||
<figure><img src="/img/flexible-layouts/flex-properties.webp" alt="Flex Layout properties" /></figure>
|
||||
|
||||
<h4>Flex Layout properties:</h4>
|
||||
<ul>
|
||||
<li><strong>Direction:</strong> Row, reverse row, column, reverse column.</li>
|
||||
<li><strong>Wrap (Direction):</strong> Align content start / center / end / space-around / space-between.</li>
|
||||
<li><strong>Align items:</strong> Start, center, end.</li>
|
||||
<li><strong>Justify content:</strong> start, center, end, space-between, space-around, space-evenly.</li>
|
||||
<li><strong>Gap:</strong> Row, column.</li>
|
||||
<li><strong>Padding:</strong> Top, right, bottom, left.</li>
|
||||
<li><strong>Sizing:</strong> Fix/fit width, Fix/fit height.</li>
|
||||
</ul>
|
||||
|
||||
<h3 id="layouts-flex-elements">Positioning Flex elements</h3>
|
||||
<h4>Position static:</h4>
|
||||
<p>Static position is the default option for flex elements, meaning that they will be included in the flex flow, using flex properties.</p>
|
||||
<figure><img src="/img/flexible-layouts/flex-properties-element.webp" alt="Flex Layout properties" /></figure>
|
||||
<h4>Absolute positioning:</h4>
|
||||
<p>Selecting absolute positioning will exclude the element from the Flex layout flow allowing you to freely position an element in a specific place regardless of the size of the layout where it belongs.</p>
|
||||
<figure><img src="/img/flexible-layouts/flex-properties-element-absolute.webp" alt="Flex Layout properties" /></figure>
|
||||
<h4>Z-index:</h4>
|
||||
<p>With the z-index option you can decide the order of overlapping elements while maintaining the layers order.</p>
|
||||
<figure>
|
||||
<video title="A video showing how to change z-index for a layer in flex layout" muted="" playsinline="" controls="" width="100%" poster="/img/flexible-layouts/layouts-flex-zindex.webp" height="auto">
|
||||
<source src="/img/flexible-layouts/layouts-flex-zindex.mp4" type="video/mp4">
|
||||
</video>
|
||||
</figure>
|
||||
|
||||
<h3 id="layouts-flex-spacing">Managing flex spacing</h3>
|
||||
<p>When creating Flex layouts, the spacing is predicted, helping you to maintain your design composition.</p>
|
||||
<figure>
|
||||
<video title="Spacing automatically calculated when adding flex layout" muted="" playsinline="" controls="" width="100%" poster="/img/flexible-layouts/layouts-flex-spacing-add.webp" height="auto">
|
||||
<source src="/img/flexible-layouts/layouts-flex-spacing-add.mp4" type="video/mp4">
|
||||
</video>
|
||||
</figure>
|
||||
|
||||
<p>Set paddings, margins and gaps using their respective numeric inputs.</p>
|
||||
<p>You can also <strong>click and drag</strong> to resize them while visualizing the value that is being edited:</p>
|
||||
<ul>
|
||||
<li>Hold <kbd>Shift/⇧</kbd> while dragging to change the value of opposite sides evenly.</li>
|
||||
<li>Hold <kbd>Alt/⌥</kbd> while dragging to change the value of all sides evenly.</li>
|
||||
</ul>
|
||||
<figure>
|
||||
<video title="Changing spacing with flex layout" muted="" playsinline="" controls="" width="100%" poster="/img/flexible-layouts/layouts-flex-spacing.webp" height="auto">
|
||||
<source src="/img/flexible-layouts/layouts-flex-spacing.mp4" type="video/mp4">
|
||||
</video>
|
||||
</figure>
|
||||
|
||||
|
||||
<h3 id="layouts-flex-code">Get code and specifications</h3>
|
||||
<p>Designing with Flex Layout generates <em>ready for production</em> code. Select the flex board or its inner elements and then open the <a href="/user-guide/inspect" target="_blank">Inspect tab</a> to obtain its properties, detailed info and raw code.</p>
|
||||
<figure><img src="/img/flexible-layouts/layouts-flex-code.gif" alt="Inspecting code at Penpot" /></figure>
|
||||
|
||||
<h3 id="layouts-flex-examples">Flex Layout basic examples</h3>
|
||||
<h4>How to create a button</h4>
|
||||
<p>A classic example that will help you create flexible buttons that grow depending on its content.</p>
|
||||
<figure>
|
||||
<video title="Creating a flexible button with flex layout" muted="" playsinline="" controls="" width="100%" poster="/img/flexible-layouts/layouts-flex-button.webp" height="auto">
|
||||
<source src="/img/flexible-layouts/layouts-flex-button.mp4" type="video/mp4">
|
||||
</video>
|
||||
</figure>
|
||||
|
||||
<h4>How to create a list</h4>
|
||||
<p>Extremely useful for ordering list items. Remember to set <strong>fit height</strong> to the container so it can adapt to the number of items.</p>
|
||||
<figure>
|
||||
<video title="Creating a list with Flex Layout" muted="" playsinline="" controls="" width="100%" poster="/img/flexible-layouts/layouts-flex-list.webp" height="auto">
|
||||
<source src="/img/flexible-layouts/layouts-flex-list.mp4" type="video/mp4">
|
||||
</video>
|
||||
</figure>
|
||||
|
||||
<h4>Wrapping elements</h4>
|
||||
<p>Use the <strong>wrap</strong> property along with <strong>row</strong> direction to get the elements positioned in multiple lines.</p>
|
||||
<figure>
|
||||
<video title="Wrapping elements with Flex Layout" muted="" playsinline="" controls="" width="100%" poster="/img/flexible-layouts/layouts-flex-wrap.webp" height="auto">
|
||||
<source src="/img/flexible-layouts/layouts-flex-wrap.mp4" type="video/mp4">
|
||||
</video>
|
||||
</figure>
|
||||
|
||||
|
||||
<h2 id="layouts-grid">Grid Layout</h2>
|
||||
<p class="main-paragraph">Grid Layout allows you to efficiently organize, align, and distribute items in 2-dimensional layouts. You can create rows and columns of elements, giving you fine-grained control over their expansion, alignment, and responsiveness to various screen sizes. It's a powerful tool for creating responsive designs.</p>
|
||||
<figure>
|
||||
<video title="A video showing different layers being grouped and dragged around the Canvas" muted="" playsinline="" controls="" width="100%" poster="/img/flexible-layouts/layouts-grid-main.webp" height="auto">
|
||||
<source src="/img/flexible-layouts/layouts-grid-main.mp4" type="video/mp4">
|
||||
</video>
|
||||
<figcaption>Rearranging cells in Grid Layout</figcaption>
|
||||
</figure>
|
||||
|
||||
<h3 id="layouts-flex-css">Grid Layout is based on CSS Grid standard</h3>
|
||||
<p>Penpot's Grid Layout is built over CSS Grid, a fairly new CSS module. If you are interested to know more about this CSS module we recommend checking out the comprehensive explanation <a href="https://css-tricks.com/snippets/css/complete-guide-grid/" target="_blank">Guide to CSS Grid</a> at CSS Tricks.</p>
|
||||
|
||||
|
||||
<h3 id="layouts-grid-add">Add Grid Layout</h3>
|
||||
<p>You can add Grid Layout to any layer, group, board or selection. Once Grid Layout Flex is added the selected elements will be contained into a board that handles its space through Grid Layout properties. You have several ways to add Grid Layout:</p>
|
||||
<ul>
|
||||
<li>From the Design panel at the right sidebar.</li>
|
||||
<li>From the option at the selection menu (right click button).</li>
|
||||
<li>Pressing <kbd>Ctrl/⌘</kbd> + <kbd>Shift</kbd> + <kbd>A</kbd>.</li>
|
||||
</ul>
|
||||
<figure><img src="/img/layouts-add.webp" alt="Adding Layouts" /></figure>
|
||||
|
||||
<h3 id="layouts-grid-terminology">Grid layout basic terminology</h3>
|
||||
<ul>
|
||||
<li><strong>Container:</strong> The container is the parent element of all the grid items.</li>
|
||||
<li><strong>Cell:</strong> A single unit of the grid. Cells are the children elements of a grid container.</li>
|
||||
<li><strong>Area:</strong> A composition of any number of grid cells.</li>
|
||||
<li><strong>Gap:</strong> The space between grid items (cells and areas), both horizontally and vertically.</li>
|
||||
<li><strong>Row:</strong> The horizontal lines that define the rows of the grid.</li>
|
||||
<li><strong>Column:</strong> The vertical lines that define the columns of the grid.</li>
|
||||
</ul>
|
||||
|
||||
<h3 id="layouts-grid-properties">Grid Layout properties</h3>
|
||||
<p>There are properties both for Grid containers and Grid items (cells, rows, cols). Those are the same properties that you can use with CSS Grid. You can <a href="https://css-tricks.com/snippets/css/complete-guide-grid/#aa-grid-properties" target="_blank">read here detailed explanations about CSS Grid properties</a>.</p>
|
||||
|
||||
<h4>Grid containter properties</h4>
|
||||
<figure><img src="/img/flexible-layouts/grid-properties-container.webp" alt="Grid Layout properties" /></figure>
|
||||
<ul>
|
||||
<li><strong>Direction:</strong> Row, column.</li>
|
||||
<li><strong>Align items (vertically and horizontally):</strong> Start, center, end.</li>
|
||||
<li><strong>Justify items (vertically and horizontally):</strong> Start, center, end, space-around, space-between, stretch.</li>
|
||||
<li><strong>Gap:</strong> Row, column.</li>
|
||||
<li><strong>Padding:</strong> Top, right, bottom, left, vertical, horizontal.</li>
|
||||
</ul>
|
||||
|
||||
<h4>Grid cell properties</h4>
|
||||
<figure><img src="/img/flexible-layouts/grid-properties-cell.webp" alt="Grid Layout properties" /></figure>
|
||||
<strong>Auto, Manual and Area</strong>
|
||||
<p>These are different ways to manage the element's position that therefore have different code representation.</p>
|
||||
<ul>
|
||||
<li><strong>Auto:</strong> The elements are positioned in order inside the cells so that if a new element enters the flow the rest get repositioned. This is the default behaviour.</li>
|
||||
<li><strong>Manual:</strong> The elements are positioned in specific cells or areas. Elements inside area cells will have the css properties <code class="language-html">grid-column</code> and <code class="language-html">grid-row</code>.</li>
|
||||
<li><strong>Area:</strong> A cell or area with an Area name. Areas behave as Manual cells.</li>
|
||||
</ul>
|
||||
|
||||
<p><strong>Align self (vertically and horizontally):</strong> Start, center, end, stretch.</p>
|
||||
|
||||
|
||||
<h3 id="layouts-grid-elements">Placing grid elements</h3>
|
||||
<p>To place elements inside a grid layout, just drag them or paste them in a cell or area.</p>
|
||||
<p><strong>Tip:</strong> Drag an element over a grid and then press <kbd>Ctrl</kbd> to place it as auto. That way the layer will be positioned automatically in the first available cell or area.</p>
|
||||
<figure>
|
||||
<video title="Placing elements in a grid Layout" muted="" playsinline="" controls="" width="100%" poster="/img/flexible-layouts/layouts-grid-place.webp" height="auto">
|
||||
<source src="/img/flexible-layouts/layouts-grid-place.mp4" type="video/mp4">
|
||||
</video>
|
||||
</figure>
|
||||
|
||||
<h4>Grid element properties</h4>
|
||||
<ul>
|
||||
<li><strong>Position:</strong> static, absolute.</li>
|
||||
<li><strong>Width:</strong> fix, 100%.</li>
|
||||
<li><strong>Margin:</strong> top, right, bottom, left.</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<h3 id="layouts-grid-colsrows">Edit rows and columns</h3>
|
||||
<p>To edit grid layouts (rows, columns, units, cells, areas, etc) you can either select the board and press the "Edit grid" button or double click over the board.</p>
|
||||
<p>You have several ways to edit rows and columns:</p>
|
||||
|
||||
<h4>Design sidebar</h4>
|
||||
<figure>
|
||||
<video title="Edit rows and columns in a grid Layout" muted="" playsinline="" controls="" width="100%" poster="/img/flexible-layouts/layouts-grid-edit-sidebar.webp" height="auto">
|
||||
<source src="/img/flexible-layouts/layouts-grid-edit-sidebar.mp4" type="video/mp4">
|
||||
</video>
|
||||
</figure>
|
||||
<p>From the design sidebar you will be able to:</p>
|
||||
<ul>
|
||||
<li><strong>Get info about columns and rows:</strong> Press the 3 dots besides the Columns or the Rows section to get details.</li>
|
||||
<li><strong>Add columns and rows</strong>: Press the + button to add a column or a row.</li>
|
||||
<li><strong>Delete columns and rows</strong>: Press the - button to delete a specific column or row.</li>
|
||||
<li><strong>Drag columns and rows</strong>: You can reorder columns and rows by clicking and dragging over the drag icon.</li>
|
||||
<li><strong>Change sizes and units</strong>: Change specific sizes and units of each row and column.</li>
|
||||
</ul>
|
||||
<p><strong>Tip:</strong> You cand drag columns and rows while leaving the elements in the same position if you perform the action while pressing <kbd>Ctrl</kbd>.</p>
|
||||
|
||||
|
||||
<h4>Design viewport</h4>
|
||||
<figure>
|
||||
<video title="Edit rows and columns in a grid Layout" muted="" playsinline="" controls="" width="100%" poster="/img/flexible-layouts/layouts-grid-edit.webp" height="auto">
|
||||
<source src="/img/flexible-layouts/layouts-grid-edit.mp4" type="video/mp4">
|
||||
</video>
|
||||
</figure>
|
||||
<p>From the design viewport you will be able to:</p>
|
||||
<ul>
|
||||
<li><strong>Add columns and rows</strong>: Press the + button at the end of the headers to add a column or a row.</li>
|
||||
<li><strong>Drag columns and rows</strong>: To drag columns and rows hover a column or row header until the hand cursor is shown and then click and drag it.</li>
|
||||
<li><strong>Change sizes and units</strong>: Drag the columns and rows numbers and change specific sizes and units on their headers.</li>
|
||||
</ul>
|
||||
<p><strong>Tip:</strong> You can drag columns and rows while leaving the elements in the same position if you perform the action while pressing <kbd>Ctrl</kbd>.</p>
|
||||
|
||||
<h4>Contextual menu</h4>
|
||||
<p>To launch the contextual menu of rows and columns you can right click over a column or row header or left click on the menu button.</p>
|
||||
<p>From the contextual menu of rows and columns you will be able to:</p>
|
||||
<ul>
|
||||
<li>Duplicate row/column</li>
|
||||
<li>Add 1 row/column to the left</li>
|
||||
<li>Add 1 row/column to the right</li>
|
||||
<li>Delete row/column</li>
|
||||
<li>Delete row/column and shapes</li>
|
||||
</ul>
|
||||
|
||||
<h3 id="layouts-grid-units">Grid units</h3>
|
||||
<p>You can use different units at your grid columns and cells:</p>
|
||||
<ul>
|
||||
<li><strong>FR:</strong> FR stands for "fractional unit", meaning "portion of the remaining space". If a grid has 2 columns being one 1fr and the other 3fr, the first one will take 25% of the space while the other 75%.</li>
|
||||
<li><strong>Auto:</strong> The row/col size will be automatically set, relative to the items and the available space.</li>
|
||||
<li><strong>Pixels:</strong> Well, we all know pixels, don't we?</li>
|
||||
</ul>
|
||||
|
||||
<h3 id="layouts-grid-areas">Areas</h3>
|
||||
<p>Areas are compositions of any number of grid cells.</p>
|
||||
<figure>
|
||||
<video title="Managing areas in grid Layout" muted="" playsinline="" controls="" width="100%" poster="/img/flexible-layouts/layouts-grid-area.webp" height="auto">
|
||||
<source src="/img/flexible-layouts/layouts-grid-area.mp4" type="video/mp4">
|
||||
</video>
|
||||
</figure>
|
||||
|
||||
<h4>Create areas</h4>
|
||||
<p>You have two ways to create areas:</p>
|
||||
<p>1. Select more than one cell pressing left click while holding <kbd>Ctrl</kbd>, then press right click to open the menu and then press the option "Merge cells".</p>
|
||||
|
||||
<p>2. Select one cell pressing left click, then hover near the limit to the cell you want to merge the selected cell with until the cursor changes. Then drag the cursor to merge the selected area to other areas in the same direction.</p>
|
||||
|
||||
|
||||
<h4>Name areas</h4>
|
||||
<p>To name an area, select the "Area" option at the grid cell properties (right sidebar) and fill the name of the area.</p>
|
||||
|
||||
<h4>Undo areas</h4>
|
||||
<p>To turn areas back to regular cells, just select the "Auto" option at the grid cell properties (right sidebar).</p>
|
||||
|
||||
<h3 id="layouts-grid-code">Grid code and specifications</h3>
|
||||
<p>Grid layout at Penpot behaves just like CSS Grid because it is actually using the CSS Grid standard. This means that you can just switch to <a href="/user-guide/inspect" target="_blank">Inspect mode</a>, get the code and use it in real websites.</p>
|
||||
<figure><img src="/img/flexible-layouts/layouts-grid-code.gif" alt="Inspecting code at Penpot" /></figure>
|
||||
|
||||
|
||||
|
||||
66
docs/user-guide/import-export/index.njk
Normal file
66
docs/user-guide/import-export/index.njk
Normal file
|
|
@ -0,0 +1,66 @@
|
|||
---
|
||||
title: 14· Import/export files
|
||||
---
|
||||
|
||||
<h1 id="import-export">Import and export files</h1>
|
||||
<p class="main-paragraph">You can export Penpot files to your computer and import them from your computer to your projects.</p>
|
||||
|
||||
<h2 id="penpot-formats">Penpot file formats</h2>
|
||||
<p>There are two different formats in which you can import/export Penpot files. A standard one and a binary one. You always have the chance to use both for any file.</p>
|
||||
<h3>Penpot file (.penpot).</h3>
|
||||
<p>The fast one. Binary Penpot specific.</p>
|
||||
<ul>
|
||||
<li>✅ Highly efficient in terms of memory and transfer time when exporting and importing.</li>
|
||||
<li>❌ It can be opened only in Penpot.</li>
|
||||
<li>❌ Not transparent, code difficult to explore.</li>
|
||||
</ul>
|
||||
<h3>Standard file (.zip).</h3>
|
||||
<p>The open one. A compressed file that includes SVG and JSON.</p>
|
||||
<ul>
|
||||
<li>✅ Allows the file to be opened by other softwares (still, for those cases export to SVG seems to be the common practice).</li>
|
||||
<li>✅ Allows some automations and integrations.</li>
|
||||
<li>✅ Is a transparent, existing, open standard format.</li>
|
||||
<li>❌ Highly inefficient in terms of memory and transfer time when exporting and importing (this is because SVG).</li>
|
||||
</ul>
|
||||
|
||||
<h2 id="files-export">Export Penpot files</h2>
|
||||
<p>Exporting files is useful for many reasons. Sometimes you want to have a backup of your files and sometimes it is useful to share Penpot files with a user that does not belong to one of your teams, or you want to have a backup of your files outside Penpot, both SaaS (design.penpot.app) or at a self-hosted instance.</p>
|
||||
|
||||
<h3 id="export-penpot-files">How to export Penpot files</h3>
|
||||
<h4>Export a single file</h4>
|
||||
<p>You can download (export) files from the workspace and from the dashboard.</p>
|
||||
<ul>
|
||||
<li>
|
||||
<strong>From the <a href="/user-guide/the-interface/#interface-workspace">workspace</a></strong>: Select the download option at the main menu.
|
||||
<figure><img src="/img/import-export/export-card.webp" alt="Export penpot file" /></figure>
|
||||
</li>
|
||||
<li>
|
||||
<strong>From the <a href="/user-guide/the-interface/#interface-dashboard">dashboard</a></strong>: Select the download option at the file card menu.
|
||||
<figure><img src="/img/import-export/export-menu.webp" alt="Export penpot file" /></figure>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<h4>Export multiple files</h4>
|
||||
<p>Select multiple files to export them at the same time. An overlay will show you the progress of the different exports.</p>
|
||||
<figure>
|
||||
<video title="Export multiple files" muted="" playsinline="" controls="" width="100%" poster="/img/import-export/export-multiple.webp" height="auto">
|
||||
<source src="/img/import-export/export-multiple.mp4" type="video/mp4">
|
||||
</video>
|
||||
</figure>
|
||||
|
||||
<h4>Exporting files linked to Shared libraries</h4>
|
||||
<p>Exported files linked to shared libraries provide different ways to export their assets. Choose the one that suits you better.</p>
|
||||
<ul>
|
||||
<li><strong>Export shared libraries</strong>: Files with shared libraries will be included in the export, maintaining their linkage.</li>
|
||||
<li><strong>Include shared library assets in file libraries</strong>: Files will be exported with all external assets merged into the file library.</li>
|
||||
<li><strong>Treat shared library assets as basic objects</strong>: Shared libraries will not be included in the export and no assets will be added to the library.</li>
|
||||
</ul>
|
||||
<figure><img src="/img/import-export/export-libraries.webp" alt="Export penpot file" /></figure>
|
||||
|
||||
<h2 id="files-import">Import Penpot files</h2>
|
||||
<p class="advice">Importing files from other tools and services is among the main priorities of the Penpot team. Related features are coming soon.</p>
|
||||
|
||||
<p>The import option is at the projects menu. Press “Import files” and then select one or more .penpot files to import. You can import a .zip file as well.</p>
|
||||
<figure><img src="/img/import-export/import-menu.webp" alt="Import penpot file" /></figure>
|
||||
<p>Right before importing the files to your project, you’ll still have the opportunity to review the items to be imported, have the information about the ones that can not be imported and also the chance to discard files.</p>
|
||||
<figure><img src="/img/import-export/import-selection.webp" alt="Import penpot file" /></figure
|
||||
31
docs/user-guide/index.njk
Normal file
31
docs/user-guide/index.njk
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
---
|
||||
title: User guide
|
||||
eleventyNavigation:
|
||||
key: User guide
|
||||
order: 2
|
||||
---
|
||||
|
||||
<div class="main-illus">
|
||||
<img src="/img/home-userguide.png" alt="User guide" border="0">
|
||||
</div>
|
||||
|
||||
<h1 id="user-guide">Penpot User Guide</h1>
|
||||
|
||||
<p class="main-paragraph">In this documentation you will find (almost) everything you need to know about how to work with Penpot, from the interface basics to advanced functionality. Learn the details on topics such as prototyping, organizing your designs, or sharing, to get the most out of Penpot.</p>
|
||||
|
||||
<p class="advice">This documentation is a work in progress that will be updated frequently. If you have a suggestion, see something is missing or find anything that needs correcting, please write to us at <a href="mailto:support@penpot.app" target="_blank">support@penpot.app</a>.</p>
|
||||
|
||||
<ul class="intro-sections">
|
||||
<li>
|
||||
<a href="/user-guide/introduction/quickstart">
|
||||
<h2>Quickstart</h2>
|
||||
<p>Ways to start with Penpot</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/user-guide/the-interface/">
|
||||
<h2>The interface</h2>
|
||||
<p>Penpot's main areas and features</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
67
docs/user-guide/inspect/index.njk
Normal file
67
docs/user-guide/inspect/index.njk
Normal file
|
|
@ -0,0 +1,67 @@
|
|||
---
|
||||
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/#interface-viewmode">View mode</a> and at the <a href="/user-guide/the-interface/#interface-workspace">Workspace</a>.</p>
|
||||
|
||||
<h3 id="inspect-viewmode">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/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>
|
||||
<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">How to get distances and measurements</h2>
|
||||
<p>You can easily get measurements and distances between an object and other objects or board edges.</p>
|
||||
<p>To get distances:</p>
|
||||
<ul>
|
||||
<li>Click on an object or select it at the layers panel.</li>
|
||||
<li>Hover over other objects 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 object 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">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>
|
||||
<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">How to 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="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 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">How to 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/exporting/">exporting assets</a>.</p>
|
||||
26
docs/user-guide/introduction/index.njk
Normal file
26
docs/user-guide/introduction/index.njk
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
---
|
||||
title: 01· Introduction
|
||||
---
|
||||
|
||||
<h1 id="section-1">Introduction</h1>
|
||||
|
||||
<ul class="intro-sections">
|
||||
<li>
|
||||
<a href="/user-guide/introduction/quickstart">
|
||||
<h2>Quickstart →</h2>
|
||||
<p>Ways to start with Penpot</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/user-guide/introduction/shortcuts">
|
||||
<h2>Shortcuts →</h2>
|
||||
<p>Speed your design workflow</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/user-guide/introduction/info">
|
||||
<h2>Info & tutorials →</h2>
|
||||
<p>Info of interest about Penpot</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
21
docs/user-guide/introduction/info.njk
Normal file
21
docs/user-guide/introduction/info.njk
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
---
|
||||
title: Tutorials & info
|
||||
---
|
||||
|
||||
<h1 id="section-1-1">Tutorials & info</h1>
|
||||
|
||||
<p class="main-paragraph">Some useful links to better understand Penpot through answers and tutorials.</p>
|
||||
|
||||
<h2 id="dev-diaries">Dev Diaries</h2>
|
||||
<p>The Dev Diaries are our release notes, where we jot down every new feature, enhancement and fix included in every release. There are also kudos to community contributors <3</p>
|
||||
|
||||
<p>Wanna know what's new? take a look at our <a href="https://penpot.app/dev-diaries" target="_blank">Dev Diaries</a>.</p>
|
||||
|
||||
<h2 id="video-tutorials">Video tutorials</h2>
|
||||
<p>Suscribe to the <a href="https://www.youtube.com/channel/UCAqS8G72uv9P5HG1IfgnQ9g" target="_blank">Penpot Youtube channel</a> to get updates when we upload new Penpot tutorials, demos of features and talks.</p>
|
||||
|
||||
<h2 id="faqs">Frequently asked questions</h2>
|
||||
<p>If you have questions about the "Whys" or the "Hows" of Penpot we have collected and answered a bunch of the most common questions that we've been asked so far at our <a href="https://community.penpot.app/c/faq/17">Frequently Asked Questions</a>.</p>
|
||||
|
||||
<h2 id="faqs">Community space</h2>
|
||||
<p>We launched a community space to allow for everyone to be part of the conversation. <a href="https://community.penpot.app/" target="_blank">Join the community here</a>.</p>
|
||||
15
docs/user-guide/introduction/quickstart.njk
Normal file
15
docs/user-guide/introduction/quickstart.njk
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
---
|
||||
title: Quickstart
|
||||
---
|
||||
|
||||
<h1 id="section-1-1">Quickstart</h1>
|
||||
|
||||
<p class="main-paragraph">You can start using Penpot right in your browser or installing it in a server of your own.</p>
|
||||
|
||||
<h2>In your browser</h2>
|
||||
<p>To use Penpot online point your browser to <a href="https://design.penpot.app" target="_blank">design.penpot.app</a> and start designing. Use the latest Google Chrome or Mozilla Firefox for the best experience. We also provide specific support to WebKit (Safari / Epiphany).</p>
|
||||
<p>You can also go to <a href="https://penpot.app" target="_blank">penpot.app</a> if you want to read more about Penpot and our new releases. There, click on the Signup button. You will be asked to create an account. We only ask for an email. There are some authentication providers available too.</p>
|
||||
|
||||
<h2>On your own server</h2>
|
||||
<p>Currently, private Penpot instances only require basic Docker knowledge.</p>
|
||||
<p>You can run your own Penpot server following the instructions at the <a href="/technical-guide/getting-started">Technical Guide</a></p>
|
||||
935
docs/user-guide/introduction/shortcuts.njk
Normal file
935
docs/user-guide/introduction/shortcuts.njk
Normal file
|
|
@ -0,0 +1,935 @@
|
|||
---
|
||||
title: Shortcuts
|
||||
---
|
||||
|
||||
<h1 id="section-1-1">Shortcuts</h1>
|
||||
|
||||
<p class="main-paragraph">Penpot provides shortcuts that help to speed your workflow. Many keyboard shortcuts appear next to the command names in menus.</p>
|
||||
|
||||
<p class="main-paragraph">Here you can find a list of all keyboard shortcuts that you can use in Penpot. Bear in mind that most of them are at the workspace, where they are more needed.</p>
|
||||
|
||||
<p>You can also check the most updated list of shortcuts at the <a href="https://github.com/penpot/penpot/blob/develop/frontend/src/app/main/data/workspace/shortcuts.cljs" target="_blank">GitHub file</a>.</p>
|
||||
|
||||
<h2 id="workspace-section"> Workspace </h2>
|
||||
<p>The Workspace is where the designs are actually created. <a href="/user-guide/the-interface/#interface-workspace">More about the Workspace</a>.</p>
|
||||
<h3 id="alignment">Item Alignment</h3>
|
||||
<table cellspacing="0" cellpadding="1" border="1" width="100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th valign="top" class="cellrowborder"><strong>Shortcut</strong></th>
|
||||
<th valign="top" class="cellrowborder" style="text-align: center;"><strong>Linux and Windows</strong></th>
|
||||
<th style="text-align: center;"><strong>macOS</strong></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Align bottom</td>
|
||||
<td style="text-align: center;"><kbd>Alt</kbd><kbd>S</kbd></td>
|
||||
<td style="text-align: center;"><kbd>⌥</kbd><kbd>S</kbd></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Align center horizontally</td>
|
||||
<td style="text-align: center;"><kbd>Alt</kbd><kbd>H</kbd></td>
|
||||
<td style="text-align: center;"><kbd>⌥</kbd><kbd>H</kbd></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Align center vertically</td>
|
||||
<td style="text-align: center;"><kbd>Alt</kbd><kbd>V</kbd></td>
|
||||
<td style="text-align: center;"><kbd>⌥</kbd><kbd>V</kbd></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Align left</td>
|
||||
<td style="text-align: center;"><kbd>Alt</kbd><kbd>A</kbd></td>
|
||||
<td style="text-align: center;"><kbd>⌥</kbd><kbd>A</kbd></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Align right</td>
|
||||
<td style="text-align: center;"><kbd>Alt</kbd><kbd>D</kbd></td>
|
||||
<td style="text-align: center;"><kbd>⌥</kbd><kbd>D</kbd></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Align top</td>
|
||||
<td style="text-align: center;"><kbd>Alt</kbd><kbd>W</kbd></td>
|
||||
<td style="text-align: center;"><kbd>⌥</kbd><kbd>W</kbd></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Distribute horizontally</td>
|
||||
<td style="text-align: center;"><kbd>Ctrl</kbd><kbd>Shift</kbd><kbd>Alt</kbd><kbd>H</kbd></td>
|
||||
<td style="text-align: center;"><kbd>⌘</kbd><kbd>⇧</kbd><kbd>⌥</kbd><kbd>H</kbd></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Distribute vertically</td>
|
||||
<td style="text-align: center;"><kbd>Ctrl</kbd><kbd>Shift</kbd><kbd>Alt</kbd><kbd>V</kbd></td>
|
||||
<td style="text-align: center;"><kbd>⌘</kbd><kbd>⇧</kbd><kbd>⌥</kbd><kbd>V</kbd></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h3 id="edit">Edit</h3>
|
||||
<table cellspacing="0" cellpadding="1" border="1" width="100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th valign="top" class="cellrowborder"><strong>Shortcut</strong></th>
|
||||
<th valign="top" class="cellrowborder" style="text-align: center;"><strong>Linux and Windows</strong></th>
|
||||
<th style="text-align: center;"><strong>macOS</strong></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Cancel</td>
|
||||
<td style="text-align: center;"><kbd>Esc</kbd></td>
|
||||
<td style="text-align: center;"><kbd>Esc</kbd></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Clear undo</td>
|
||||
<td style="text-align: center;"><kbd>Ctrl</kbd><kbd>Q</kbd></td>
|
||||
<td style="text-align: center;"><kbd>Alt</kbd><kbd>Q</kbd></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Copy</td>
|
||||
<td style="text-align: center;"><kbd>Ctrl</kbd><kbd>C</kbd></td>
|
||||
<td style="text-align: center;"><kbd>⌘</kbd><kbd>C</kbd></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cut</td>
|
||||
<td style="text-align: center;"><kbd>Ctrl</kbd><kbd>X</kbd></td>
|
||||
<td style="text-align: center;"><kbd>⌘</kbd><kbd>X</kbd></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Delete</td>
|
||||
<td style="text-align: center;"><kbd>Supr</kbd> or <kbd>Delete</kbd></td>
|
||||
<td style="text-align: center;"><kbd>⌫</kbd></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Duplicate</td>
|
||||
<td style="text-align: center;"><kbd>Ctrl</kbd><kbd>D</kbd></td>
|
||||
<td style="text-align: center;"><kbd>⌘</kbd><kbd>D</kbd></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Paste</td>
|
||||
<td style="text-align: center;"><kbd>Ctrl</kbd><kbd>V</kbd></td>
|
||||
<td style="text-align: center;"><kbd>⌘</kbd><kbd>V</kbd></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Redo</td>
|
||||
<td style="text-align: center;"><kbd>Ctrl</kbd><kbd>Shift</kbd><kbd>Z</kbd></td>
|
||||
<td style="text-align: center;"><kbd>⌘</kbd><kbd>⇧</kbd><kbd>Z</kbd></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Start/Stop measurement</td>
|
||||
<td style="text-align: center;"><kbd>Alt</kbd> or <kbd>.</kbd></td>
|
||||
<td style="text-align: center;"><kbd>⌥</kbd> or <kbd>.</kbd></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Start editing</td>
|
||||
<td style="text-align: center;"><kbd>Enter</kbd></td>
|
||||
<td style="text-align: center;"><kbd>Enter</kbd></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Undo</td>
|
||||
<td style="text-align: center;"><kbd>Ctrl</kbd><kbd>Z</kbd></td>
|
||||
<td style="text-align: center;"><kbd>⌘</kbd><kbd>Z</kbd></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
|
||||
<h3 id="main-menu">Main menu</h3>
|
||||
<table cellspacing="0" cellpadding="1" border="1" width="100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th valign="top" class="cellrowborder"><strong>Shortcut</strong></th>
|
||||
<th valign="top" class="cellrowborder" style="text-align: center;"><strong>Linux and Windows</strong></th>
|
||||
<th style="text-align: center;"><strong>macOS</strong></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Switch color theme</td>
|
||||
<td style="text-align: center;"><kbd>Alt</kbd><kbd>M</kbd></td>
|
||||
<td style="text-align: center;"><kbd>⌥</kbd><kbd>M</kbd></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Export shapes</td>
|
||||
<td style="text-align: center;"><kbd>Ctrl</kbd><kbd>Shift</kbd><kbd>E</kbd></td>
|
||||
<td style="text-align: center;"><kbd>⌘</kbd><kbd>⇧</kbd><kbd>E</kbd></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Select all</td>
|
||||
<td style="text-align: center;"><kbd>Ctrl</kbd><kbd>A</kbd></td>
|
||||
<td style="text-align: center;"><kbd>⌘</kbd><kbd>A</kbd></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Set thumbnails</td>
|
||||
<td style="text-align: center;"><kbd>Shift</kbd><kbd>T</kbd></td>
|
||||
<td style="text-align: center;"><kbd>⇧</kbd><kbd>T</kbd></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Show/hide grid</td>
|
||||
<td style="text-align: center;"><kbd>Ctrl</kbd><kbd>'</kbd></td>
|
||||
<td style="text-align: center;"><kbd>⌘</kbd><kbd>'</kbd></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Show/hide pixel grid</td>
|
||||
<td style="text-align: center;"><kbd>Shift</kbd><kbd>,</kbd></td>
|
||||
<td style="text-align: center;"><kbd>⇧</kbd><kbd>,</kbd></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Show/hide rulers</td>
|
||||
<td style="text-align: center;"><kbd>Ctrl</kbd><kbd>Shift</kbd><kbd>R</kbd></td>
|
||||
<td style="text-align: center;"><kbd>⌘</kbd><kbd>⇧</kbd><kbd>R</kbd></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Show/hide shortcuts</td>
|
||||
<td style="text-align: center;"><kbd>?</kbd></td>
|
||||
<td style="text-align: center;"><kbd>?</kbd></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Snap to grid</td>
|
||||
<td style="text-align: center;"><kbd>Ctrl</kbd><kbd>Shift</kbd><kbd>'</kbd></td>
|
||||
<td style="text-align: center;"><kbd>⌘</kbd><kbd>⇧</kbd><kbd>'</kbd></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Snap to guides</td>
|
||||
<td style="text-align: center;"><kbd>Ctrl</kbd><kbd>Shift</kbd><kbd>G</kbd></td>
|
||||
<td style="text-align: center;"><kbd>⌘</kbd><kbd>⇧</kbd><kbd>G</kbd></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Snap to pixel grid</td>
|
||||
<td style="text-align: center;"><kbd>,</kbd></td>
|
||||
<td style="text-align: center;"><kbd>,</kbd></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Toggle dynamic alignment</td>
|
||||
<td style="text-align: center;"><kbd>Ctrl</kbd><kbd>\</kbd></td>
|
||||
<td style="text-align: center;"><kbd>⌘</kbd><kbd>\</kbd></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Toggle scale tool</td>
|
||||
<td style="text-align: center;"><kbd>K</kbd></td>
|
||||
<td style="text-align: center;"><kbd>K</kbd></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h3 id="modify-layers">Modify layers</h3>
|
||||
<table cellspacing="0" cellpadding="1" border="1" width="100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th valign="top" class="cellrowborder"><strong>Shortcut</strong></th>
|
||||
<th valign="top" class="cellrowborder" style="text-align: center;"><strong>Linux and Windows</strong></th>
|
||||
<th style="text-align: center;"><strong>macOS</strong></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Bring forward</td>
|
||||
<td style="text-align: center;"><kbd>Ctrl</kbd><kbd>↑</kbd></td>
|
||||
<td style="text-align: center;"><kbd>⌘</kbd><kbd>↑</kbd></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Bring to front</td>
|
||||
<td style="text-align: center;"><kbd>Ctrl</kbd><kbd>Shift</kbd><kbd>↑</kbd></td>
|
||||
<td style="text-align: center;"><kbd>⌘</kbd><kbd>⇧</kbd><kbd>↑</kbd></td>
|
||||
<tr>
|
||||
<tr>
|
||||
<td>Create artboard from selection</td>
|
||||
<td style="text-align: center;"><kbd>Ctrl</kbd><kbd>Alt</kbd><kbd>G</kbd></td>
|
||||
<td style="text-align: center;"><kbd>⌘</kbd><kbd>⌥</kbd><kbd>G</kbd></td>
|
||||
<tr>
|
||||
<tr>
|
||||
<td>Create component</td>
|
||||
<td style="text-align: center;"><kbd>Ctrl</kbd><kbd>K</kbd></td>
|
||||
<td style="text-align: center;"><kbd>⌘</kbd><kbd>K</kbd></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Detach component</td>
|
||||
<td style="text-align: center;"><kbd>Ctrl</kbd><kbd>Shift</kbd><kbd>K</kbd></td>
|
||||
<td style="text-align: center;"><kbd>⌘</kbd><kbd>⇧</kbd><kbd>K</kbd></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Flip horizontal</td>
|
||||
<td style="text-align: center;"><kbd>Ctrl</kbd><kbd>H</kbd></td>
|
||||
<td style="text-align: center;"><kbd>⌘</kbd><kbd>H</kbd></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Flip vertical</td>
|
||||
<td style="text-align: center;"><kbd>Ctrl</kbd><kbd>V</kbd></td>
|
||||
<td style="text-align: center;"><kbd>⌘</kbd><kbd>V</kbd></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Group</td>
|
||||
<td style="text-align: center;"><kbd>Ctrl</kbd><kbd>G</kbd></td>
|
||||
<td style="text-align: center;"><kbd>⌘</kbd><kbd>G</kbd></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Mask</td>
|
||||
<td style="text-align: center;"><kbd>Ctrl</kbd><kbd>M</kbd></td>
|
||||
<td style="text-align: center;"><kbd>⌘</kbd><kbd>M</kbd></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Move down</td>
|
||||
<td style="text-align: center;"><kbd>↓</kbd></td>
|
||||
<td style="text-align: center;"><kbd>↓</kbd></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Move down fast</td>
|
||||
<td style="text-align: center;"><kbd>Shift</kbd><kbd>↓</kbd></td>
|
||||
<td style="text-align: center;"><kbd>⇧</kbd><kbd>↓</kbd></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Move left</td>
|
||||
<td style="text-align: center;"><kbd>←</kbd></td>
|
||||
<td style="text-align: center;"><kbd>←</kbd></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Move left fast</td>
|
||||
<td style="text-align: center;"><kbd>Shift</kbd><kbd>←</kbd></td>
|
||||
<td style="text-align: center;"><kbd>⇧</kbd><kbd>←</kbd></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Move right</td>
|
||||
<td style="text-align: center;"><kbd>→</kbd></td>
|
||||
<td style="text-align: center;"><kbd>→</kbd></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Move right fast</td>
|
||||
<td style="text-align: center;"><kbd>Shift</kbd><kbd>→</kbd></td>
|
||||
<td style="text-align: center;"><kbd>⇧</kbd><kbd>→</kbd></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Move up</td>
|
||||
<td style="text-align: center;"><kbd>↑</kbd></td>
|
||||
<td style="text-align: center;"><kbd>↑</kbd></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Move up fast</td>
|
||||
<td style="text-align: center;"><kbd>Shift</kbd><kbd>↑</kbd></td>
|
||||
<td style="text-align: center;"><kbd>⇧</kbd><kbd>↑</kbd></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Send backwards</td>
|
||||
<td style="text-align: center;"><kbd>Ctrl</kbd><kbd>↓</kbd></td>
|
||||
<td style="text-align: center;"><kbd>⌘</kbd><kbd>↓</kbd></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Send to back</td>
|
||||
<td style="text-align: center;"><kbd>Ctrl</kbd><kbd>Shift</kbd><kbd>↓</kbd></td>
|
||||
<td style="text-align: center;"><kbd>⌘</kbd><kbd>⇧</kbd><kbd>↓</kbd></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>Set opacity to 10%</td>
|
||||
<td style="text-align: center;"><kbd>1</kbd></td>
|
||||
<td style="text-align: center;"><kbd>1</kbd></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Set opacity to 20%</td>
|
||||
<td style="text-align: center;"><kbd>2</kbd></td>
|
||||
<td style="text-align: center;"><kbd>2</kbd></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Set opacity to 30%</td>
|
||||
<td style="text-align: center;"><kbd>3</kbd></td>
|
||||
<td style="text-align: center;"><kbd>3</kbd></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Set opacity to 40%</td>
|
||||
<td style="text-align: center;"><kbd>4</kbd></td>
|
||||
<td style="text-align: center;"><kbd>4</kbd></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Set opacity to 50%</td>
|
||||
<td style="text-align: center;"><kbd>5</kbd></td>
|
||||
<td style="text-align: center;"><kbd>5</kbd></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Set opacity to 60%</td>
|
||||
<td style="text-align: center;"><kbd>6</kbd></td>
|
||||
<td style="text-align: center;"><kbd>6</kbd></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Set opacity to 70%</td>
|
||||
<td style="text-align: center;"><kbd>7</kbd></td>
|
||||
<td style="text-align: center;"><kbd>7</kbd></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Set opacity to 80%</td>
|
||||
<td style="text-align: center;"><kbd>8</kbd></td>
|
||||
<td style="text-align: center;"><kbd>8</kbd></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Set opacity to 90%</td>
|
||||
<td style="text-align: center;"><kbd>9</kbd></td>
|
||||
<td style="text-align: center;"><kbd>9</kbd></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Set opacity to 100%</td>
|
||||
<td style="text-align: center;"><kbd>0</kbd></td>
|
||||
<td style="text-align: center;"><kbd>0</kbd></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Ungroup</td>
|
||||
<td style="text-align: center;"><kbd>Shift</kbd><kbd>G</kbd></td>
|
||||
<td style="text-align: center;"><kbd>⇧</kbd><kbd>G</kbd></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Unmask</td>
|
||||
<td style="text-align: center;"><kbd>Ctrl</kbd><kbd>Shift</kbd><kbd>M</kbd></td>
|
||||
<td style="text-align: center;"><kbd>⌘</kbd><kbd>⇧</kbd><kbd>M</kbd></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h3 id="goto-screens-workspace">Navigation</h3>
|
||||
<table cellspacing="0" cellpadding="1" border="1" width="100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th valign="top" class="cellrowborder"><strong>Shortcut</strong></th>
|
||||
<th valign="top" class="cellrowborder" style="text-align: center;"><strong>Linux and Windows</strong></th>
|
||||
<th style="text-align: center;"><strong>macOS</strong></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Go to dashboard</td>
|
||||
<td style="text-align: center;"><kbd>G</kbd> and then <kbd>D</kbd></td>
|
||||
<td style="text-align: center;"><kbd>G</kbd> and then <kbd>D</kbd></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Go to view mode inspect section</td>
|
||||
<td style="text-align: center;"><kbd>G</kbd> and then <kbd>H</kbd></td>
|
||||
<td style="text-align: center;"><kbd>G</kbd> and then <kbd>H</kbd></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h3 id="panels">Panels</h3>
|
||||
<table cellspacing="0" cellpadding="1" border="1" width="100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th valign="top" class="cellrowborder"><strong>Shortcut</strong></th>
|
||||
<th valign="top" class="cellrowborder" style="text-align: center;"><strong>Linux and Windows</strong></th>
|
||||
<th style="text-align: center;"><strong>macOS</strong></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Assets</td>
|
||||
<td style="text-align: center;"><kbd>Alt</kbd><kbd>I</kbd></td>
|
||||
<td style="text-align: center;"><kbd>⌥</kbd><kbd>I</kbd></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Color palette</td>
|
||||
<td style="text-align: center;"><kbd>Alt</kbd><kbd>P</kbd></td>
|
||||
<td style="text-align: center;"><kbd>⌥</kbd><kbd>P</kbd></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>History</td>
|
||||
<td style="text-align: center;"><kbd>Alt</kbd><kbd>H</kbd></td>
|
||||
<td style="text-align: center;"><kbd>⌥</kbd><kbd>H</kbd></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Layers</td>
|
||||
<td style="text-align: center;"><kbd>Alt</kbd><kbd>L</kbd></td>
|
||||
<td style="text-align: center;"><kbd>⌥</kbd><kbd>L</kbd></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Show/hide UI</td>
|
||||
<td style="text-align: center;"><kbd>\</kbd></td>
|
||||
<td style="text-align: center;"><kbd>\</kbd></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Text palette</td>
|
||||
<td style="text-align: center;"><kbd>Alt</kbd><kbd>T</kbd></td>
|
||||
<td style="text-align: center;"><kbd>⌥</kbd><kbd>T</kbd></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h3 id="path-editor">Path editor</h3>
|
||||
<table cellspacing="0" cellpadding="1" border="1" width="100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th valign="top" class="cellrowborder"><strong>Shortcut</strong></th>
|
||||
<th valign="top" class="cellrowborder" style="text-align: center;"><strong>Linux and Windows</strong></th>
|
||||
<th style="text-align: center;"><strong>macOS</strong></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Add node</td>
|
||||
<td style="text-align: center;"><kbd>Shift</kbd><kbd>+</kbd></td>
|
||||
<td style="text-align: center;"><kbd>⇧</kbd><kbd>+</kbd></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Delete node</td>
|
||||
<td style="text-align: center;"><kbd>Supr</kbd> or <kbd>Delete</kbd></td>
|
||||
<td style="text-align: center;"><kbd>⌫</kbd></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Draw Path</td>
|
||||
<td style="text-align: center;"><kbd>P</kbd></td>
|
||||
<td style="text-align: center;"><kbd>P</kbd></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Join nodes</td>
|
||||
<td style="text-align: center;"><kbd>J</kbd></td>
|
||||
<td style="text-align: center;"><kbd>J</kbd></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Make corner</td>
|
||||
<td style="text-align: center;"><kbd>X</kbd></td>
|
||||
<td style="text-align: center;"><kbd>X</kbd></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Make curve</td>
|
||||
<td style="text-align: center;"><kbd>C</kbd></td>
|
||||
<td style="text-align: center;"><kbd>C</kbd></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Merge nodes</td>
|
||||
<td style="text-align: center;"><kbd>Ctrl</kbd><kbd>J</kbd></td>
|
||||
<td style="text-align: center;"><kbd>⌘</kbd><kbd>J</kbd></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Move Nodes</td>
|
||||
<td style="text-align: center;"><kbd>M</kbd></td>
|
||||
<td style="text-align: center;"><kbd>M</kbd></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Separate nodes</td>
|
||||
<td style="text-align: center;"><kbd>K</kbd></td>
|
||||
<td style="text-align: center;"><kbd>K</kbd></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Snap to nodes</td>
|
||||
<td style="text-align: center;"><kbd>Ctrl</kbd><kbd>'</kbd></td>
|
||||
<td style="text-align: center;"><kbd>⌘</kbd><kbd>'</kbd></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h3 id="shapes">Shapes</h3>
|
||||
<table cellspacing="0" cellpadding="1" border="1" width="100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th valign="top" class="cellrowborder"><strong>Shortcut</strong></th>
|
||||
<th valign="top" class="cellrowborder" style="text-align: center;"><strong>Linux and Windows</strong></th>
|
||||
<th style="text-align: center;"><strong>macOS</strong></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Boolean difference</td>
|
||||
<td style="text-align: center;"><kbd>Ctrl</kbd><kbd>Alt</kbd><kbd>D</kbd></td>
|
||||
<td style="text-align: center;"><kbd>⌘</kbd><kbd>⌥</kbd><kbd>D</kbd></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Boolean exclude</td>
|
||||
<td style="text-align: center;"><kbd>Ctrl</kbd><kbd>Alt</kbd><kbd>E</kbd></td>
|
||||
<td style="text-align: center;"><kbd>⌘</kbd><kbd>⌥</kbd><kbd>E</kbd></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Boolean intersection</td>
|
||||
<td style="text-align: center;"><kbd>Ctrl</kbd><kbd>Alt</kbd><kbd>I</kbd></td>
|
||||
<td style="text-align: center;"><kbd>⌘</kbd><kbd>⌥</kbd><kbd>I</kbd></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Boolean union</td>
|
||||
<td style="text-align: center;"><kbd>Ctrl</kbd><kbd>Alt</kbd><kbd>U</kbd></td>
|
||||
<td style="text-align: center;"><kbd>⌘</kbd><kbd>⌥</kbd><kbd>U</kbd></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h3 id="tools">Tools</h3>
|
||||
<table cellspacing="0" cellpadding="1" border="1" width="100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th valign="top" class="cellrowborder"><strong>Shortcut</strong></th>
|
||||
<th valign="top" class="cellrowborder" style="text-align: center;"><strong>Linux and Windows</strong></th>
|
||||
<th style="text-align: center;"><strong>macOS</strong></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Board</td>
|
||||
<td style="text-align: center;"><kbd>B</kbd></td>
|
||||
<td style="text-align: center;"><kbd>B</kbd></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Curve</td>
|
||||
<td style="text-align: center;"><kbd>Ctrl</kbd><kbd>C</kbd></td>
|
||||
<td style="text-align: center;"><kbd>⌘</kbd><kbd>C</kbd></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Ellipse</td>
|
||||
<td style="text-align: center;"><kbd>E</kbd></td>
|
||||
<td style="text-align: center;"><kbd>E</kbd></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Image</td>
|
||||
<td style="text-align: center;"><kbd>Shift</kbd><kbd>K</kbd></td>
|
||||
<td style="text-align: center;"><kbd>⇧</kbd><kbd>K</kbd></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Path</td>
|
||||
<td style="text-align: center;"><kbd>P</kbd></td>
|
||||
<td style="text-align: center;"><kbd>P</kbd></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Rectangle</td>
|
||||
<td style="text-align: center;"><kbd>R</kbd></td>
|
||||
<td style="text-align: center;"><kbd>R</kbd></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Text</td>
|
||||
<td style="text-align: center;"><kbd>T</kbd></td>
|
||||
<td style="text-align: center;"><kbd>T</kbd></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Flex Layout</td>
|
||||
<td style="text-align: center;"><kbd>Shift</kbd><kbd>A</kbd></td>
|
||||
<td style="text-align: center;"><kbd>Shift</kbd><kbd>A</kbd></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Grid Layout</td>
|
||||
<td style="text-align: center;"><kbd>Ctrl</kbd><kbd>Shift</kbd><kbd>A</kbd></td>
|
||||
<td style="text-align: center;"><kbd>⌘</kbd><kbd>Shift</kbd><kbd>A</kbd></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Color picker</td>
|
||||
<td style="text-align: center;"><kbd>I</kbd></td>
|
||||
<td style="text-align: center;"><kbd>I</kbd></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Comments</td>
|
||||
<td style="text-align: center;"><kbd>C</kbd></td>
|
||||
<td style="text-align: center;"><kbd>C</kbd></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Lock Proportions</td>
|
||||
<td style="text-align: center;"><kbd>Shift</kbd><kbd>L</kbd></td>
|
||||
<td style="text-align: center;"><kbd>⇧</kbd><kbd>L</kbd></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Lock selected</td>
|
||||
<td style="text-align: center;"><kbd>Ctrl</kbd><kbd>Shift</kbd><kbd>L</kbd></td>
|
||||
<td style="text-align: center;"><kbd>⌘</kbd><kbd>⇧</kbd><kbd>L</kbd></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Move</td>
|
||||
<td style="text-align: center;"><kbd>V</kbd></td>
|
||||
<td style="text-align: center;"><kbd>V</kbd></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Toggle focus mode</td>
|
||||
<td style="text-align: center;"><kbd>F</kbd></td>
|
||||
<td style="text-align: center;"><kbd>F</kbd></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Toggle scale text</td>
|
||||
<td style="text-align: center;"><kbd>K</kbd></td>
|
||||
<td style="text-align: center;"><kbd>K</kbd></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Toggle visibility</td>
|
||||
<td style="text-align: center;"><kbd>Ctrl</kbd><kbd>Shift</kbd><kbd>H</kbd></td>
|
||||
<td style="text-align: center;"><kbd>⌘</kbd><kbd>⇧</kbd><kbd>H</kbd></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h3 id="zoom-workspace">Zoom</h3>
|
||||
<table cellspacing="0" cellpadding="1" border="1" width="100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th valign="top" class="cellrowborder"><strong>Shortcut</strong></th>
|
||||
<th valign="top" class="cellrowborder" style="text-align: center;"><strong>Linux and Windows</strong></th>
|
||||
<th style="text-align: center;"><strong>macOS</strong></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Reset zoom to 100%</td>
|
||||
<td style="text-align: center;"><kbd>Shift</kbd> <kbd>0</kbd></td>
|
||||
<td style="text-align: center;"><kbd>⌘</kbd> <kbd>⇧</kbd> <kbd>0</kbd></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Zoom in</td>
|
||||
<td style="text-align: center;"><kbd>+</kbd> <br><br> <kbd>Ctrl</kbd> Scrollwheel <br><br> Pinch out (trackpad)</td>
|
||||
<td style="text-align: center;"><kbd>+</kbd> <br><br> <kbd>Option</kbd> Scrollwheel <br><br> Option-swipe (Magic Mouse) <br><br> Pinch out (trackpad) <br></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Zoom to fit all</td>
|
||||
<td style="text-align: center;"><kbd>Shift</kbd> <kbd>1</kbd></td>
|
||||
<td style="text-align: center;"><kbd>⌘</kbd> <kbd>⇧</kbd> <kbd>1</kbd></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Zoom to selected</td>
|
||||
<td style="text-align: center;"><kbd>Shift</kbd> <kbd>2</kbd></td>
|
||||
<td style="text-align: center;"><kbd>⌘</kbd> <kbd>⇧</kbd> <kbd>2</kbd></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Zoom out</td>
|
||||
<td style="text-align: center;"><kbd>-</kbd> <br><br> <kbd>Ctrl</kbd> Scrollwheel <br><br> Pinch in (trackpad)</td>
|
||||
<td style="text-align: center;"><kbd>-</kbd> <br><br> <kbd>Option</kbd> Scrollwheel <br><br> Option-swipe (Magic Mouse) <br> Pinch in (trackpad) <br></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Zoom lense in</td>
|
||||
<td style="text-align: center;"><kbd>Z</kbd></td>
|
||||
<td style="text-align: center;"><kbd>Z</kbd></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Zoom lense out</td>
|
||||
<td style="text-align: center;"><kbd>Alt</kbd> <kbd>Z</kbd></td>
|
||||
<td style="text-align: center;"><kbd>⌥</kbd> <kbd>Z</kbd></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
|
||||
<h3 id="text">Text edition</h3>
|
||||
<table cellspacing="0" cellpadding="1" border="1" width="100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th valign="top" class="cellrowborder"><strong>Shortcut</strong></th>
|
||||
<th valign="top" class="cellrowborder" style="text-align: center;"><strong>Linux and Windows</strong></th>
|
||||
<th style="text-align: center;"><strong>macOS</strong></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Bold</td>
|
||||
<td style="text-align: center;"><kbd>Ctrl</kbd> <kbd>B</kbd></td>
|
||||
<td style="text-align: center;"><kbd>⌘</kbd> <kbd>B</kbd></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Italic</td>
|
||||
<td style="text-align: center;"><kbd>Ctrl</kbd> <kbd>I</kbd></td>
|
||||
<td style="text-align: center;"><kbd>⌘</kbd> <kbd>I</kbd></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Underline</td>
|
||||
<td style="text-align: center;"><kbd>Ctrl</kbd> <kbd>U</kbd></td>
|
||||
<td style="text-align: center;"><kbd>⌘</kbd> <kbd>U</kbd></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Strikethrough</td>
|
||||
<td style="text-align: center;"><kbd>Shift</kbd> <kbd>Alt</kbd> <kbd>5</kbd></td>
|
||||
<td style="text-align: center;"><kbd>⇧</kbd> <kbd>⌥</kbd> <kbd>5</kbd></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Increase font size</td>
|
||||
<td style="text-align: center;"><kbd>Ctrl</kbd> <kbd>Shift</kbd> <kbd>RIGHT</kbd></td>
|
||||
<td style="text-align: center;"><kbd>⌘</kbd> <kbd>⇧</kbd> <kbd>RIGHT</kbd></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Decrease font size</td>
|
||||
<td style="text-align: center;"><kbd>Ctrl</kbd> <kbd>Shift</kbd> <kbd>LEFT</kbd></td>
|
||||
<td style="text-align: center;"><kbd>⌘</kbd> <kbd>⇧</kbd> <kbd>LEFT</kbd></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Increase letter spacing</td>
|
||||
<td style="text-align: center;"><kbd>Alt</kbd> <kbd>UP</kbd></td>
|
||||
<td style="text-align: center;"><kbd>⌥</kbd> <kbd>UP</kbd></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Decrease letter spacing</td>
|
||||
<td style="text-align: center;"><kbd>Alt</kbd> <kbd>DOWN</kbd></td>
|
||||
<td style="text-align: center;"><kbd>⌥</kbd> <kbd>DOWN</kbd></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Increase line height</td>
|
||||
<td style="text-align: center;"><kbd>Shift</kbd> <kbd>Alt</kbd> <kbd>UP</kbd></td>
|
||||
<td style="text-align: center;"><kbd>⇧</kbd> <kbd>⌥</kbd> <kbd>UP</kbd></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Decrease line height</td>
|
||||
<td style="text-align: center;"><kbd>Shift</kbd> <kbd>Alt</kbd> <kbd>DOWN</kbd></td>
|
||||
<td style="text-align: center;"><kbd>⇧</kbd> <kbd>⌥</kbd> <kbd>DOWN</kbd></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Align left</td>
|
||||
<td style="text-align: center;"><kbd>Ctrl</kbd> <kbd>Alt</kbd> <kbd>L</kbd></td>
|
||||
<td style="text-align: center;"><kbd>⌘</kbd> <kbd>⌥</kbd> <kbd>L</kbd></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Align right</td>
|
||||
<td style="text-align: center;"><kbd>Ctrl</kbd> <kbd>Alt</kbd> <kbd>R</kbd></td>
|
||||
<td style="text-align: center;"><kbd>⌘</kbd> <kbd>⌥</kbd> <kbd>R</kbd></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Align center</td>
|
||||
<td style="text-align: center;"><kbd>Ctrl</kbd> <kbd>Alt</kbd> <kbd>T</kbd></td>
|
||||
<td style="text-align: center;"><kbd>⌘</kbd> <kbd>⌥</kbd> <kbd>T</kbd></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Justify</td>
|
||||
<td style="text-align: center;"><kbd>Ctrl</kbd> <kbd>Alt</kbd> <kbd>J</kbd></td>
|
||||
<td style="text-align: center;"><kbd>⌘</kbd> <kbd>⌥</kbd> <kbd>J</kbd></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h2 id="dashboard-section"> Dashboard </h2>
|
||||
<p>The Dashboard is the place where you will be able to organize your files, libraries, projects and teams. <a href="/user-guide/the-interface/#interface-dashboard">More about the Dashboard</a>.</p>
|
||||
|
||||
<h3 id="generic-dashboard">Generic</h3>
|
||||
<table cellspacing="0" cellpadding="1" border="1" width="100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th valign="top" class="cellrowborder"><strong>Shortcut</strong></th>
|
||||
<th valign="top" class="cellrowborder" style="text-align: center;"><strong>Linux and Windows</strong></th>
|
||||
<th style="text-align: center;"><strong>macOS</strong></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Switch color theme</td>
|
||||
<td style="text-align: center;"><kbd>Alt</kbd><kbd>M</kbd></td>
|
||||
<td style="text-align: center;"><kbd>⌥</kbd><kbd>M</kbd></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Create new project</td>
|
||||
<td style="text-align: center;"><kbd>+</kbd></td>
|
||||
<td style="text-align: center;"><kbd>+</kbd></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Create new file (Inside project)</td>
|
||||
<td style="text-align: center;"><kbd>+</kbd></td>
|
||||
<td style="text-align: center;"><kbd>+</kbd></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h3 id="navigation-dashboard">Navigation</h3>
|
||||
<table cellspacing="0" cellpadding="1" border="1" width="100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th valign="top" class="cellrowborder"><strong>Shortcut</strong></th>
|
||||
<th valign="top" class="cellrowborder" style="text-align: center;"><strong>Linux and Windows</strong></th>
|
||||
<th style="text-align: center;"><strong>macOS</strong></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Go to shared libraries</td>
|
||||
<td style="text-align: center;"><kbd>G</kbd> and then <kbd>L</kbd></td>
|
||||
<td style="text-align: center;"><kbd>G</kbd> and then <kbd>L</kbd></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Go to drafts</td>
|
||||
<td style="text-align: center;"><kbd>G</kbd> and then <kbd>D</kbd></td>
|
||||
<td style="text-align: center;"><kbd>G</kbd> and then <kbd>D</kbd></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Search</td>
|
||||
<td style="text-align: center;"><kbd>Ctrl</kbd><kbd>F</kbd></td>
|
||||
<td style="text-align: center;"><kbd>⌘</kbd><kbd>F</kbd></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h2 id="viewer-section"> View mode </h2>
|
||||
<p>The View mode is the area to present and share designs and play the proptotype interactions. <a href="/user-guide/the-interface/#interface-viewmode">More about the View mode</a>.</p>
|
||||
|
||||
<h3 id="generic-viewer">Generic</h3>
|
||||
<table cellspacing="0" cellpadding="1" border="1" width="100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th valign="top" class="cellrowborder"><strong>Shortcut</strong></th>
|
||||
<th valign="top" class="cellrowborder" style="text-align: center;"><strong>Linux and Windows</strong></th>
|
||||
<th style="text-align: center;"><strong>macOS</strong></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Next frame</td>
|
||||
<td style="text-align: center;"><kbd>→</kbd></td>
|
||||
<td style="text-align: center;"><kbd>→</kbd></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Previous frame</td>
|
||||
<td style="text-align: center;"><kbd>←</kbd></td>
|
||||
<td style="text-align: center;"><kbd>←</kbd></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Select all</td>
|
||||
<td style="text-align: center;"><kbd>Ctrl</kbd><kbd>A</kbd></td>
|
||||
<td style="text-align: center;"><kbd>⌘</kbd><kbd>A</kbd></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h3 id="navigation-viewer">Navigation</h3>
|
||||
<table cellspacing="0" cellpadding="1" border="1" width="100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th valign="top" class="cellrowborder"><strong>Shortcut</strong></th>
|
||||
<th valign="top" class="cellrowborder" style="text-align: center;"><strong>Linux and Windows</strong></th>
|
||||
<th style="text-align: center;"><strong>macOS</strong></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Go to comment section</td>
|
||||
<td style="text-align: center;"><kbd>G</kbd> and then <kbd>C</kbd></td>
|
||||
<td style="text-align: center;"><kbd>G</kbd> and then <kbd>C</kbd></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Go to inspect section</td>
|
||||
<td style="text-align: center;"><kbd>G</kbd> and then <kbd>H</kbd></td>
|
||||
<td style="text-align: center;"><kbd>G</kbd> and then <kbd>H</kbd></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Go to interactions section</td>
|
||||
<td style="text-align: center;"><kbd>G</kbd> and then <kbd>V</kbd></td>
|
||||
<td style="text-align: center;"><kbd>G</kbd> and then <kbd>V</kbd></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Go to workspace</td>
|
||||
<td style="text-align: center;"><kbd>G</kbd> and then <kbd>W</kbd></td>
|
||||
<td style="text-align: center;"><kbd>G</kbd> and then <kbd>W</kbd></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h3 id="zoom-viewer">Zoom</h3>
|
||||
<table cellspacing="0" cellpadding="1" border="1" width="100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th valign="top" class="cellrowborder"><strong>Shortcut</strong></th>
|
||||
<th valign="top" class="cellrowborder" style="text-align: center;"><strong>Linux and Windows</strong></th>
|
||||
<th style="text-align: center;"><strong>macOS</strong></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Zoom in</td>
|
||||
<td style="text-align: center;"><kbd>+</kbd> <br><br> <kbd>Ctrl</kbd> Scrollwheel <br><br> Pinch out (trackpad)</td>
|
||||
<td style="text-align: center;"><kbd>+</kbd> <br><br> <kbd>Option</kbd> Scrollwheel <br><br> Option-swipe (Magic Mouse) <br><br> Pinch out (trackpad) <br></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Zoom out</td>
|
||||
<td style="text-align: center;"><kbd>-</kbd> <br><br> <kbd>Ctrl</kbd> Scrollwheel <br><br> Pinch in (trackpad)</td>
|
||||
<td style="text-align: center;"><kbd>-</kbd> <br><br> <kbd>Option</kbd> Scrollwheel <br><br> Option-swipe (Magic Mouse) <br> Pinch in (trackpad) <br></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Reset zoom to 100%</td>
|
||||
<td style="text-align: center;"><kbd>Shift</kbd> <kbd>0</kbd></td>
|
||||
<td style="text-align: center;"><kbd>⇧</kbd> <kbd>0</kbd></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Toggle zoom style</td>
|
||||
<td style="text-align: center;"><kbd>F</kbd></td>
|
||||
<td style="text-align: center;"><kbd>F</kbd></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Toggle fullscreen</td>
|
||||
<td style="text-align: center;"> <kbd>Shift</kbd> <kbd>F</kbd></td>
|
||||
<td style="text-align: center;"> <kbd>⇧</kbd> <kbd>F</kbd></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
292
docs/user-guide/layer-basics/index.njk
Normal file
292
docs/user-guide/layer-basics/index.njk
Normal file
|
|
@ -0,0 +1,292 @@
|
|||
---
|
||||
title: 04· Layer basics
|
||||
---
|
||||
|
||||
<h1 id="layer-basics">Layer basics</h1>
|
||||
<p class="main-paragraph">Every object you create in Penpot’s <a href="/user-guide/workspace-basics/#viewport">viewport</a> is a layer. Rectangles, ellipses, boards or text boxes are layers that you can use to build your design.</p>
|
||||
|
||||
<h2 id="pages">Pages</h2>
|
||||
<p>Pages allow you to organize layers into separate sections inside a file, and are shown in separate tabs. Subdividing a file into pages gives you the ability to split your file into logically different sections so that you can organise your work. For instance, you can use pages to separate stages of the design process but keep them in the same document. Different screen sizes, features or atomic design categories are other common ways to use pages. </p>
|
||||
|
||||
<p>You can add, remove or rename pages to suit your needs.</p>
|
||||
<figure>
|
||||
<video title="Creating pages" muted="" playsinline="" controls="" width="auto" poster="/img/layers/pages-create.webp" height="auto">
|
||||
<source src="/img/layers/pages-create.mp4" type="video/mp4">
|
||||
</video>
|
||||
</figure>
|
||||
|
||||
<h2 id="layers-panel">Layers panel</h2>
|
||||
<p><strong>Layers:</strong> Layers are the different objects that you can place at the design viewport. At the layers panel you can see all the layers of a file page. Drag the layers to arrange them to different positions.</p>
|
||||
<figure>
|
||||
<video title="Layers panel" muted="" playsinline="" controls="" width="auto" poster="/img/layers/layers-panel.webp" height="auto">
|
||||
<source src="/img/layers/layers-panel.mp4" type="video/mp4">
|
||||
</video>
|
||||
</figure>
|
||||
<h3>Navigate layers using the keyboard</h3>
|
||||
<ul>
|
||||
<li>Select a layer and press top/bottom arrows while pressing <kbd>Ctrl/⌘</kbd> to move them in the layers list.</li>
|
||||
<li>Press <kbd>tab</kbd> to change the layer selection to the next layer.</li>
|
||||
<li>Press <kbd>tab</kbd> + <kbd>Shift/⇧</kbd> to change the layer selection to the previous layer.</li>
|
||||
<li>If the layer contains other layers, press <kbd>Enter</kbd> to select the first layer inside the group and <kbd>Enter</kbd>+ <kbd>Shift/⇧</kbd> to move a level up.</li>
|
||||
</ul>
|
||||
|
||||
<p>Layers are displayed from the bottom to the top of the layer stack, with layers above on the stack being shown on top in the image.</p>
|
||||
|
||||
<h2 id="hide-lock">Hide and lock layers</h2>
|
||||
<p>Click on the eye icon to change the visibility of a layer. Click on the lock icon to lock or unlock a layer. A locked layer can not be modified.</p>
|
||||
<figure>
|
||||
<video title="Layers hide and lock" muted="" playsinline="" controls="" width="auto" poster="/img/layers/layers-hide-lock.webp" height="auto">
|
||||
<source src="/img/layers/layers-hide-lock.mp4" type="video/mp4">
|
||||
</video>
|
||||
</figure>
|
||||
|
||||
<h2 id="creating-layers">Create layers</h2>
|
||||
<p>To create a layer you have to select the type of layer by clicking the selected tool (board, rectangle, ellipse, text, image, path or curve) at the toolbar. Then you usually have to click and drag your mouse on the viewport. </p>
|
||||
<p>Hold <kbd>Shift/⇧</kbd> while creating an ellipse or a rectangle to maintain equal width and height.</p>
|
||||
<figure>
|
||||
<video title="Layers create" muted="" playsinline="" controls="" width="auto" poster="/img/layers/layers-create.webp" height="auto">
|
||||
<source src="/img/layers/layers-create.mp4" type="video/mp4">
|
||||
</video>
|
||||
</figure>
|
||||
|
||||
<h2 id="duplicating-layers">Duplicate layers</h2>
|
||||
<p>There are several ways to duplicate a layer:</p>
|
||||
<ol>
|
||||
<li>You can press <kbd>Ctrl/⌘</kbd> + <kbd>D</kbd> to duplicate a layer right over a selected layer. </li>
|
||||
<li>If you press right click over a selected layer at the viewport or at the layers panel you can use the option at the layer menu. </li>
|
||||
<li>You can also select a layer and drag while pressing <kbd>Alt/⌥</kbd> so you can simultaneously duplicate and drag the new layer.</li>
|
||||
</ol>
|
||||
<figure>
|
||||
<video title="Duplicate layers" muted="" playsinline="" controls="" width="auto" poster="/img/layers/layers-duplicate.webp" height="auto">
|
||||
<source src="/img/layers/layers-duplicate.mp4" type="video/mp4">
|
||||
</video>
|
||||
</figure>
|
||||
|
||||
<h2 id="delete-layers">Delete layers</h2>
|
||||
<p>There are a couple ways to delete a layer. </p>
|
||||
<ol>
|
||||
<li>You can press <kbd>Supr/⌫</kbd> to delete a selected layer. </li>
|
||||
<li>If you press right click over a selected layer at the viewport or at the layers panel you can use the option at the layer menu.</li>
|
||||
</ol>
|
||||
|
||||
<h2 id="select-layers">Select layers</h2>
|
||||
<p>The simplest way to select a layer is to click on it. Make sure that you have the “move” pointer selected at the toolbar. </p>
|
||||
<p>To select multiple layers you can click and drag around the layers you want to select. You can also click more than one layer while pressing <kbd>Shift/⇧</kbd>. If you hold <kbd>Shift/⇧</kbd> and click you can deselect layers individually.</p>
|
||||
<figure>
|
||||
<video title="Select layers" muted="" playsinline="" controls="" width="auto" poster="/img/layers/layers-select.webp" height="auto">
|
||||
<source src="/img/layers/layers-select.mp4" type="video/mp4">
|
||||
</video>
|
||||
</figure>
|
||||
|
||||
<h3>Selecting layers at the layers panel</h3>
|
||||
<ol>
|
||||
<li>Click a layer to do a single selection.</li>
|
||||
<li>Press <kbd>Ctrl/⌘</kbd> while clicking two or more layers to do a multiple selection.</li>
|
||||
<li>If you press <kbd>Shift/⇧</kbd> while selecting two or more layers all the layers within the selection area will be selected.</li>
|
||||
</ol>
|
||||
<figure>
|
||||
<video title="Select layers" muted="" playsinline="" controls="" width="auto" poster="/img/layers/layers-multiselect.webp" height="auto">
|
||||
<source src="/img/layers/layers-multiselect.mp4" type="video/mp4">
|
||||
</video>
|
||||
</figure>
|
||||
<h3>Select layers ignoring groups (deep selection)</h3>
|
||||
<p>If you want to select an element that is difficult to reach because it is under a group of elements, hold <kbd>Ctrl/⌘</kbd> to make the selection ignore group areas and treat all the objects as being at the same level.</p>
|
||||
<figure>
|
||||
<video title="Select layers" muted="" playsinline="" controls="" width="auto" poster="/img/layers/layers-deepselect.webp" height="auto">
|
||||
<source src="/img/layers/layers-deepselect.mp4" type="video/mp4">
|
||||
</video>
|
||||
</figure>
|
||||
<h3>Select layers inside groups</h3>
|
||||
<p>To <strong>select a layer inside a group</strong> you do double click. First click selects the group, second click selects a layer.</p>
|
||||
|
||||
<h3>Select layer menu</h3>
|
||||
<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>
|
||||
<li><strong>Group:</strong> To group two or more layers, select them and then press <kbd>Ctrl/⌘</kbd> + <kbd>G</kbd>. You can also use the option at the layers menu that you can open with right click.</li>
|
||||
<li><strong>Ungroup:</strong> Press <kbd>Shift/⇧</kbd> + <kbd>G</kbd> or use the option at the layers menu that you can open with right click over the selected group.</li>
|
||||
</ul>
|
||||
<figure>
|
||||
<video title="Group layers" muted="" playsinline="" controls="" width="auto" poster="/img/layers/layers-group.webp" height="auto">
|
||||
<source src="/img/layers/layers-group.mp4" type="video/mp4">
|
||||
</video>
|
||||
</figure>
|
||||
|
||||
<h2 id="mask-layers">Mask layers</h2>
|
||||
<p>A mask is a layer that does a clipping and only shows parts of a layer or multiple layers that fall within its shape. </p>
|
||||
<ul>
|
||||
<li><strong>Mask layers:</strong> Select more than one layer or a group of them. Then you can apply the masking using the option at the layers menu or by pressing <kbd>Ctrl/⌘</kbd> + <kbd>M</kbd>. The shape that is at the lowest level at the layer list will be used as a mask. </li>
|
||||
<li><strong>Unmask layers:</strong> Select a mask and then press <kbd>Shift/⇧</kbd> + <kbd>Ctrl/⌘</kbd> + <kbd>M</kbd> or use the option at the layers menu.</li>
|
||||
</ul>
|
||||
<figure>
|
||||
<video title="Mask layers" muted="" playsinline="" controls="" width="auto" poster="/img/layers/layers-mask.webp" height="auto">
|
||||
<source src="/img/layers/layers-mask.mp4" type="video/mp4">
|
||||
</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>
|
||||
<video title="Move layers" muted="" playsinline="" controls="" width="auto" poster="/img/layers/layers-move.webp" height="auto">
|
||||
<source src="/img/layers/layers-move.mp4" type="video/mp4">
|
||||
</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>
|
||||
<li>Hold <kbd>Shift/⇧</kbd> while resizing the object to preserve its aspect ratio.</li>
|
||||
<li>Hold <kbd>Alt/⌥</kbd> while resizing the object to do it from the center and resize simultaneously two opposite sides.</li>
|
||||
</ul>
|
||||
<figure>
|
||||
<video title="Resize layers" muted="" playsinline="" controls="" width="auto" poster="/img/layers/layers-resize.webp" height="auto">
|
||||
<source src="/img/layers/layers-resize.mp4" type="video/mp4">
|
||||
</video>
|
||||
</figure>
|
||||
|
||||
<h2 id="rotate-layers">Rotate layers</h2>
|
||||
<p>To rotate selected layers you can use the handles at the edges of the selection box. Make sure the cursor is in rotation mode. If you hold <kbd>Ctrl/⌘</kbd> while rotation the angle will change in 45 degree increments. You can also find this option at the design panel.</p>
|
||||
<figure>
|
||||
<video title="Rotate layers" muted="" playsinline="" controls="" width="auto" poster="/img/layers/layers-rotate.webp" height="auto">
|
||||
<source src="/img/layers/layers-rotate.mp4" type="video/mp4">
|
||||
</video>
|
||||
</figure>
|
||||
|
||||
<h2 id="flip-layers">Flip layers</h2>
|
||||
<p>You can find the options to flip layers in their contextual menu (select the layer and right click). You also have shortcuts to do this:</p>
|
||||
<ul>
|
||||
<li><strong>Flip layers horizontally:</strong> Select the layer and press <kbd>Shift/⇧</kbd> + <kbd>H</kbd></li>
|
||||
<li><strong>Flip layers vertically:</strong> Select the layer and then press <kbd>Shift/⇧</kbd> + <kbd>V</kbd>.</li>
|
||||
</ul>
|
||||
<figure>
|
||||
<video title="Flip layers" muted="" playsinline="" controls="" width="auto" poster="/img/layers/layers-flip.webp" height="auto">
|
||||
<source src="/img/layers/layers-flip.mp4" type="video/mp4">
|
||||
</video>
|
||||
</figure>
|
||||
|
||||
|
||||
<h2 id="scale-elements">Scale elements, texts and properties</h2>
|
||||
<p>Activate the scale tool by pressing <kbd>K</kbd> or from the main file menu to scale elements while maintaining their visual aspect. Once it is activated you can resize texts, layers and groups and preserve their aspect ratio while scaling their properties proportionally, including strokes, shadows, blurs and corners.
|
||||
<figure>
|
||||
<video title="Scale layers" muted="" playsinline="" controls="" width="auto" poster="/img/layers/layers-scale.webp" height="auto">
|
||||
<source src="/img/layers/layers-scale.mp4" type="video/mp4">
|
||||
</video>
|
||||
</figure>
|
||||
|
||||
<h2 id="aling-distribute-layers">Align and distribute layers</h2>
|
||||
<p>Aligning and distributing layers can be found at the top of the Design panel. </p>
|
||||
<h3>Align layers</h3>
|
||||
<p>Aligning will move all the selected layers to a position relative to one of them. For instance, aligning top will align the elements with the edge of the top-most element.</p>
|
||||
<figure>
|
||||
<video title="Align layers" muted="" playsinline="" controls="" width="auto" poster="/img/layers/layers-align.webp" height="auto">
|
||||
<source src="/img/layers/layers-align.mp4" type="video/mp4">
|
||||
</video>
|
||||
</figure>
|
||||
<h3>Distribute layers</h3>
|
||||
<p>Distributing objects to position them vertically and horizontally with equal distances between them.</p>
|
||||
<figure>
|
||||
<video title="Distribute layers" muted="" playsinline="" controls="" width="auto" poster="/img/layers/layers-distribute.webp" height="auto">
|
||||
<source src="/img/layers/layers-distribute.mp4" type="video/mp4">
|
||||
</video>
|
||||
</figure>
|
||||
|
||||
<h2 id="layers-search">Search and filter layers</h2>
|
||||
<p>Reach specific layers with a simple search. You can also filter the layers list per layer type (board, group, mask, component, text, image and shape).</p>
|
||||
<figure>
|
||||
<video title="Search and filter layers" muted="" playsinline="" controls="" width="auto" poster="/img/layers/layers-search.webp" height="auto">
|
||||
<source src="/img/layers/layers-search.mp4" type="video/mp4">
|
||||
</video>
|
||||
</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>
|
||||
<p>To collapse all the layers, and just display the boards,
|
||||
press <kbd>Shift/⇧</kbd> + left click over the right arrow of a group or a board to collapse them all.</p>
|
||||
<figure>
|
||||
<video title="Collapse layer groups" muted="" playsinline="" controls="" width="auto" poster="/img/layers/layers-collapse.webp" height="auto">
|
||||
<source src="/img/layers/layers-collapse.mp4" type="video/mp4">
|
||||
</video>
|
||||
</figure>
|
||||
|
||||
<h2 id="boolean-operators">Boolean operators</h2>
|
||||
<p>It is possible to combine shapes in a group in different ways to create more complex objects by using
|
||||
"boolean" operators. Boolean operators are non destructive and the original shapes remain grouped and available for more editing. There are five boolean operations available: union, difference, intersection, exclusion and flatten. Using boolean operations allows many graphic options and possibilities for your designs.</p>
|
||||
<figure>
|
||||
<video title="Boolean operators" muted="" playsinline="" controls="" width="auto" poster="/img/layers/layers-boolean.webp" height="auto">
|
||||
<source src="/img/layers/layers-boolean.mp4" type="video/mp4">
|
||||
</video>
|
||||
</figure>
|
||||
<ul>
|
||||
<li><strong>Union:</strong> the resulting combination is the sum of the shapes.</li>
|
||||
<li><strong>Difference:</strong> the opposite of union, the resulting object has the area of the shape on top has been cut out from the shape at the bottom.</li>
|
||||
<li><strong>Intersection:</strong> creates a group whose shape is the overlapping area between the shapes.</li>
|
||||
<li><strong>Exclusion:</strong> the opposite of intersection, the resulting shape is the area that does not overlap between the shapes.</li>
|
||||
<li><strong>Flatten:</strong> Tecnically not a boolean operator, this is the way to permanently combine the paths of a group of shapes in a single one.</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<h2 id="constraints">Resizing constraints</h2>
|
||||
<p>Constraints allow you to decide how layers will behave when resizing its container.</p>
|
||||
|
||||
<h3>Apply constraints</h3>
|
||||
<p>Constraints allow you to decide how layers will behave when resizing its parent container. You can apply horizontal and vertical constraints for every layer.</p>
|
||||
<p>To apply constraints select a layer and use the constraints map or the constraints selectors at the design panel.</p>
|
||||
<figure>
|
||||
<video title="Constraints" muted="" playsinline="" controls="" width="auto" poster="/img/layers/layers-constraints.webp" height="auto">
|
||||
<source src="/img/layers/layers-constraints.mp4" type="video/mp4">
|
||||
</video>
|
||||
</figure>
|
||||
<p>Constraints are set to “Scale” by default, but you have other options.</p>
|
||||
|
||||
<h3>Horizontal constraints</h3>
|
||||
<ul>
|
||||
<li><strong>Left</strong>: The object maintains its size and position relative to the left side of its parent container.</li>
|
||||
<li><strong>Right</strong>: The object maintains its size and position relative to the right side of its parent container.</li>
|
||||
<li><strong>Left & right</strong>: The object resizes while maintaining its distance to both horizontal sides of its parent container.</li>
|
||||
<li><strong>Center</strong>: The object maintains its size and position relative to the horizontal center of its parent container.</li>
|
||||
<li><strong>Scale</strong>: The object will horizontally resize proportionally to its parent container size.</li>
|
||||
</ul>
|
||||
<figure>
|
||||
<img src="/img/layers/layers-constraints-h.webp" alt="Horizontal constraints">
|
||||
</figure>
|
||||
|
||||
<h3>Vertical constraints</h3>
|
||||
<ul>
|
||||
<li><strong>Top</strong>: The object maintains its size and position relative to the top side of its parent container.</li>
|
||||
<li><strong>Bottom</strong>: The object maintains its size and position relative to the bottom side of its parent container.</li>
|
||||
<li><strong>Top & bottom</strong>: The object resizes while maintaining its distance to both vertical sides of its parent container.</li>
|
||||
<li><strong>Center</strong>: The object maintains its size and position relative to the vertical center of its parent container.</li>
|
||||
<li><strong>Scale</strong>: The object will vertically resize proportionally to its parent container size.</li>
|
||||
</ul>
|
||||
<figure>
|
||||
<img src="/img/layers/layers-constraints-v.webp" alt="Vettical constraints">
|
||||
</figure>
|
||||
|
||||
|
||||
<h2 id="focus-mode">Focus mode</h2>
|
||||
<p>Select the elements of a page you want to work with in a specific moment hiding the rest so they don’t get in the way of your attention. This option is also useful to improve the performance in cases where the page has a large number of elements.</p>
|
||||
<p>To activate focus mode:</p>
|
||||
<ol>
|
||||
<li>Select one or more elements.</li>
|
||||
<li>Right click to show the menu and select the option "Focus on" or press <kbd>F</kbd>.</li>
|
||||
</ol>
|
||||
<figure>
|
||||
<video title="Focus mode" muted="" playsinline="" controls="" width="100%" poster="/img/layers/layers-focus.webp" height="auto">
|
||||
<source src="/img/layers/layers-focus.mp4" type="video/mp4">
|
||||
</video>
|
||||
</figure>
|
||||
|
||||
|
||||
<h2 id="rtl-support">RTL support</h2>
|
||||
<p>Diversity and inclusion is a major Penpot concern and that's why we love to give support to RTL languages, unlike most design tools.</p>
|
||||
<p>If you write in arabic, hebrew or other RTL language text direction will be automatically detected in text layers.</p>
|
||||
<figure>
|
||||
<img src="/img/layers/layers-rtl.webp" alt="RTL support">
|
||||
</figure>
|
||||
202
docs/user-guide/libraries/index.njk
Normal file
202
docs/user-guide/libraries/index.njk
Normal file
|
|
@ -0,0 +1,202 @@
|
|||
---
|
||||
title: 09· Asset Libraries
|
||||
---
|
||||
|
||||
<h1 id="asset-libraries">Asset Libraries</h1>
|
||||
<p class="main-paragraph">Asset Libraries allow you to store elements and styles so that they can be easily reused. Libraries may include components, graphics, colors and typographies. Learn how to create and manage them to better organize the pieces of your designs and speed your workflow.</p>
|
||||
|
||||
<h2 id="assets">Assets</h2>
|
||||
|
||||
<h3 id="asset-types">Asset types</h3>
|
||||
<p>In Penpot you can store different type of assets:</p>
|
||||
<ul>
|
||||
<li><strong>Components:</strong> A component is an object or group of objects that can be reused multiple times across files (projects and teams in the future). Learn more at the <a href="/user-guide/components/">components section</a>.</li>
|
||||
<li><strong>Colors:</strong> Create your color styles and use them on fills and strokes.</li>
|
||||
<li><strong>Typographies:</strong> Penpot allows you to save typography styles with a set of reusable properties. You can always unlink a typography style maintaining the properties for the text layer.</li>
|
||||
<li><strong>[Deprecated] Graphics:</strong> In Penpot versions older than 2.0, bitmap and vector images can be stored at the Graphics section. This type was deprecated in favor of components.</li>
|
||||
</ul>
|
||||
|
||||
<h3 id="add-assets-to-library">Add assets to libraries</h3>
|
||||
<p>You can use the “+” icon to add assets. Each of the categories have their own specific adding action.</p>
|
||||
<h4>Components</h4>
|
||||
<p>There are two ways to add components to an assets library:</p>
|
||||
<ol>
|
||||
<li>Main components are automatically stored in the local library at the moment of being created. Learn more about components at the <a href="/user-guide/components/">components section</a>.</li>
|
||||
<li>Clicking the “+” to launch import an image that will be added as a component.</li>
|
||||
</ol>
|
||||
<figure>
|
||||
<video title="Add component" muted="" playsinline="" controls="" width="auto" poster="/img/libraries/add-component.webp" height="auto">
|
||||
<source src="/img/libraries/add-component.mp4" type="video/mp4">
|
||||
</video>
|
||||
</figure>
|
||||
<h4>Colors</h4>
|
||||
<p>Click the “+” to launch the color picker and add a color to the library. Learn more about <a href="/user-guide/styling/#fill">managing color</a></p>
|
||||
<figure>
|
||||
<video title="Add color" muted="" playsinline="" controls="" width="auto" poster="/img/libraries/add-color.webp" height="auto">
|
||||
<source src="/img/libraries/add-color.mp4" type="video/mp4">
|
||||
</video>
|
||||
</figure>
|
||||
<h4>Typographies</h4>
|
||||
<p>All typography styles created from the text properties (at the right sidebar) are automatically stored at the library. You can also click the “+” to create a new typography style from scratch.</p>
|
||||
<figure>
|
||||
<video title="Add typography" muted="" playsinline="" controls="" width="auto" poster="/img/libraries/add-typography.webp" height="auto">
|
||||
<source src="/img/libraries/add-typography.mp4" type="video/mp4">
|
||||
</video>
|
||||
</figure>
|
||||
<p><strong>Tip:</strong> If you select a text layer with certain properties (font family, size, line height...) and click the "+" at the Typographies section at the assets library (left sidebar), the created typography style will include the properties of the text layer.</p>
|
||||
|
||||
<h3 id="edit-assets">Edit assets</h3>
|
||||
<p>Press left click over any asset of the library to show the options menu. Some options are available only for certain assets.</p>
|
||||
<ul>
|
||||
<li><strong>Components:</strong> Rename, duplicate, delete, group.</li>
|
||||
<li><strong>Colors:</strong> Rename, edit, delete.</li>
|
||||
<li><strong>Typographies:</strong> Rename, edit, delete.</li>
|
||||
</ul>
|
||||
<figure>
|
||||
<video title="Asset options" muted="" playsinline="" controls="" width="auto" poster="/img/libraries/asset-options.webp" height="auto">
|
||||
<source src="/img/libraries/asset-options.mp4" type="video/mp4">
|
||||
</video>
|
||||
</figure>
|
||||
|
||||
<h3 id="use-assets">Use Assets</h3>
|
||||
<ul>
|
||||
<li><strong>Components:</strong> Drag the component directly from the library to the viewport.</li>
|
||||
<li><strong>Colors:</strong> With a shape or a text selected click a color from the library to apply it as a fill. If you press <kbd>Alt</kbd> (or <kbd>⌥</kbd> in macOS) while clicking, the color will be applied to the stroke.</li>
|
||||
<li><strong>Typographies:</strong> With a text layer selected click a typography style from the library to apply it.</li>
|
||||
</ul>
|
||||
<figure>
|
||||
<video title="Asset use" muted="" playsinline="" controls="" width="auto" poster="/img/libraries/asset-use.webp" height="auto">
|
||||
<source src="/img/libraries/asset-use.mp4" type="video/mp4">
|
||||
</video>
|
||||
</figure>
|
||||
|
||||
<h3 id="organize-assets">Organize assets</h3>
|
||||
<p>Learn how to better view and organize your assets:</p>
|
||||
|
||||
<h4>Assets list views</h4>
|
||||
<p>You can switch between list and grid views.</p>
|
||||
<ul>
|
||||
<li><strong>Grid view:</strong> With the thumbnails displayed is easier to visually identify the content of specific assets, specially components.</li>
|
||||
<li><strong>List view:</strong> Optimized to identify the assets by their names and view more assets at the same time.</li>
|
||||
</ul>
|
||||
<figure>
|
||||
<video title="Asset list" muted="" playsinline="" controls="" width="auto" poster="/img/libraries/asset-list.webp" height="auto">
|
||||
<source src="/img/libraries/asset-list.mp4" type="video/mp4">
|
||||
</video>
|
||||
</figure>
|
||||
|
||||
<h4>Sort assets</h4>
|
||||
<p>Click the sort button to change the alphabetical order.</p>
|
||||
<figure>
|
||||
<video title="Asset sort" muted="" playsinline="" controls="" width="auto" poster="/img/libraries/asset-order.webp" height="auto">
|
||||
<source src="/img/libraries/asset-order.mp4" type="video/mp4">
|
||||
</video>
|
||||
</figure>
|
||||
|
||||
<h4>Search assets</h4>
|
||||
<p>Use the Search assets box to filter the assets with names that match what you write.</p>
|
||||
<figure>
|
||||
<video title="Asset search" muted="" playsinline="" controls="" width="auto" poster="/img/libraries/asset-search.webp" height="auto">
|
||||
<source src="/img/libraries/asset-search.mp4" type="video/mp4">
|
||||
</video>
|
||||
</figure>
|
||||
|
||||
<h4>Filter assets</h4>
|
||||
<p>You can decide whether to show all asset types or only one of your choice (components, colors or typographies).</p>
|
||||
|
||||
<h4>Multiselect assets</h4>
|
||||
<figure>
|
||||
<video title="Asset search" muted="" playsinline="" controls="" width="auto" poster="/img/libraries/asset-multiselect.webp" height="auto">
|
||||
<source src="/img/libraries/asset-multiselect.mp4" type="video/mp4">
|
||||
</video>
|
||||
</figure>
|
||||
|
||||
<h4>Group assets</h4>
|
||||
<p>There are two ways to create groups in a library.</p>
|
||||
<ol>
|
||||
<li><strong>With slashes (/):</strong> Select an asset and rename it as follows: "FOLDER NAME/ASSET NAME". For example, "Buttons/Alert Button".</li>
|
||||
<li><strong>With the "Group" option:</strong> Select one or more assets at the library, then right click to show the menu and then select "Group".</li>
|
||||
</ol>
|
||||
<figure>
|
||||
<video title="Grouping components" muted="" playsinline="" controls="" width="100%" poster="/img/components/components-group.webp" height="auto">
|
||||
<source src="/img/components/components-group.mp4" type="video/mp4">
|
||||
</video>
|
||||
</figure>
|
||||
|
||||
<h4>Ungroup assets</h4>
|
||||
<p>You can ungroup the assets the same ways you can group them, via the menu option ("Ungroup" in this case) or renaming them.</p>
|
||||
|
||||
<h4>Drag assets to groups</h4>
|
||||
<p>One very direct way to move assets between groups at the libraries is by dragging them.</p>
|
||||
<figure>
|
||||
<video title="Drag components" muted="" playsinline="" controls="" width="auto" poster="/img/components/components-drag.webp" height="auto">
|
||||
<source src="/img/components/components-drag.mp4" type="video/mp4">
|
||||
</video>
|
||||
</figure>
|
||||
|
||||
|
||||
<h2 id="libraries">Libraries</h2>
|
||||
|
||||
<h3 id="file-libraries">File libraries</h3>
|
||||
<p>Each file has its own file library which is where the assets that belong to this file are stored.</p>
|
||||
<p>You have two ways to access the file library from the file <a href="/user-guide/the-interface/#interface-workspace">workspace</a>:</p>
|
||||
<ul>
|
||||
<li>Click the assets tab icon at the left sidebar.</li>
|
||||
<li>Press <kbd>Alt/⌥</kbd> + <kbd>i</kbd>.</li>
|
||||
</ul>
|
||||
<figure>
|
||||
<img src="/img/libraries/assets-tab.webp" alt="Library assets tab">
|
||||
</figure>
|
||||
|
||||
<h3 id="shared-libraries">Shared libraries</h3>
|
||||
<h4>Publish as shared library</h4>
|
||||
<p>You can publish any regular file as a shared library. This means that the file library of this file will be available to be connected to other files that exist in the same team, so its library assets can be reused.</p>
|
||||
<p>There are two ways to publish a library:</p>
|
||||
<ul>
|
||||
<li>Using the file main menu.</li>
|
||||
<li>From the libraries panel, that you can launch by clicking on the "Libraries" button that is found at the assets tab.</li>
|
||||
</ul>
|
||||
<figure>
|
||||
<img src="/img/libraries/libraries-publish-menu.webp" alt="Publish library">
|
||||
<figcaption>Publishing a library from the main menu</figcaption>
|
||||
</figure>
|
||||
<figure>
|
||||
<img src="/img/libraries/libraries-publish-panel.webp" alt="Publish library">
|
||||
<figcaption>Publishing a library from the libraries panel</figcaption>
|
||||
</figure>
|
||||
|
||||
<h4>Unpublish a shared library</h4>
|
||||
<p>You can unpublish any library anytime the same way you can publish it, both from the file menu and the libraries panel.</p>
|
||||
<p>Unpublishing a library will disconnect it from the files where it was connected. The assets that have already been used in other files will remain, but no longer linked with the now unpublished library.</p>
|
||||
|
||||
<h4>Library updates</h4>
|
||||
<p></p>
|
||||
<figure>
|
||||
<img src="/img/libraries/libraries-updates.webp" alt="Update libraries">
|
||||
</figure>
|
||||
|
||||
<h4>Connect shared libraries</h4>
|
||||
<p>To add a Shared Library from another file, launch the libraries panel, then search and select the available libraries. If you see the message "There are no Shared Libraries available", start by <a href="/user-guide/libraries/#shared-libraries">publishing other files as a shared library</a> or add from our <a href="https://penpot.app/libraries-templates">Libraries & templates</a>.</p>
|
||||
<figure>
|
||||
<video title="Connecting a shared library" muted="" playsinline="" controls="" width="100%" poster="/img/libraries/libraries-launch.webp" height="auto">
|
||||
<source src="/img/libraries/libraries-launch.mp4" type="video/mp4">
|
||||
</video>
|
||||
</figure>
|
||||
|
||||
<h4>Disconnect shared library</h4>
|
||||
<p>You can disconnect any library anytime from the libraries panel just by clicking on the disconnect button.</p>
|
||||
<figure>
|
||||
<img src="/img/libraries/libraries-disconnect.webp" alt="Disconnect libraries">
|
||||
</figure>
|
||||
|
||||
<h4>Use shared libraries</h4>
|
||||
<p>Shared libraries will be listed at the assets panel, at the workspace left sidebar. You can expand and collapse them to access the assets of each connected shared library.</p>
|
||||
<figure>
|
||||
<img src="/img/libraries/libraries-sidebar.webp" alt="Connected libraries list">
|
||||
</figure>
|
||||
|
||||
<h4>Open shared library file</h4>
|
||||
<p>Click on the arrow icon at the right of a shared library name to go to the file where the library is and edit its contents.</p>
|
||||
<figure>
|
||||
<img src="/img/libraries/libraries-open.webp" alt="Open libraries">
|
||||
</figure>
|
||||
192
docs/user-guide/objects/index.njk
Normal file
192
docs/user-guide/objects/index.njk
Normal file
|
|
@ -0,0 +1,192 @@
|
|||
---
|
||||
title: 05· Objects
|
||||
---
|
||||
|
||||
<h1 id="objects">Objects</h1>
|
||||
<p class="main-paragraph">Objects are items that you can place in the viewport. Boards, shapes, texts, paths and graphics are objects. The following describes the different objects that you have
|
||||
available in Penpot, and how to get the most of them.</p>
|
||||
|
||||
<h2 id="Boards">Boards</h2>
|
||||
<p>A Board is a layer typically used as a container for a design. Boards are useful if you want to design for a specific screen or print size. Boards can contain other boards. First level boards
|
||||
are shown by default at the <a href="/user-guide/view-mode">View mode</a>, acting as screens of a design or pages of a document. Also, objects inside boards can be clipped. Boards are a powerful element at Penpot, opening up a ton of possibilities when creating and organizing your designs.</p>
|
||||
|
||||
<h3>Create boards</h3>
|
||||
<p>You can create a board using the board tool at the toolbar or the shortcut <kbd>B</kbd>. </p>
|
||||
<p>Set a custom size or choose one of the provided presets with the most common resolution for devices and standard print sizes. </p>
|
||||
<figure>
|
||||
<video title="Create board" muted="" playsinline="" controls="" width="100%" poster="/img/objects/board-create.webp" height="auto">
|
||||
<source src="/img/objects/board-create.mp4" type="video/mp4">
|
||||
</video>
|
||||
</figure>
|
||||
|
||||
<p><strong>TIP:</strong> Create a board around one or more selected objects using the option "Selection to board" at the menu or the shortcut <kbd>Ctrl/⌘</kbd> + <kbd>Alt</kbd> + <kbd>G</kbd>.</p>
|
||||
|
||||
<h3>Select boards</h3>
|
||||
<p>There are two different cases in terms of selecting boards:</p>
|
||||
<ul>
|
||||
<li>For first level boards that have at least one inside, click on the board name or <kbd>Ctrl/⌘</kbd> + click on the board area to select it and then drag</li>
|
||||
<li>For the rest (empty first level boards and inside boards) just click to select.</li>
|
||||
</ul>
|
||||
<figure>
|
||||
<video title="Select board" muted="" playsinline="" controls="" width="auto" poster="/img/objects/board-select.webp" height="auto">
|
||||
<source src="/img/objects/board-select.mp4" type="video/mp4">
|
||||
</video>
|
||||
</figure>
|
||||
|
||||
<h3>Set board as thumbnail</h3>
|
||||
<p>Select a specific board to be the file thumbnail that will be shown at <a href="/user-guide/the-interface/#dashboard-interface" target="_blank">the dashboard</a> in the file card.</p>
|
||||
<p>To set a custom thumbnail:</p>
|
||||
<ol>
|
||||
<li>Select a board.</li>
|
||||
<li>Right click to show the menu and select "Set as thumbnail" or press <kbd>Shift</kbd> <kbd>T</kbd>.</li>
|
||||
</ol>
|
||||
<figure>
|
||||
<video title="Set board as thumbnail" muted="" playsinline="" controls="" width="auto" poster="/img/objects/board-thumbnail.webp" height="auto">
|
||||
<source src="/img/objects/board-thumbnail.mp4" type="video/mp4">
|
||||
</video>
|
||||
</figure>
|
||||
|
||||
<h3>Clip content</h3>
|
||||
<p>Boards offer the option to clip its content (or not).</p>
|
||||
<figure>
|
||||
<video title="Clip board" muted="" playsinline="" controls="" width="100%" poster="/img/objects/board-clip.webp" height="auto">
|
||||
<source src="/img/objects/board-clip.mp4" type="video/mp4">
|
||||
</video>
|
||||
</figure>
|
||||
|
||||
<h3>Show in View mode</h3>
|
||||
<p>Boards offer the option to be shown as a separate board/screen in the <a href="/user-guide/the-interface/#interface-viewmode">View mode</a>. Use this setting to decide what boards should be shown as individual items in your presentations.</p>
|
||||
<p><strong>Defaults</strong></p>
|
||||
<p>As it is very likely that the first level boards will be used as a screen and the interiors will not, there are different defaults for newly created boards.</p>
|
||||
<ul>
|
||||
<li>Boards created at first level (<a href="/user-guide/workspace-basics/#viewport">the viewport</a>): shown by default.</li>
|
||||
<li>Boards created inside other boards: not shown by default.</li>
|
||||
</ul>
|
||||
<figure>
|
||||
<img src="/img/objects/board-show.webp" alt="board show in view mode">
|
||||
</figure>
|
||||
|
||||
<h3>Show fill in exports</h3>
|
||||
<p> Sometimes you don’t need the artboards to be part of your designs, but only their support to work on them.
|
||||
Penpot allows you to decide if the fill of an artboard will be shown in exports, you just have to check/uncheck the "Show in exports" option which is below the fill setting.</p>
|
||||
<figure>
|
||||
<img src="/img/objects/board-fill.webp" alt="show board fill in exports">
|
||||
</figure>
|
||||
|
||||
<h3>Board guides</h3>
|
||||
<p>You can set guides on boards that will assist with aligning objects.</p>
|
||||
<p>Read more about <a href="/user-guide/workspace-basics/#guides">guides</a>.</p>
|
||||
<figure>
|
||||
<img src="/img/objects/board-guides.webp" alt="board guides">
|
||||
</figure>
|
||||
|
||||
<h3>Prototyping boards</h3>
|
||||
<p>You can connect boards with other boards to create rich interactions.</p>
|
||||
<p>Read more about <a href="/user-guide/prototyping/">prototyping</a>.</p>
|
||||
<figure>
|
||||
<img src="/img/objects/board-prototyping.webp" alt="prototyping with boards">
|
||||
</figure>
|
||||
|
||||
<h2 id="rectangles-ellipses">Rectangles and ellipses</h2>
|
||||
<p>Rectangle and ellipses are two basic “primitive” geometric shapes that are useful when starting
|
||||
a design.</p>
|
||||
<p>The shortcut keys are <kbd>E</kbd> for ellipses and <kbd>R</kbd> for rectangles.</p>
|
||||
<p>To find out more about how to edit and modify these shapes go to <a href="/user-guide/layer-basics/">Layer basics</a>.</p>
|
||||
<figure>
|
||||
<video title="Rectangles and ellipses" muted="" playsinline="" controls="" width="auto" poster="/img/objects/rectangles-ellipses.webp" height="auto">
|
||||
<source src="/img/objects/rectangles-ellipses.mp4" type="video/mp4">
|
||||
</video>
|
||||
</figure>
|
||||
|
||||
|
||||
<h2 id="text">Text</h2>
|
||||
<p>To insert text you have to activate the text tool by first clicking on the icon at the toolbar or pressing <kbd>T</kbd>. Then you have two ways to create a text layer:</p>
|
||||
<ol>
|
||||
<li><strong>Click</strong> to create a textbox without any specific dimensions.</li>
|
||||
<li><strong>Drag</strong> to create a textbox with a fixed size.</li>
|
||||
</ol>
|
||||
<figure>
|
||||
<video title="Create text" muted="" playsinline="" controls="" width="auto" poster="/img/objects/text-create.webp" height="auto">
|
||||
<source src="/img/objects/text-create.mp4" type="video/mp4">
|
||||
</video>
|
||||
</figure>
|
||||
<h3>Edit and style text content</h3>
|
||||
<p>Press <kbd>Enter</kbd> with a text layer selected to start editing the text content. You can style parts of the text content as rich text.</p>
|
||||
<figure>
|
||||
<img src="/img/objects/text-edit.webp" alt="editing text">
|
||||
</figure>
|
||||
<h3>Text options</h3>
|
||||
<figure>
|
||||
<img src="/img/objects/text-options.webp" alt="text options">
|
||||
</figure>
|
||||
<ol>
|
||||
<li><strong>Font family.</strong> Penpot includes by default the <a href="https://fonts.google.com/" target=”_blank”>Google Fonts</a> cataloge. You can also <a href="/user-guide/custom-fonts">install your own fonts</a>.</li>
|
||||
<li><strong>Font size.</strong></li>
|
||||
<li><strong>Font type.</strong></li>
|
||||
<li><strong>Line height</strong> (in pixels).</li>
|
||||
<li><strong>Letter spacing</strong> (in pixels).</li>
|
||||
<li><strong>Text case:</strong> none, uppercase, lowercase, titlecase.</li>
|
||||
<li><strong>Horizontal alignment:</strong> left, center, right, justify.</li>
|
||||
<li><strong>Sizing:</strong> auto height, auto width, fixed size.</li>
|
||||
<li><strong>Vertical alignment:</strong> top, center, bottom.</li>
|
||||
<li><strong>Decoration:</strong> none, underline, strikethrough.</li>
|
||||
<li><strong>Direction:</strong> LTR (left to right), RTL (right to left).</li>
|
||||
</ol>
|
||||
|
||||
<h2 id="curves">Curves (freehand)</h2>
|
||||
<p>The curve tool allows a path to be created directly in a freehand mode.
|
||||
Select the curve tool by clicking on the icon at the toolbar or pressing <kbd>Ctrl/⌘</kbd> + <kbd>c</kbd>.
|
||||
<p>The path created will contain a lot of points, but it is edited the same way as any other curve.</p>
|
||||
|
||||
<h2 id="paths">Paths (bezier)</h2>
|
||||
<p>A path is composed of two or more nodes and the line segments between them, which may also be curved. To draw a new path you have to select the path tool by clicking on the icon at the toolbar or pressing <kbd>P</kbd>. Then you have two ways to create the path:</p>
|
||||
<ol>
|
||||
<li><strong>Click</strong> to create a new corner node.</li>
|
||||
<li><strong>Click and drag</strong> to create a curved node.</li>
|
||||
</ol>
|
||||
<p>To finish the path:</p>
|
||||
<ol>
|
||||
<li><strong>Close it</strong> clicking over the starting node.</li>
|
||||
<li><strong>Leave it open</strong> pressing <kbd>Esc</kbd> or <kbd>Enter</kbd> to stop editing. Then press <kbd>Esc</kbd> to exit the edit mode.</li>
|
||||
</ol>
|
||||
<p><strong>Tip:</strong> If you hold <kbd>Shift/⇧</kbd> while adding nodes the angle between the current and the next will change in 45 degree increments.</p>
|
||||
<figure>
|
||||
<video title="Paths" muted="" playsinline="" controls="" width="100%" poster="/img/objects/path-create.webp" height="auto">
|
||||
<source src="/img/objects/path-create.mp4" type="video/mp4">
|
||||
</video>
|
||||
</figure>
|
||||
|
||||
<h3>Edit nodes</h3>
|
||||
<p>To edit a node double click on a path or select and press <kbd>Enter</kbd>.
|
||||
You can choose to edit individual nodes or create new ones. Press <kbd>Esc</kbd> to exit node edition. </p>
|
||||
<figure>
|
||||
<video title="Edit nodes" muted="" playsinline="" controls="" width="100%" poster="/img/objects/nodes-edit.webp" height="auto">
|
||||
<source src="/img/objects/nodes-edit.mp4" type="video/mp4">
|
||||
</video>
|
||||
</figure><h4>Node types</h4>
|
||||
<p>There are two types of nodes: curve or corner (straight). The type of a selected node can be changed at the bezier menu. Curved nodes have bezier handles that allow the curvature of a path to be modified.</p>
|
||||
<figure>
|
||||
<video title="Node types" muted="" playsinline="" controls="" width="100%" poster="/img/objects/node-types.webp" height="auto">
|
||||
<source src="/img/objects/node-types.mp4" type="video/mp4">
|
||||
</video>
|
||||
</figure>
|
||||
|
||||
|
||||
<h2 id="images">Images</h2>
|
||||
<h3>Insert images</h3>
|
||||
<p>There are several options for inserting an image into a Penpot file:</p>
|
||||
<ul>
|
||||
<li>Use the <strong>image tool</strong> at the toolbar or press <kbd>K</kbd> to inspect images in your file system.</li>
|
||||
<li><strong>Drag</strong> an image from your computer to the viewport.</li>
|
||||
<li>Copy an image & paste it or drag it right from a <strong>browser</strong>.</li>
|
||||
<li>Drag an image from a Penpot <strong>library</strong>.</li>
|
||||
</ul>
|
||||
|
||||
<h3>Images aspect ratio</h3>
|
||||
<p>Images fill the layer backgrounds by default, so they take up the entire object while maintaining the aspect ratio. This is great for flexible designs because the images can adapt to different sizes.</p>
|
||||
<p>However, if you don't want an image to keep its aspect ratio when resizing, you just have to uncheck the option in the image settings.</p>
|
||||
<figure>
|
||||
<video title="Changing the aspect ratio of an image" muted="" playsinline="" controls="" width="100%" poster="/img/objects/image-ratio.webp" height="auto">
|
||||
<source src="/img/objects/image-ratio.mp4" type="video/mp4">
|
||||
</video>
|
||||
</figure>
|
||||
49
docs/user-guide/plugins/index.njk
Normal file
49
docs/user-guide/plugins/index.njk
Normal file
|
|
@ -0,0 +1,49 @@
|
|||
---
|
||||
title: 17· Plugins
|
||||
---
|
||||
|
||||
<h1 id="penpot-plugins">Penpot Plugins</h1>
|
||||
|
||||
<h2 id="plugins">Plugins</h2>
|
||||
<p class="main-paragraph">Plugins are the perfect tool to extend Penpot's functionalities. You can install available plugins or create one that fits your needs!</p>
|
||||
|
||||
<h2 id="installation">How to install Plugins</h2>
|
||||
<h3 id="hub-installation">From PenpotHub</h2>
|
||||
|
||||
<p>You can find available Plugins at the <a href="https://help.penpot.app/plugins/getting-started/#examples">Penpot Hub</a> and install plugins directly from the Plugins page by clicking on <strong>Install</strong> next to the desired plugin.</p>
|
||||
|
||||
<img src="/img/plugins/00_PenpotHub_plugins.png" alt="Plugins in the Penpot hub's"></img>
|
||||
|
||||
<h3 id="url-installation">With a URL</h3>
|
||||
<p>Another way to install a plugin is by copying the URL (with .json extension) provided by the plugin’s author and pasting it on to the Plugin Manager.</p>
|
||||
|
||||
<img src="/img/plugins/02_install_url.png" alt="Install plugins using url"></img>
|
||||
|
||||
<p class="advice">Please note that you'll need to grant access to your files. Plugins may be created by external parties, so ensure you trust it before granting access. Your data privacy and security are important to us. If you have any concerns, please contact <a href="mailto:support@penpot.app">support</a>.</p>
|
||||
<p class="advice">If a plugin is later updated by the author and requires new permissions, we will notify you so that you can update it.</p>
|
||||
|
||||
<img src="/img/plugins/01_OAuth_permissions.png" alt="Plugin's permissions modal"></img>
|
||||
|
||||
<p>Once a plugin has been installed you can access it on your files, as long as you have permissions to access it, in any of your teams. If another member of your team wants to use the plugin, they will need to install it individually.</p>
|
||||
|
||||
<h2 id="plugin-manager">Plugin Manager</h2>
|
||||
<p class="main-paragraph">To start using Plugins you first need to open the Plugin Manager. There are a few different ways to access the Plugins Manager in the Worskpace:</p>
|
||||
<ul>
|
||||
<li>From the toolbar;</li>
|
||||
<li>From the menu;</li>
|
||||
<li>Using the shortcut <strong>Ctrl + Alt + P</strong>.</li>
|
||||
</ul>
|
||||
|
||||
<h3>Toolbar</h3>
|
||||
<img src="/img/plugins/03_toolbar_plugins.png" alt="Open plugin manager via toolbar"></img>
|
||||
|
||||
<h3>Menu</h3>
|
||||
<img src="/img/plugins/04_menu_plugins.png" alt="Open plugin manager via menu"></img>
|
||||
|
||||
<h2 id="using-plugins">Using plugins</h2>
|
||||
<p>To use a plugin, go to the Plugin Manager, and click on <strong>Open</strong> next to the desired plugin, and that’s it, enjoy!</p>
|
||||
|
||||
<img src="/img/plugins/05_plugin_manager.png" alt="Plugin manager modal"></img>
|
||||
|
||||
<h2 id="create-plugin">Create a Plugin</h2>
|
||||
<p>You can create your own plugin from scratch or use a Template to get started. You can find the complete guide to creating Plugins at the <a href="https://help.penpot.app/plugins/create-a-plugin/">Technical Guide</a>.</p>
|
||||
206
docs/user-guide/prototyping/index.njk
Normal file
206
docs/user-guide/prototyping/index.njk
Normal file
|
|
@ -0,0 +1,206 @@
|
|||
---
|
||||
title: 11· Prototyping
|
||||
---
|
||||
|
||||
<h1 id="prototype">Prototyping interactions</h1>
|
||||
<p class="main-paragraph">Learn how to build interactive prototypes to visualize how users navigate through your screens and mimic your product behaviour.<p>
|
||||
|
||||
<p class="main-paragraph">Penpot allows you to prototype interactions by connecting boards, which can act as screens. Once the prototype is prepared with interactions and/or flows, it can be used at the View mode and shared through a link.<p>
|
||||
|
||||
<h2 id="prototyping-connection">Connect boards</h2>
|
||||
<figure>
|
||||
<video title="Connect boards" muted="" playsinline="" controls="" width="100%" poster="/img/prototype/prototype-connect.webp" height="auto">
|
||||
<source src="/img/prototype/prototype-connect.mp4" type="video/mp4">
|
||||
</video>
|
||||
</figure>
|
||||
<p>The simplest and most usual way to prototype an interaction at Penpot is connecting boards. Add interactions following this simple steps:</p>
|
||||
<ol>
|
||||
<li>Open a file with at least two boards.</li>
|
||||
<li>Activate <strong>Prototype mode</strong> clicking at the tab at the right sidebar.</li>
|
||||
<li><strong>Select</strong> the layer (shape, board or group) that will trigger the interaction.</li>
|
||||
<li><strong>Drag</strong> a connection from the selected layer to the destination board.</li>
|
||||
<li>A <strong>flow start</strong> will be automatically created. <a href="/user-guide/prototyping/#prototyping-flows">More about flows</a>.</li>
|
||||
<li><strong>Launch</strong> the interactive prototype to see it in action in the <a href="/user-guide/view-mode/">View mode</a> (access by clicking the play button at the top right).</li>
|
||||
</ol>
|
||||
|
||||
<h3 id="prototype-anatomy">Anatomy of a prototype</h3>
|
||||
<figure>
|
||||
<img src="/img/prototype/prototype-anatomy.webp" alt="Different elements that involve prototyping with Penpot">
|
||||
</figure>
|
||||
<p class="hint">
|
||||
<strong>1)</strong> Hotspot (origin connection)
|
||||
<strong>2)</strong> Connector wire
|
||||
<strong>3)</strong> Destination
|
||||
<strong>4)</strong> Prototype mode tab
|
||||
<strong>5)</strong> View mode launcher
|
||||
<strong>6)</strong> Add new interaction
|
||||
<strong>7)</strong> Interaction trigger
|
||||
<strong>8)</strong> Interaction action
|
||||
<strong>9)</strong> Interaction animation
|
||||
<strong>10)</strong> Flow indicator and launcher
|
||||
</p>
|
||||
|
||||
<h2 id="interaction-triggers">Interaction triggers</h2>
|
||||
<figure>
|
||||
<img src="/img/prototype/prototype-trigger.webp" alt="Prototype trigger options">
|
||||
</figure>
|
||||
<p>A trigger defines the user action that will start the interaction. Penpot currently provides the following triggers (more of them will come):</p>
|
||||
<ul>
|
||||
<li><strong>On click:</strong> when user clicks or tap the hotspot.</li>
|
||||
<li><strong>Mouse enter:</strong> when the mouse enter the hotspot area.</li>
|
||||
<li><strong>Mouse leave:</strong> when the mouse leaves the hotspot area.</li>
|
||||
<li><strong>After delay:</strong> when a certain time has passed after a board is shown. Note: this can only be set at boards.</li>
|
||||
</ul>
|
||||
|
||||
<h2 id="prototyping-actions">Interaction actions</h2>
|
||||
<figure>
|
||||
<img src="/img/prototype/prototype-action.webp" alt="Prototype action options">
|
||||
</figure>
|
||||
<p>The action defines what will happen when the interaction is triggered. Penpot currently provides the following actions (more of them will come):</p>
|
||||
<ul>
|
||||
<li><strong>Navigate to</strong>.</li>
|
||||
<li><strong>Open overlay</strong>.</li>
|
||||
<li><strong>Toggle overlay</strong>.</li>
|
||||
<li><strong>Close overlay</strong>.</li>
|
||||
<li><strong>Previous screen</strong>.</li>
|
||||
<li><strong>Open URL</strong>.</li>
|
||||
</ul>
|
||||
|
||||
<h3 id="prototyping-actions-navigate">Navigate to</h3>
|
||||
<p>The classic, most usual of the prototyping actions. It takes the user from one board to the destination set in the interaction.</p>
|
||||
|
||||
<h3 id="prototyping-actions-overlay">Open overlay</h3>
|
||||
<p>It opens a board right over the current board. This action is typically used to display tooltips, modal windows or notifications.</p>
|
||||
<figure>
|
||||
<video title="Prototype overlay" muted="" playsinline="" controls="" width="100%" poster="/img/prototype/prototype-overlay.webp" height="auto">
|
||||
<source src="/img/prototype/prototype-overlay.mp4" type="video/mp4">
|
||||
</video>
|
||||
</figure>
|
||||
<p>You have several presets for positioning the overlay (center, top left, top right...) but you can also do it manually. Just select the “Manual” option and drag the “ghost” (an area with the size of the destination board) to the place you want the overlay to show up.</p>
|
||||
<p>There are also a couple of options that facilitates to mimic typical overlay behaviours:</p>
|
||||
<ul>
|
||||
<li>Close when clicking outside: the overlay is closed if the user clicks outside its area.</li>
|
||||
<li>Add background overlay: a black background with 20% opacity is added.</li>
|
||||
</ul>
|
||||
<p class="advice">TIP: You can select to open the overlay relative to the element that triggers it using the field "relative to". This is extremely useful for hover effects.</p>
|
||||
<figure>
|
||||
<img src="/img/prototype/prototype-overlay-relative.webp" alt="Prototype overlay relative position">
|
||||
</figure>
|
||||
<h3 id="prototyping-actions-overlay-toggle">Toggle overlay</h3>
|
||||
<p>It opens an overlay if it is not already opened or closes it if it is already opened.</p>
|
||||
|
||||
<h3 id="prototyping-actions-overlay-close">Close overlay</h3>
|
||||
<p>This action will close a targeted board that is opened as an overlay. It can be also set to “self” so the board can be closed from itself.</p>
|
||||
|
||||
<h3 id="prototyping-actions-previous">Previous screen</h3>
|
||||
<figure>
|
||||
<img src="/img/prototype/prototype-previous.webp" alt="Prototype previous screen action">
|
||||
</figure>
|
||||
<p>It takes back to the last board shown. This action is typically used for back buttons, when the same screen can be accessed from different origins.</p>
|
||||
|
||||
<h3 id="prototyping-actions-url">Open URL</h3>
|
||||
<p>This action opens an URL in a new tab. This is useful to add external links outside of the prototype.</p>
|
||||
|
||||
|
||||
<h2 id="prototyping-animations">Interaction animations</h2>
|
||||
<figure>
|
||||
<img src="/img/prototype/prototype-animation.webp" alt="Prototype animation options">
|
||||
</figure>
|
||||
<p>The animation defines the transition between boards when the interaction is triggered. Penpot currently provides the following actions (more of them will come):</p>
|
||||
<ul>
|
||||
<li><strong>Dissolve</strong>.</li>
|
||||
<li><strong>Slide</strong>.</li>
|
||||
<li><strong>Push</strong>.</li>
|
||||
</ul>
|
||||
|
||||
<h3 id="prototyping-animations-dissolve">Dissolve</h3>
|
||||
<figure>
|
||||
<img src="/img/prototype/prototyping-animations-dissolve.gif" alt="Prototyping animations">
|
||||
</figure>
|
||||
<p>Dissolve means that the destination board fades in while the origin board fades out.</p>
|
||||
<p>Options:</p>
|
||||
<ul>
|
||||
<li>Easing.</li>
|
||||
<li>Duration.</li>
|
||||
</ul>
|
||||
|
||||
<h3 id="prototyping-animations-Slide">Slide</h3>
|
||||
<figure>
|
||||
<img src="/img/prototype/prototyping-animations-slide.gif" alt="Prototyping animations">
|
||||
</figure>
|
||||
<p>Slide animation will move the destination frame in or out of the view.</p>
|
||||
<p>Options:</p>
|
||||
<ul>
|
||||
<li>IN / OUT.</li>
|
||||
<li>Direction (right, down, left, top).</li>
|
||||
<li>Easing.</li>
|
||||
<li>Duration.</li>
|
||||
<li>Offset effect.</li>
|
||||
</ul>
|
||||
<p><strong>Offset effect</strong> means that the origin board will slightly fade and move in the same direction of the destination board.</p>
|
||||
|
||||
<h3 id="prototyping-animations-push">Push</h3>
|
||||
<figure>
|
||||
<img src="/img/prototype/prototyping-animations-push.gif" alt="Prototyping animations">
|
||||
</figure>
|
||||
<p>Push animations will move the destination board into view pushing out the origin board.</p>
|
||||
<ul>
|
||||
<li>Direction (right, down, left, top).</li>
|
||||
<li>Easing.</li>
|
||||
<li>Duration.</li>
|
||||
</ul>
|
||||
|
||||
<h2 id="prototyping-flows">Flows</h2>
|
||||
<p>Design projects usually need to define multiple casuistics for different devices and user journeys. Flows allow you to define one or multiple starting points within the same page so you can better organize and present your prototypes.</p>
|
||||
|
||||
<p>A <strong>flow</strong> is defined by a starting board for an interaction. Flows can be selected independently at the view mode. Each flow has its own shareable link at the View mode.</p>
|
||||
|
||||
|
||||
<h3 id="prototyping-flows-starting">Starting points</h3>
|
||||
<p><strong>A starting point</strong> is a board selected to be the first screen of a flow. You could set a board as a starting point just because you want this board to be the first one to be shown in the view mode, but you can also set more starting points to define different user journeys.</p>
|
||||
<p>There are several ways to create starting points:</p>
|
||||
<ul>
|
||||
<li><strong>Automatically</strong>: when creating a connection from a board which is not connected yet (meaning that it does not belong to an existing flow), the origin board will be set as a flow start.
|
||||
<figure>
|
||||
<video title="New flow" muted="" playsinline="" controls="" width="100%" poster="/img/prototype/prototype-flow-new.webp" height="auto">
|
||||
<source src="/img/prototype/prototype-flow-new.mp4" type="video/mp4">
|
||||
</video>
|
||||
</figure>
|
||||
</li>
|
||||
<li><strong>From the prototype sidebar</strong>: having a board selected, click on the “+” button to set it as a flow start.
|
||||
<figure>
|
||||
<video title="Flow add" muted="" playsinline="" controls="" width="auto" poster="/img/prototype/prototype-flow-add.webp" height="auto">
|
||||
<source src="/img/prototype/prototype-flow-add.mp4" type="video/mp4">
|
||||
</video>
|
||||
</figure>
|
||||
|
||||
</li>
|
||||
<li><strong>From the board menu</strong>.
|
||||
<figure>
|
||||
<img src="/img/prototype/prototype-flow-menu.webp" alt="Prototyping flow from the menu">
|
||||
</figure>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<h3 id="prototyping-flows-multiple">Multiple flows</h3>
|
||||
<p>You can add as many flows as you want. The complete list of flows is shown at the prototype sidebar when no shape is selected.</p>
|
||||
<figure>
|
||||
<img src="/img/prototype/prototype-flows-multiple.webp" alt="Prototyping flows">
|
||||
</figure>
|
||||
|
||||
<h3 id="prototyping-flows-multiple">Flows at the view mode</h3>
|
||||
<p>At the view mode there’s a menu where you can access to all the flows set and easily switch between them.</p>
|
||||
<figure>
|
||||
<img src="/img/prototype/prototype-flows-viewmode.webp" alt="Prototyping flows">
|
||||
</figure>
|
||||
|
||||
<h2 id="prototyping-fix-scroll">Fix elements at scroll</h2>
|
||||
<p>You can fix the position of an object when scrolling at the presentation view. This is tipically useful for prototyping fixed headers, navbars and floating buttons.</p>
|
||||
<figure>
|
||||
<img src="/img/prototype/prototype-fix-scroll.webp" alt="Prototyping fix scroll">
|
||||
</figure>
|
||||
<p>Select an element and check the option "Fix when scrolling" that you can find inside the Constraints section at the Design sidebar (right side).</p>
|
||||
<figure>
|
||||
<img src="/img/prototype/prototyping-scroll.gif" alt="Prototyping scroll">
|
||||
</figure>
|
||||
<p>Launch the View Mode to see the elements with a fixed scroll position.</p>
|
||||
158
docs/user-guide/styling/index.njk
Normal file
158
docs/user-guide/styling/index.njk
Normal file
|
|
@ -0,0 +1,158 @@
|
|||
---
|
||||
title: 06· Styling
|
||||
---
|
||||
|
||||
<h1 id="styling">Styling</h1>
|
||||
<p class="main-paragraph">Penpot has a variety of styling options for each object. When selected, the styling options are displayed in the design panel on the right.</p>
|
||||
|
||||
<h2 id="fill">Color fills</h2>
|
||||
<p>Color fills can be added to boards, shapes, texts and groups of layers.</p>
|
||||
<p>You can add as fills:</p>
|
||||
<ul>
|
||||
<li>Custom colors (hex).</li>
|
||||
<li>Color <a href="/user-guide/libraries/#asset-types">assets</a>.</li>
|
||||
<li>Images.</li>
|
||||
</ul>
|
||||
<p>To apply a fill you can use: the color picker, the color palette or a color style.</p>
|
||||
<ul>
|
||||
<li>The <a href="/user-guide/styling/#color-picker">color picker</a>.</li>
|
||||
<li>The <a href="/user-guide/styling/#color-palette">color palette</a>.</li>
|
||||
<li>The <a href="/user-guide/libraries/">assets library</a>.</li>
|
||||
</ul>
|
||||
<figure>
|
||||
<video muted="" playsinline="" controls="" width="100%" poster="/img/styling/color-library.webp" height="auto">
|
||||
<source src="/img/styling/color-library.mp4" type="video/mp4">
|
||||
</video>
|
||||
<figcaption>Adding color fills from the assets library</figcaption>
|
||||
</figure>
|
||||
<p>You can also set the <strong>opacity</strong> for custom fill colors.</p>
|
||||
<p><strong>TIP:</strong> Select an element and press numbers from 0 to 9 to set their fill opacity. 1 to get 10%, 2 to get 20% and so on. You can set precise opacity by pressing two numbers consecutively in less than a second (for example 5 and 4 to set 54% opacity).</p>
|
||||
<figure>
|
||||
<video title="Change opacity" muted="" playsinline="" controls="" width="100%" poster="/img/styling/color-opacity.webp" height="auto">
|
||||
<source src="/img/styling/color-opacity.mp4" type="video/mp4">
|
||||
</video>
|
||||
</figure>
|
||||
<p>You can add as many fills as you want to the same layer. This opens endless graphic possibilities like combining gradients and blending modes in the same element to create unique visual effects.</p>
|
||||
<figure>
|
||||
<img alt="Multiple fills" src="/img/styling/fill-multiple.webp"/>
|
||||
</figure>
|
||||
|
||||
<h3>Remove a fill</h3>
|
||||
<p>To <strong>remove a fill</strong> from a selected object, press the “-” button in the fill section.</p>
|
||||
<figure>
|
||||
<img alt="Multiple fills" src="/img/styling/fill-remove.webp"/>
|
||||
</figure>
|
||||
|
||||
<h2 id="color-picker">Color picker</h2>
|
||||
<p>Here you have the anatomy of the color picker:</p>
|
||||
<figure>
|
||||
<img alt="Color picker" src="/img/styling/color-picker.webp"/>
|
||||
</figure>
|
||||
<ol>
|
||||
<li><strong>Eyedropper</strong> - Allows you to pick any color of the objects at the viewport.</li>
|
||||
<li><strong>Color profiles</strong> - Select between RGB, the Harmony Wheel or HSV.</li>
|
||||
<li><strong>Color type</strong> - Solid, linear gradient, radial gradient or image.</li>
|
||||
<li><strong>Sliders</strong> - Easily manage settings like brightness, saturation or opacity.</li>
|
||||
<li><strong>Values</strong> - Set precise color values of red(R), green(G), blue(B) and transparency(A).</li>
|
||||
<li><strong>Libraries</strong> - Switch between recent colors and libraries.</li>
|
||||
<li><strong>Color palette</strong> - A quick launcher of the palette with the selected library.</li>
|
||||
</ol>
|
||||
|
||||
<h2 id="color-palette">Color palette</h2>
|
||||
<p>The color palette allows you to have a selected color library in plain sight.</p>
|
||||
<figure>
|
||||
<video title="color palette" muted="" playsinline="" controls="" width="100%" poster="/img/styling/color-palette.webp" height="auto">
|
||||
<source src="/img/styling/color-palette.mp4" type="video/mp4">
|
||||
</video>
|
||||
</figure>
|
||||
<p>There are three ways to show/hide the color palette:</p>
|
||||
<ol>
|
||||
<li>From the <strong>main menu</strong> at the top left navbar.</li>
|
||||
<li>Pressing the color palette button the <strong>toolbar</strong>.</li>
|
||||
<li>Using the color palette <strong>launcher</strong> at the color picker (see previous section).</li>
|
||||
</ol>
|
||||
<p>Use the <strong>menu</strong> to easily switch between libraries.</p>
|
||||
<p>Switch between big and small <strong>thumbnails sizes</strong>.</p>
|
||||
|
||||
<h3 id="color-palette">Applying color from the palette</h3>
|
||||
<ul>
|
||||
<li><strong>Apply color to fill:</strong> Just select the shape and click on the preferred bullet in the color palette.</li>
|
||||
<li><strong>Apply color to stroke:</strong> Press <kbd>Alt</kbd> (or <kbd>⌥</kbd> in mac OS) while clicking.</li>
|
||||
</ul>
|
||||
|
||||
<h2 id="selected-colors">Selected colors</h2>
|
||||
<p>All of the colors that are contained within a selection of objects are showcased at the sidebar so you can play with the colors of a group without the hassles of individual selection.</p>
|
||||
<figure>
|
||||
<img alt="Selected colors" src="/img/styling/color-selected.webp"/>
|
||||
</figure>
|
||||
|
||||
<h2 id="strokes">Strokes</h2>
|
||||
<p>Strokes can be added to most of the objects at Penpot (rectangles, ellipses, boards, curves and images).</p>
|
||||
<figure>
|
||||
<video title="strokes" muted="" playsinline="" controls="" width="100%" poster="/img/styling/stroke.webp" height="auto">
|
||||
<source src="/img/styling/stroke.mp4" type="video/mp4">
|
||||
</video>
|
||||
</figure>
|
||||
<p>Stroke options are:</p>
|
||||
<ul>
|
||||
<li><strong>Color and opacity</strong></li>
|
||||
<li><strong>Width</strong> (in pixels)</li>
|
||||
<li><strong>Position</strong> - center, outside, inside</li>
|
||||
<li><strong>Style</strong> - solid, dotted, dashed, mixed</li>
|
||||
</ul>
|
||||
<p>You can add as many strokes as you want to the same layer.</p>
|
||||
<figure>
|
||||
<img alt="Multiple strokes" src="/img/styling/stroke-multiple.webp"/>
|
||||
</figure>
|
||||
|
||||
<h2 id="stroke-caps">Stroke Caps</h2>
|
||||
<p>Ever needed an arrow to point something? You can style the ends of any open paths selecting different styles for each end of an open path.</p>
|
||||
<figure>
|
||||
<video title="Stroke cap" muted="" playsinline="" controls="" width="100%" poster="/img/styling/stroke-cap.webp" height="auto">
|
||||
<source src="/img/styling/stroke-cap.mp4" type="video/mp4">
|
||||
</video>
|
||||
</figure>
|
||||
|
||||
<p>The stroke caps options are:</p>
|
||||
<ul>
|
||||
<li><strong>Line arrow</strong> - A simple line arrow (two lines at 45º) with the same width as the stroke.</li>
|
||||
<li><strong>Triangle arrow</strong> - A solid arrowhead with the shape of a triangle.</li>
|
||||
<li><strong>Square marker</strong></li>
|
||||
<li><strong>Circle marker</strong></li>
|
||||
<li><strong>Diamond marker</strong></li>
|
||||
<li><strong>Round</strong> - Adds a round ending to the end of the path.</li>
|
||||
<li><strong>Square</strong> - Adds a rectangular ending to the end of the path.</li>
|
||||
</ul>
|
||||
|
||||
<h2 id="radius">Corner radius</h2>
|
||||
<p>You can set values for corner radius to rectangles and images. There’s also the option to edit each corner individually.</p>
|
||||
<figure>
|
||||
<video title="Corner radius" muted="" playsinline="" controls="" width="100%" poster="/img/styling/corners.webp" height="auto">
|
||||
<source src="/img/styling/corners.mp4" type="video/mp4">
|
||||
</video>
|
||||
</figure>
|
||||
|
||||
|
||||
<h2 id="shadow">Shadow</h2>
|
||||
<p>Adding shadows is easy from the design panel. You can add as many as you want.</p>
|
||||
<figure>
|
||||
<img alt="Layer shadows" src="/img/styling/shadow.webp"/>
|
||||
</figure>
|
||||
<p>Shadow options are:</p>
|
||||
<ul>
|
||||
<li><strong>Type</strong> - Drop (outside the layer), inner (inside the layer)</li>
|
||||
<li><strong>Horizontal position</strong> (X)</li>
|
||||
<li><strong>Vertical position</strong> (Y)</li>
|
||||
<li><strong>Blur</strong></li>
|
||||
<li><strong>Spread</strong></li>
|
||||
<li><strong>Color and opacity</strong></li>
|
||||
</ul>
|
||||
|
||||
<h2 id="blur">Blur</h2>
|
||||
<p>You can set a blur for each and every object at Penpot.</p>
|
||||
<p><strong></strong>Applying a lot and/or big values for blurs can affect Penpot’s performance as it requires a lot from the browser.</p>
|
||||
<figure>
|
||||
<video title="Apply blur to a layer" muted="" playsinline="" controls="" width="100%" poster="/img/styling/blur.webp" height="auto">
|
||||
<source src="/img/styling/blur.mp4" type="video/mp4">
|
||||
</video>
|
||||
</figure>
|
||||
73
docs/user-guide/teams/index.njk
Normal file
73
docs/user-guide/teams/index.njk
Normal file
|
|
@ -0,0 +1,73 @@
|
|||
---
|
||||
title: 15· Teams
|
||||
---
|
||||
|
||||
<h1 id="teams">Teams</h1>
|
||||
<p class="main-paragraph">A team is a group of members who collaborate on a collection of projects.
|
||||
Team members are allowed to work with any project or file within the team. The actions that each team
|
||||
member is allowed to do depends on their permissions.</p>
|
||||
<p class="main-paragraph">At Penpot you can create and join as many teams as you need and add all necessary stakeholders with no team size limits.</p>
|
||||
|
||||
<h2 id="teams-management">Manage teams</h2>
|
||||
<p>At Penpot you can create as many teams as you need and be invited to teams owned by others. Learn how to manage them.</p>
|
||||
|
||||
<h3>Select team</h3>
|
||||
<p>At the top left of the dashboard you can find the team selector.</p>
|
||||
|
||||
<p>"Your Penpot" is the name of your personal space at Penpot. It is like any other team but in which no members can be invited so that you will always have your own private dashboard. Create or join other teams to collaborate with other Penpot users.</p>
|
||||
<figure><img src="/img/teams/team-selector.webp" alt="Teams selector" /></figure>
|
||||
|
||||
<h3>Create teams</h3>
|
||||
<p>To create a new team go to the bottom of the team selector and press "+ Create new team". Then you will be asked to enter a team name and that's it. Once a new team is created you are able to invite new team members.</p>
|
||||
<figure><img src="/img/teams/team-selector-projects.webp" alt="Teams selector" /></figure>
|
||||
|
||||
<h3>Delete and leave teams</h3>
|
||||
<p>All members can leave the team anytime from the same menu.</p>
|
||||
<p>Only the team owner can delete a team. The option can be found at the team menu (the three dots at the right side). When deleting a team all projects and files belonging to it will be permanently deleted.</p>
|
||||
<figure><img src="/img/teams/team-selector-delete.webp" alt="Teams selector" /></figure>
|
||||
|
||||
<h3>Team settings</h3>
|
||||
<p>At the team settings you can see the information about how many members, projects and files belong to it. Team name and profile picture can be updated.</p>
|
||||
|
||||
<h2 id="teams-members">Team members</h2>
|
||||
<p>At the team members area you can view all the users that are inside the team and manage them according to your permissions.</p>
|
||||
<figure><img src="/img/teams/team-members.webp" alt="Team members" /></figure>
|
||||
|
||||
<h3>Team roles</h3>
|
||||
<p>These are the team roles currently available at Penpot:</p>
|
||||
<ul>
|
||||
<li><strong>Owner:</strong> There's only one owner per team, the role is automatically assigned to the team creator. Owners have permissions to change every other member role, including transfering ownership. Owners can update team settings, invite members and delete teams.</strong></li>
|
||||
<li><strong>Admin:</strong> Permissions to change every other member role except owners. Can invite members and update team settings.</strong></li>
|
||||
<li><strong>Editor:</strong> Without permissions to change member roles, invite members or update team settings.</strong></li>
|
||||
</ul>
|
||||
<figure><img src="/img/teams/teams-permissions.webp" alt="Team members" /></figure>
|
||||
<p class="advice">More team roles will be eventually available, as well as fine grained permissions management to control members access and actions.</p>
|
||||
|
||||
<h3>Transfer ownership</h3>
|
||||
<p>An owner can transfer their ownership to another team member anytime and is requested to transfer it before leaving the team.</p>
|
||||
<figure><img src="/img/teams/team-transfer.webp" alt="Transfer team" /></figure>
|
||||
|
||||
<h2 id="teams-invites">Team invitations</h2>
|
||||
<h3>Invite people to a team</h3>
|
||||
<p>You can invite people to join the team using the "Invite to team" window. Add their emails separated by comma, select the role that will be assigned to them and press "Send invitation". An invitation will be sent to each of the added emails that still will need to be accepted.</p>
|
||||
<figure><img src="/img/teams/team-invite.webp" alt="Invite to team" /></figure>
|
||||
|
||||
<h2>Invitations status</h2>
|
||||
<p>Check the status of a team invitations at the "Invitations" section. Invitations can be pending (still valid but not accepted yet) or expired.</p>
|
||||
<figure><img src="/img/teams/team-invitations.webp" alt="Team invitations" /></figure>
|
||||
|
||||
<h3>Invitations options</h3>
|
||||
<p>You can perform the following actions over existing invitations:</p>
|
||||
<ul>
|
||||
<li><strong>Copy link:</strong> Will copy to your clipboard the same link that has been sent via email with the invitation, so you can have other ways to pass it to the invited person. This is specially useful for self-hosted installations, where sometimes SMTP email is not configured.</strong></li>
|
||||
<li><strong>Resend invitation:</strong> Will send the email invitation again.</strong></li>
|
||||
<li><strong>Delete invitation:</strong> Will remove the invitation from your invitation list, canceling it if is still pending.</strong></li>
|
||||
</ul>
|
||||
<figure><img src="/img/teams/team-invitations-actions.webp" alt="Team invitations actions" /></figure>
|
||||
|
||||
<h2 id="teams-webhooks">Webhooks</h2>
|
||||
|
||||
<p>Webhooks allow other websites and apps to be notified when certain events happen on Penpot, ensuring to create integrations with other services. While we are still working on a plugin system, this is a clever and simple way to create integrations with other services.</p>
|
||||
<figure><img src="/img/teams/webhooks.webp" alt="Webhooks" /></figure>
|
||||
|
||||
<p>You can find detailed info about Penpot webhooks at the <a href="/technical-guide/integration/#webhooks">Technical Guide</a>.</p>
|
||||
173
docs/user-guide/the-interface/index.njk
Normal file
173
docs/user-guide/the-interface/index.njk
Normal file
|
|
@ -0,0 +1,173 @@
|
|||
---
|
||||
title: 02· The interface
|
||||
---
|
||||
|
||||
<h1 id="the-interface">The interface</h1>
|
||||
<p class="main-paragraph">The Penpot interface has three main areas: Dashboard, Workspace and View mode. Lets take a look at their composition and main features.</p>
|
||||
|
||||
|
||||
<h2 id="interface-dashboard">Dashboard</h2>
|
||||
<p>The Dashboard is the place where you will be able to organize your files, libraries, projects and teams.</p>
|
||||
<figure>
|
||||
<a href="/img/interface/dashboard-dark.webp" target="_blank">
|
||||
<img src="/img/interface/dashboard-dark.webp" alt="Penpot's dashboard" />
|
||||
</a>
|
||||
</figure>
|
||||
|
||||
<p class="hint">
|
||||
<strong>1)</strong> Teams
|
||||
<strong>2)</strong> Search files
|
||||
<strong>3)</strong> Projects
|
||||
<strong>4)</strong> Drafts
|
||||
<strong>5)</strong> Shared Libraries
|
||||
<strong>6)</strong> Custom fonts
|
||||
<strong>7)</strong> Pinned projects
|
||||
<strong>8)</strong> User area
|
||||
<strong>9)</strong> Comment notifications
|
||||
<strong>10)</strong> Create project
|
||||
<strong>11)</strong> File card
|
||||
<strong>12)</strong> Libraries & Templates module
|
||||
</p>
|
||||
|
||||
<ol>
|
||||
<li><strong>Teams:</strong> A team allows you to collaborate with other Penpot users. Team members are allowed to work with any project or file within the team depending on their permissions. Members with admin permissions can also invite other members. Create or join as many teams as you need with different groups of people.</li>
|
||||
<li><strong>Search:</strong> If you are looking for a specific file just type its title at the search box.</li>
|
||||
<li><strong>Projects:</strong> A project allows you to group design files. It works pretty much like a folder in a file system. You can create as many projects as you need. If you are going to work with more people in a project, you should create it inside a team.</li>
|
||||
<li><strong>Drafts:</strong> The drafts section is where you can find the design files that are not inside any project.</li>
|
||||
<li><strong>Shared Libraries:</strong> In this section you will find all the design files that have been added as shared libraries. That way you will be able to better control the files that are sharing their assets. </li>
|
||||
<li><strong>Custom fonts:</strong> If you have purchased or own personal fonts that are not included in the catalog provided by Penpot, you can upload them from your computer and use them across the files of a team.</li>
|
||||
<li><strong>Pinned projects:</strong> If you want to keep some projects handy (for instance because you’re currently working on them) you can pin them to make them quickly available at the sidebar.</li>
|
||||
<li><strong>User area:</strong> This must be you! Access your profile settings, Penpot tutorials, the Penpot Community and more. You can also find here a way to leave us feedback. We’d love to read your thoughts :)</li>
|
||||
<li><strong>Comments notifications:</strong> Here you will be able to see if you have unread comments inside the files of the team.</li>
|
||||
<li><strong>Create project:</strong> Create as many projects as you need to organize your designs.</li>
|
||||
<li><strong>File card:</strong> Basic information about a file at plain sight. A preview, update info or if it’s added as a Shared Library. From there you can perform several actions over the file (rename, duplicate, move, download, delete).</li>
|
||||
<li><strong>Libraries & Templates module:</strong> A curated selection of Libraries & Templates files ready to import.</li>
|
||||
</ol>
|
||||
|
||||
|
||||
<h3 id="your-account">Your account</h3>
|
||||
<p>Your account settings can be changed at the user area, in <b>Your account</b>. Here you can make changes to your profile, password or account language, as well as generate personal access tokens and access release notes.</p>
|
||||
<p>If you want to change the email address associated to your account or remove your account entirely, this can be done in the <b>Profile</b> section.</p>
|
||||
|
||||
|
||||
|
||||
<h2 id="interface-workspace">Workspace</h2>
|
||||
<p>The Workspace is where you actually create your designs. You have an infinite canvas where you can work directly but you also have the ability to create and work inside boards that will help you to create pages and exportation units.</p>
|
||||
|
||||
<figure>
|
||||
<a href="/img/interface/workspace-dark.webp" target="_blank">
|
||||
<img src="/img/interface/workspace-dark.webp" alt="Penpot's workspace" />
|
||||
</a>
|
||||
</figure>
|
||||
|
||||
<p class="hint">
|
||||
<strong>1)</strong> Viewport
|
||||
<strong>2)</strong> Toolbar
|
||||
<strong>3)</strong> Main menu
|
||||
<strong>4)</strong> Pages
|
||||
<strong>5)</strong> Layers
|
||||
<strong>6)</strong> Rulers
|
||||
<strong>7)</strong> Color palette
|
||||
<strong>8)</strong> Typography palette
|
||||
<strong>9)</strong> Design properties
|
||||
<strong>10)</strong> Prototype mode
|
||||
<strong>11)</strong> Inspect mode
|
||||
<strong>12)</strong> View mode
|
||||
<strong>13)</strong> History panel
|
||||
<strong>14)</strong> Comments
|
||||
<strong>15)</strong> Zoom
|
||||
<strong>16)</strong> File status
|
||||
<strong>17)</strong> Users
|
||||
<strong>18)</strong> Assets panel
|
||||
</p>
|
||||
|
||||
<ol>
|
||||
<li><strong>Viewport:</strong> An infinite canvas to design without limits.</li>
|
||||
<li><strong>Toolbar: </strong> The toolbar is the place where you will find the tools to quickly and easily create the different types of objects: board, rectangle, ellipse, text, graphic, path and free drawing. <a href="/user-guide/objects/">More about objects.</a></li>
|
||||
<li><strong>Main menu:</strong> At the file main menu you are able to tweak your workspace configuration. Manage visibility for grids, rulers, panels. Enable or disable snapping, dynamic alignment. Add or remove the file as Shared Library. You can also find here help resources.</li>
|
||||
<li><strong>Pages:</strong> A file can have as many pages as you need. Each page has its own viewport (the almost infinite area where you actually create your designs) with its own layers. You can create, delete or reorder your pages at your needs.</li>
|
||||
<li><strong>Layers:</strong> Layers are the different objects that you can place at the design viewport. <a href="/user-guide/layer-basics/">More about layers.</a></li>
|
||||
<li><strong>Rulers:</strong> Coordinates to help you design. You can also drag guides from the rulers.</li>
|
||||
<li><strong>Color palette:</strong> The color palette allows you to always have a color library at plain sight. Use the menu to easily switch between libraries. <a href="/user-guide/styling/#color-palette">More about the color palette</a>.</li>
|
||||
<li><strong>Typography palette:</strong> The Typography palette allows you to always have the typography styles at plain sight. Use the menu to easily switch between libraries.</li>
|
||||
<li><strong>Design properties:</strong> At the Design properties sidebar you can find and edit the properties of a selected layer. 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/prototyping/">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>View mode:</strong> The view mode button launches a presentation with the boards. See more about what you can do at the <a href="/user-guide/view-mode/#viewmode-features">view mode.</a> </li>
|
||||
<li><strong>History panel:</strong> The history panel keeps track of the latest changes on an opened file. You can undo/redo to walk the changes and expand each one of them to get detailed information. <a href="/user-guide/workspace-basics/#history">More about history panel.</a></li>
|
||||
<li><strong>Comments:</strong> Activate comments mode to see all the comments at the file and add new ones.</li>
|
||||
<li><strong>Zoom:</strong> Zooming options.</li>
|
||||
<li><strong>File status:</strong> Information about the file saving state. Know if last changes are saved or if there is a problem.</li>
|
||||
<li><strong>Users:</strong> Here you can see how many users have the file open at any moment.</li>
|
||||
<li><strong>Assets panel:</strong> Each file has a default library (File Library) where you can store elements and styles that are likely to be reused within a project. That includes components, colors and typographies. To add an asset to a library just click the “+” button at the header of each asset group.</li>
|
||||
</ol>
|
||||
|
||||
|
||||
|
||||
<h2 id="interface-viewmode">View mode</h2>
|
||||
<p>Launch the view mode to present and share your designs, comment on them and play with the interactions set at the workspace. You also have an Inspect mode where you can get properties specifications and code snippets. <a href="/user-guide/view-mode/">More about the View mode.</a></p>
|
||||
|
||||
<figure>
|
||||
<a href="/img/interface/viewmode-dark.webp" target="_blank">
|
||||
<img src="/img/interface/viewmode-dark.webp" alt="Penpot's viewmode" />
|
||||
</a>
|
||||
</figure>
|
||||
|
||||
<p class="hint">
|
||||
<strong>1)</strong> Pages selector
|
||||
<strong>2)</strong> Boards selector
|
||||
<strong>3)</strong> Play mode
|
||||
<strong>4)</strong> Comments mode
|
||||
<strong>5)</strong> Inspect mode
|
||||
<strong>6)</strong> Interactions settings
|
||||
<strong>7)</strong> Zoom options
|
||||
<strong>8)</strong> Edit file
|
||||
<strong>9)</strong> Full screen
|
||||
<strong>10)</strong> Share prototype
|
||||
<strong>11)</strong> Boards counter
|
||||
<strong>12)</strong> Reset prototype
|
||||
<strong>13)</strong> Navigation button
|
||||
</p>
|
||||
|
||||
<ol>
|
||||
<li><strong>Pages selector:</strong> Navigate through the pages of a file.</li>
|
||||
<li><strong>Boards selector:</strong> Boards selector displays a list of the boards with thumbnails that provide a graphic overview of the file.</li>
|
||||
<li><strong>Play mode:</strong> Default presentation mode where you can also play with interactions.</li>
|
||||
<li><strong>Comments mode:</strong> Comments mode shows comments inside Boards and allows users to reply or add new ones.</li>
|
||||
<li><strong>Inspect mode:</strong> At the Inspect mode you can get design specifications such as object properties, measurements and distances. You can also get code snippets for CSS styles, HTML and SVG. <a href="/user-guide/view-mode/#viewmode-inspect">More about Inspect.</a></li>
|
||||
<li><strong>Interactions settings:</strong> Select whether to highlight interactions active areas on click, all the time or not at all. <a href="/user-guide/view-mode/#viewmode-features">More about interaction settings.</a></li>
|
||||
<li><strong>Zoom:</strong> Zoom options and info about their shortcuts.</li>
|
||||
<li><strong>Edit file:</strong> Opens file edition at the design workspace.</li>
|
||||
<li><strong>Fullscreen mode:</strong> Activate or deactivate browser fullscreen mode.</li>
|
||||
<li><strong>Share prototype:</strong> Create shareable links of the view mode to send it to developers, other designers or stakeholders, so they can view the designs and access the code specifications regardless of being at your team or even logged at Penpot.</li>
|
||||
<li><strong>Boards counter:</strong> Boards count and current position. </li>
|
||||
<li><strong>Reset prototype:</strong> Goes to the first board of the prototype.</li>
|
||||
<li><strong>Navigation buttons:</strong> Forward and backwards buttons.</li>
|
||||
</ol>
|
||||
|
||||
|
||||
<h2 id="interface-ui-theme">UI Theme</h2>
|
||||
<p>Penpot's default interface is dark but you can switch anytime to a light option. You have 2 ways to change the theme:</p>
|
||||
<ul>
|
||||
<li>From "Your account" > "Settings".</li>
|
||||
<li>Using the shortcut <kbd>Alt/⌥</kbd> + <kbd>M</kbd>.</li>
|
||||
</ul>
|
||||
|
||||
<figure>
|
||||
<a href="/img/interface/dashboard-light.webp" target="_blank">
|
||||
<img src="/img/interface/dashboard-light.webp" alt="Penpot's dashboard" />
|
||||
</a>
|
||||
<figcaption>Penpot's dashboard in light mode</figcaption>
|
||||
</figure>
|
||||
<figure>
|
||||
<a href="/img/interface/workspace-light.webp" target="_blank">
|
||||
<img src="/img/interface/workspace-light.webp" alt="Penpot's workspace" />
|
||||
</a>
|
||||
<figcaption>Penpot's workspace in light mode</figcaption>
|
||||
</figure>
|
||||
<figure>
|
||||
<a href="/img/interface/viewmode-light.webp" target="_blank">
|
||||
<img src="/img/interface/viewmode-light.webp" alt="Penpot's view mode" />
|
||||
</a>
|
||||
<figcaption>Penpot's view mode in light mode</figcaption>
|
||||
</figure>
|
||||
4
docs/user-guide/user-guide.json
Normal file
4
docs/user-guide/user-guide.json
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
{
|
||||
"layout": "layouts/user-guide.njk",
|
||||
"tags": "user-guide"
|
||||
}
|
||||
124
docs/user-guide/view-mode/index.njk
Normal file
124
docs/user-guide/view-mode/index.njk
Normal file
|
|
@ -0,0 +1,124 @@
|
|||
---
|
||||
title: 12· View mode
|
||||
---
|
||||
|
||||
<h1 id="viewmode">View mode</h1>
|
||||
<p class="main-paragraph">At Penpot, the View mode is the best place to present your designs. You will also be able to share them and play the interactions.<p>
|
||||
|
||||
<h3 id="viewmode-interface">View mode interface</h3>
|
||||
<p>Take a look at the anatomy of the View mode at this section: <a href="/user-guide/the-interface/#interface-viewmode">View mode interface</a>.</p>
|
||||
<figure>
|
||||
<a href="/img/interface/viewmode-dark.webp" target="_blank">
|
||||
<img src="/img/interface/viewmode-dark.webp" alt="Penpot's viewmode" />
|
||||
</a>
|
||||
</figure>
|
||||
|
||||
<h3 id="viewmode-launch">Launch View mode</h3>
|
||||
<p>To view your designs from the workspace at View mode click the play button at the top right of the navbar or press <kbd>G</kbd> <kbd>V</kbd>.</p>
|
||||
<p><strong>Note:</strong> the View mode shows only boards and their contents. Anything outside a board will not be shown at the View mode.</p>
|
||||
<figure>
|
||||
<img src="/img/viewmode/viewmode-play.webp" alt="Penpot's viewmode" />
|
||||
</figure>
|
||||
|
||||
<h3 id="viewmode-features">Features and options</h3>
|
||||
<p>You'll find different capabilities and options to help you present and test your designs.</p>
|
||||
<h4>Navigate boards</h4>
|
||||
<p>You can navigate through boards by pressing the <kbd>→</kbd> and <kbd>←</kbd> keyboard keys or the navigation buttons at the right and left of the screen.</p>
|
||||
|
||||
<h4>Play prototype interactions</h4>
|
||||
<p>The View mode is the place where you will be able to play prototype interactions. (<a href="/user-guide/prototyping/">More about prototyping interactions</a>).</p>
|
||||
|
||||
<h4>Interactions view settings</h4>
|
||||
<p>This setting allows you to decide how to show a visual cue for interactions: always, on click or just don't show.</p>
|
||||
<figure>
|
||||
<img src="/img/viewmode/viewmode-interactions.webp" alt="Penpot's viewmode" />
|
||||
</figure>
|
||||
|
||||
<h4>Boards list</h4>
|
||||
<p>Display the boards list by clicking on the board name at the header and have a nice overview of all the available boards at this page.</p>
|
||||
<figure>
|
||||
<img src="/img/viewmode/viewmode-boards.webp" alt="Penpot's viewmode" />
|
||||
</figure>
|
||||
|
||||
<h4>Pages list</h4>
|
||||
<p>Click at the page name at the header to display the pages menu and change between them.</p>
|
||||
<figure>
|
||||
<img src="/img/viewmode/viewmode-pages.webp" alt="Penpot's viewmode" />
|
||||
</figure>
|
||||
|
||||
<h4>Zooming options</h4>
|
||||
<ul>
|
||||
<li>Reset zoom to 100% <kbd>Shift+0</kbd></li>
|
||||
<li>Toggle zoom style (Scale down to fit / Scale to fill) <kbd>F</kbd></li>
|
||||
<li>Zoom in <kbd>+</kbd></li>
|
||||
<li>Zoom out <kbd>-</kbd></li>
|
||||
</ul>
|
||||
|
||||
<h4>Full screen</h4>
|
||||
<p>Toogle fullscreen <kbd>Shift+F</kbd></p>
|
||||
|
||||
<h4>Comments mode</h4>
|
||||
<p>Activate the <a href="/user-guide/view-mode/#viewmode-comments">comments</a> by pressing its button at the top navbar.</p>
|
||||
<p>Comments mode will not always be available in view mode shared links, this will depend on the link settings.</p>
|
||||
|
||||
<h4>Inspect mode</h4>
|
||||
<p>Activate the <a href="/user-guide/view-mode/#viewmode-inspect">inspect mode</a> by pressing its button at the top navbar.</p>
|
||||
<p>Inspect mode will not always be available in view mode shared links, this will depend on the link settings.</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 be shown here.</p>
|
||||
<figure>
|
||||
<img src="/img/viewmode/viewmode-comment.webp" alt="Penpot's viewmode" />
|
||||
</figure>
|
||||
|
||||
|
||||
<h2 id="viewmode-sharing">Share prototypes links</h3>
|
||||
<p>A "Share prototype link" is a public url that you can share so that someone can see the prototype regardless of whether they have a Penpot account.</p>
|
||||
<p>The Share prototype window can be found at the View mode and you can launch it using the "Share button".</p>
|
||||
<h4>Get link</h4>
|
||||
<p>To create a link press the button "Get link" and the link will be automatically created.</p>
|
||||
<figure>
|
||||
<img src="/img/viewmode/viewmode-share-create.webp" alt="Penpot's viewmode" />
|
||||
</figure>
|
||||
|
||||
<h4>Copy link</h4>
|
||||
<p>To copy the link you can copy the url or press the copy button.</p>
|
||||
<figure>
|
||||
<img src="/img/viewmode/viewmode-share-copy.webp" alt="Penpot's viewmode" />
|
||||
</figure>
|
||||
|
||||
<h4>Destroy link</h4>
|
||||
<p>To <strong>destroy a link</strong> press the button "Destroy link" and confirm the action. The link will cease to exist and will be no longer available, so be careful if you've already shared it. However, you can always create a new one.</p>
|
||||
<figure>
|
||||
<img src="/img/viewmode/viewmode-share-destroy.webp" alt="Penpot's viewmode" />
|
||||
</figure>
|
||||
|
||||
<p class="advice"><strong>Tip:</strong> Add your preferred "Interactions" setting (show / don't show / show on click) before creating the Share prototype link. This way the link will keep your selection.</p>
|
||||
|
||||
<h4>Manage permissions:</h4>
|
||||
<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>
|
||||
<li><strong>Can comment</strong>: allow comments to users that are not in the team where the file belongs.</li>
|
||||
<li><strong>Can inspect code</strong>: allow code inspection to users that are not in the team where the file belongs.</li>
|
||||
</ul>
|
||||
<figure>
|
||||
<img src="/img/viewmode/viewmode-share-options.webp" alt="Penpot's viewmode" />
|
||||
</figure>
|
||||
<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>
|
||||
<p><a href="/user-guide/inspect/">More about inspecting designs</a></p>
|
||||
<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>
|
||||
256
docs/user-guide/workspace-basics/index.njk
Normal file
256
docs/user-guide/workspace-basics/index.njk
Normal file
|
|
@ -0,0 +1,256 @@
|
|||
---
|
||||
title: 03· Workspace basics
|
||||
---
|
||||
|
||||
<h1 id="workspace-basics">Workspace basics</h1>
|
||||
<p class="main-paragraph">The Workspace is where you create designs. You have an infinite canvas where you can directly work but you also have the ability to create pages and boards that will help you to create exportable components.</p>
|
||||
|
||||
<h2 id="viewport">The viewport</h2>
|
||||
<p>Surrounded by panels, header and toolbars, in the middle of the workspace, you can find the viewport. The viewport is the design area of a file page. It is practically infinite. If what you need is a frame with specific, limited dimensions, you can create a board.</p>
|
||||
<figure>
|
||||
<a href="/img/workspace-basics/viewport.webp" target="_blank">
|
||||
<img src="/img/workspace-basics/viewport.webp" alt="Penpot's viewport" />
|
||||
</a>
|
||||
</figure>
|
||||
<h4>Moving around the viewport</h4>
|
||||
<p>Press <kbd>space</kbd> and drag to pan (move around the viewport). If you are using a trackpad you can do two finger scrolling.</p>
|
||||
<p>You can also use the scrollbars, which are specially useful for those who love using graphic tablets.</p>
|
||||
<figure>
|
||||
<video title="Navigating the viewport" muted="" playsinline="" controls="" width="100%" poster="/img/workspace-basics/viewport-navigate.webp" height="auto">
|
||||
<source src="/img/workspace-basics/viewport-navigate.mp4" type="video/mp4">
|
||||
</video>
|
||||
</figure>
|
||||
|
||||
|
||||
<h2 id="workspace-menu">The menu</h2>
|
||||
<p>There's a main menu at the workspace where you will find groups with all the actions that you can do at file level. File, View, Edit, Preferences and Help.</p>
|
||||
<figure>
|
||||
<img src="/img/workspace-basics/main-menu.webp" alt="Main menu" />
|
||||
</figure>
|
||||
|
||||
<h2 id="zoom">Zoom</h2>
|
||||
<h4>Zoom menu</h4>
|
||||
<p>To zoom in and out hold <kbd>Ctrl</kbd> (or <kbd>⌘</kbd> if using macOS) and use the scroll wheel on your mouse. You also have a bunch of useful shortcuts for the most common zoom levels that you can find at the zoom menu in the navigation bar.</p>
|
||||
<p><a href="/user-guide/introduction/shortcuts/#zoom" target="_blank">All zoom shortcuts →</a></p>
|
||||
<figure>
|
||||
<img src="/img/workspace-basics/workspace-zoom.webp" alt="Zoom options" />
|
||||
</figure>
|
||||
|
||||
<h4>Zoom lense</h4>
|
||||
<p>Press left click while pressing <kbd>Z</kbd> to zoom in to a specific point and <kbd>Alt/⌥</kbd> + <kbd>Z</kbd> to zoom out.</p>
|
||||
<p><img src="/img/zoom-lense.gif" alt="zoom lense" /></p>
|
||||
<!--figure>
|
||||
<video title="Zoom lense" muted="" playsinline="" controls="" width="100%" poster="/img/workspace-basics/workspace-zoom-lense.webp" height="auto">
|
||||
<source src="/img/workspace-basics/workspace-zoom-lense.mp4" type="video/mp4">
|
||||
</video>
|
||||
</figure-->
|
||||
|
||||
<h4>Zooming from the layers panel</h4>
|
||||
<p>Double click over a layer icon to zoom to the layer.</p>
|
||||
<figure>
|
||||
<video title="Zoom layer" muted="" playsinline="" controls="" width="auto" poster="/img/workspace-basics/workspace-zoom-layer.webp" height="auto">
|
||||
<source src="/img/workspace-basics/workspace-zoom-layer.mp4" type="video/mp4">
|
||||
</video>
|
||||
</figure>
|
||||
|
||||
<h2 id="dynamic-alignment">Dynamic alignment</h2>
|
||||
<p>While moving objects at the viewport Penpot will show alignment guides for the edges and the center of the layers at sight. Dynamic alignment also snaps the object that is being moved to those guides to help you align to the center of the edges of other objects.</p>
|
||||
<figure>
|
||||
<video title="dynamic alignment" muted="" playsinline="" controls="" width="auto" poster="/img/workspace-basics/dynamic-alignment.webp" height="auto">
|
||||
<source src="/img/workspace-basics/dynamic-alignment.mp4" type="video/mp4">
|
||||
</video>
|
||||
</figure>
|
||||
<p>If there are more than two objects nearby and you drag one of them Penpot will show their distance to help you distribute them equally. </p>
|
||||
<figure>
|
||||
<video title="dynamic alignment" muted="" playsinline="" controls="" width="auto" poster="/img/workspace-basics/dynamic-alignment-measurement.webp" height="auto">
|
||||
<source src="/img/workspace-basics/dynamic-alignment-measurement.mp4" type="video/mp4">
|
||||
</video>
|
||||
</figure>
|
||||
|
||||
<h2 id="rulers">Rulers</h2>
|
||||
<p>Penpot has rulers that measure in pixels.</p>
|
||||
<figure>
|
||||
<video title="Rulers" muted="" playsinline="" controls="" width="auto" poster="/img/workspace-basics/rulers.webp" height="auto">
|
||||
<source src="/img/workspace-basics/rulers.mp4" type="video/mp4">
|
||||
</video>
|
||||
</figure>
|
||||
|
||||
<h2 id="ruler-guides">Ruler guides</h2>
|
||||
<p>To create ruler guides click anywhere on the ruler an drag to some point of the viewport. Click on the vertical ruler to create a vertical guide and the horizontal ruler to you know what.</p>
|
||||
<figure>
|
||||
<video title="Ruler guides" muted="" playsinline="" controls="" width="auto" poster="/img/workspace-basics/ruler-guides.webp" height="auto">
|
||||
<source src="/img/workspace-basics/ruler-guides.mp4" type="video/mp4">
|
||||
</video>
|
||||
</figure><p>To <strong>delete ruler guides</strong> drag the guide to the ruler or select the guide and press delete / supr.</p>
|
||||
<p>To <strong>show/hide ruler guides</strong> use the same shortcut as for rulers: <kbd>Shift/CMD + Ctrl + R</kbd></p>
|
||||
|
||||
<h2 id="guides">Guides</h2>
|
||||
<p>Guides are design aids that are used to help you to align content to a
|
||||
geometric structure. In Penpot there are three types of guides:
|
||||
<strong>square</strong>, <strong>columns</strong> and <strong>rows</strong>.</p>
|
||||
|
||||
<p><strong>Note:</strong> Guides are only visible in the viewport and will never be shown on exports.</p>
|
||||
|
||||
<h3 id="add-guides">Add guides</h3>
|
||||
<p>Guides can be added at board level. With a board selected, in the design sidebar you'll find the section "Guides". Click the "+" button to add a guide to the selected board. You can add as many guides as you want.</p>
|
||||
<figure>
|
||||
<video title="Create guides" muted="" playsinline="" controls="" width="auto" poster="/img/workspace-basics/guides-create.webp" height="auto">
|
||||
<source src="/img/workspace-basics/guides-create.mp4" type="video/mp4">
|
||||
</video>
|
||||
</figure>
|
||||
<h3 id="hide-remove-guides">Hide and remove guides</h3>
|
||||
<p>You can hide a specific guide by clicking at the eye button of a guide configuration. If you want to remove a guide, use the "-" button at the right side of the guide settings.</p>
|
||||
<figure>
|
||||
<video title="Delete and hide guides" muted="" playsinline="" controls="" width="auto" poster="/img/workspace-basics/guides-delete-hide.webp" height="auto">
|
||||
<source src="/img/workspace-basics/guides-delete-hide.mp4" type="video/mp4">
|
||||
</video>
|
||||
</figure>
|
||||
|
||||
<h3 id="square-guides">Square guides</h3>
|
||||
<figure>
|
||||
<video title="Square guides" muted="" playsinline="" controls="" width="auto" poster="/img/workspace-basics/guides-square.webp" height="auto">
|
||||
<source src="/img/workspace-basics/guides-square.mp4" type="video/mp4">
|
||||
</video>
|
||||
</figure>
|
||||
<p>The options for square guides are:</p>
|
||||
<ul>
|
||||
<li><strong>Size</strong> (in pixels) </li>
|
||||
<li><strong>Color</strong></li>
|
||||
<li><strong>Opacity</strong> </li>
|
||||
</ul>
|
||||
|
||||
<h3 id="row-guides">Row guides</h3>
|
||||
<figure>
|
||||
<video title="Row guides" muted="" playsinline="" controls="" width="auto" poster="/img/workspace-basics/guides-rows.webp" height="auto">
|
||||
<source src="/img/workspace-basics/guides-rows.mp4" type="video/mp4">
|
||||
</video>
|
||||
<p>The options for row guides are:</p>
|
||||
<ul>
|
||||
<li><strong>Rows</strong></li>
|
||||
<li><strong>Type</strong> - stretch, top, center bottom</li>
|
||||
<li><strong>Height</strong> - "auto" by default.</li>
|
||||
<li><strong>Gutter</strong> - the space between each row.</li>
|
||||
<li><strong>Margin</strong></li>
|
||||
<li><strong>Color</strong></li>
|
||||
<li><strong>Opacity</strong></li>
|
||||
</ul>
|
||||
|
||||
<h3 id="column-guides">Column guides</h3>
|
||||
<figure>
|
||||
<video title="Column guides" muted="" playsinline="" controls="" width="auto" poster="/img/workspace-basics/guides-column.webp" height="auto">
|
||||
<source src="/img/workspace-basics/guides-column.mp4" type="video/mp4">
|
||||
</video>
|
||||
<p>The options for column guides are:</p>
|
||||
<ul>
|
||||
<li><strong>Columns</strong></li>
|
||||
<li><strong>Type</strong> - stretch, top, center bottom</li>
|
||||
<li><strong>Width</strong> - "auto" by default.</li>
|
||||
<li><strong>Gutter</strong> - the space between each column.</li>
|
||||
<li><strong>Margin</strong></li>
|
||||
<li><strong>Color</strong></li>
|
||||
<li><strong>Opacity</strong></li>
|
||||
</ul>
|
||||
|
||||
<h3 id="guides-defaults">Guides defaults</h3>
|
||||
<p>The first guides configuration (type, color, sizes...) that you get when adding guides is the default for each file guides.
|
||||
<ul>
|
||||
<li>Restore the properties of guides to the default by using the "Use default" button.</li>
|
||||
<li>Change the default settings to the ones of a guide by using the "Set as default" button.</li>
|
||||
</ul>
|
||||
<figure>
|
||||
<video title="Guide defaults" muted="" playsinline="" controls="" width="auto" poster="/img/workspace-basics/guides-default.webp" height="auto">
|
||||
<source src="/img/workspace-basics/guides-default.mp4" type="video/mp4">
|
||||
</video>
|
||||
</figure>
|
||||
|
||||
<h3 id="guides-visibility">Guides visibility</h3>
|
||||
<p>To hide or show all the guides at a file you can press <kbd>Ctrl/⌘</kbd> + <kbd>´</kbd> or use the option at the main menu at the top left of the navbar.</p>
|
||||
|
||||
<h3 id="guides-snap">Snap to guides</h3>
|
||||
<p>If you want to enable or disable the snapping to guides you can press <kbd>Shift/⇧</kbd> + <kbd>Ctrl/⌘</kbd> + <kbd>´</kbd> or use the option at the main menu at the top left of the navbar.</p>
|
||||
<figure>
|
||||
<video title="Guides snap" muted="" playsinline="" controls="" width="auto" poster="/img/workspace-basics/guides-snap.webp" height="auto">
|
||||
<source src="/img/workspace-basics/guides-snap.mp4" type="video/mp4">
|
||||
</video>
|
||||
</figure>
|
||||
|
||||
|
||||
<h2 id="snap-to-pixel">Snap to pixel</h2>
|
||||
<p>Objects automatically snap to the pixel grid. If you need a different kind of precision like working at subpixel level using measures with decimals you can disable this option anytime from the main menu.</p>
|
||||
<figure>
|
||||
<img src="/img/workspace-basics/workspace-snap.webp" alt="Snap to pixel setting" />
|
||||
</figure>
|
||||
|
||||
<h2 id="nudge-amount">Nudge amount</h2>
|
||||
<p>Set your chosen distance to move objects using the keyboard. This is a must if you’re working with guides (if you’re not, you should ;)). Being able to adjust the movement to your baseline grid (8px? 5px?) is a huge timesaver that will improve your quality of life while designing.</p>
|
||||
<figure>
|
||||
<img src="/img/workspace-basics/nudge.webp" alt="Nudge amount prompt" />
|
||||
</figure>
|
||||
<p>To adjust the nudge values (small and big), you can find the option at the main menu inside Preferences.</p>
|
||||
<figure>
|
||||
<img src="/img/workspace-basics/nudge-menu.webp" alt="Nudge amount prompt" />
|
||||
</figure>
|
||||
|
||||
<h2 id="shortcuts-panel">Shortcuts panel</h2>
|
||||
<p>Shortcuts boost your productivity but they are not easy to learn. A handy panel at your workspace will help you with that.</p>
|
||||
<p>Display the shortcuts panel at the workspace using the shortcut <kbd>?</kbd> or through the option at the <a href="/user-guide/workspace-basics/#workspace-menu">main menu</a>.</p>
|
||||
<p>The categories and a filter will help you to find the shortcut you need.</p>
|
||||
<figure>
|
||||
<img src="/img/workspace-basics/shortcuts.webp" alt="Shortcuts panel" />
|
||||
</figure>
|
||||
|
||||
<h2 id="history">History</h2>
|
||||
<p>The history panel keeps track of the latest changes on an opened file.</p>
|
||||
|
||||
<h4>View history</h4>
|
||||
<p>To view the recent history of a file at the workspace press <kbd>Ctrl/⌘</kbd> + <kbd>H</kbd> or click at the history icon on the toolbar at the left.</p>
|
||||
<p>At the history you can see items with information about the last changes. At first sight you have object type (rectangle, text, image...) and type of change (New, Modified, Deleted...). If you press the item further details are shown.</p>
|
||||
<figure>
|
||||
<img src="/img/workspace-basics/history.webp" alt="History panel" />
|
||||
</figure>
|
||||
<p><strong>Note:</strong> History panel is still in a very early state and shows only a limited list of changes at a current browser tab session. Refreshing the browser means refreshing the History as well. Eventually, Penpot will have a proper version history capacity.</p>
|
||||
|
||||
<h4>Navigate history</h4>
|
||||
<p>To navigate through the history press <kbd>Ctrl/⌘</kbd> + <kbd>Z</kbd> to go backwards and <kbd>Ctrl/⌘</kbd> + <kbd>Shift/⇧</kbd> + <kbd>Z</kbd> to go forward.</p>
|
||||
<p>You can also press any item of the history list to get to this specific state.</p>
|
||||
<figure>
|
||||
<video title="Navigate history" muted="" playsinline="" controls="" width="auto" poster="/img/workspace-basics/history-navigate.webp" height="auto">
|
||||
<source src="/img/workspace-basics/history-navigate.mp4" type="video/mp4">
|
||||
</video>
|
||||
</figure>
|
||||
|
||||
<h2 id="comments">Comments</h2>
|
||||
<p>Comments allow the team to have one priceless conversation getting and providing feedback right over the designs and prototypes.<p>
|
||||
|
||||
<h4>Adding comments</h4>
|
||||
<figure>
|
||||
<video title="Create comments" muted="" playsinline="" controls="" width="auto" poster="/img/workspace-basics/comments-create.webp" height="auto">
|
||||
<source src="/img/workspace-basics/comments-create.mp4" type="video/mp4">
|
||||
</video>
|
||||
</figure>
|
||||
<ol>
|
||||
<li>At the workspace, activate the comment tool by clicking the comment icon in the navbar or pressing the <kbd>C</kbd> key.</li>
|
||||
<li>Click on a location within the viewport to leave a comment. If you want the comment to appear in the board view, add the comment to the board.</li>
|
||||
<li>Write your comment in the text box.</li>
|
||||
<li>Press Post to leave the comment or Cancel to not do it.</li>
|
||||
</ol>
|
||||
<h4>How to reply a comment</h4>
|
||||
<ol>
|
||||
<li>Open a comment by clicking at its bubble (a circled number).</li>
|
||||
<li>Write your comment at the text box at the end of the comment popup.</li>
|
||||
<li>Press Post to leave the comment or Cancel to not do it.</li>
|
||||
</ol>
|
||||
<h4>Mark threads as read</h4>
|
||||
<p>Mark a thread as read using the checkbox at the comment box to make it disappear from the comments notifications at the dashboard.</p>
|
||||
<figure>
|
||||
<img src="/img/workspace-basics/comments-mark.webp" alt="Marking comments as read" />
|
||||
</figure>
|
||||
|
||||
<h4>Edit and remove comments</h4>
|
||||
<p>At the top right of the comment popup you can find options to edit or delete comments.</p>
|
||||
|
||||
<h4>Dashboard notifications</h4>
|
||||
<figure>
|
||||
<img src="/img/workspace-basics/comments-dashboard.webp" alt="Comments notifications" />
|
||||
</figure>
|
||||
<p>At your projects Dashboard you will be able to see if you have unread comments inside the files of the team.</p>
|
||||
Loading…
Add table
Add a link
Reference in a new issue