Collaborate at Github →
+Collaborate at Github →
Penpot is open source. Get involved on the community or contribute to the project.
Reporting bugs
+Reporting bugs
Easy steps to bug hunting
Translations
+Translations
How to become a Penpot translator
Core code contributions
+Core code contributions
Help Penpot improve its code
Code of conduct
+Code of conduct
Rules, values and principles
Libraries & templates
+Libraries & templates
Share your libraries and templates or download the ones you like.
Bug hunting is not difficult if you know how.
-How to report a bug
+How to report a bug
We are using GitHub Issues 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.
diff --git a/contributing-guide/translations/index.njk b/contributing-guide/translations/index.njk index 8d3d0c3..2d5bfae 100644 --- a/contributing-guide/translations/index.njk +++ b/contributing-guide/translations/index.njk @@ -6,7 +6,7 @@ title: 02· TranslationsThank you for interest in contribute translating Penpot. Here you will find ways to do it.
-How to become a Penpot translator
+How to become a Penpot translator
We are using Weblate as translation platform, so the first thing you need to be a Penpot translator is to have a Weblate account (you can register here).
To start translating at Penpot:
-
@@ -15,7 +15,7 @@ title: 02· Translations
- You also might want to take a look at the guide for Translating using Weblate.
Add a new language
+Add a new language
To add a language that is still not among the Penpot language options:
- Go to the languages list. @@ -28,7 +28,7 @@ title: 02· Translations
- Go to the languages list. @@ -43,7 +43,7 @@ title: 02· Translations
- Go to the languages list. diff --git a/index.njk b/index.njk index cb03353..4cfd08f 100644 --- a/index.njk +++ b/index.njk @@ -13,25 +13,25 @@ eleventyNavigation:
-
-
User guide →
+User guide →
Everything you need to know about how Penpot works.
-
-
Contributing guide →
+Contributing guide →
How to report bugs, add translations and more.
-
-
Technical guide →
+Technical guide →
Installation, configuration and architecture.
-
-
FAQs →
+FAQs →
Get quick answers to usual questions about "why and how" Penpot.
@@ -41,7 +41,7 @@ eleventyNavigation:
- Select an object or a group of them.
- Press Ctrl + K or right click and select the option “Create component” at the object menu. @@ -29,10 +29,10 @@ title: 10· Components -
- From the viewport menu: Select the component copy of a deleted main component, right click and press the option "Restore main component". @@ -60,8 +60,8 @@ title: 10· Components
- Using slashes (/): Select one component and rename it as follows: "FOLDER NAME/COMPONENT NAME". For example, "Buttons/Alert Button". @@ -73,10 +73,10 @@ title: 10· Components -
- Select a component copy that has changes that override one or more properties of its main component. @@ -117,14 +117,14 @@ title: 10· Components
- Select a component copy. You can not swap main components. @@ -152,7 +152,7 @@ title: 10· Components -
- Press “Add custom font”.
- Inspect your local files to select one or more fonts that you want to upload. 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
- Size - Options for the most common sizing scales. @@ -30,8 +30,8 @@ title: 07· Exporting objects
- File format - PNG, SVG, JPEG, PDF.
-
-
Quickstart
+Quickstart
Ways to start with Penpot
-
-
The interface
+The interface
Penpot's main areas and features
diff --git a/user-guide/introduction/index.njk b/user-guide/introduction/index.njk
index 2a2a2d3..d38e35b 100644
--- a/user-guide/introduction/index.njk
+++ b/user-guide/introduction/index.njk
@@ -7,19 +7,19 @@ title: 01· Introduction
-
-
Quickstart →
+Quickstart →
Ways to start with Penpot
-
-
Shortcuts →
+Shortcuts →
Speed your design workflow
-
-
Info & tutorials →
+Info & tutorials →
Info of interest about Penpot
diff --git a/user-guide/introduction/info.njk b/user-guide/introduction/info.njk
index 8e7120d..92b33cb 100644
--- a/user-guide/introduction/info.njk
+++ b/user-guide/introduction/info.njk
@@ -6,16 +6,16 @@ title: Tutorials & info
- Select a layer and press top/bottom arrows while pressing Ctrl/⌘ to move them in the layers list.
- Press tab to change the layer selection to the next layer. @@ -32,7 +32,7 @@ title: 04· Layer basics
- You can press Ctrl/⌘ + D to duplicate a layer right over a selected layer. @@ -62,14 +62,14 @@ title: 04· Layer basics -
- You can press Supr/⌫ to delete a selected layer.
- 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.
- Click a layer to do a single selection.
- Press Ctrl/⌘ while clicking two or more layers to do a multiple selection. @@ -89,22 +89,22 @@ title: 04· Layer basics
- Group: To group two or more layers, select them and then press Ctrl/⌘ + G. You can also use the option at the layers menu that you can open with right click. @@ -116,7 +116,7 @@ title: 04· Layer basics -
- Mask layers: 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 Ctrl/⌘ + M. The shape that is at the lowest level at the layer list will be used as a mask. @@ -129,7 +129,7 @@ title: 04· Layer basics -
- Hold Shift/⇧ while resizing the object to preserve its aspect ratio. @@ -150,7 +150,7 @@ title: 04· Layer basics -
- Flip layers horizontally: Select the layer and press Shift/⇧ + H @@ -171,7 +171,7 @@ title: 04· Layer basics -
- Left: The object maintains its size and position relative to the left side of its parent container.
- Right: The object maintains its size and position relative to the right side of its parent container. @@ -257,7 +257,7 @@ press Shift/⇧ + left click over the right arrow of a group or a boa
- Top: The object maintains its size and position relative to the top side of its parent container.
- Bottom: The object maintains its size and position relative to the bottom side of its parent container. @@ -270,7 +270,7 @@ press Shift/⇧ + left click over the right arrow of a group or a boa -
- For first level boards that have at least one inside, click on the board name or Ctrl/⌘ + click on the board area to select it and then drag @@ -33,7 +33,7 @@ are shown by default at the View mode, actin
- Click to create a textbox without any specific dimensions. @@ -110,12 +110,12 @@ a design.
- Direction: LTR (left to right), RTL (right to left).
- Click to create a new corner node. @@ -156,7 +156,7 @@ Select the curve tool by clicking on the icon at the toolbar or pressing Ct -
- Use the image tool at the toolbar or press K to inspect images in your file system. @@ -182,7 +182,7 @@ You can choose to edit individual nodes or create new ones. Press Esc
- Drag an image from a Penpot library.
- After delay: when a certain time has passed after a board is shown. Note: this can only be set at boards.
- Open URL.
- Duration.
- Duration.
- Color palette - A quick launcher of the palette with the selected library.
- Color and opacity
Add a new translation
+Add a new translation
To add a new translation (a string with a lacking translation for a certain language) follow the next steps:
Change an approved translation
+Change an approved translation
To edit an already approved translation string follow the next steps:
-
@@ -49,6 +49,6 @@ eleventyNavigation:
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.
-Creating components
-Create a component
+Creating components
+Create a component
Duplicate a component
+Duplicate a component
You can duplicate a component the same way you can duplicate any other layer. When duplicating a component, you are creating a component copy that will be linked to its main component.
-Duplicate as main component
+Duplicate as main component
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".
Delete a main component
+Delete a main component
You can delete main components and its copies anytime the same way you can delete any other layer.
Deleting a main component at the viewport means deleting it at the assets library and viceversa, so be careful!
Restore a main component
+Restore a main component
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:
Group components
-Create component groups
+Group components
+Create component groups
At the Components section from the Assets library, there are two ways to create groups in a components library.
Ungroup components
+Ungroup components
You can ungroup the components the same ways you can group them, via the menu option ("Ungroup" in this case) or renaming them.
-Drag components to groups
+Drag components to groups
One very direct way to move components between groups at the assets library is by dragging them.
Find components
+Find components
Where's my component? There are ways to find some components at the assets panel and at the design viewport.
-Find a main component at the assets panel
+Find a main component at the assets panel
Select a main component at the viewport and then press "Show in assets panel" at the options of the right sidebar.
Find a main component at the viewport
+Find a main component at the viewport
Select a component copy and then press "Show main component" at the viewport menu or the right sidebar menu.
Update main component from copy
+Update main component from copy
You can push changes made at a component copy to a main component:
-Component overrides
+Component overrides
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.
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.
Reset overrides
+Reset overrides
Right click and select the option “Reset overrides” at the component menu to get it to the state of the Main component.
Detach component
+Detach component
Detach a component copy to unlink it from its Main component and transform it into a group layer. Press Ctrl + Shift + K or right click and select the option “Detach instance” at the component menu.
You can also detach components in bulk by selecting several components and performing the same action.
-Swap components
+Swap components
Penpot allows you to easily substitute component copies with other component copies.
Annotate components
+Annotate components
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.
Main components page
+Main components page
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.
diff --git a/user-guide/custom-fonts/index.njk b/user-guide/custom-fonts/index.njk
index 91f421a..d60d062 100644
--- a/user-guide/custom-fonts/index.njk
+++ b/user-guide/custom-fonts/index.njk
@@ -5,12 +5,12 @@ title: 16· Custom fonts
Custom fonts
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.
-
Upload local fonts
+Upload local fonts
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.
You can find the “Fonts” section in the dashboard menu, at the left sidebar.
To upload a local font:
+To upload a local font:
Group fonts in font families
+Group fonts in font families
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.
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.
Edit custom fonts
+Edit custom fonts
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.
-Using custom fonts
+Using custom fonts
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.
Fonts Licensing and Usage
+Fonts Licensing and Usage
You should only upload fonts you own or have license to use in Penpot. Find out more in the Content rights section of Penpot's Terms of Service. You also might want to read about font licensing.
diff --git a/user-guide/exporting/index.njk b/user-guide/exporting/index.njk index e5f89ee..5c4df75 100644 --- a/user-guide/exporting/index.njk +++ b/user-guide/exporting/index.njk @@ -5,10 +5,10 @@ title: 07· Exporting objectsExporting objects
In Penpot you can setup export presets for different file formats and scales.
-How to export
+How to export
You can set up different export configurations to suit your needs. Each export configuration is called "export preset".
-Create export preset
+Create export preset
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.
Export presets can be also found at the View mode with the code tab activated.
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.
-Remove export preset
+Remove export preset
To remove an export preset you have to select the object and then press the “-” button at the export preset you want to remove.
-Export options
+Export options
The options of an export:
Exporting multiple elements
-Make your export selection.
+Exporting multiple elements
+Make your export selection.
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.
@@ -41,19 +41,19 @@ title: 07· Exporting objects
Configure your export selection.
+Configure your export selection.
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.
Check the export progress.
+Check the export progress.
A popup will show the exporting progress and will show errors if any.
Export boards to PDF
+Export boards to PDF
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.
Technical note about the PDF format.
@@ -62,7 +62,7 @@ title: 07· Exporting objects
Technical notes about exports
+Technical notes about exports
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.
Some useful links to better understand Penpot through answers and tutorials.
-Dev Diaries
+Dev Diaries
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
Wanna know what's new? take a look at our Dev Diaries.
-Video tutorials
+Video tutorials
Suscribe to the Penpot Youtube channel to get updates when we upload new Penpot tutorials, demos of features and talks.
-Frequently asked questions
+Frequently asked questions
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 Frequently Asked Questions.
-Community space
+Community space
We launched a community space to allow for everyone to be part of the conversation. Join the community here.
diff --git a/user-guide/introduction/quickstart.njk b/user-guide/introduction/quickstart.njk index 49f23cc..fade5ee 100644 --- a/user-guide/introduction/quickstart.njk +++ b/user-guide/introduction/quickstart.njk @@ -6,10 +6,10 @@ title: QuickstartYou can start using Penpot right in your browser or installing it in a server of your own.
-In your browser
+In your browser
To use Penpot online point your browser to design.penpot.app and start designing. Use the latest Google Chrome or Mozilla Firefox for the best experience. We also provide specific support to WebKit (Safari / Epiphany).
You can also go to penpot.app 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.
-On your own server
+On your own server
Currently, private Penpot instances only require basic Docker knowledge.
You can run your own Penpot server following the instructions at the Technical Guide
diff --git a/user-guide/layer-basics/index.njk b/user-guide/layer-basics/index.njk index 4c06923..ddf4683 100644 --- a/user-guide/layer-basics/index.njk +++ b/user-guide/layer-basics/index.njk @@ -5,7 +5,7 @@ title: 04· Layer basicsLayer basics
Every object you create in Penpot’s viewport is a layer. Rectangles, ellipses, boards or text boxes are layers that you can use to build your design.
-Pages
+Pages
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.
You can add, remove or rename pages to suit your needs.
@@ -15,14 +15,14 @@ title: 04· Layer basicsLayers panel
+Layers panel
Layers: 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.
Navigate layers using the keyboard
+Navigate layers using the keyboard
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.
-Hide and lock layers
+Hide and lock layers
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.
Create layers
+Create layers
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.
Hold Shift/⇧ while creating an ellipse or a rectangle to maintain equal width and height.
Duplicate layers
+Duplicate layers
There are several ways to duplicate a layer:
Delete layers
+Delete layers
There are a couple ways to delete a layer.
Select layers
+Select layers
The simplest way to select a layer is to click on it. Make sure that you have the “move” pointer selected at the toolbar.
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 Shift/⇧. If you hold Shift/⇧ and click you can deselect layers individually.
Selecting layers at the layers panel
+Selecting layers at the layers panel
Select layers ignoring groups (deep selection)
+Select layers ignoring groups (deep selection)
If you want to select an element that is difficult to reach because it is under a group of elements, hold Ctrl/⌘ to make the selection ignore group areas and treat all the objects as being at the same level.
Select layers inside groups
+Select layers inside groups
To select a layer inside a group you do double click. First click selects the group, second click selects a layer.
-Select layer menu
+Select layer menu
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.
Group layers
+Group layers
Grouped layers can be moved, transformed or styled at the same time.
Mask layers
+Mask layers
A mask is a layer that does a clipping and only shows parts of a layer or multiple layers that fall within its shape.
Move layers
+Move layers
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.
Resize layers
+Resize layers
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.
Rotate layers
+Rotate layers
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 Ctrl/⌘ while rotation the angle will change in 45 degree increments. You can also find this option at the design panel.
Flip layers
+Flip layers
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:
Scale elements, texts and properties
+Scale elements, texts and properties
Activate the scale tool by pressing K 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.
Align and distribute layers
+Align and distribute layers
Aligning and distributing layers can be found at the top of the Design panel.
-Align layers
+Align layers
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.
Distribute layers
+Distribute layers
Distributing objects to position them vertically and horizontally with equal distances between them.
Search and filter layers
+Search and filter layers
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).
Collapse groups and boards
+Collapse groups and boards
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.
To collapse all the layers, and just display the boards, @@ -215,7 +215,7 @@ press Shift/⇧ + left click over the right arrow of a group or a boa -
Boolean operators
+Boolean operators
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.
Resizing constraints
+Resizing constraints
Constraints allow you to decide how layers will behave when resizing its container.
-Apply constraints
+Apply constraints
Constraints allow you to decide how layers will behave when resizing its parent container. You can apply horizontal and vertical constraints for every layer.
To apply constraints select a layer and use the constraints map or the constraints selectors at the design panel.
Constraints are set to “Scale” by default, but you have other options.
-Horizontal constraints
+Horizontal constraints
-Vertical constraints
+Vertical constraints
Focus mode
+Focus mode
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.
To activate focus mode:
-
@@ -284,7 +284,7 @@ press Shift/⇧ + left click over the right arrow of a group or a boa
-
RTL support
+RTL support
Diversity and inclusion is a major Penpot concern and that's why we love to give support to RTL languages, unlike most design tools.
If you write in arabic, hebrew or other RTL language text direction will be automatically detected in text layers.
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.
-Boards
+Boards
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 View mode, 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.
-Create boards
+Create boards
You can create a board using the board tool at the toolbar or the shortcut B.
Set a custom size or choose one of the provided presets with the most common resolution for devices and standard print sizes.
TIP: Create a board around one or more selected objects using the option "Selection to board" at the menu or the shortcut Ctrl/⌘ + Alt + G.
-Select boards
+Select boards
There are two different cases in terms of selecting boards:
Set board as thumbnail
+Set board as thumbnail
Select a specific board to be the file thumbnail that will be shown at the dashboard in the file card.
To set a custom thumbnail:
-
@@ -46,7 +46,7 @@ are shown by default at the View mode, actin
Clip content
+Clip content
Boards offer the option to clip its content (or not).
Show in View mode
+Show in View mode
Boards offer the option to be shown as a separate board/screen in the View mode. Use this setting to decide what boards should be shown as individual items in your presentations.
Defaults
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.
@@ -66,28 +66,28 @@ are shown by default at the View mode, actin
-Show fill in exports
+Show fill in exports
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.
Board guides
+Board guides
You can set guides on boards that will assist with aligning objects.
Read more about guides.
Prototyping boards
+Prototyping boards
You can connect boards with other boards to create rich interactions.
Read more about prototyping.
Rectangles and ellipses
+Rectangles and ellipses
Rectangle and ellipses are two basic “primitive” geometric shapes that are useful when starting a design.
The shortcut keys are E for ellipses and R for rectangles.
@@ -99,7 +99,7 @@ a design. -Text
+Text
To insert text you have to activate the text tool by first clicking on the icon at the toolbar or pressing T. Then you have two ways to create a text layer:
Edit and style text content
+Edit and style text content
Press Enter with a text layer selected to start editing the text content. You can style parts of the text content as rich text.
Text options
+Text options
Curves (freehand)
+Curves (freehand)
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 Ctrl/⌘ + c.
The path created will contain a lot of points, but it is edited the same way as any other curve.
-Paths (bezier)
+Paths (bezier)
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 P. Then you have two ways to create the path:
Edit nodes
+Edit nodes
To edit a node double click on a path or select and press Enter. You can choose to edit individual nodes or create new ones. Press Esc to exit node edition.
Images
-Insert images
+Images
+Insert images
There are several options for inserting an image into a Penpot file:
Images aspect ratio
+Images aspect ratio
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.
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.
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.
-
Connect boards
+Connect boards
Anatomy of a prototype
+Anatomy of a prototype
Interaction triggers
+Interaction triggers
Interaction actions
+Interaction actions
Navigate to
+Navigate to
The classic, most usual of the prototyping actions. It takes the user from one board to the destination set in the interaction.
-Open overlay
+Open overlay
It opens a board right over the current board. This action is typically used to display tooltips, modal windows or notifications.
Dissolve
+Dissolve
Slide
+Slide
Offset effect means that the origin board will slightly fade and move in the same direction of the destination board.
-Push
+Push
Flows
+Flows
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.
A flow 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.
-Starting points
+Starting points
A starting point 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.
There are several ways to create starting points:
-
@@ -182,19 +182,19 @@ title: 11· Prototyping
Multiple flows
+Multiple flows
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.
Flows at the view mode
+Flows at the view mode
At the view mode there’s a menu where you can access to all the flows set and easily switch between them.
Fix elements at scroll
+Fix elements at scroll
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.
diff --git a/user-guide/styling/index.njk b/user-guide/styling/index.njk
index ccdf33d..4763828 100644
--- a/user-guide/styling/index.njk
+++ b/user-guide/styling/index.njk
@@ -5,7 +5,7 @@ title: 06· Styling
Styling
Penpot has a variety of styling options for each object. When selected, the styling options are displayed in the design panel on the right.
-Color fills
+Color fills
Color fills can be added to boards, shapes, texts and groups of layers.
You can add as fills:
-
@@ -37,13 +37,13 @@ title: 06· Styling
Remove a fill
+Remove a fill
To remove a fill from a selected object, press the “-” button in the fill section.
Color picker
+Color picker
Here you have the anatomy of the color picker:
@@ -58,7 +58,7 @@ title: 06· Styling
Color palette
+Color palette
The color palette allows you to have a selected color library in plain sight.
Corner radius
+Corner radius
You can set values for corner radius to rectangles and images. There’s also the option to edit each corner individually.
Shadow
+Shadow
Adding shadows is easy from the design panel. You can add as many as you want.
@@ -148,7 +148,7 @@ title: 06· Styling
