Merge pull request #61 from penpot/sprint-26

Sprint 26

user-guide/objects/index.njk

@@ -12,6 +12,8 @@ available in Penpot, and how to get the most of them.</p>
 <h4>Create artboards</h4>
 <p>You can create an artboard with a custom sizes or choose one of the provided presets with the most common resolution for devices and standard print sizes. </p>
 <p><img src="/img/artboards-creation.gif" alt="artboards" /></p>
+<p><strong>TIP:</strong> Create an artboard around one or more selected objects using the option at the menu or the shortcut <kbd>Ctrl/⌘</kbd> + <kbd>Alt</kbd> + <kbd>G</kbd>.</p>
+
 
 <h4>Select and move artboards</h4>
 <p>Click on the artboard name or double click over an area without layers.</p>
@@ -59,7 +61,7 @@ a design.</p>
 
 <h3 id="curves">Curves (freehand)</h3>
 <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>.
+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>

user-guide/prototyping/index.njk

@@ -27,8 +27,9 @@ title: 12· Prototyping
   <strong>3)</strong> Destination
   <strong>4)</strong> Prototype mode tab
   <strong>5)</strong> Add interaction button
-  <strong>6)</strong> Interaction (settings expanded)
-  <strong>7)</strong> View mode launcher
+  <strong>6)</strong> Interaction action
+  <strong>7)</strong> Animation settings
+  <strong>8)</strong> View mode launcher
 </p>
 
 <h3 id="prototyping-triggers">Interaction triggers</h3>
@@ -79,6 +80,50 @@ title: 12· Prototyping
 <h4 id="prototyping-actions-url">Open URL</h4>
 <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>
+<p><img src="/img/prototyping-animations.png" alt="prototyping" /></p>
+<p>The animation defines the transition between artboards 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>
+
+<h4 id="prototyping-animations-dissolve">Dissolve</h4>
+<p><img src="/img/prototyping-animations-dissolve.gif" alt="prototyping" /></p>
+<p>Dissolve means that the destination artboard fades in while the origin artboard fades out.</p>
+<p>Options:</p>
+<ul>
+  <li>Easing.</li>
+  <li>Duration.</li>
+</ul>
+
+<h4 id="prototyping-animations-Slide">Slide</h4>
+<p><img src="/img/prototyping-animations-slide.gif" alt="prototyping" /></p>
+<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 artboard will slightly fade and move in the same direction of the destination artboard.</p>
+
+<h4 id="prototyping-animations-push">Push</h4>
+<p><img src="/img/prototyping-animations-push.gif" alt="prototyping" /></p>
+<p>Push animations will move the destination artboard into view pushing out the origin artboard.</p>
+<ul>
+  <li>Direction (right, down, left, top)</li>
+  <li>Easing.</li>
+  <li>Duration.</li>
+</ul>
+
+
+
+
 <h3 id="prototyping-flows">Flows</h3>
 <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>
 

user-guide/styling/index.njk

@@ -9,6 +9,7 @@ title: 07· Styling
 <p>Color fills can be added to artboards, 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>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>
 
 <h4>Remove a Fill</h4>