mirror of
https://github.com/penpot/penpot-docs.git
synced 2024-07-12 06:41:46 +00:00
Little improvements in user guide
This commit is contained in:
Yamila Moreno
parent
922e627af8
commit
033569a658
2
faqs.njk
2
faqs.njk
|
|
@ -39,7 +39,7 @@ eleventyNavigation:
|
|||
There is a company called <a href="https://kaleidos.net" target="_blank">Kaleidos Open Source</a> that has been long known for its commitment to free & open source software and a more diverse and inclusive workplace where cross-domain teams really enjoy working together. Kaleidos launched <a href="https://taiga.io" target="_blank">Taiga</a> a few years ago to deal with the absence of a truly agile open source project management tool. The next major pain in our ranked list of outrageous open source absentees was a design & prototype tool like Figma, Sketch or Invision.
|
||||
</p>
|
||||
<p>
|
||||
At Kaleidos we believe that the tools that we use to build end products should be as accessible to everyone, regardless of their background, skills or purchasing power. Also, not having a free & open source UX/UI tool that would make devs participate in the design process and bridge the gap between UX/UI and code was a terrible itch for us.
|
||||
At Kaleidos we believe that the tools that we use to build end products should be accessible to everyone, regardless of their background, skills or purchasing power. Also, not having a free & open source UX/UI tool that would make devs participate in the design process and bridge the gap between UX/UI and code was a terrible itch for us.
|
||||
</p>
|
||||
<p>
|
||||
<p>
|
||||
|
|
|
|||
|
|
@ -4,12 +4,12 @@ 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 user files (projects and teams in the future). All copies of a component used in user files are linked. That is, any update made to the Main component is reflected in all component copies (if you accept the update) . You can even create overrides for specific parts of component copies.</p>
|
||||
<p>A component is an object or group of objects that can be reused multiple times across files (projects and teams in the future). All copies of a component used in files are linked. That is, any update made to the Main component is reflected in all component copies (if you accept the update) . You can even create overrides for specific parts of component copies.</p>
|
||||
|
||||
<p>A component has two parts:</p>
|
||||
<ul>
|
||||
<li><strong>Main component</strong> - This is the source that defines the component. Main components exist only in the library, not in the viewport.</li>
|
||||
<li><strong>Component Copy</strong> or instance. These are copy of a Main component that has been placed in the viewport. Component copies are linked to their Main component.</li>
|
||||
<li><strong>Component Copy</strong> or instance. These are copies of a Main component that has been placed in the viewport. Component copies are linked to their Main component.</li>
|
||||
</ol>
|
||||
|
||||
<h3 id="component-create">Create a Component</h3>
|
||||
|
|
@ -40,7 +40,7 @@ title: 10· Components
|
|||
<p><img src="/img/components-updatenotification.png" alt="components" /></p>
|
||||
|
||||
<h3 id="component-overrides">Component Overrides</h3>
|
||||
<p>Overrides are differences at the copy components from their main components. With overrides you can keep changes at the component copies while maintaining synchronization with the Main component.</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>
|
||||
<p>Component layers with overrides are marked with a “*” at the layers list.</p>
|
||||
<p><img src="/img/components-overrides.gif" alt="components" /></p>
|
||||
<h4>Reset overrides</h4>
|
||||
|
|
@ -48,7 +48,7 @@ title: 10· Components
|
|||
|
||||
<h3 id="component-detach">Detach Instance</h3>
|
||||
<p>Detach a component copy to unlink it from its Main component will transform it in 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 acknowledge this achievement in bulk by selecting several components and committing the same action.</p>
|
||||
<p>You can also detach components in bulk by selecting several components and performing the same action.</p>
|
||||
|
||||
<h3 id="component-show">Show main component</h3>
|
||||
<p>To easily show the Main component of a component copy there is the option at the component menu “Show main component” that will open the library where the component belongs.</p>
|
||||
<p>To easily locate the Main component of a component copy there is the option at the component menu “Show main component” that will open the library where the Main component belongs.</p>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ title: 16· Custom fonts
|
|||
<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>
|
||||
<p>To use a font that you have on your local machine, you need to upload it first to the Penpot team where you want to use it.</p>
|
||||
<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>
|
||||
|
||||
|
|
@ -21,7 +21,7 @@ title: 16· Custom fonts
|
|||
|
||||
<h3 id="customfonts-families">Group fonts in font families</h3>
|
||||
<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 at the upload that it has the same font family name.</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>
|
||||
|
|
|
|||
|
|
@ -23,11 +23,11 @@ title: 07· Exporting objects
|
|||
<li><strong>File format</strong> - PNG, SVG, JPEG, PDF.</li>
|
||||
</ul>
|
||||
<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 may be converted perfectly to PDF. You may see differences between an object display inside Penpot and in the exported file. If you need and 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 />
|
||||
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 may 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">
|
||||
<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 a Penpot 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 well.
|
||||
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 a 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 well.
|
||||
</p>
|
||||
|
||||
<h3 id="export-multiple">Multiple export presets</h3>
|
||||
|
|
|
|||
|
|
@ -6,11 +6,11 @@ title: 08· Flexible Layouts
|
|||
<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/layout" target="_blank">here’s a dedicated website</a> where you will find a <strong>video tutorial</strong> and a <strong>playground template</strong>.
|
||||
To help you learn the fundamentals of Flex Layout <a href="https://penpot.app/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="flexlayout-css">Flex Layout is based on CSS standards</h3>
|
||||
<p>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.
|
||||
<p>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.
|
||||
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. As there are already many comprehensive explations about Flexbox we are not going to write another one. If you are interested we can 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>
|
||||
<p><img src="/img/csstricks-00-basic-terminology.svg" alt="Flex Layout" /></p>
|
||||
<small>Image from CSS Tricks</small>
|
||||
|
|
@ -27,7 +27,7 @@ Penpot's Flex Layout is built over Flexbox, a CSS module that provides a more ef
|
|||
|
||||
|
||||
<h3 id="flexlayout-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 desire. You can also create or paste elements like in any regular board.</p>
|
||||
<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>
|
||||
<p><img src="/img/flexlayout-arrange.gif" alt="Flex Layout" /></p>
|
||||
|
||||
|
|
@ -54,7 +54,7 @@ Penpot's Flex Layout is built over Flexbox, a CSS module that provides a more ef
|
|||
<p>Selecting absolute position 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>
|
||||
<p><img src="/img/flexlayout-position-absolute.png" alt="Flex Layout" /></p>
|
||||
<h4>Z-index:</h4>
|
||||
<p>With the new z-index option you can decide the order of overlapping elements while maintaining the layers order.</p>
|
||||
<p>With the z-index option you can decide the order of overlapping elements while maintaining the layers order.</p>
|
||||
<p><img src="/img/flexlayout-position-z.gif" alt="Flex Layout" /></p>
|
||||
|
||||
|
||||
|
|
@ -62,17 +62,17 @@ Penpot's Flex Layout is built over Flexbox, a CSS module that provides a more ef
|
|||
<p>When creating Flex layouts, the spacing is predicted, helping you to maintain your design composition.</p>
|
||||
<p><img src="/img/flexlayout-spacing-add.gif" alt="Flex Layout" /></p>
|
||||
|
||||
<p>Set paddings, margins and gaps using their respective numeric inputs</p>
|
||||
<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 uniformly.</li>
|
||||
<li>Hold <kbd>Alt/⌥</kbd> while dragging to change the value of all sides uniformly.</li>
|
||||
<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>
|
||||
<p><img src="/img/flexlayout-spacing.gif" alt="Flex Layout" /></p>
|
||||
|
||||
|
||||
<h3 id="flexlayout-code">Get code and specifications</h3>
|
||||
<p>Designing with Flex Layout generates ready for production 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>
|
||||
<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>
|
||||
<p><img src="/img/flexlayout-inspect.gif" alt="Flex Layout" /></p>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ title: 14· Import/export files
|
|||
<p class="advice">Importing files from other tools and services are among the main priorities of the Penpot team. Related features are coming soon.</p>
|
||||
|
||||
<h3 id="importing-export">Export (download) Penpot files</h3>
|
||||
<p>Exporting files is useful if you want 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.app.</p>
|
||||
<p>Exporting files is useful if you want 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 (https://penpot.app) or your instance.</p>
|
||||
<p>To export a file select the one of the download options from the file menu at the dashboard and the file will be downloaded to your computer. You can select between two formats, binary and standard. Each format has its advantages and disadvantages, choose what suits your case better.</p>
|
||||
<strong>Penpot file (.penpot): the fast.</strong>
|
||||
<ul>
|
||||
|
|
@ -16,7 +16,7 @@ title: 14· Import/export files
|
|||
<li>❌ It can be opened only in Penpot.</li>
|
||||
<li>❌ Not transparent, code difficult to explore.</li>
|
||||
</ul>
|
||||
<strong>Standard file (.svg + .json): the open.</strong>
|
||||
<strong>Standard file (a .zip with svg and json): the open.</strong>
|
||||
<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>
|
||||
|
|
@ -29,20 +29,19 @@ title: 14· Import/export files
|
|||
<p>Select multiple files to export them at the same time. An overlay will show you the progress of the different exports.</p>
|
||||
<p><img src="/img/importing-export.gif" alt="Import / Export files" /></p>
|
||||
<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>
|
||||
<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>
|
||||
<p>Choose the one that suits you better for each occasion!</p>
|
||||
<p><img src="/img/importing-libraries.png" alt="Import / Export files" /></p>
|
||||
|
||||
<p>You can also export / download a file from its main menu at the design workspace.</p>
|
||||
<p><img src="/img/import-export-menu.png" alt="Import / Export files" /></p>
|
||||
|
||||
<h3 id="importing-import">Import Penpot files</h3>
|
||||
<p>The import option is at the projects menu. Press “Import files” and then select one or more .penpot files to import.</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>
|
||||
<p><img src="/img/importing-import.png" alt="Import / Export files" /></p>
|
||||
<p>Before actually importing the files to your project, you’ll still have the chance to change their names or get rid of unwanted files.</p>
|
||||
<p><img src="/img/importing-import-options.png" alt="Import / Export files" /></p>
|
||||
|
|
|
|||
|
|
@ -13,11 +13,11 @@ title: 13· Inspect designs
|
|||
|
||||
<h3 id="inspect-workspace">At the Workspace</h3>
|
||||
<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 at so developers can work at the Workspace without the fear of breaking things ;)</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>
|
||||
<p><img src="/img/inspect-workspace.gif" alt="inspect" /></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 and board edges.</p>
|
||||
<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>
|
||||
|
|
@ -31,7 +31,7 @@ title: 13· Inspect designs
|
|||
<p><img src="/img/inspect-info.gif" alt="inspect" /></p>
|
||||
|
||||
<h2 id="inspect-copy">How to copy properties info</h2>
|
||||
<p>You can copy property values individually or full sections of them 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>
|
||||
<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>
|
||||
<p><img src="/img/inspect-copy.gif" alt="inspect" /></p>
|
||||
|
||||
<h2 id="inspect-code">How to get code</h2>
|
||||
|
|
|
|||
|
|
@ -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 the browser</h3>
|
||||
<h3>In your browser</h3>
|
||||
<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 simply go to <a href="https://penpot.app" target="_blank">penpot.app</a> and 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>
|
||||
<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 my own server</h3>
|
||||
<p>Current private Penpot instances are only requiring basic Docker knowledge.</p>
|
||||
<h3>On your own server</h3>
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ title: Shortcuts
|
|||
|
||||
<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 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>
|
||||
<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>
|
||||
<h3 id="alignment">Item Alignment</h3>
|
||||
|
|
|
|||
|
|
@ -127,7 +127,7 @@ press <kbd>Shift/⇧</kbd> + left click over the right arrow of a group or a boa
|
|||
|
||||
<h3 id="boolean-operators">Boolean operators</h3>
|
||||
<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 or 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>
|
||||
"boolean" operators. Boolean operators are non destructive and the original shapes remain grouped and available or 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>
|
||||
<p><img src="/img/booleans.gif" alt="boolean operators" /></p>
|
||||
|
||||
<ul>
|
||||
|
|
@ -180,6 +180,6 @@ press <kbd>Shift/⇧</kbd> + left click over the right arrow of a group or a boa
|
|||
|
||||
|
||||
<h3 id="rtl-support">RTL support</h3>
|
||||
<p>Diversity and inclusion is one major Penpot concern and that's why we love to give support to RTL languages, unlike in most design tools.</p>
|
||||
<p>Diversity and inclusion is one 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>
|
||||
<p><img src="/img/rtl-support.png" alt="rtl support" /></p>
|
||||
|
|
|
|||
|
|
@ -6,13 +6,13 @@ title: 09· Asset Libraries
|
|||
<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>
|
||||
|
||||
<h3 id="file-library">File library</h3>
|
||||
<p>Each file has a File Library that allows assets that belong to it to be stored. You can find File Libraries at the workspace. To access them, click the assets panel icon at the bottom of the left toolbar or press <kbd>Alt/⌥</kbd> + <kbd>i</kbd>.</p>
|
||||
<p>Each file has a File Library where assets are stored. You can find File Libraries at the workspace. To access them, click the assets panel icon at the bottom of the left toolbar or press <kbd>Alt/⌥</kbd> + <kbd>i</kbd>.</p>
|
||||
<p><img src="/img/libraries-asset-types.png" alt="libraries" /></p>
|
||||
|
||||
<h3 id="asset-types">Asset Types</h3>
|
||||
<p>In Penpot you can store four type of assets: components, graphics, colors and typographies:</p>
|
||||
<ul>
|
||||
<li><strong>Components:</strong> A component is an object or group of objects that can be reused multiple times across user files (projects and teams in the future). Learn more at the <a href="/user-guide/components/">components section</a>.</li>
|
||||
<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>Graphics:</strong> Both bitmap and vector images can be stored at the Graphics section.</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>
|
||||
|
|
@ -44,7 +44,7 @@ title: 09· Asset Libraries
|
|||
<ul>
|
||||
<li><strong>Components:</strong> Drag the component directly from the library to the viewport.</li>
|
||||
<li><strong>Graphics:</strong> Same as components, just drag the selected graphic to the viewport.</li>
|
||||
<li><strong>Colors:</strong> With 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 click the color will be applied to the stroke.</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>
|
||||
<p><img src="/img/assets-use.gif" alt="libraries" /></p>
|
||||
|
|
@ -73,10 +73,10 @@ title: 09· Asset Libraries
|
|||
<p><img src="/img/assets-filter.gif" alt="libraries" /></p>
|
||||
|
||||
<h4>Multiselect assets</h4>
|
||||
<p>Press <kbd>Ctrl/⌘</kbd> + left click to select multiple assets and be able to perform operations on them simultaneously.</p>
|
||||
<p>Press <kbd>Ctrl/⌘</kbd> + left click to select multiple assets and perform operations on them simultaneously.</p>
|
||||
|
||||
<h4>Grouping assets</h4>
|
||||
<p>Penpot allows you to create groups inside libraries. To create a group, use the slash-separated naming convention and the group will be created automatically. e.g. <code>group / subgroup / asset_name</code>.</p>
|
||||
<p>Penpot allows you to create groups inside libraries. To create a group, use the slash-separated naming convention when renaming an asset and the group will be created automatically. e.g. <code>group / subgroup / asset_name</code>.</p>
|
||||
<p>Another way to create a group is to right click with more than one asset selected and then click “Group” in the contextual menu.</p>
|
||||
<p><img src="/img/library-groups.png" alt="libraries" /></p>
|
||||
<p>You can also move assets from or to groups by dragging them.</p>
|
||||
|
|
|
|||
|
|
@ -3,9 +3,9 @@ title: 11· Prototyping
|
|||
---
|
||||
|
||||
<h1 id="interactions">Prototyping interactions</h1>
|
||||
<p class="main-paragraph">Penpot allows you to prototype interactions by connecting boards (which can act as screens). 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. Learn how to build interactive prototypes to visualize how users navigate through your screens and mimic your product behaviour.<p>
|
||||
|
||||
<p class="main-paragraph">Once the prototype is prepared with interactions and/or flows it can be used at the View mode and shared through a shareable link.<p>
|
||||
<p class="main-paragraph">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-connecting">Connecting boards</h3>
|
||||
<p><img src="/img/prototyping-connection.gif" alt="prototyping" /></p>
|
||||
|
|
@ -55,7 +55,7 @@ title: 11· Prototyping
|
|||
</ul>
|
||||
|
||||
<h4 id="prototyping-actions-navigate">Navigate to</h4>
|
||||
<p>The classic, most usual of the prototyping actions. It takes the user to one board to the one that is being set in the interaction.</p>
|
||||
<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>
|
||||
<p>It opens a board right over the current board. This action is typically used to display tooltips, modal windows or notifications.</p>
|
||||
|
|
@ -159,4 +159,3 @@ title: 11· Prototyping
|
|||
<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>
|
||||
<p><img src="/img/prototyping-scroll.gif" alt="prototyping" /></p>
|
||||
<p>Launch the View Mode to see the elements with a fixed scroll position.</p>
|
||||
<p class="advice">We are aware that this capability is still difficult to use whithout being able to restrict the screen size at the View Mode, something that we are already working on.</p>
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ title: 06· Styling
|
|||
|
||||
<h3 id="fill">Color fills</h3>
|
||||
<p>Color fills can be added to boards, shapes, texts and groups of layers. A fill can be a custom color (in Hex) or a color style from a library.</p>
|
||||
<p>To apply a fill you can use the color picker, the color palette or a color styles.</p>
|
||||
<p>To apply a fill you can use the color picker, the color palette or a color style.</p>
|
||||
<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>
|
||||
<p><img src="/img/styling-fill-apply.gif" alt="fills" /></p>
|
||||
|
|
@ -26,13 +26,13 @@ title: 06· Styling
|
|||
<li><strong>Color profiles</strong> - Select between RGB, the Harmony Wheel or HSV.</li>
|
||||
<li><strong>Gradients</strong> - Set linear or radial gradients.</li>
|
||||
<li><strong>Sliders</strong> - Easily manage color and opacity.</li>
|
||||
<li><strong>Values</strong> - Set precise color values of red(R), green(G), bylue(B) and transparency(A).</li>
|
||||
<li><strong>Values</strong> - Set precise color values of red(R), green(G), blue(B) and transparency(A).</li>
|
||||
<li><strong>Shortcuts</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>
|
||||
|
||||
<h3 id="color-palette">Color palette</h3>
|
||||
<p>The color palette allows you to have a selected color library in plain sight. Use the menu to easily switch between libraries.</p>
|
||||
<p>The color palette allows you to have a selected color library in plain sight.</p>
|
||||
<p><img src="/img/color-palette.gif" alt="color palette" /></p>
|
||||
<p>There are three ways to show/hide the color palette:</p>
|
||||
<ol>
|
||||
|
|
@ -45,7 +45,7 @@ title: 06· Styling
|
|||
|
||||
<h4 id="color-palette">Applying color from the palette</h4>
|
||||
<ul>
|
||||
<li><strong>Apply color to fill:</strong> Just select the shape and click on the desired bullet in the color palette.</li>
|
||||
<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> Pres<kbd>Alt</kbd> (or <kbd>⌥</kbd> in mac OS) while clicking.</li>
|
||||
</ul>
|
||||
|
||||
|
|
@ -72,8 +72,8 @@ title: 06· Styling
|
|||
|
||||
<p>The stroke caps options are:</p>
|
||||
<ul>
|
||||
<li><strong>Line arrow</strong> - An simple line arrow (two lines at 45º) with the same width as the stroke.</li>
|
||||
<li><strong>Triangle arrow</strong> - An solid arrowhead witht the shape of a triangle.</li>
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ title: 15· Teams
|
|||
---
|
||||
|
||||
<h1 id="teams">Teams</h1>
|
||||
<p class="main-paragraph">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.</p>
|
||||
<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 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.</p>
|
||||
|
||||
<h3 id="teams-management">Manage teams</h3>
|
||||
<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>
|
||||
|
|
@ -15,7 +15,7 @@ title: 15· Teams
|
|||
<p><img src="/img/teams-yourpenpot.png" alt="teams" /></p>
|
||||
|
||||
<h4>Create teams</h4>
|
||||
<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. A new team is created where you will be able to invite new team members.</p>
|
||||
<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. A new team is created and you will be able to invite new team members.</p>
|
||||
<p><img src="/img/teams-create.png" alt="teams" /></p>
|
||||
|
||||
<h4>Delete and leave teams</h4>
|
||||
|
|
@ -40,10 +40,10 @@ title: 15· Teams
|
|||
<li><strong>Editor:</strong> Without permissions to change member roles, invite members or update team settings.</strong></li>
|
||||
</ul>
|
||||
<p><img src="/img/teams-permissions.png" alt="teams" /></p>
|
||||
<p class="advice">More team roles will be eventually available, as fine grained permissions management to control members accesses and actions.</p>
|
||||
<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>
|
||||
<p>An owner can transfer their ownership to another team member anytime and has to transfer it before leaving the team.</p>
|
||||
<p>An owner can transfer their ownership to another team member anytime and is requested to transfer it before leaving the team.</p>
|
||||
<p><img src="/img/teams-transfer.png" alt="teams" /></p>
|
||||
|
||||
<h3 id="teams-invites">Team invitations</h3>
|
||||
|
|
@ -59,7 +59,7 @@ title: 15· Teams
|
|||
<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 eamil invitation again.</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>
|
||||
<p><img src="/img/teams-invitations-actions.png" alt="teams" /></p>
|
||||
|
|
|
|||
|
|
@ -31,13 +31,13 @@ title: 02· The interface
|
|||
</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>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 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 show at the sidebar.</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! Change your profile, password or change the language from the settings. 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>
|
||||
|
|
@ -79,25 +79,25 @@ title: 02· The interface
|
|||
<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. There’s also a link to the feedback options.</li>
|
||||
<li><strong>Users:</strong> You can see how many users are working in the file at the same time.</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>History panel:</strong> The history panel keeps track of the latest changes on an opened file. You can do 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</a></li>
|
||||
<li><strong>Zoom:</strong> Zoom options and shortcuts information.</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>Zoom:</strong> Zoom options.</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>Layers panel:</strong> The layers panel allows you to see and manage the layers and pages of a file. 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. <a href="/user-guide/layer-basics/">More about layers</a></li>
|
||||
<li><strong>Assets panel:</strong> Each file has a default library (File Library) where that allows to store elements and styles that are likely to be reused. That includes components, graphics, colors and typographies. To add an asset to a library just click the “+” button at the header of each asset group.</li>
|
||||
<li><strong>Toolbar: </strong> The toolbar is the place where you will find the tools to quick and easily create the different types of objects: Board, rectangle, ellipse, text, graphic, path, free drawing and comments. <a href="/user-guide/objects/">More about objects</a></li>
|
||||
<li><strong>Typography palette:</strong> The Typography palette allows you to always have the typographie styles at plain sight. Use the menu to easily switch between libraries.</li>
|
||||
<li><strong>Layers panel:</strong> The layers panel allows you to see and manage the layers and pages of a file. 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. <a href="/user-guide/layer-basics/">More about layers.</a></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, graphics, colors and typographies. To add an asset to a library just click the “+” button at the header of each asset group.</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, free drawing and comments. <a href="/user-guide/objects/">More about objects.</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>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>Rulers:</strong> Sometimes you need coordinates to design. You can also drag guides from the rulers.</li>
|
||||
<li><strong>Design properties:</strong> At the Design properties sidebar you can find and edit the properties of a selected shape. 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/interactions/">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>Design properties:</strong> At the Design properties sidebar you can find and edit the properties of a selected shape. 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/interactions/">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>Viewport:</strong> An infinite canvas to design without limits.</li>
|
||||
</ol>
|
||||
|
||||
|
||||
|
||||
<h3 id="viewmode-interface">View mode</h3>
|
||||
<p>Launch the view mode to present and share your designs or play with the interactions set at the workspace. You also have an Inspect mode where you can get objects specifications and code snippets. <a href="/user-guide/view-mode/">More about the View mode</a></p>
|
||||
<p>Launch the view mode to present and share your designs or play with the interactions set at the workspace. You also have an Inspect mode where you can get objects specifications and code snippets. <a href="/user-guide/view-mode/">More about the View mode.</a></p>
|
||||
|
||||
<p>
|
||||
<a href="/img/interface-viewmode.png" target="_blank">
|
||||
|
|
@ -122,17 +122,17 @@ title: 02· The interface
|
|||
</p>
|
||||
|
||||
<ol>
|
||||
<li><strong>Pages selector:</strong> Navigate through the pages of a file. If the page is a shareable link this can be configured.</li>
|
||||
<li><strong>Boards selector:</strong> Frames selector displays a list of the boards with thumbnails that provide a graphic overview of the file.</li>
|
||||
<li><strong>Pages selector:</strong> Navigate through the pages of a file. You can configure how your shared links behave.</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>Boards counter:</strong> Boards count and current position. </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:</strong> At the Inspect mode you can get design specifications such as object properties, measurements and distances. You can also get code snippets for styles (currently CSS only but more coming) and SVG markup. <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>Inspect:</strong> At the Inspect mode you can get design specifications such as object properties, measurements and distances. You can also get code snippets for styles (currently CSS only but more coming) and SVG markup. <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>Fullscreen mode:</strong> Activate or deactivate browser fullscreen mode.</li>
|
||||
<li><strong>Share link:</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 being at your team or even logged at Penpot.</li>
|
||||
<li><strong>Edit file:</strong> Opens file edition at the design workspace.</li>
|
||||
<li><strong>Reset prototype:</strong> Goes to the first board of the prototype.</li>
|
||||
<li><strong>Navigation button:</strong> Forward and backwards buttons.</li>
|
||||
<li><strong>Navigation buttons:</strong> Forward and backwards buttons.</li>
|
||||
</ol>
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ title: 12· View mode
|
|||
<li>Play the <strong>interactions</strong> (if there are any).</li>
|
||||
<li>Change <strong>view settings for interactions</strong>: don’t show, show or show on click. <p><img src="/img/interactions-view-options.png" alt="viewmode" /></p></li>
|
||||
<li>Click on the board name to see the <strong>boards</strong> list (with nice thumbnails). <p><img src="/img/viewmode-artboards.png" alt="viewmode" /></p></li>
|
||||
<li>Click on the page name to display the <strong>pages</strong> menu. At shareable links the available pages can be configurable. <p><img src="/img/viewmode-pages.png" alt="viewmode" /></p></li>
|
||||
<li>Click on the page name to display the <strong>pages</strong> menu. The pages can be configured in the shareable links section. <p><img src="/img/viewmode-pages.png" alt="viewmode" /></p></li>
|
||||
<li><strong>Zooming options</strong>. Reset zoom <kbd>Shift+0</kbd>, Toogle fullscreen <kbd>Shift+F</kbd>, Toggle zoom style <kbd>F</kbd>, Zoom in <kbd>+</kbd>, Zoom out <kbd>-</kbd>.</li>
|
||||
<li>Activate the browser <strong>fullscreen mode</strong>.</li>
|
||||
<li>Activate the <strong>Inspect mode</strong>.</li>
|
||||
|
|
@ -30,7 +30,7 @@ title: 12· View mode
|
|||
|
||||
<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 show here.</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>
|
||||
<p><img src="/img/comments-view.png" alt="comments" /></p>
|
||||
|
||||
|
||||
|
|
@ -43,7 +43,7 @@ title: 12· View mode
|
|||
<li>To <strong>copy the link</strong> you can copy the url or press the copy button.</li>
|
||||
<li>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 will be always able to create a new one.</li>
|
||||
</ul>
|
||||
<p><strong>Tip:</strong> Add your desired "Interactions" setting (show / don't show / show on click) before creating the Share prototype link. This way the link will keep your selection.</p>
|
||||
<p><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>
|
||||
<p><img src="/img/share-prototype-flow.gif" alt="sharing" /></p>
|
||||
|
||||
<p><strong>Manage permissions:</strong></p>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ 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 in 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>
|
||||
<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>
|
||||
|
|
@ -43,14 +43,10 @@ title: 03· Workspace basics
|
|||
|
||||
|
||||
<h2 id="rulers">Rulers</h2>
|
||||
<p>Penpot has rulers that measure in pixels. Soon there will be guides that can be dragged from the rulers.</p>
|
||||
<p>Penpot has rulers that measure in pixels.</p>
|
||||
<p><img src="/img/rulers.gif" alt="rulers" /></p>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<h2 id="grids">Grids</h2>
|
||||
<p>Grids are design aids that are used to help you to align content to a
|
||||
geometric structure. In Penpot there are three types of grids:
|
||||
|
|
@ -120,15 +116,15 @@ geometric structure. In Penpot there are three types of grids:
|
|||
|
||||
|
||||
<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 . This option can be disabled anytime from the main menu.</p>
|
||||
<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>
|
||||
<p><img src="/img/snap-pixel.png" alt="snap to pixel" /></p>
|
||||
|
||||
<h2 id="nudge-amount">Nudge amount</h2>
|
||||
<p>Set your desired distance to move objects using the keyboard. This is a must if you’re working with grids (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>
|
||||
<p>Set your chosen distance to move objects using the keyboard. This is a must if you’re working with grids (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>
|
||||
<p><img src="/img/nudge-amount.png" alt="nudge amount" /></p>
|
||||
|
||||
<h2 id="shortcuts-panel">Shortcuts panel</h2>
|
||||
<p>Shortcuts boost your productivity but are not easy to find and learn. A handy panel at your workspace will help you with that.</p>
|
||||
<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 by clicking on the shortcuts button at the bottom of the left toolbar or using the shortcut <kbd>?</kbd></p>
|
||||
<p>Categories and a filter will help you to find the shortcut you need.</p>
|
||||
<p><img src="/img/shortcuts-panel.gif" alt="Shortcuts panel" /></p>
|
||||
|
|
@ -144,19 +140,19 @@ geometric structure. In Penpot there are three types of grids:
|
|||
|
||||
<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 got to this specific state.</p>
|
||||
<p>You can also press any item of the history list to get to this specific state.</p>
|
||||
<p><img src="/img/history-navigate.gif" alt="history" /></p>
|
||||
|
||||
|
||||
<h2 id="comments">Comments</h2>
|
||||
<p>Comments allows the team to have one priceless conversation getting and providing feedback right over the designs and prototypes.<p>
|
||||
<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>
|
||||
<p><img src="/img/comments-add.gif" alt="comments" /></p>
|
||||
<ol>
|
||||
<li>At the workspace, activate the comment tool by clicking the comment icon in the toolbar 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 at the text box.</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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user