mirror of
https://github.com/penpot/penpot-docs.git
synced 2024-07-03 05:13:14 +00:00
🐛 User Guide guide header issues
This commit is contained in:
andy
Eva Marco
parent
f308bddce6
commit
f78c15f3ba
|
|
@ -16,31 +16,31 @@ eleventyNavigation:
|
|||
<ul class="intro-sections">
|
||||
<li>
|
||||
<a href="/contributing-guide/reporting-bugs">
|
||||
<h3>Reporting bugs</h3>
|
||||
<h2>Reporting bugs</h2>
|
||||
<p>Easy steps to bug hunting</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/contributing-guide/translations">
|
||||
<h3>Translations</h3>
|
||||
<h2>Translations</h2>
|
||||
<p>How to become a Penpot translator</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/contributing-guide/code-contributions">
|
||||
<h3>Core code contributions</h3>
|
||||
<h2>Core code contributions</h2>
|
||||
<p>Help Penpot improve its code</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/contributing-guide/coc">
|
||||
<h3>Code of conduct</h3>
|
||||
<h2>Code of conduct</h2>
|
||||
<p>Rules, values and principles</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="illus illus-libraries">
|
||||
<a href="https://penpot.app/libraries-templates.html" target="_blank">
|
||||
<h3>Libraries & templates</h3>
|
||||
<h2>Libraries & templates</h2>
|
||||
<p>Share your libraries and templates or download the ones you like.</p>
|
||||
</a>
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ title: 01· Reporting bugs
|
|||
|
||||
<p class="main-paragraph">Bug hunting is not difficult if you know how.</p>
|
||||
|
||||
<h3 id="reporting-bugs-howto">How to report a bug</h3>
|
||||
<h2 id="reporting-bugs-howto">How to report a bug</h2>
|
||||
|
||||
<p>We are using <a href="https://github.com/penpot/penpot/issues" target="_blank">GitHub Issues</a> for our public bugs. We keep a close eye on this and try to make it clear when we have an internal fix in progress. Before filing a new task, try to make sure your problem doesn't already exist.</p>
|
||||
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ title: 02· Translations
|
|||
|
||||
<p class="main-paragraph">Thank you for interest in contribute translating Penpot. Here you will find ways to do it.</p>
|
||||
|
||||
<h3 id="translations-howto">How to become a Penpot translator</h3>
|
||||
<h2 id="translations-howto">How to become a Penpot translator</h2>
|
||||
<p>We are using <a href="https://hosted.weblate.org/projects/penpot/frontend/" target="_blank">Weblate</a> as translation platform, so the first thing you need to be a Penpot translator is to have a Weblate account (you can <a href="https://hosted.weblate.org/accounts/register/" target="_blank">register here</a>).</p>
|
||||
<p>To start translating at Penpot:</p>
|
||||
<ol>
|
||||
|
|
@ -15,7 +15,7 @@ title: 02· Translations
|
|||
<li>You also might want to take a look at the guide for <a href="https://docs.weblate.org/en/latest/user/translating.html" target="_blank">Translating using Weblate</a>.</li>
|
||||
</ol>
|
||||
|
||||
<h3 id="translations-howto">Add a new language</h3>
|
||||
<h2 id="translations-howto">Add a new language</h2>
|
||||
<p>To add a language that is still not among the Penpot language options:</p>
|
||||
<ol>
|
||||
<li>Go to the <a href="https://hosted.weblate.org/projects/penpot/frontend/" target="_blank">languages list</a>.</li>
|
||||
|
|
@ -28,7 +28,7 @@ title: 02· Translations
|
|||
<p><img src="/img/translations-start-translation.png" alt="translations" /></p>
|
||||
|
||||
|
||||
<h3 id="translations-howto">Add a new translation</h3>
|
||||
<h2 id="translations-howto">Add a new translation</h2>
|
||||
<p>To add a new translation (a string with a lacking translation for a certain language) follow the next steps:</p>
|
||||
<ol>
|
||||
<li>Go to the <a href="https://hosted.weblate.org/projects/penpot/frontend/" target="_blank">languages list</a>.</li>
|
||||
|
|
@ -43,7 +43,7 @@ title: 02· Translations
|
|||
<p><img src="/img/translations-strings-list.png" alt="translations" /></p>
|
||||
|
||||
|
||||
<h3 id="translations-howto">Change an approved translation</h3>
|
||||
<h2 id="translations-howto">Change an approved translation</h2>
|
||||
<p>To edit an already approved translation string follow the next steps:</p>
|
||||
<ol>
|
||||
<li>Go to the <a href="https://hosted.weblate.org/projects/penpot/frontend/" target="_blank">languages list</a>.</li>
|
||||
|
|
|
|||
12
index.njk
12
index.njk
|
|
@ -13,25 +13,25 @@ eleventyNavigation:
|
|||
<ul class="help-sections">
|
||||
<li class="illus illus-userguide">
|
||||
<a href="/user-guide/">
|
||||
<h3>User guide →</h3>
|
||||
<h2>User guide →</h2>
|
||||
<p>Everything you need to know about how Penpot works.</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="illus illus-contributing">
|
||||
<a href="/contributing-guide/">
|
||||
<h3>Contributing guide →</h3>
|
||||
<h2>Contributing guide →</h2>
|
||||
<p>How to report bugs, add translations and more.</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="illus illus-techguide">
|
||||
<a href="/technical-guide/">
|
||||
<h3>Technical guide →</h3>
|
||||
<h2>Technical guide →</h2>
|
||||
<p>Installation, configuration and architecture.</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="illus illus-faq">
|
||||
<a href="https://community.penpot.app/c/faq/17">
|
||||
<h3>FAQs →</h3>
|
||||
<h2>FAQs →</h2>
|
||||
<p>Get quick answers to usual questions about "why and how" Penpot.</p>
|
||||
</a>
|
||||
</li>
|
||||
|
|
@ -41,7 +41,7 @@ eleventyNavigation:
|
|||
<path d="M312.923 83.527c-14.996-25.696-35.339-46.04-61.033-61.035C226.193 7.495 198.14 0 167.709 0c-30.426 0-58.49 7.5-84.181 22.493-25.696 14.995-46.038 35.34-61.035 61.035C7.498 109.222 0 137.281 0 167.704c0 36.544 10.662 69.406 31.991 98.593 21.327 29.19 48.879 49.388 82.652 60.597 3.931.73 6.842.216 8.734-1.527 1.893-1.745 2.838-3.93 2.838-6.549 0-.436-.037-4.365-.11-11.79-.075-7.427-.11-13.905-.11-19.433l-5.023.87c-3.202.585-7.242.834-12.12.764-4.875-.068-9.936-.58-15.176-1.53-5.242-.94-10.118-3.124-14.631-6.546-4.511-3.42-7.714-7.899-9.607-13.427l-2.183-5.025c-1.456-3.346-3.747-7.062-6.878-11.136-3.13-4.077-6.296-6.84-9.498-8.297l-1.53-1.094a16.031 16.031 0 01-2.838-2.623c-.873-1.018-1.527-2.037-1.964-3.057-.437-1.02-.075-1.859 1.092-2.516 1.166-.657 3.274-.976 6.332-.976l4.366.653c2.912.583 6.514 2.326 10.81 5.24 4.294 2.91 7.823 6.695 10.59 11.352 3.35 5.97 7.386 10.52 12.12 13.65 4.73 3.13 9.498 4.693 14.302 4.693 4.803 0 8.951-.364 12.447-1.088 3.491-.729 6.767-1.823 9.826-3.278 1.31-9.758 4.877-17.254 10.698-22.494-8.297-.872-15.756-2.185-22.382-3.93-6.622-1.75-13.465-4.587-20.525-8.52-7.063-3.93-12.923-8.81-17.58-14.63-4.658-5.824-8.48-13.469-11.463-22.929-2.983-9.465-4.475-20.382-4.475-32.756 0-17.618 5.751-32.61 17.252-44.986-5.387-13.246-4.879-28.094 1.528-44.545 4.222-1.31 10.483-.327 18.78 2.947 8.298 3.276 14.374 6.082 18.234 8.41 3.86 2.325 6.951 4.296 9.281 5.894 13.542-3.783 27.516-5.675 41.928-5.675 14.41 0 28.388 1.892 41.93 5.675l8.299-5.238c5.674-3.495 12.375-6.699 20.086-9.61 7.716-2.91 13.616-3.712 17.694-2.4 6.549 16.45 7.132 31.3 1.743 44.544 11.5 12.376 17.254 27.372 17.254 44.986 0 12.374-1.497 23.326-4.476 32.863-2.983 9.538-6.839 17.176-11.569 22.93-4.735 5.752-10.632 10.592-17.691 14.52-7.061 3.932-13.907 6.77-20.529 8.518-6.625 1.748-14.085 3.062-22.382 3.936 7.568 6.55 11.352 16.885 11.352 31.006v46.072c0 2.618.91 4.803 2.732 6.55 1.82 1.742 4.693 2.255 8.625 1.525 33.778-11.208 61.329-31.406 82.655-60.596 21.324-29.187 31.99-62.05 31.99-98.594-.008-30.418-7.51-58.475-22.497-84.17z"></path>
|
||||
</svg>
|
||||
<div class="content">
|
||||
<h3>Collaborate at Github →</h3>
|
||||
<h2>Collaborate at Github →</h2>
|
||||
<p>Penpot is open source. Get involved on the community or contribute to the project.</p>
|
||||
</div>
|
||||
</a>
|
||||
|
|
@ -49,6 +49,6 @@ eleventyNavigation:
|
|||
</ul>
|
||||
|
||||
<div class="contact-block">
|
||||
<h3>Contact us</h3>
|
||||
<h2>Contact us</h2>
|
||||
<p>Write us at <a href="mailto:support@penpot.app" target="_blank">support@penpot.app</a> or join our <a href="https://community.penpot.app/" target="_blank">community</a>.</p>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -17,8 +17,8 @@ title: 10· Components
|
|||
</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>
|
||||
|
||||
<h3 id="component-create">Creating components</h3>
|
||||
<h4>Create a component</h4>
|
||||
<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>
|
||||
|
|
@ -29,10 +29,10 @@ title: 10· Components
|
|||
</video>
|
||||
</figure>
|
||||
|
||||
<h4>Duplicate a component</h4>
|
||||
<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>
|
||||
|
||||
<h4>Duplicate as main component</h4>
|
||||
<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.png" height="auto">
|
||||
|
|
@ -40,7 +40,7 @@ title: 10· Components
|
|||
</video>
|
||||
</figure>
|
||||
|
||||
<h4>Delete a main component</h4>
|
||||
<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>
|
||||
|
|
@ -49,7 +49,7 @@ title: 10· Components
|
|||
</video>
|
||||
</figure>
|
||||
|
||||
<h4>Restore a main component</h4>
|
||||
<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>
|
||||
|
|
@ -60,8 +60,8 @@ title: 10· Components
|
|||
<figcaption>Mains and copies have different icons. Mains also have a title header at the viewport.</figcaption>
|
||||
</figure>
|
||||
|
||||
<h3 id="component-group">Group components</h3>
|
||||
<h4>Create component groups</h4>
|
||||
<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>
|
||||
|
|
@ -73,10 +73,10 @@ title: 10· Components
|
|||
</video>
|
||||
</figure>
|
||||
|
||||
<h4>Ungroup components</h4>
|
||||
<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>
|
||||
|
||||
<h4>Drag components to groups</h4>
|
||||
<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.png" height="auto">
|
||||
|
|
@ -84,10 +84,10 @@ title: 10· Components
|
|||
</video>
|
||||
</figure>
|
||||
|
||||
<h3 id="component-find">Find components</h3>
|
||||
<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>
|
||||
|
||||
<h4>Find a main component at the assets panel</h4>
|
||||
<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.png" height="auto">
|
||||
|
|
@ -95,7 +95,7 @@ title: 10· Components
|
|||
</video>
|
||||
</figure>
|
||||
|
||||
<h4>Find a main component at the viewport</h4>
|
||||
<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="auto" poster="/img/components/components-show-main.png" height="auto">
|
||||
|
|
@ -103,7 +103,7 @@ title: 10· Components
|
|||
</video>
|
||||
</figure>
|
||||
|
||||
<h3 id="component-update">Update main component from copy</h3>
|
||||
<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>
|
||||
|
|
@ -117,14 +117,14 @@ title: 10· Components
|
|||
<img src="/img/components/components-update-shared.png" alt="Prompt shown to update a main component that is in a shared library" />
|
||||
</figure>
|
||||
|
||||
<h3 id="component-overrides">Component overrides</h3>
|
||||
<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.png" alt="Components overrides" />
|
||||
</figure>
|
||||
|
||||
<h4>Reset overrides</h4>
|
||||
<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.png" height="auto">
|
||||
|
|
@ -132,12 +132,12 @@ title: 10· Components
|
|||
</video>
|
||||
</figure>
|
||||
|
||||
<h3 id="component-detach">Detach component</h3>
|
||||
<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>
|
||||
|
||||
|
||||
<h3 id="component-swap">Swap components</h3>
|
||||
<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>
|
||||
|
|
@ -152,7 +152,7 @@ title: 10· Components
|
|||
</figure>
|
||||
|
||||
|
||||
<h3 id="component-annotate">Annotate components</h3>
|
||||
<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.png" height="auto">
|
||||
|
|
@ -165,7 +165,7 @@ title: 10· Components
|
|||
<img src="/img/components/components-annotations-inspect.png" alt="Annotations at inspect tab" />
|
||||
</figure>
|
||||
|
||||
<h3 id="component-main-components-page">Main components page</h3>
|
||||
<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.png" alt="Main components page" />
|
||||
|
|
|
|||
|
|
@ -5,12 +5,12 @@ 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>
|
||||
|
||||
<h3 id="customfonts-upload">Upload local fonts</h3>
|
||||
<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>
|
||||
|
||||
<h4>To upload a local font:</h4>
|
||||
<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
|
||||
|
|
@ -21,17 +21,17 @@ It is also what Penpot uses to group fonts in families. You can always edit it l
|
|||
</ol>
|
||||
<p><a href="/img/customfonts-upload.png" target="_blank"><img src="/img/customfonts-upload.png" alt="local fonts" /></a></p>
|
||||
|
||||
<h3 id="customfonts-families">Group fonts in font families</h3>
|
||||
<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>
|
||||
|
||||
<h3 id="customfonts-edit">Edit custom fonts</h3>
|
||||
<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>
|
||||
|
||||
<h3 id="customfonts-using">Using custom fonts</h3>
|
||||
<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>
|
||||
|
||||
<h3>Fonts Licensing and Usage</h3>
|
||||
<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.html" 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>
|
||||
|
|
|
|||
|
|
@ -5,10 +5,10 @@ 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>
|
||||
|
||||
<h3 id="export-howto">How to export</h3>
|
||||
<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>
|
||||
|
||||
<h4>Create export preset</h4>
|
||||
<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/#viewmode-interface" target="_blank">View mode</a></strong> with the code tab activated.</p>
|
||||
<figure>
|
||||
|
|
@ -19,10 +19,10 @@ title: 07· Exporting objects
|
|||
<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>
|
||||
|
||||
|
||||
<h4>Remove export preset</h4>
|
||||
<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>
|
||||
|
||||
<h3 id="export-options">Export options</h3>
|
||||
<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>
|
||||
|
|
@ -30,8 +30,8 @@ title: 07· Exporting objects
|
|||
<li><strong>File format</strong> - PNG, SVG, JPEG, PDF.</li>
|
||||
</ul>
|
||||
|
||||
<h3 id="export-multiple-elements">Exporting multiple elements</h3>
|
||||
<h4>Make your export selection.</h4>
|
||||
<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.png" alt="Export main menu">
|
||||
|
|
@ -41,19 +41,19 @@ title: 07· Exporting objects
|
|||
<img src="/img/export/export-main-menu.png" alt="Export main menu">
|
||||
</figure>
|
||||
|
||||
<h4>Configure your export selection.</h4>
|
||||
<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.png" alt="Export selection">
|
||||
</figure>
|
||||
|
||||
<h4>Check the export progress.</h4>
|
||||
<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.png" alt="Export progress">
|
||||
</figure>
|
||||
|
||||
<h3 id="export-artboards-pdf">Export boards to PDF</h3>
|
||||
<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>
|
||||
|
|
@ -62,7 +62,7 @@ title: 07· Exporting objects
|
|||
<img src="/img/export/export-pdf.png" alt="Export PDF">
|
||||
</figure>
|
||||
|
||||
<h3 id="export-technical">Technical notes about exports</h3>
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -18,13 +18,13 @@ eleventyNavigation:
|
|||
<ul class="intro-sections">
|
||||
<li>
|
||||
<a href="/user-guide/introduction/quickstart">
|
||||
<h3>Quickstart</h3>
|
||||
<h2>Quickstart</h2>
|
||||
<p>Ways to start with Penpot</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/user-guide/the-interface/">
|
||||
<h3>The interface</h3>
|
||||
<h2>The interface</h2>
|
||||
<p>Penpot's main areas and features</p>
|
||||
</a>
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -7,19 +7,19 @@ title: 01· Introduction
|
|||
<ul class="intro-sections">
|
||||
<li>
|
||||
<a href="/user-guide/introduction/quickstart">
|
||||
<h3>Quickstart →</h3>
|
||||
<h2>Quickstart →</h2>
|
||||
<p>Ways to start with Penpot</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/user-guide/introduction/shortcuts">
|
||||
<h3>Shortcuts →</h3>
|
||||
<h2>Shortcuts →</h2>
|
||||
<p>Speed your design workflow</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/user-guide/introduction/info">
|
||||
<h3>Info & tutorials →</h3>
|
||||
<h2>Info & tutorials →</h2>
|
||||
<p>Info of interest about Penpot</p>
|
||||
</a>
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -6,16 +6,16 @@ title: Tutorials & info
|
|||
|
||||
<p class="main-paragraph">Some useful links to better understand Penpot through answers and tutorials.</p>
|
||||
|
||||
<h3 id="dev-diaries">Dev Diaries</h3>
|
||||
<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.html" target="_blank">Dev Diaries</a>.</p>
|
||||
|
||||
<h3 id="video-tutorials">Video tutorials</h3>
|
||||
<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>
|
||||
|
||||
<h3 id="faqs">Frequently asked questions</h3>
|
||||
<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>
|
||||
|
||||
<h3 id="faqs">Community space</h3>
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -6,10 +6,10 @@ title: Quickstart
|
|||
|
||||
<p class="main-paragraph">You can start using Penpot right in your browser or installing it in a server of your own.</p>
|
||||
|
||||
<h3>In your browser</h3>
|
||||
<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>
|
||||
|
||||
<h3>On your own server</h3>
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ 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>
|
||||
|
||||
<h3 id="pages">Pages</h3>
|
||||
<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>
|
||||
|
|
@ -15,14 +15,14 @@ title: 04· Layer basics
|
|||
</video>
|
||||
</figure>
|
||||
|
||||
<h3 id="layers-panel">Layers panel</h3>
|
||||
<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.png" height="auto">
|
||||
<source src="/img/layers/layers-panel.mp4" type="video/mp4">
|
||||
</video>
|
||||
</figure>
|
||||
<h4>Navigate layers using the keyboard</h4>
|
||||
<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>
|
||||
|
|
@ -32,7 +32,7 @@ title: 04· Layer basics
|
|||
|
||||
<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>
|
||||
|
||||
<h3 id="hide-lock">Hide and lock layers</h3>
|
||||
<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.png" height="auto">
|
||||
|
|
@ -40,7 +40,7 @@ title: 04· Layer basics
|
|||
</video>
|
||||
</figure>
|
||||
|
||||
<h3 id="creating-layers">Create layers</h3>
|
||||
<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>
|
||||
|
|
@ -49,7 +49,7 @@ title: 04· Layer basics
|
|||
</video>
|
||||
</figure>
|
||||
|
||||
<h3 id="duplicating-layers">Duplicate layers</h3>
|
||||
<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>
|
||||
|
|
@ -62,14 +62,14 @@ title: 04· Layer basics
|
|||
</video>
|
||||
</figure>
|
||||
|
||||
<h3 id="delete-layers">Delete layers</h3>
|
||||
<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>
|
||||
|
||||
<h3 id="select-layers">Select layers</h3>
|
||||
<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>
|
||||
|
|
@ -78,7 +78,7 @@ title: 04· Layer basics
|
|||
</video>
|
||||
</figure>
|
||||
|
||||
<h4>Selecting layers at the layers panel</h4>
|
||||
<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>
|
||||
|
|
@ -89,22 +89,22 @@ title: 04· Layer basics
|
|||
<source src="/img/layers/layers-multiselect.mp4" type="video/mp4">
|
||||
</video>
|
||||
</figure>
|
||||
<h4>Select layers ignoring groups (deep selection)</h4>
|
||||
<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.png" height="auto">
|
||||
<source src="/img/layers/layers-deepselect.mp4" type="video/mp4">
|
||||
</video>
|
||||
</figure>
|
||||
<h4>Select layers inside groups</h4>
|
||||
<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>
|
||||
|
||||
<h4>Select layer menu</h4>
|
||||
<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>
|
||||
|
||||
|
||||
<h3 id="group-layers">Group layers</h3>
|
||||
<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>
|
||||
|
|
@ -116,7 +116,7 @@ title: 04· Layer basics
|
|||
</video>
|
||||
</figure>
|
||||
|
||||
<h3 id="mask-layers">Mask layers</h3>
|
||||
<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>
|
||||
|
|
@ -129,7 +129,7 @@ title: 04· Layer basics
|
|||
</figure>
|
||||
|
||||
|
||||
<h3 id="move-layers">Move layers</h3>
|
||||
<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.png" height="auto">
|
||||
|
|
@ -138,7 +138,7 @@ title: 04· Layer basics
|
|||
</figure>
|
||||
|
||||
|
||||
<h3 id="resize-layers">Resize layers</h3>
|
||||
<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>
|
||||
|
|
@ -150,7 +150,7 @@ title: 04· Layer basics
|
|||
</video>
|
||||
</figure>
|
||||
|
||||
<h3 id="rotate-layers">Rotate layers</h3>
|
||||
<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.png" height="auto">
|
||||
|
|
@ -158,7 +158,7 @@ title: 04· Layer basics
|
|||
</video>
|
||||
</figure>
|
||||
|
||||
<h3 id="flip-layers">Flip layers</h3>
|
||||
<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>
|
||||
|
|
@ -171,7 +171,7 @@ title: 04· Layer basics
|
|||
</figure>
|
||||
|
||||
|
||||
<h3 id="scale-elements">Scale elements, texts and properties</h3>
|
||||
<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.png" height="auto">
|
||||
|
|
@ -179,16 +179,16 @@ title: 04· Layer basics
|
|||
</video>
|
||||
</figure>
|
||||
|
||||
<h3 id="aling-distribute-layers">Align and distribute layers</h3>
|
||||
<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>
|
||||
<h4>Align layers</h4>
|
||||
<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.png" height="auto">
|
||||
<source src="/img/layers/layers-align.mp4" type="video/mp4">
|
||||
</video>
|
||||
</figure>
|
||||
<h4>Distribute layers</h4>
|
||||
<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.png" height="auto">
|
||||
|
|
@ -196,7 +196,7 @@ title: 04· Layer basics
|
|||
</video>
|
||||
</figure>
|
||||
|
||||
<h3 id="layers-search">Search and filter layers</h3>
|
||||
<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.png" height="auto">
|
||||
|
|
@ -204,7 +204,7 @@ title: 04· Layer basics
|
|||
</video>
|
||||
</figure>
|
||||
|
||||
<h3 id="collapse-groups">Collapse groups and boards</h3>
|
||||
<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,
|
||||
|
|
@ -215,7 +215,7 @@ press <kbd>Shift/⇧</kbd> + left click over the right arrow of a group or a boa
|
|||
</video>
|
||||
</figure>
|
||||
|
||||
<h3 id="boolean-operators">Boolean operators</h3>
|
||||
<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>
|
||||
|
|
@ -232,10 +232,10 @@ press <kbd>Shift/⇧</kbd> + left click over the right arrow of a group or a boa
|
|||
</ul>
|
||||
|
||||
|
||||
<h3 id="constraints">Resizing constraints</h3>
|
||||
<h2 id="constraints">Resizing constraints</h2>
|
||||
<p>Constraints allow you to decide how layers will behave when resizing its container.</p>
|
||||
|
||||
<h4>Apply constraints</h4>
|
||||
<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>
|
||||
|
|
@ -245,7 +245,7 @@ press <kbd>Shift/⇧</kbd> + left click over the right arrow of a group or a boa
|
|||
</figure>
|
||||
<p>Constraints are set to “Scale” by default, but you have other options.</p>
|
||||
|
||||
<h4>Horizontal constraints</h4>
|
||||
<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>
|
||||
|
|
@ -257,7 +257,7 @@ press <kbd>Shift/⇧</kbd> + left click over the right arrow of a group or a boa
|
|||
<img src="/img/layers/layers-constraints-h.png" alt="Horizontal constraints">
|
||||
</figure>
|
||||
|
||||
<h4>Vertical constraints</h4>
|
||||
<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>
|
||||
|
|
@ -270,7 +270,7 @@ press <kbd>Shift/⇧</kbd> + left click over the right arrow of a group or a boa
|
|||
</figure>
|
||||
|
||||
|
||||
<h3 id="focus-mode">Focus mode</h3>
|
||||
<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>
|
||||
|
|
@ -284,7 +284,7 @@ press <kbd>Shift/⇧</kbd> + left click over the right arrow of a group or a boa
|
|||
</figure>
|
||||
|
||||
|
||||
<h3 id="rtl-support">RTL support</h3>
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -6,11 +6,11 @@ title: 05· Objects
|
|||
<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>
|
||||
|
||||
<h3 id="Boards">Boards</h3>
|
||||
<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>
|
||||
|
||||
<h4>Create boards</h4>
|
||||
<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>
|
||||
|
|
@ -21,7 +21,7 @@ are shown by default at the <a href="/user-guide/view-mode">View mode</a>, actin
|
|||
|
||||
<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>
|
||||
|
||||
<h4>Select boards</h4>
|
||||
<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>
|
||||
|
|
@ -33,7 +33,7 @@ are shown by default at the <a href="/user-guide/view-mode">View mode</a>, actin
|
|||
</video>
|
||||
</figure>
|
||||
|
||||
<h4>Set board as thumbnail</h4>
|
||||
<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>
|
||||
|
|
@ -46,7 +46,7 @@ are shown by default at the <a href="/user-guide/view-mode">View mode</a>, actin
|
|||
</video>
|
||||
</figure>
|
||||
|
||||
<h4>Clip content</h4>
|
||||
<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="auto" poster="/img/objects/board-clip.png" height="auto">
|
||||
|
|
@ -54,7 +54,7 @@ are shown by default at the <a href="/user-guide/view-mode">View mode</a>, actin
|
|||
</video>
|
||||
</figure>
|
||||
|
||||
<h4>Show in View mode</h4>
|
||||
<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>
|
||||
|
|
@ -66,28 +66,28 @@ are shown by default at the <a href="/user-guide/view-mode">View mode</a>, actin
|
|||
<img src="/img/objects/board-show.png" alt="board show in view mode">
|
||||
</figure>
|
||||
|
||||
<h4>Show fill in exports</h4>
|
||||
<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.png" alt="show board fill in exports">
|
||||
</figure>
|
||||
|
||||
<h4>Board guides</h4>
|
||||
<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.png" alt="board guides">
|
||||
</figure>
|
||||
|
||||
<h4>Prototyping boards</h4>
|
||||
<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.png" alt="prototyping with boards">
|
||||
</figure>
|
||||
|
||||
<h3 id="rectangles-ellipses">Rectangles and ellipses</h3>
|
||||
<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>
|
||||
|
|
@ -99,7 +99,7 @@ a design.</p>
|
|||
</figure>
|
||||
|
||||
|
||||
<h3 id="text">Text</h3>
|
||||
<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>
|
||||
|
|
@ -110,12 +110,12 @@ a design.</p>
|
|||
<source src="/img/objects/text-create.mp4" type="video/mp4">
|
||||
</video>
|
||||
</figure>
|
||||
<h4>Edit and style text content</h4>
|
||||
<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.png" alt="editing text">
|
||||
</figure>
|
||||
<h4>Text options</h4>
|
||||
<h3>Text options</h3>
|
||||
<figure>
|
||||
<img src="/img/objects/text-options.png" alt="text options">
|
||||
</figure>
|
||||
|
|
@ -133,12 +133,12 @@ a design.</p>
|
|||
<li><strong>Direction:</strong> LTR (left to right), RTL (right to left).</li>
|
||||
</ol>
|
||||
|
||||
<h3 id="curves">Curves (freehand)</h3>
|
||||
<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>
|
||||
|
||||
<h3 id="paths">Paths (bezier)</h3>
|
||||
<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>
|
||||
|
|
@ -156,7 +156,7 @@ Select the curve tool by clicking on the icon at the toolbar or pressing <kbd>Ct
|
|||
</video>
|
||||
</figure>
|
||||
|
||||
<h4>Edit nodes</h4>
|
||||
<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>
|
||||
|
|
@ -172,8 +172,8 @@ You can choose to edit individual nodes or create new ones. Press <kbd>Esc</kbd>
|
|||
</figure>
|
||||
|
||||
|
||||
<h3 id="images">Images</h3>
|
||||
<h4>Insert images</h4>
|
||||
<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>
|
||||
|
|
@ -182,7 +182,7 @@ You can choose to edit individual nodes or create new ones. Press <kbd>Esc</kbd>
|
|||
<li>Drag an image from a Penpot <strong>library</strong>.</li>
|
||||
</ul>
|
||||
|
||||
<h4>Images aspect ratio</h4>
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ title: 11· Prototyping
|
|||
|
||||
<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>
|
||||
|
||||
<h3 id="prototyping-connection">Connect boards</h3>
|
||||
<h2 id="prototyping-connection">Connect boards</h2>
|
||||
<figure>
|
||||
<video title="Connect boards" muted="" playsinline="" controls="" width="100%" poster="/img/prototype/prototype-connect.png" height="auto">
|
||||
<source src="/img/prototype/prototype-connect.mp4" type="video/mp4">
|
||||
|
|
@ -23,7 +23,7 @@ title: 11· Prototyping
|
|||
<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>
|
||||
|
||||
<h4 id="prototype-anatomy">Anatomy of a prototype</h4>
|
||||
<h3 id="prototype-anatomy">Anatomy of a prototype</h3>
|
||||
<figure>
|
||||
<img src="/img/prototype/prototype-anatomy.png" alt="Different elements that involve prototyping with Penpot">
|
||||
</figure>
|
||||
|
|
@ -40,7 +40,7 @@ title: 11· Prototyping
|
|||
<strong>10)</strong> Flow indicator and launcher
|
||||
</p>
|
||||
|
||||
<h3 id="interaction-triggers">Interaction triggers</h3>
|
||||
<h2 id="interaction-triggers">Interaction triggers</h2>
|
||||
<figure>
|
||||
<img src="/img/prototype/prototype-trigger.png" alt="Prototype trigger options">
|
||||
</figure>
|
||||
|
|
@ -52,7 +52,7 @@ title: 11· Prototyping
|
|||
<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>
|
||||
|
||||
<h3 id="prototyping-actions">Interaction actions</h3>
|
||||
<h2 id="prototyping-actions">Interaction actions</h2>
|
||||
<figure>
|
||||
<img src="/img/prototype/prototype-action.png" alt="Prototype action options">
|
||||
</figure>
|
||||
|
|
@ -66,10 +66,10 @@ title: 11· Prototyping
|
|||
<li><strong>Open URL</strong>.</li>
|
||||
</ul>
|
||||
|
||||
<h4 id="prototyping-actions-navigate">Navigate to</h4>
|
||||
<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>
|
||||
|
||||
<h4 id="prototyping-actions-overlay">Open overlay</h4>
|
||||
<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.png" height="auto">
|
||||
|
|
@ -86,23 +86,23 @@ title: 11· Prototyping
|
|||
<figure>
|
||||
<img src="/img/prototype/prototype-overlay-relative.png" alt="Prototype overlay relative position">
|
||||
</figure>
|
||||
<h4 id="prototyping-actions-overlay-toggle">Toggle overlay</h4>
|
||||
<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>
|
||||
|
||||
<h4 id="prototyping-actions-overlay-close">Close overlay</h4>
|
||||
<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>
|
||||
|
||||
<h4 id="prototyping-actions-previous">Previous screen</h4>
|
||||
<h3 id="prototyping-actions-previous">Previous screen</h3>
|
||||
<figure>
|
||||
<img src="/img/prototype/prototype-previous.png" 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>
|
||||
|
||||
<h4 id="prototyping-actions-url">Open URL</h4>
|
||||
<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>
|
||||
|
||||
|
||||
<h3 id="prototyping-animations">Interaction animations</h3>
|
||||
<h2 id="prototyping-animations">Interaction animations</h2>
|
||||
<figure>
|
||||
<img src="/img/prototype/prototype-animation.png" alt="Prototype animation options">
|
||||
</figure>
|
||||
|
|
@ -113,7 +113,7 @@ title: 11· Prototyping
|
|||
<li><strong>Push</strong>.</li>
|
||||
</ul>
|
||||
|
||||
<h4 id="prototyping-animations-dissolve">Dissolve</h4>
|
||||
<h3 id="prototyping-animations-dissolve">Dissolve</h3>
|
||||
<figure>
|
||||
<img src="/img/prototype/prototyping-animations-dissolve.gif" alt="Prototyping animations">
|
||||
</figure>
|
||||
|
|
@ -124,7 +124,7 @@ title: 11· Prototyping
|
|||
<li>Duration.</li>
|
||||
</ul>
|
||||
|
||||
<h4 id="prototyping-animations-Slide">Slide</h4>
|
||||
<h3 id="prototyping-animations-Slide">Slide</h3>
|
||||
<figure>
|
||||
<img src="/img/prototype/prototyping-animations-slide.gif" alt="Prototyping animations">
|
||||
</figure>
|
||||
|
|
@ -139,7 +139,7 @@ title: 11· Prototyping
|
|||
</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>
|
||||
|
||||
<h4 id="prototyping-animations-push">Push</h4>
|
||||
<h3 id="prototyping-animations-push">Push</h3>
|
||||
<figure>
|
||||
<img src="/img/prototype/prototyping-animations-push.gif" alt="Prototyping animations">
|
||||
</figure>
|
||||
|
|
@ -150,13 +150,13 @@ title: 11· Prototyping
|
|||
<li>Duration.</li>
|
||||
</ul>
|
||||
|
||||
<h3 id="prototyping-flows">Flows</h3>
|
||||
<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>
|
||||
|
||||
|
||||
<h4 id="prototyping-flows-starting">Starting points</h4>
|
||||
<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>
|
||||
|
|
@ -182,19 +182,19 @@ title: 11· Prototyping
|
|||
</li>
|
||||
</ul>
|
||||
|
||||
<h4 id="prototyping-flows-multiple">Multiple flows</h4>
|
||||
<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.png" alt="Prototyping flows">
|
||||
</figure>
|
||||
|
||||
<h4 id="prototyping-flows-multiple">Flows at the view mode</h4>
|
||||
<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.png" alt="Prototyping flows">
|
||||
</figure>
|
||||
|
||||
<h3 id="prototyping-fix-scroll">Fix elements at scroll</h3>
|
||||
<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.png" alt="Prototyping fix scroll">
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ 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>
|
||||
|
||||
<h3 id="fill">Color fills</h3>
|
||||
<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>
|
||||
|
|
@ -37,13 +37,13 @@ title: 06· Styling
|
|||
<img alt="Multiple fills" src="/img/styling/fill-multiple.png"/>
|
||||
</figure>
|
||||
|
||||
<h4>Remove a fill</h4>
|
||||
<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.png"/>
|
||||
</figure>
|
||||
|
||||
<h3 id="color-picker">Color picker</h3>
|
||||
<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.png"/>
|
||||
|
|
@ -58,7 +58,7 @@ title: 06· Styling
|
|||
<li><strong>Color palette</strong> - A quick launcher of the palette with the selected library.</li>
|
||||
</ol>
|
||||
|
||||
<h3 id="color-palette">Color palette</h3>
|
||||
<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.png" height="auto">
|
||||
|
|
@ -74,19 +74,19 @@ title: 06· Styling
|
|||
<p>Use the <strong>menu</strong> to easily switch between libraries.</p>
|
||||
<p>Switch between big and small <strong>thumbnails sizes</strong>.</p>
|
||||
|
||||
<h4 id="color-palette">Applying color from the palette</h4>
|
||||
<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>
|
||||
|
||||
<h3 id="selected-colors">Selected colors</h3>
|
||||
<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.png"/>
|
||||
</figure>
|
||||
|
||||
<h3 id="strokes">Strokes</h3>
|
||||
<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.png" height="auto">
|
||||
|
|
@ -105,7 +105,7 @@ title: 06· Styling
|
|||
<img alt="Multiple strokes" src="/img/styling/stroke-multiple.png"/>
|
||||
</figure>
|
||||
|
||||
<h3 id="stroke-caps">Stroke Caps</h3>
|
||||
<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.png" height="auto">
|
||||
|
|
@ -124,7 +124,7 @@ title: 06· Styling
|
|||
<li><strong>Square</strong> - Adds a rectangular ending to the end of the path.</li>
|
||||
</ul>
|
||||
|
||||
<h3 id="radius">Corner radius</h3>
|
||||
<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.png" height="auto">
|
||||
|
|
@ -133,7 +133,7 @@ title: 06· Styling
|
|||
</figure>
|
||||
|
||||
|
||||
<h3 id="shadow">Shadow</h3>
|
||||
<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.png"/>
|
||||
|
|
@ -148,7 +148,7 @@ title: 06· Styling
|
|||
<li><strong>Color and opacity</strong></li>
|
||||
</ul>
|
||||
|
||||
<h3 id="blur">Blur</h3>
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -8,33 +8,33 @@ Team members are allowed to work with any project or file within the team. The a
|
|||
member is allow to do depend on 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 limits about team size.</p>
|
||||
|
||||
<h3 id="teams-management">Manage teams</h3>
|
||||
<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>
|
||||
|
||||
<h4>Select team</h4>
|
||||
<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 allways have your own private dashboard. Create or join other teams to collaborate with other Penpot users.</p>
|
||||
<figure><img src="/img/teams/team-selector.png" alt="Teams selector" /></figure>
|
||||
|
||||
<h4>Create teams</h4>
|
||||
<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 be able to invite new team members.</p>
|
||||
<figure><img src="/img/teams/team-selector-projects.png" alt="Teams selector" /></figure>
|
||||
|
||||
<h4>Delete and leave teams</h4>
|
||||
<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.png" alt="Teams selector" /></figure>
|
||||
|
||||
<h4>Team settings</h4>
|
||||
<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>
|
||||
<figure><img src="/img/teams/team-settings.png" alt="Team settings" /></figure>
|
||||
|
||||
<h3 id="teams-members">Team members</h3>
|
||||
<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.png" alt="Team members" /></figure>
|
||||
|
||||
<h4>Team roles</h4>
|
||||
<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>
|
||||
|
|
@ -44,20 +44,20 @@ member is allow to do depend on on their permissions.</p>
|
|||
<figure><img src="/img/teams/teams-permissions.png" 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>
|
||||
|
||||
<h4>Transfer ownership</h4>
|
||||
<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.png" alt="Transfer team" /></figure>
|
||||
|
||||
<h3 id="teams-invites">Team invitations</h3>
|
||||
<h4>Invite people to a team</h4>
|
||||
<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.png" alt="Invite to team" /></figure>
|
||||
|
||||
<h4>Invitations status</h4>
|
||||
<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.png" alt="Team invitations" /></figure>
|
||||
|
||||
<h4>Invitations options</h4>
|
||||
<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>
|
||||
|
|
@ -66,7 +66,7 @@ member is allow to do depend on on their permissions.</p>
|
|||
</ul>
|
||||
<figure><img src="/img/teams/team-invitations-actions.png" alt="Team invitations actions" /></figure>
|
||||
|
||||
<h3 id="teams-webhooks">Webhooks</h3>
|
||||
<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.png" alt="Webhooks" /></figure>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ title: 02· The interface
|
|||
<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>
|
||||
|
||||
|
||||
<h3 id="interface-dashboard">Dashboard</h3>
|
||||
<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.png" target="_blank">
|
||||
|
|
@ -46,7 +46,7 @@ title: 02· The interface
|
|||
|
||||
|
||||
|
||||
<h3 id="interface-workspace">Workspace</h3>
|
||||
<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>
|
||||
|
|
@ -99,7 +99,7 @@ title: 02· The interface
|
|||
|
||||
|
||||
|
||||
<h3 id="interface-viewmode">View mode</h3>
|
||||
<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>
|
||||
|
|
@ -141,7 +141,7 @@ title: 02· The interface
|
|||
</ol>
|
||||
|
||||
|
||||
<h3 id="interface-light-mode">Light mode</h3>
|
||||
<h2 id="interface-light-mode">Light mode</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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user