mirror of
https://github.com/penpot/penpot.git
synced 2025-12-11 22:14:05 +01:00
📚 New architecture in user guide
This commit is contained in:
Esther Moreno
committed by
David Barragán Merino
David Barragán Merino
parent
89763d7c5a
commit
df718c940f
22
docs/user-guide/prototyping-testing/index.njk
Normal file
22
docs/user-guide/prototyping-testing/index.njk
Normal file
@@ -0,0 +1,22 @@
|
||||
---
|
||||
title: Prototyping & testing
|
||||
order: 4
|
||||
desc: Begin with the Penpot user guide! Get quickstarts, shortcuts, and tutorials. Learn the interface, layers, objects, styling, and more.
|
||||
---
|
||||
|
||||
<h1 id="section-1">Prototyping & testing</h1>
|
||||
|
||||
<ul class="intro-sections">
|
||||
<li>
|
||||
<a href="/user-guide/prototyping-testing/prototyping">
|
||||
<h2>Prototyping →</h2>
|
||||
<p>Ways to start with Penpot</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/user-guide/prototyping-testing/testing-view-mode">
|
||||
<h2>Testing: View mode →</h2>
|
||||
<p>Info of interest about Penpot</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
208
docs/user-guide/prototyping-testing/prototyping.njk
Normal file
208
docs/user-guide/prototyping-testing/prototyping.njk
Normal file
@@ -0,0 +1,208 @@
|
||||
---
|
||||
title: Prototyping
|
||||
order: 1
|
||||
desc: This Penpot user guide explains how to prototype interactions, connect boards, use triggers/actions, and animations. Learn to build flows and more!
|
||||
---
|
||||
|
||||
<h1 id="prototyping">Prototyping</h1>
|
||||
<p class="main-paragraph">Learn how to build interactive prototypes to visualize how users navigate through your screens and mimic your product behaviour.<p>
|
||||
|
||||
<p class="main-paragraph">Penpot allows you to prototype interactions by connecting boards, which can act as screens. Once the prototype is prepared with interactions and/or flows, it can be used at the View mode and shared through a link.<p>
|
||||
|
||||
<h2 id="prototyping-connection">Connect boards</h2>
|
||||
<figure>
|
||||
<video title="Connect boards" muted="" playsinline="" controls="" width="100%" poster="/img/prototype/prototype-connect.webp" height="auto">
|
||||
<source src="/img/prototype/prototype-connect.mp4" type="video/mp4">
|
||||
</video>
|
||||
</figure>
|
||||
<p>The simplest and most usual way to prototype an interaction at Penpot is connecting boards. Add interactions following this simple steps:</p>
|
||||
<ol>
|
||||
<li>Open a file with at least two boards.</li>
|
||||
<li>Activate <strong>Prototype mode</strong> clicking at the tab at the right sidebar.</li>
|
||||
<li><strong>Select</strong> the layer (shape, board or group) that will trigger the interaction.</li>
|
||||
<li><strong>Drag</strong> a connection from the selected layer to the destination board.</li>
|
||||
<li>A <strong>flow start</strong> will be automatically created. <a href="/user-guide/prototyping-testing/prototyping/#prototyping-flows">More about flows</a>.</li>
|
||||
<li><strong>Launch</strong> the interactive prototype to see it in action in the <a href="/user-guide/prototyping-testing/testing-view-mode/">View mode</a> (access by clicking the play button at the top right).</li>
|
||||
</ol>
|
||||
|
||||
<h3 id="prototype-anatomy">Anatomy of a prototype</h3>
|
||||
<figure>
|
||||
<img src="/img/prototype/prototype-anatomy.webp" alt="Different elements that involve prototyping with Penpot">
|
||||
</figure>
|
||||
<p class="hint">
|
||||
<strong>1)</strong> Hotspot (origin connection)
|
||||
<strong>2)</strong> Connector wire
|
||||
<strong>3)</strong> Destination
|
||||
<strong>4)</strong> Prototype mode tab
|
||||
<strong>5)</strong> View mode launcher
|
||||
<strong>6)</strong> Add new interaction
|
||||
<strong>7)</strong> Interaction trigger
|
||||
<strong>8)</strong> Interaction action
|
||||
<strong>9)</strong> Interaction animation
|
||||
<strong>10)</strong> Flow indicator and launcher
|
||||
</p>
|
||||
|
||||
<h2 id="interaction-triggers">Interaction triggers</h2>
|
||||
<figure>
|
||||
<img src="/img/prototype/prototype-trigger.webp" alt="Prototype trigger options">
|
||||
</figure>
|
||||
<p>A trigger defines the user action that will start the interaction. Penpot currently provides the following triggers (more of them will come):</p>
|
||||
<ul>
|
||||
<li><strong>On click:</strong> when user clicks or tap the hotspot.</li>
|
||||
<li><strong>Mouse enter:</strong> when the mouse enter the hotspot area.</li>
|
||||
<li><strong>Mouse leave:</strong> when the mouse leaves the hotspot area.</li>
|
||||
<li><strong>After delay:</strong> when a certain time has passed after a board is shown. Note: this can only be set at boards.</li>
|
||||
</ul>
|
||||
|
||||
<h2 id="prototyping-actions">Interaction actions</h2>
|
||||
<figure>
|
||||
<img src="/img/prototype/prototype-action.webp" alt="Prototype action options">
|
||||
</figure>
|
||||
<p>The action defines what will happen when the interaction is triggered. Penpot currently provides the following actions (more of them will come):</p>
|
||||
<ul>
|
||||
<li><strong>Navigate to</strong>.</li>
|
||||
<li><strong>Open overlay</strong>.</li>
|
||||
<li><strong>Toggle overlay</strong>.</li>
|
||||
<li><strong>Close overlay</strong>.</li>
|
||||
<li><strong>Previous screen</strong>.</li>
|
||||
<li><strong>Open URL</strong>.</li>
|
||||
</ul>
|
||||
|
||||
<h3 id="prototyping-actions-navigate">Navigate to</h3>
|
||||
<p>The classic, most usual of the prototyping actions. It takes the user from one board to the destination set in the interaction.</p>
|
||||
|
||||
<h3 id="prototyping-actions-overlay">Open overlay</h3>
|
||||
<p>It opens a board right over the current board. This action is typically used to display tooltips, modal windows or notifications.</p>
|
||||
<figure>
|
||||
<video title="Prototype overlay" muted="" playsinline="" controls="" width="100%" poster="/img/prototype/prototype-overlay.webp" height="auto">
|
||||
<source src="/img/prototype/prototype-overlay.mp4" type="video/mp4">
|
||||
</video>
|
||||
</figure>
|
||||
<p>You have several presets for positioning the overlay (center, top left, top right...) but you can also do it manually. Just select the “Manual” option and drag the “ghost” (an area with the size of the destination board) to the place you want the overlay to show up.</p>
|
||||
<p>There are also a couple of options that facilitates to mimic typical overlay behaviours:</p>
|
||||
<ul>
|
||||
<li>Close when clicking outside: the overlay is closed if the user clicks outside its area.</li>
|
||||
<li>Add background overlay: a black background with 20% opacity is added.</li>
|
||||
</ul>
|
||||
<p class="advice">TIP: You can select to open the overlay relative to the element that triggers it using the field "relative to". This is extremely useful for hover effects.</p>
|
||||
<figure>
|
||||
<img src="/img/prototype/prototype-overlay-relative.webp" alt="Prototype overlay relative position">
|
||||
</figure>
|
||||
<h3 id="prototyping-actions-overlay-toggle">Toggle overlay</h3>
|
||||
<p>It opens an overlay if it is not already opened or closes it if it is already opened.</p>
|
||||
|
||||
<h3 id="prototyping-actions-overlay-close">Close overlay</h3>
|
||||
<p>This action will close a targeted board that is opened as an overlay. It can be also set to “self” so the board can be closed from itself.</p>
|
||||
|
||||
<h3 id="prototyping-actions-previous">Previous screen</h3>
|
||||
<figure>
|
||||
<img src="/img/prototype/prototype-previous.webp" alt="Prototype previous screen action">
|
||||
</figure>
|
||||
<p>It takes back to the last board shown. This action is typically used for back buttons, when the same screen can be accessed from different origins.</p>
|
||||
|
||||
<h3 id="prototyping-actions-url">Open URL</h3>
|
||||
<p>This action opens an URL in a new tab. This is useful to add external links outside of the prototype.</p>
|
||||
|
||||
|
||||
<h2 id="prototyping-animations">Interaction animations</h2>
|
||||
<figure>
|
||||
<img src="/img/prototype/prototype-animation.webp" alt="Prototype animation options">
|
||||
</figure>
|
||||
<p>The animation defines the transition between boards when the interaction is triggered. Penpot currently provides the following actions (more of them will come):</p>
|
||||
<ul>
|
||||
<li><strong>Dissolve</strong>.</li>
|
||||
<li><strong>Slide</strong>.</li>
|
||||
<li><strong>Push</strong>.</li>
|
||||
</ul>
|
||||
|
||||
<h3 id="prototyping-animations-dissolve">Dissolve</h3>
|
||||
<figure>
|
||||
<img src="/img/prototype/prototyping-animations-dissolve.gif" alt="Prototyping animations">
|
||||
</figure>
|
||||
<p>Dissolve means that the destination board fades in while the origin board fades out.</p>
|
||||
<p>Options:</p>
|
||||
<ul>
|
||||
<li>Easing.</li>
|
||||
<li>Duration.</li>
|
||||
</ul>
|
||||
|
||||
<h3 id="prototyping-animations-Slide">Slide</h3>
|
||||
<figure>
|
||||
<img src="/img/prototype/prototyping-animations-slide.gif" alt="Prototyping animations">
|
||||
</figure>
|
||||
<p>Slide animation will move the destination frame in or out of the view.</p>
|
||||
<p>Options:</p>
|
||||
<ul>
|
||||
<li>IN / OUT.</li>
|
||||
<li>Direction (right, down, left, top).</li>
|
||||
<li>Easing.</li>
|
||||
<li>Duration.</li>
|
||||
<li>Offset effect.</li>
|
||||
</ul>
|
||||
<p><strong>Offset effect</strong> means that the origin board will slightly fade and move in the same direction of the destination board.</p>
|
||||
|
||||
<h3 id="prototyping-animations-push">Push</h3>
|
||||
<figure>
|
||||
<img src="/img/prototype/prototyping-animations-push.gif" alt="Prototyping animations">
|
||||
</figure>
|
||||
<p>Push animations will move the destination board into view pushing out the origin board.</p>
|
||||
<ul>
|
||||
<li>Direction (right, down, left, top).</li>
|
||||
<li>Easing.</li>
|
||||
<li>Duration.</li>
|
||||
</ul>
|
||||
|
||||
<h2 id="prototyping-flows">Flows</h2>
|
||||
<p>Design projects usually need to define multiple casuistics for different devices and user journeys. Flows allow you to define one or multiple starting points within the same page so you can better organize and present your prototypes.</p>
|
||||
|
||||
<p>A <strong>flow</strong> is defined by a starting board for an interaction. Flows can be selected independently at the view mode. Each flow has its own shareable link at the View mode.</p>
|
||||
|
||||
|
||||
<h3 id="prototyping-flows-starting">Starting points</h3>
|
||||
<p><strong>A starting point</strong> is a board selected to be the first screen of a flow. You could set a board as a starting point just because you want this board to be the first one to be shown in the view mode, but you can also set more starting points to define different user journeys.</p>
|
||||
<p>There are several ways to create starting points:</p>
|
||||
<ul>
|
||||
<li><strong>Automatically</strong>: when creating a connection from a board which is not connected yet (meaning that it does not belong to an existing flow), the origin board will be set as a flow start.
|
||||
<figure>
|
||||
<video title="New flow" muted="" playsinline="" controls="" width="100%" poster="/img/prototype/prototype-flow-new.webp" height="auto">
|
||||
<source src="/img/prototype/prototype-flow-new.mp4" type="video/mp4">
|
||||
</video>
|
||||
</figure>
|
||||
</li>
|
||||
<li><strong>From the prototype sidebar</strong>: having a board selected, click on the “+” button to set it as a flow start.
|
||||
<figure>
|
||||
<video title="Flow add" muted="" playsinline="" controls="" width="auto" poster="/img/prototype/prototype-flow-add.webp" height="auto">
|
||||
<source src="/img/prototype/prototype-flow-add.mp4" type="video/mp4">
|
||||
</video>
|
||||
</figure>
|
||||
|
||||
</li>
|
||||
<li><strong>From the board menu</strong>.
|
||||
<figure>
|
||||
<img src="/img/prototype/prototype-flow-menu.webp" alt="Prototyping flow from the menu">
|
||||
</figure>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<h3 id="prototyping-flows-multiple">Multiple flows</h3>
|
||||
<p>You can add as many flows as you want. The complete list of flows is shown at the prototype sidebar when no shape is selected.</p>
|
||||
<figure>
|
||||
<img src="/img/prototype/prototype-flows-multiple.webp" alt="Prototyping flows">
|
||||
</figure>
|
||||
|
||||
<h3 id="prototyping-flows-viewmode">Flows at the view mode</h3>
|
||||
<p>At the view mode there’s a menu where you can access to all the flows set and easily switch between them.</p>
|
||||
<figure>
|
||||
<img src="/img/prototype/prototype-flows-viewmode.webp" alt="Prototyping flows">
|
||||
</figure>
|
||||
|
||||
<h2 id="prototyping-fix-scroll">Fix elements at scroll</h2>
|
||||
<p>You can fix the position of a layer when scrolling at the presentation view. This is tipically useful for prototyping fixed headers, navbars and floating buttons.</p>
|
||||
<figure>
|
||||
<img src="/img/prototype/prototype-fix-scroll.webp" alt="Prototyping fix scroll">
|
||||
</figure>
|
||||
<p>Select an element and check the option "Fix when scrolling" that you can find inside the Constraints section at the Design sidebar (right side).</p>
|
||||
<figure>
|
||||
<img src="/img/prototype/prototyping-scroll.gif" alt="Prototyping scroll">
|
||||
</figure>
|
||||
<p>Launch the View Mode to see the elements with a fixed scroll position.</p>
|
||||
126
docs/user-guide/prototyping-testing/testing-view-mode.njk
Normal file
126
docs/user-guide/prototyping-testing/testing-view-mode.njk
Normal file
@@ -0,0 +1,126 @@
|
||||
---
|
||||
title: "Testing: View mode"
|
||||
order: 2
|
||||
desc: Present designs and share prototypes with Penpot's View mode! Play interactions, navigate boards, zoom, and toggle fullscreen. Try it for free!
|
||||
---
|
||||
|
||||
<h1 id="testing-viewmode">Testing: View mode</h1>
|
||||
<p class="main-paragraph">At Penpot, the View mode is the best place to test and present your designs. You will also be able to share them and play the interactions.<p>
|
||||
|
||||
<h3 id="viewmode-interface">View mode interface</h3>
|
||||
<p>Take a look at the anatomy of the View mode at this section: <a href="/user-guide/first-steps/the-interface/#interface-viewmode">View mode interface</a>.</p>
|
||||
<figure>
|
||||
<a href="/img/interface/viewmode-dark.webp" target="_blank">
|
||||
<img src="/img/interface/viewmode-dark.webp" alt="Penpot's viewmode" />
|
||||
</a>
|
||||
</figure>
|
||||
|
||||
<h3 id="viewmode-launch">Launch View mode</h3>
|
||||
<p>To view your designs from the workspace at View mode click the play button at the top right of the navbar or press <kbd>G</kbd> <kbd>V</kbd>.</p>
|
||||
<p><strong>Note:</strong> the View mode shows only boards and their contents. Anything outside a board will not be shown at the View mode.</p>
|
||||
<figure>
|
||||
<img src="/img/viewmode/viewmode-play.webp" alt="Penpot's viewmode" />
|
||||
</figure>
|
||||
|
||||
<h3 id="viewmode-features">Features and options</h3>
|
||||
<p>You'll find different capabilities and options to help you present and test your designs.</p>
|
||||
<h4>Navigate boards</h4>
|
||||
<p>You can navigate through boards by pressing the <kbd>→</kbd> and <kbd>←</kbd> keyboard keys or the navigation buttons at the right and left of the screen.</p>
|
||||
|
||||
<h4>Play prototype interactions</h4>
|
||||
<p>The View mode is the place where you will be able to play prototype interactions. (<a href="/user-guide/prototyping-testing/prototyping/">More about prototyping interactions</a>).</p>
|
||||
|
||||
<h4>Interactions view settings</h4>
|
||||
<p>This setting allows you to decide how to show a visual cue for interactions: always, on click or just don't show.</p>
|
||||
<figure>
|
||||
<img src="/img/viewmode/viewmode-interactions.webp" alt="Penpot's viewmode" />
|
||||
</figure>
|
||||
|
||||
<h4>Boards list</h4>
|
||||
<p>Display the boards list by clicking on the board name at the header and have a nice overview of all the available boards at this page.</p>
|
||||
<figure>
|
||||
<img src="/img/viewmode/viewmode-boards.webp" alt="Penpot's viewmode" />
|
||||
</figure>
|
||||
|
||||
<h4>Pages list</h4>
|
||||
<p>Click at the page name at the header to display the pages menu and change between them.</p>
|
||||
<figure>
|
||||
<img src="/img/viewmode/viewmode-pages.webp" alt="Penpot's viewmode" />
|
||||
</figure>
|
||||
|
||||
<h4>Zooming options</h4>
|
||||
<ul>
|
||||
<li>Reset zoom to 100% <kbd>Shift+0</kbd></li>
|
||||
<li>Toggle zoom style (Scale down to fit / Scale to fill) <kbd>F</kbd></li>
|
||||
<li>Zoom in <kbd>+</kbd></li>
|
||||
<li>Zoom out <kbd>-</kbd></li>
|
||||
</ul>
|
||||
|
||||
<h4>Full screen</h4>
|
||||
<p>Toogle fullscreen <kbd>Shift+F</kbd></p>
|
||||
|
||||
<h4>Comments mode</h4>
|
||||
<p>Activate the <a href="#viewmode-comments">comments</a> by pressing its button at the top navbar.</p>
|
||||
<p>Comments mode will not always be available in view mode shared links, this will depend on the link settings.</p>
|
||||
|
||||
<h4>Inspect mode</h4>
|
||||
<p>Activate the <a href="/user-guide/dev-tools/#inspect-design">inspect mode</a> by pressing its button at the top navbar.</p>
|
||||
<p>Inspect mode will not always be available in view mode shared links, this will depend on the link settings.</p>
|
||||
|
||||
|
||||
<h2 id="viewmode-comments">Comments</h3>
|
||||
<p>You can activate comments at the View mode by pressing the comments icon at the top navbar.</p>
|
||||
<p class="advice">At the View mode only boards are shown so the comments that are placed outside boards will not be shown here.</p>
|
||||
<figure>
|
||||
<img src="/img/viewmode/viewmode-comment.webp" alt="Penpot's viewmode" />
|
||||
</figure>
|
||||
|
||||
|
||||
<h2 id="viewmode-sharing">Share prototypes links</h3>
|
||||
<p>A "Share prototype link" is a public url that you can share so that someone can see the prototype regardless of whether they have a Penpot account.</p>
|
||||
<p>The Share prototype window can be found at the View mode and you can launch it using the "Share button".</p>
|
||||
<h4>Get link</h4>
|
||||
<p>To create a link press the button "Get link" and the link will be automatically created.</p>
|
||||
<figure>
|
||||
<img src="/img/viewmode/viewmode-share-create.webp" alt="Penpot's viewmode" />
|
||||
</figure>
|
||||
|
||||
<h4>Copy link</h4>
|
||||
<p>To copy the link you can copy the url or press the copy button.</p>
|
||||
<figure>
|
||||
<img src="/img/viewmode/viewmode-share-copy.webp" alt="Penpot's viewmode" />
|
||||
</figure>
|
||||
|
||||
<h4>Destroy link</h4>
|
||||
<p>To <strong>destroy a link</strong> press the button "Destroy link" and confirm the action. The link will cease to exist and will be no longer available, so be careful if you've already shared it. However, you can always create a new one.</p>
|
||||
<figure>
|
||||
<img src="/img/viewmode/viewmode-share-destroy.webp" alt="Penpot's viewmode" />
|
||||
</figure>
|
||||
|
||||
<p class="advice"><strong>Tip:</strong> Add your preferred "Interactions" setting (show / don't show / show on click) before creating the Share prototype link. This way the link will keep your selection.</p>
|
||||
|
||||
<h4>Manage permissions:</h4>
|
||||
<p>You can create a different link for each set of permissions. Click on "Manage permissions" to edit the link permissions.</p>
|
||||
<ul>
|
||||
<li><strong>Pages shared</strong>: Select the pages that will be availble at the link.</li>
|
||||
<li><strong>Can comment</strong>: allow comments to users that are not in the team where the file belongs.</li>
|
||||
<li><strong>Can inspect code</strong>: allow code inspection to users that are not in the team where the file belongs.</li>
|
||||
</ul>
|
||||
<figure>
|
||||
<img src="/img/viewmode/viewmode-share-options.webp" alt="Penpot's viewmode" />
|
||||
</figure>
|
||||
<p class="advice">Allowing to share a "view only" workspace is in our plans and will come soon.</p>
|
||||
|
||||
|
||||
<h2 id="viewmode-inspect">Inspect designs</h3>
|
||||
<p>You can activate the Inspect mode from the View mode. Click the code button at the middle of the navbar. Then you will see two sidebars:</p>
|
||||
<ul>
|
||||
<li>On the <strong>left sidebar</strong> you can see the layers tree. Select a layer to inspect it.</li>
|
||||
<li>At the <strong>right sidebar:</strong> you can switch between Info and Code tabs to get design specifications or code.</li>
|
||||
</ul>
|
||||
<p><a href="/user-guide/dev-tools/#inspect-design">More about inspecting designs</a></p>
|
||||
<figure>
|
||||
<video title="A video showing how to activate Inspect at the View mode" muted="" playsinline="" controls="" width="100%" poster="/img/inspect/inspect-viewmode.webp" height="auto">
|
||||
<source src="/img/inspect/inspect-viewmode.mp4" type="video/mp4">
|
||||
</video>
|
||||
</figure>
|
||||
Reference in New Issue
Block a user