At Penpot you can create as many teams as you need and be invited to teams owned by others. Learn how to manage them.
At the top left of the dashboard you can find the team selector.
+At the top left of the dashboard you can find the team selector. It shows the current team and, if the team belongs to an organization, the organization name.
+If you belong to an organization, the menu has two columns:
+Clicking an organization only shows its teams. You stay where you are until you pick a team. If you do not belong to any organization, the menu shows a single list of teams.
"Personal Projects" is the name of your personal space at Penpot. It is like any other team but in which no members can be invited so that you will always have your own private dashboard. Create or join other teams to collaborate with other Penpot users.
-
To create a new team go to the bottom of the team selector and press "+ Create new team". Then you will be asked to enter a team name and that's it. Once a new team is created you are able to invite new team members.
+To create a new team go to the bottom of the team selector and press "Create new team". If the menu shows organizations, the team is created in the organization you are looking at, or outside any organization if Other teams is selected. Then you will be asked to enter a team name and that's it. Once a new team is created you are able to invite new team members.
All members can leave the team anytime from the same menu.
-Only the team owner can delete a team. The option can be found at the team menu (the three dots at the right side). When deleting a team all projects and files belonging to it will be permanently deleted.
+Only the team owner can delete a team. The option can be found at the team menu (the three dots next to the team selector), together with members, invitations, settings and leaving the team. When deleting a team all projects and files belonging to it will be permanently deleted.
If you want to change your password to a new one, this can be done in the Password section.
+If you want to change your password to a new one, this can be done in the Password section. Penpot sends you an email each time your password is changed, set or reset.
Your session ends after a period without activity, and also after a maximum time since you logged in, even if you keep working. When that happens, Penpot asks you to log in again.
+After several failed login attempts in a short time, your account can be locked for some minutes. Penpot shows how long to wait. Resetting your password unlocks it.
+On self-hosted installations, the administrator sets these limits. See Session expiration and Account lockout in the Technical Guide.
+Penpot Design Tokens adhere to the Design Tokens Format Module and its definitions, a draft by the W3C DTCG. Penpot ensures compatibility across various disciplines, tools, and technologies by following the most standardized approach available for design tokens.
Tokens can be exported from Penpot or integrated into other tools directly, without conversion. Additionally, the knowledge gained from using Design Tokens in Penpot remains valuable, regardless of whether you continue using Penpot or a different tool or technology.
+Tokens live in a file. To share them between files, keep them in a shared library and set that library as the tokens source of the other files. See Use tokens from a shared library.
+You can create reusable and semantic tokens to be referenced in your designs at the Tokens panel. In this panel, you’ll find all the available types of tokens in Penpot arranged alphabetically, with existing tokens being shown at the top of the list.
You can also use a color token for the canvas background. With nothing selected, click the swatch in the Canvas background section of the Design tab, switch the color picker to Color tokens and pick a token. The background then follows the token, for example when you switch between a light and a dark theme. Use Detach token to keep the color as a plain value.
The stroke width token, also known as the border width token, defines the thickness of a stroke around a design element. It can be applied to boards, groups, rectangles and text elements.
+On rectangles and boards you can apply it to a single side. Right-click the token and choose All, Top, Right, Bottom or Left. Dimension tokens offer the same options under Stroke Width. You can also pick a token in each side field of the stroke per side controls.
+Tokens apply only to the first stroke of a layer. Applying a token to one side requires WebGL rendering.
You can export Tokens from Penpot and import them from your computer to a Penpot file. Tokens can be imported from the Tools option at the bottom of the Tokens tab.
-You can also import tokens from a connected shared library using the Libraries modal. That import uses the library's full token definition (sets and themes included) and replaces the tokens already in your file.
+To use the tokens of a shared library without copying them, set the library as the file's tokens source. See Use tokens from a shared library. Import is not available while a library is the tokens source.
The Import functionality allows you to upload and replace the global token set using a single file or a folder with multiple files in it.
These features support JSON files formatted according to specific guidelines and preserve the ability to undo changes if needed.
If a shared library you have connected includes design tokens, you can copy them into the current file from the Libraries modal.
-The Import tokens button appears only next to connected libraries that define tokens. Libraries without tokens do not show this control.
+A file can use the design tokens of a connected shared library instead of its own. This keeps one source of truth: tokens are defined once in the library, and every file that uses it gets the same tokens, sets and themes.
+A file uses one tokens source at a time: its own tokens or the tokens of one connected library.
Importing tokens from a library replaces all tokens, sets and themes in the current file. Export your tokens first (from the Tokens tab → Tools → Export) if you need to keep a backup.
-This is separate from connecting the library for components, colors and typographies. You can use shared assets without importing tokens, and import tokens only when you want the file's token setup to match the library.
- 
- 
The button only appears for libraries that have tokens of their own. A library that already uses tokens from another library cannot be a tokens source.
+You can also change the source from the top of the Tokens tab, which shows Source: followed by This file or the library name. In the Assets tab, a tokens icon marks the library that is the current source.
+ +Token changes in the library reach the files that use it right away. You do not need to accept them in Updates, which only lists components, colors and typographies. When sets or themes are added, removed or renamed in the library, Penpot shows a notice in the file.
+If a token applied in your file is renamed or deleted in the library, the layer keeps its value but the token appears as missing. Apply the new token again.
+ +Click Set as tokens source on the File library row. The file's own tokens were kept while the library was the source, so they come back. Tokens applied from the library appear as missing unless the file has tokens with the same names. Disconnecting a library that is the tokens source also switches the file back to its own tokens.
diff --git a/docs/user-guide/designing/color-stroke.njk b/docs/user-guide/designing/color-stroke.njk index bd1cab3000..de69f59b8f 100644 --- a/docs/user-guide/designing/color-stroke.njk +++ b/docs/user-guide/designing/color-stroke.njk @@ -122,6 +122,21 @@ desc: Style your designs with Penpot's options! Learn about color fills, gradien
Rectangles and boards can have a different stroke width on each side. Use it for dividers, tab underlines or accent borders without adding extra layers.
+
+When the sides have different widths, the main width field shows Mixed. Typing a value in it sets all four sides to that value. Color, position and style are shared by all sides.
+Each stroke of a layer has its own per-side widths. You can also edit them on a multiple selection of rectangles and boards.
+You can apply stroke width tokens to one side or to all of them. In the Inspect tab, per-side widths appear as CSS logical properties (border-block-start-width, border-inline-end-width, border-block-end-width and border-inline-start-width).
Stroke per side requires WebGL rendering. With the classic renderer the button is disabled and only the top width is drawn.
+A path is the underlying geometry: a sequence of points and segments (straight lines or Bezier curves). A stroke is the visible line drawn along that path, with properties such as width, color, opacity, dashes, caps, and joins.
Stroke to path turns the visible outline of a stroke into a separate, editable path. You can then reshape or style that outline independently of the original path. The new shape is usually closed. That matters for SVG, boolean operations, and editing the outline as geometry.
diff --git a/docs/user-guide/designing/layers.njk b/docs/user-guide/designing/layers.njk index b46bc11f90..9aca80ced0 100644 --- a/docs/user-guide/designing/layers.njk +++ b/docs/user-guide/designing/layers.njk @@ -22,7 +22,7 @@ are shown by default at the Curves (freehand)The curve tool allows a path to be created directly in a freehand mode. Select the curve tool from the free-draw flyout in the toolbar or press Shift/⇧ + C.
-The path created will contain a lot of points, but it is edited the same way as any other curve.
+When you release the mouse, Penpot turns your stroke into a few smooth curves. Sharp turns stay as corners, so a zigzag keeps its points. The result is a regular path that you can edit like any other.
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, select the path tool from the free-draw flyout in the toolbar or press P. Then you have two ways to create the path:
@@ -178,16 +178,37 @@ Select the curve tool from the free-draw flyout in the toolbar or press ShiTip: If you hold Shift/⇧ while adding nodes the angle between the current and the next will change in 45 degree increments.
+Tip: If you hold Shift/⇧ while adding nodes, the angle between the current node and the next one changes in 15 degree increments.
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.
+The path toolbar has two modes:
+Snap nodes (Ctrl/⌘ + ') is on by default, so new and moved nodes snap to the existing ones.
+ +To keep drawing from an existing node, select it in Move mode and switch to Draw mode, or click it in Draw mode. If the node is the end of an open path, the new segments extend it. Click the start node to close the shape. Hold Shift/⇧ to draw in 15 degree steps.
+ +These gestures work on nodes and segments while you edit a path:
+Delete or Backspace removes the selected nodes and keeps the path joined. With selected handles, it removes them and the curve at that node becomes straight. Shift/⇧ + Delete removes the selected nodes together with their segments.
+See all the path editor shortcuts.
Hold Ctrl/⌘ while you drag a resize handle to change the layer bounds without scaling the image. Shrink the layer to crop the image, or make it bigger to add empty space around it. The image is not distorted.
+This works with image layers and with any layer that has an image fill. A normal resize afterwards scales the frame and the image together.
+Background blur is not included in exported files yet (PNG, SVG, PDF, and others). The exporter still uses the legacy SVG renderer, so the effect only shows in the workspace and View mode. Export support is a current priority and will land in an upcoming release.
+Background blur is included in exports made with WebGL rendering enabled. In PDF files it is embedded as an image.
Press Enter with a text layer selected to start editing the text content. You can style parts of the text content as rich text.
+With WebGL rendering enabled, right-click while editing to open a menu with Cut, Copy, Paste and Select all. Your text selection is kept.
The comments menu lets you show all comments, only your comments or only your mentions. Hide resolved comments is a separate option. Penpot remembers it in your browser for all files, in the workspace and in View mode.
+At the top right of the comment popup you can find options to edit or delete comments.
diff --git a/docs/user-guide/export-import/exporting-layers.njk b/docs/user-guide/export-import/exporting-layers.njk index c8ad0988e9..6f1f5869c5 100644 --- a/docs/user-guide/export-import/exporting-layers.njk +++ b/docs/user-guide/export-import/exporting-layers.njk @@ -27,7 +27,7 @@ desc: Learn how to export layers in Penpot, the free, open-source design collaboThe options of an export:
Currently, private Penpot instances only require basic Docker knowledge.
You can run your own Penpot server following the instructions at the Technical Guide
+ +To see if your installation is up to date, open your profile menu in the dashboard and go to About Penpot → Check for updates. If a newer version exists, Penpot shows your installed version, the latest one, and the highlights of each release you are missing, with links to the full changelog and the release notes.
+The check runs from your browser and needs access to GitHub. It is hidden on installations configured as air-gapped.
diff --git a/docs/user-guide/first-steps/shortcuts.njk b/docs/user-guide/first-steps/shortcuts.njk index b06057a9b9..e4708c9800 100644 --- a/docs/user-guide/first-steps/shortcuts.njk +++ b/docs/user-guide/first-steps/shortcuts.njk @@ -10,7 +10,43 @@ desc: Get quickstart tips, shortcuts, and tutorials for Penpot! Learn interfaceHere 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.
-You can also check the most updated list of shortcuts at the GitHub file.
+The tables below list the default shortcuts. You can change most of them to fit your keyboard layout or your habits. See Customize shortcuts.
+ +Go to Your account → Shortcuts to see every shortcut and change the ones you want. From the workspace, open the shortcuts panel (Help & info → Shortcuts in the main menu, or ?) and click Customize in Settings.
+Your shortcuts are saved in your account, so they follow you to any computer and browser. After a change, reload any other open Penpot tabs to apply it.
+ +Shortcuts are grouped into Workspace, Dashboard and Viewer. Use the tabs to see All of them, only your Custom ones, or the ones you Disabled.
+The search field matches both the action name and the keys. Type "group" to find the grouping actions, or "shift" to see every shortcut that uses Shift.
+ +
+If the keys are already used by another action in the same group, Penpot shows which one. When you save, the shortcut moves to the action you are editing, and the other action appears under Disabled.
+Each action takes one combination. If an action had two defaults (for example, two ways to redo), saving a custom one replaces both.
+From the same editor you can also disable a shortcut so that no keys trigger it, or reset it to its default value. Custom shortcuts are marked with a dot, and the main menu highlights the custom keys.
+Paste cannot be customized.
+ +Punctuation keys (such as -, [, / or ') are recorded by their physical position on the keyboard, so they work the same on AZERTY, QWERTZ and other layouts. Letters and numbers are recorded by the character they type. With Shift, the base key is recorded, not the shifted character.
+ +When you have custom shortcuts, a Reset all button appears next to the search field. It lists every shortcut that will go back to its default before you confirm.
+ +Use the Import/Export button at the bottom of the page to move your setup to another account or share it with your team.
+Importing replaces your custom shortcuts in each group included in the file (Workspace, Dashboard or Viewer). Custom shortcuts in those groups that are not in the file go back to their defaults. If an imported shortcut uses keys taken by a default one, the default one is disabled.
The Workspace is where the designs are actually created. More about the Workspace.
@@ -569,6 +605,7 @@ desc: Get quickstart tips, shortcuts, and tutorials for Penpot! Learn interfaceCopy, cut, paste, duplicate and select all also work on nodes while you edit a path. For mouse gestures, see Reshape with the mouse.
| ⇧+ | |||||
| Delete node | -Supr or Delete | -⌫ | +Delete node, segment or handle | +Delete or Backspace | +⌦ or ⌫ |
| Draw Path | +Delete node and segments | +ShiftDelete | +⇧⌫ | +||
| Draw nodes | P | P | ⌘J | ||
| Move Nodes | +Move nodes | M | M | Ctrl' | ⌘' | +
| Flip horizontally (selected nodes, or the whole path) | +ShiftH | +⇧H | +|||
| Flip vertically (selected nodes, or the whole path) | +ShiftV | +⇧V | +
Since Penpot 2.16, optional WebGL rendering (Beta) is available on design.penpot.app and self-hosted instances. It is off by default.
Turn it on from Your account → Settings or Workspace → Main menu → Preferences when you want a faster canvas for complex files.
-In this beta, WebGL applies to the design workspace canvas only. View mode and exports still use the legacy renderer, so some visual differences are expected. If the beta gets in your way, you can switch back to the legacy renderer at any time.
+With WebGL rendering enabled, the workspace canvas, View mode and exports (PNG, JPEG, WEBP, SVG and PDF) use the same engine, so exported files match what you see on the canvas. Text is edited with the new text editor, which also adds a right-click menu with Cut, Copy, Paste and Select all.
+Some features need WebGL rendering, such as stroke per side, background blur and stroke to path.
For what is in scope today, what we are prioritizing next, and known visual differences, read What's next for the Penpot WebGL renderer on the Penpot Community.