From df718c940fa7deb36f82a3c8cde0249e7805cbf5 Mon Sep 17 00:00:00 2001 From: Esther Moreno Date: Thu, 23 Oct 2025 11:57:36 +0200 Subject: [PATCH] :books: New architecture in user guide --- docs/.eleventy.js | 3 + docs/_includes/layouts/user-guide.njk | 2 +- docs/_redirects | 239 ++++++++ docs/user-guide/account-teams/comments.njk | 14 + docs/user-guide/account-teams/index.njk | 28 + .../index.njk => account-teams/teams.njk} | 8 +- .../user-guide/account-teams/your-account.njk | 74 +++ docs/user-guide/components/index.njk | 338 ------------ docs/user-guide/custom-fonts/index.njk | 38 -- .../index.njk => design-systems/assets.njk} | 112 +--- docs/user-guide/design-systems/components.njk | 172 ++++++ .../design-tokens.njk} | 44 +- docs/user-guide/design-systems/index.njk | 40 ++ docs/user-guide/design-systems/libraries.njk | 72 +++ docs/user-guide/design-systems/variants.njk | 168 ++++++ .../index.njk => designing/color-stroke.njk} | 109 +--- .../flexible-layouts.njk} | 17 +- docs/user-guide/designing/index.njk | 40 ++ docs/user-guide/designing/layers.njk | 519 ++++++++++++++++++ docs/user-guide/designing/text-typo.njk | 89 +++ .../workspace-basics.njk} | 277 ++++++---- .../{inspect => dev-tools}/index.njk | 53 +- .../export-import-files.njk} | 17 +- .../exporting-layers.njk} | 21 +- docs/user-guide/export-import/index.njk | 22 + .../cloud-selfhost.njk} | 5 +- docs/user-guide/first-steps/index.njk | 34 ++ .../{introduction => first-steps}/info.njk | 9 +- .../shortcuts.njk | 7 +- .../the-interface.njk} | 105 +--- docs/user-guide/index.njk | 46 +- docs/user-guide/introduction/index.njk | 27 - docs/user-guide/layer-basics/index.njk | 311 ----------- docs/user-guide/objects/index.njk | 236 -------- .../index.njk | 30 +- docs/user-guide/prototyping-testing/index.njk | 22 + .../prototyping.njk} | 13 +- .../testing-view-mode.njk} | 17 +- 38 files changed, 1946 insertions(+), 1432 deletions(-) create mode 100644 docs/_redirects create mode 100644 docs/user-guide/account-teams/comments.njk create mode 100644 docs/user-guide/account-teams/index.njk rename docs/user-guide/{teams/index.njk => account-teams/teams.njk} (90%) create mode 100644 docs/user-guide/account-teams/your-account.njk delete mode 100644 docs/user-guide/components/index.njk delete mode 100644 docs/user-guide/custom-fonts/index.njk rename docs/user-guide/{libraries/index.njk => design-systems/assets.njk} (58%) create mode 100644 docs/user-guide/design-systems/components.njk rename docs/user-guide/{design-tokens/index.njk => design-systems/design-tokens.njk} (96%) create mode 100644 docs/user-guide/design-systems/index.njk create mode 100644 docs/user-guide/design-systems/libraries.njk create mode 100644 docs/user-guide/design-systems/variants.njk rename docs/user-guide/{styling/index.njk => designing/color-stroke.njk} (56%) rename docs/user-guide/{flexible-layouts/index.njk => designing/flexible-layouts.njk} (95%) create mode 100644 docs/user-guide/designing/index.njk create mode 100644 docs/user-guide/designing/layers.njk create mode 100644 docs/user-guide/designing/text-typo.njk rename docs/user-guide/{workspace-basics/index.njk => designing/workspace-basics.njk} (70%) rename docs/user-guide/{inspect => dev-tools}/index.njk (58%) rename docs/user-guide/{import-export/index.njk => export-import/export-import-files.njk} (87%) rename docs/user-guide/{exporting/index.njk => export-import/exporting-layers.njk} (67%) create mode 100644 docs/user-guide/export-import/index.njk rename docs/user-guide/{introduction/quickstart.njk => first-steps/cloud-selfhost.njk} (93%) create mode 100644 docs/user-guide/first-steps/index.njk rename docs/user-guide/{introduction => first-steps}/info.njk (88%) rename docs/user-guide/{introduction => first-steps}/shortcuts.njk (99%) rename docs/user-guide/{the-interface/index.njk => first-steps/the-interface.njk} (64%) delete mode 100644 docs/user-guide/introduction/index.njk delete mode 100644 docs/user-guide/layer-basics/index.njk delete mode 100644 docs/user-guide/objects/index.njk rename docs/user-guide/{plugins => plugins-integrations}/index.njk (74%) create mode 100644 docs/user-guide/prototyping-testing/index.njk rename docs/user-guide/{prototyping/index.njk => prototyping-testing/prototyping.njk} (94%) rename docs/user-guide/{view-mode/index.njk => prototyping-testing/testing-view-mode.njk} (88%) diff --git a/docs/.eleventy.js b/docs/.eleventy.js index 2f6a763527..4b057f66ce 100644 --- a/docs/.eleventy.js +++ b/docs/.eleventy.js @@ -81,6 +81,9 @@ module.exports = function(eleventyConfig) { eleventyConfig.addPassthroughCopy("css"); eleventyConfig.addPassthroughCopy("js"); + // Redirects (for Cloudflare) + eleventyConfig.addPassthroughCopy({"_redirects": "_redirects" }); + /* Markdown Overrides */ let markdownLibrary = markdownIt({ html: true, diff --git a/docs/_includes/layouts/user-guide.njk b/docs/_includes/layouts/user-guide.njk index f0cf5ce2a3..3344cc21d2 100644 --- a/docs/_includes/layouts/user-guide.njk +++ b/docs/_includes/layouts/user-guide.njk @@ -4,7 +4,7 @@ templateClass: tmpl-user-guide --- {%- macro show_children(item) -%} - {%- for child in item | children | sorted('data.title') %} + {%- for child in item | children | sorted('data.order') %} {%- if loop.first -%}
Team invitations actions
-

Webhooks

-

Webhooks allow other websites and apps to be notified when certain events happen on Penpot, ensuring to create integrations with other services. While we are still working on a plugin system, this is a clever and simple way to create integrations with other services.

-
Webhooks
- -

You can find detailed info about Penpot webhooks at the Technical Guide.

diff --git a/docs/user-guide/account-teams/your-account.njk b/docs/user-guide/account-teams/your-account.njk new file mode 100644 index 0000000000..db8c5161e4 --- /dev/null +++ b/docs/user-guide/account-teams/your-account.njk @@ -0,0 +1,74 @@ +--- +title: Your account +order: 1 +desc: Learn how to import and export files in Penpot, the free, open-source design tool. Discover file formats, backups, sharing, and library management. +--- + +

Your account

+

Your account settings can be changed at the user area, in Your account. Here you can make changes to your profile, password or account language, as well as generate personal access tokens and access release notes.

+ +

Profile + # +

+

If you want to change the email address associated to your account or remove your account entirely, this can be done in the Profile section.

+
+ Penpot's profile +
+ +

Password + # +

+

If you want to change your password to a new one, this can be done in the Password section.

+
+ Penpot's password +
+ +

Notifications + # +

+

At the Notifications section you can configure the email and dashboard notifications.

+
+ Penpot's notifications +
+ +

Settings + # +

+

At the Settings section you can change the language and the UI color theme.

+
+ Penpot's settings +
+ +

UI Theme

+

Penpot's default interface is dark but you can switch anytime to a light option. You have 2 ways to change the theme:

+ + +
+ + Penpot's dashboard + +
Penpot's dashboard in light mode
+
+
+ + Penpot's workspace + +
Penpot's workspace in light mode
+
+
+ + Penpot's view mode + +
Penpot's view mode in light mode
+
+ + +

Access tokens + # +

+

At the Asset tokens section you can manage your access tokens. Read more about access tokens here.

+ + diff --git a/docs/user-guide/components/index.njk b/docs/user-guide/components/index.njk deleted file mode 100644 index 55828b2b49..0000000000 --- a/docs/user-guide/components/index.njk +++ /dev/null @@ -1,338 +0,0 @@ ---- -title: 11· Components -desc: Streamline your design workflow with Penpot's Components guide! Learn to create, duplicate, group, and manage reusable components. ---- - -

Components

-

Speed your workflow with the reusable power of components.

-

A component is an object or group of objects that can be reused multiple times across files. This can help you maintain consistency across a group of designs.

- -

Components basics

-

A component consists of two elements:

- -
- Components main and copy -
Mains and copies have different icons. Mains also have a title header at the viewport.
-
-

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.

- -

Create components

-

Create a component

-
    -
  1. Select an object or a group of them.
    2. -
  2. Press Ctrl + K or right click and select the option “Create component” at the object menu.
    3. -
-
- -
- -

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

-

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

-

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

-

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:

- -
- Components main and copy -
Mains and copies have different icons. Mains also have a title header at the viewport.
-
- -

Find main components

-

Where's my component? There are ways to find main components at the assets panel and at the design viewport.

- -

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

-

Select a component copy and then press "Show main component" at the viewport menu or the right sidebar menu.

-
- -
- -

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.

-
- Main components page -
- -

Working with components

-

Group components

-

At the Components section from the Assets library, there are two ways to create groups in a components library.

-
    -
  1. Using slashes (/): Select one component and rename it as follows: "FOLDER NAME/COMPONENT NAME". For example, "Buttons/Alert Button".
    2. -
  2. Using the "Group" option: Select one or more components at the Assets library, right click to show the menu and then select "Group".
    3. -
-
- -
- -

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

-

One very direct way to move components between groups at the assets library is by dragging them.

-
- -
- -

Detach components

-

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.

- -

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.

-
- -
- -

The annotations are also shown at the Inspect tab, as another option to improve communication between designers and developers.

-
- Annotations at inspect tab -
- -

Component Overrides & Relationships

-

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.

-
- Components 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.

-
- -
- -

Update main from copies

-

You can push changes made at a component copy to a main component:

-
    -
  1. Select a component copy that has changes that override one or more properties of its main component.
    2. -
  2. Right click and select the option “Update main component” at the component menu. You can find this option at the viewport menu and at the sidebar menu.
    3. -
-
- Updating a main component from a copy -
-

If the component that is about to be updated is located in a different file which is connected to this file as a shared library, a notification will be shown offering the options to update or dismiss.

-
- Prompt shown to update a main component that is in a shared library -
- -

Swap components

-

Penpot allows you to easily substitute component copies with other component copies.

-
    -
  1. Select a component copy. You can not swap main components.
    2. -
  2. At the right sidebar, press the component name to launch the swap menu.
    3. -
  3. Choose the component you want to swap with and click on it.
    4. -
-

Tip: The first options shown to swap a component are the ones at the same level inside the assets library, so group them properly.

-
- -
- - - -

Component Variants

-

Variants allow you to group similar components, such as buttons, icons, or toggles, into a single, customizable component. Rather than navigating through separate components for every possible state, size, or style, you can manage them all from one unified component using clearly defined properties.

-

Imagine a single button component that can switch between primary and secondary styles, active and disabled states, and small to large sizes. Useful, right? That’s the power of Variants.

- -

Why are Variants Important?

- - -
- -
Penpot – Variants release
-
- -

Understanding variants: properties and values

-

A component’s variants are organized by properties and their values.

- -

Each variant is simply one unique combination of values across all properties (for example, Color=Primary + Size=Small + State=Hover).

-

Variants must have at least one property, and property values should be kept consistent to make switching predictable and to preserve overrides across connected layers.

- -

Create and modify variants

- -

Create variants

-

You can create variants from an existing component or from another variant:

- -
- Variants creation button -
-

When a variant is created:

- -
- Variant created -
- -

Manage variant properties

-

Properties are key to defining and differentiating your variants. They appear in the Design tab when a variant or component with variants is selected.

-
- Add variant property -
-
Add new properties
- - -
Edit properties
- -
- Edit variant property -
- -
Delete properties
- -

Variants must have at least one property. You can’t delete the last one.

-

When multiple variants are selected, the Design tab will show all their properties and values. If a property has different values across the selected variants, it will display “Mixed,” allowing you to override them collectively.

- -

Delete Variants

- -

If you delete the last variant, the entire component is removed.

- -

Restore Variants

-

If you have a copy of a variant whose original was deleted, you can restore it:

- - -

Use variants

-

Once you have created your variants, you can place a copy of a component with variants into your design and then switch between its different versions.

- -

From the Assets tab

-

Drag and drop a component with variants from the Assets tab onto the design viewport, just like you would with any other component. Once placed, you can then use its properties in the Design tab to switch to the desired variant.

- -

From the Design tab

-

When a variant is selected:

- -
- Using variants -
- -

Understanding overrides

-

A key benefit of variants is the ability to preserve overrides when you switch between them. An override is a specific change you make to a component instance that diverges from its original definition (e.g., changing text content or a specific color).

-

Layers between variants are considered connected if they:

-
    -
  1. Share the same name.
    2. -
  2. Are the same type. Rectangle, ellipse, paths, and boolean operations count as the same type.
    3. -
  3. Have the same hierarchy level. Groups, boards, and layouts are considered equivalent.
    4. -
-
- Variants connections conditions -
-

Example: If Variant 1 has a text layer named label with red color, and you change its content to Click here in an instance, then switch to Variant 2 (which also has a label text layer), the Click here content will be preserved, and Variant 2’s color will be applied.

-

Changing any of these (e.g., renaming or grouping a layer) breaks the connection, but reverting the change will restore it.

- -

Bulk converting components to variants

-

If you already have multiple related components, you can combine them into a single component with variants:

- -
- Combining components as variants -
-

Conditions:

- -

When combined:

- - -

Transforming Variants Back into Components

-

To turn a variant into an independent component:

- -

The new component’s name includes the original component name and the variant’s property values.

\ No newline at end of file diff --git a/docs/user-guide/custom-fonts/index.njk b/docs/user-guide/custom-fonts/index.njk deleted file mode 100644 index d3436b62d7..0000000000 --- a/docs/user-guide/custom-fonts/index.njk +++ /dev/null @@ -1,38 +0,0 @@ ---- -title: 17· Custom fonts -desc: Penpot's guide on custom fonts! Upload, manage, and use custom fonts in Penpot! Enhance your designs with personalised typography. ---- - -

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

-

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.

-

local fonts

- -

To upload a local font:

-
    -
  1. Press “Add custom font”.
    2. -
  2. Inspect your local files to select one or more fonts that you want to upload. You can upload fonts with -the following formats: TTF, OTF and WOFF. Only one format will be needed.
    3. -
  3. Change the font name if needed. The font name is the name that will be shown in the font list at the workspace. -It is also what Penpot uses to group fonts in families. You can always edit it later.
    4. -
  4. Once ready, press upload. That's it. The font will be available at the font list of this team’s files.
    5. -
-

local fonts

- -

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.

-

local 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

-

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.

-

local fonts

- -

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/docs/user-guide/libraries/index.njk b/docs/user-guide/design-systems/assets.njk similarity index 58% rename from docs/user-guide/libraries/index.njk rename to docs/user-guide/design-systems/assets.njk index 84967f445a..b0e0d91b2f 100644 --- a/docs/user-guide/libraries/index.njk +++ b/docs/user-guide/design-systems/assets.njk @@ -1,28 +1,27 @@ --- -title: 09· Asset Libraries +title: Assets +order: 1 desc: Use Penpot's asset libraries for reusable design elements! Learn to create, manage, and share components, colors, and typography. Try Penpot - it's free! --- -

Asset Libraries

-

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.

+

Assets

+

Asset Libraries allow you to store elements and styles so that they can be easily reused. Learn how to create and manage them to better organize the pieces of your designs and speed your workflow.

-

Assets

- -

Asset types

+

Asset types

In Penpot you can store different type of assets:

-

Add assets to libraries

+

Add assets to libraries

You can use the “+” icon to add assets. Each of the categories have their own specific adding action.

-

Components

+

Components

There are two ways to add components to an assets library:

    -
  1. Main components are automatically stored in the local library at the moment of being created. Learn more about components at the components section.
    2. +
  2. Main components are automatically stored in the local library at the moment of being created. Learn more about components at the components section.
  3. Clicking the “+” to launch import an image that will be added as a component.
@@ -30,14 +29,14 @@ desc: Use Penpot's asset libraries for reusable design elements! Learn to create
-

Colors

-

Click the “+” to launch the color picker and add a color to the library. Learn more about managing color

+

Colors

+

Click the “+” to launch the color picker and add a color to the library. Learn more about managing color

-

Typographies

+

Typographies

All typography styles created from the text properties (at the right sidebar) are automatically stored at the library. You can also click the “+” to create a new typography style from scratch.

Tip: If you select a text layer with certain properties (font family, size, line height...) and click the "+" at the Typographies section at the assets library (left sidebar), the created typography style will include the properties of the text layer.

-

Edit assets

+

Edit assets

Press left click over any asset of the library to show the options menu. Some options are available only for certain assets.

-

Positioning Flex elements

+

Positioning flex elements

Position static:

Static position is the default option for flex elements, meaning that they will be included in the flex flow, using flex properties.

Flex Layout properties
@@ -94,7 +95,7 @@ desc: Master responsive web design with Penpot's flexible and grid layouts! Lear

Get code and specifications

-

Designing with Flex Layout generates ready for production code. Select the flex board or its inner elements and then open the Inspect tab to obtain its properties, detailed info and raw code.

+

Designing with Flex Layout generates ready for production code. Select the flex board or its inner elements and then open the Inspect tab to obtain its properties, detailed info and raw code.

Inspecting code at Penpot

Flex Layout basic examples

@@ -132,7 +133,7 @@ desc: Master responsive web design with Penpot's flexible and grid layouts! Lear
Rearranging cells in Grid Layout
-

Grid Layout is based on CSS Grid standard

+

Grid Layout is based on CSS Grid standard

Penpot's Grid Layout is built over CSS Grid, a fairly new CSS module. If you are interested to know more about this CSS module we recommend checking out the comprehensive explanation Guide to CSS Grid at CSS Tricks.

@@ -274,7 +275,7 @@ desc: Master responsive web design with Penpot's flexible and grid layouts! Lear

To turn areas back to regular cells, just select the "Auto" option at the grid cell properties (right sidebar).

Grid code and specifications

-

Grid layout at Penpot behaves just like CSS Grid because it is actually using the CSS Grid standard. This means that you can just switch to Inspect mode, get the code and use it in real websites.

+

Grid layout at Penpot behaves just like CSS Grid because it is actually using the CSS Grid standard. This means that you can just switch to Inspect mode, get the code and use it in real websites.

Inspecting code at Penpot
diff --git a/docs/user-guide/designing/index.njk b/docs/user-guide/designing/index.njk new file mode 100644 index 0000000000..a72660daf0 --- /dev/null +++ b/docs/user-guide/designing/index.njk @@ -0,0 +1,40 @@ +--- +title: Designing +order: 2 +desc: Begin with the Penpot user guide! Get quickstarts, shortcuts, and tutorials. Learn the interface, layers, objects, styling, and more. +--- + +

Designing

+ + diff --git a/docs/user-guide/designing/layers.njk b/docs/user-guide/designing/layers.njk new file mode 100644 index 0000000000..d7039e8a88 --- /dev/null +++ b/docs/user-guide/designing/layers.njk @@ -0,0 +1,519 @@ +--- +title: Layers +order: 2 +desc: "Work with Penpot's layers: boards, shapes, text, paths, and graphics. Learn to create, select, rename, and customize boards for optimal workflow." +--- + +

Layers

+

Layers are objects or items that you can place in the viewport. Boards, shapes, texts, paths and graphics are layers. The following describes the different layers that you have +available in Penpot, and how to get the most of them.

+ +

Available layers

+ +

Boards

+

Boards are layers that serve as your high-level containers for content organization and layout. 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, layers 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

+

To create a board, use the board tool at the toolbar or the shortcut B.

+
+ Board tool +
+ +

Then, with the board tool selected, you have two options:

+ +
+ +
+ +

TIP: Create a board around one or more selected layers using the option "Selection to board" at the menu or the shortcut Ctrl/⌘ + Alt + G.

+ +

Select boards

+

There are two different cases in terms of selecting boards:

+ +
+ +
+ +

Rename boards

+

There several ways to rename boards:

+ +
+ +
+ +

Set board as thumbnail

+

At the workspace, 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:

+
    +
  1. Select a board.
    2. +
  2. Right click to show the menu and select "Set as thumbnail" or press Shift T.
    3. +
+
+ +
+ +

Copy link to board

+

You can get the link to each individual board, making it easy to share them with team members or include direct links in documentation.

+
+ copy link to board +
+

There are two ways to copy a direct link to a board:

+ + +

Clip content

+

Boards offer the option to clip its content (or not).

+
+ +
+ +

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.

+ +
+ board show in view mode +
+ +

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.

+
+ show board fill in exports +
+ +

Resize board to fit to content

+

You can adjust the board size to fit its content by clicking the icon in the design sidebar.

+
+ Resize board to fit to content button +
+ +

Board guides

+

You can set guides on boards that will assist with aligning layers.

+

Read more about guides.

+
+ board guides +
+ +

Prototyping boards

+

You can connect boards with other boards to create rich interactions.

+

Read more about prototyping.

+
+ prototyping with boards +
+ +

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.

+

To find out more about how to edit and modify these shapes go to Layer basics.

+
+ +
+ +

Text

+

(NOTA: El grosso de este contenido está en su propia sección. Aquí vendría un texto introductorio y un link a la sección en cuestión. )

+ +

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 Shift/⇧ + c. +

The path created will contain a lot of points, but it is edited the same way as any other curve.

+ +

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:

+
    +
  1. Click to create a new corner node.
    2. +
  2. Click and drag to create a curved node.
    3. +
+

To finish the path:

+
    +
  1. Close it clicking over the starting node.
    2. +
  2. Leave it open pressing Esc or Enter to stop editing. Then press Esc to exit the edit mode.
    3. +
+

Tip: If you hold Shift/⇧ while adding nodes the angle between the current and the next will change in 45 degree increments.

+
+ +
+ +

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.

+
+ +

Node types

+

There are two types of nodes: curve or corner (straight). The type of a selected node can be changed at the bezier menu. Curved nodes have bezier handles that allow the curvature of a path to be modified.

+
+ +
+ +

Images

+

Insert images

+

There are several options for inserting an image into a Penpot file:

+ + +

Images aspect ratio

+

Images fill the layer backgrounds by default, so they take up the entire layer 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.

+
+ +
+ +

Layer actions

+ +

Create

+

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

+

There are several ways to duplicate a layer:

+
    +
  1. You can press Ctrl/⌘ + D to duplicate a layer right over a selected layer.
    2. +
  2. 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.
    3. +
  3. You can also select a layer and drag while pressing Alt/⌥ so you can simultaneously duplicate and drag the new layer.
    4. +
+
+ +
+ +

Delete

+

There are a couple ways to delete a layer.

+
    +
  1. You can press Supr/⌫ to delete a selected layer.
    2. +
  2. 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.
    3. +
+ +

Move

+

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.

+
+ +
+ +

Select

+

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

+
    +
  1. Click a layer to do a single selection.
    2. +
  2. Press Ctrl/⌘ while clicking two or more layers to do a multiple selection.
    3. +
  3. If you press Shift/⇧ while selecting two or more layers all the layers within the selection area will be selected.
    4. +
+
+ +
+

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 layers as being at the same level.

+
+ +
+

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

+

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.

+

layers select

+ +

Hide and lock layers

+

Hide and show layers

+

You can control the visibility of any layer by clicking the eye icon next to it in the Layers panel. When a layer is hidden, it will not appear on the canvas, but you can still select it in the Layers panel, move its order, or modify its properties. The eye icon always indicates whether a layer is visible or hidden, making it easy to manage complex designs.

+ +

Lock and unlock

+

Locking a layer helps prevent accidental changes or movement on the canvas. When a layer is locked, it cannot be moved or edited directly in the canvas area. However, you can still select a locked layer in the Layers panel and adjust its properties, such as color, effects, or name. The lock icon next to the layer’s name shows its locked status, helping you keep your design organized and protected.

+ +
+ +
+ +

Group

+

Grouped layers can be moved, transformed or styled at the same time.

+ +
+ +
+ +

Mask

+

A mask is a layer that does a clipping and only shows parts of a layer or multiple layers that fall within its shape.

+ +
+ +
+ +

Resize

+

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.

+ +
+ +
+ +

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. +

+ +
+ +

Rotate

+

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

+

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:

+ +
+ +
+ +

Align and distribute

+

Aligning and distributing layers can be found at the top of the Design panel.

+

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

+

Distributing layers to position them vertically and horizontally with equal distances between them.

+
+ +
+ +

Boolean operators

+

It is possible to combine shapes in a group in different ways to create more complex layers 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

+

Constraints allow you to decide how layers will behave when resizing its container.

+ +

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
+ +
+ Vettical constraints +
+ + +

Styling layers

+ +

Penpot has a variety of properties for each layer. When selected, the options are displayed in the design panel on the right.

+ +

Border radius

+

You can customize the border radius of rectangles and images, with the option to customize each corner individually.

+
+ +
+ + +

Shadow

+

Adding shadows is easy from the design panel. You can add as many as you want.

+
+ Layer shadows +
+

Shadow options are:

+ + +

Blur

+

You can set a blur for each and every layer at Penpot.

+

Applying a lot and/or big values for blurs can affect Penpot’s performance as it requires a lot from the browser.

+
+ +
+ +

Opacity and blend

+

Set the overal opacity for layers and their blend mode.

+

Blend allows you to control how a layer interacts with the layers beneath it, determining how pixels from the current layer are combined with pixels in the underlying layers. Use blend to achive various effects, such as shading, highlights, or creative visual styles.

+
+ Layer blend and opacity +
+

Blend options available:

+ + +

Copy/Paste properties

+

You can copy and apply properties, including fills, strokes, shadows, and others from one layer to another—or multiple layers with just a few clicks. You can do it using the layer's menu or shortcuts.

+ +
+ +
+ +

Using the layer menu

+
    +
  1. Select one layer.
    2. +
  2. Right click to show the layer menu.
    3. +
  3. Press Copy/Paste as... > Copy properties.
    4. +
  4. Select one or more other layers.
    5. +
  5. Right click to show the layer/s menu.
    6. +
  6. Press Copy/Paste as... > Paste properties.
    7. +
+ +

Using Shortcuts

+ + + + + + + + + diff --git a/docs/user-guide/designing/text-typo.njk b/docs/user-guide/designing/text-typo.njk new file mode 100644 index 0000000000..f15e714fa9 --- /dev/null +++ b/docs/user-guide/designing/text-typo.njk @@ -0,0 +1,89 @@ +--- +title: Text & Typography +order: 5 +desc: Penpot's guide on custom fonts! Upload, manage, and use custom fonts in Penpot! Enhance your designs with personalised typography. +--- + +

Text & Typography

+ +

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:

+
    +
  1. Click to create a textbox without any specific dimensions.
    2. +
  2. Drag to create a textbox with a fixed size.
    3. +
+
+ +
+

Tips for resizing

+ +

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.

+
+ editing text +
+

Text options

+
+ text options +
+
    +
  1. Font family. Penpot includes by default the Google Fonts cataloge. You can also install your own fonts.
    2. +
  2. Font size.
    3. +
  3. Font type.
    4. +
  4. Line height (in pixels).
    5. +
  5. Letter spacing (in pixels).
    6. +
  6. Text case: none, uppercase, lowercase, titlecase.
    7. +
  7. Horizontal alignment: left, center, right, justify.
    8. +
  8. Sizing: auto height, auto width, fixed size.
    9. +
  9. Vertical alignment: top, center, bottom.
    10. +
  10. Decoration: none, underline, strikethrough.
    11. +
  11. Direction: LTR (left to right), RTL (right to left).
    12. +
+ +

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.

+
+ RTL support +
+ +

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

+

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.

+

local fonts

+ +

To upload a local font:

+
    +
  1. Press “Add custom font”.
    2. +
  2. Inspect your local files to select one or more fonts that you want to upload. You can upload fonts with +the following formats: TTF, OTF and WOFF. Only one format will be needed.
    3. +
  3. Change the font name if needed. The font name is the name that will be shown in the font list at the workspace. +It is also what Penpot uses to group fonts in families. You can always edit it later.
    4. +
  4. Once ready, press upload. That's it. The font will be available at the font list of this team’s files.
    5. +
+

local fonts

+ +

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.

+

local 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

+

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.

+

local fonts

+ +

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/docs/user-guide/workspace-basics/index.njk b/docs/user-guide/designing/workspace-basics.njk similarity index 70% rename from docs/user-guide/workspace-basics/index.njk rename to docs/user-guide/designing/workspace-basics.njk index 870e091d0a..4fb910cd61 100644 --- a/docs/user-guide/workspace-basics/index.njk +++ b/docs/user-guide/designing/workspace-basics.njk @@ -1,5 +1,6 @@ --- -title: 03· Workspace basics +title: Workspace Basics +order: 1 desc: Master Penpot's workspace basics! Learn interface navigation, zoom tools, dynamic alignment, rulers, guides, and shortcuts. --- @@ -29,15 +30,81 @@ desc: Master Penpot's workspace basics! Learn interface navigation, zoom tools, Main menu +

Layers panel

+

Every layer 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 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.

+
+ +
+ +

Layers

+

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

+ + +

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.

+ + +

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

+

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, +press Shift/⇧ + left click over the right arrow of a group or a board to collapse them all.

+
+ +
+ +

Focus mode

+

Focus mode zooms into the elements of a page you want to work with in a specific moment, and hides the rest so that they don’t get in the way. When the page has many elements, focus mode can also improve performance.

+

To activate focus mode:

+
    +
  1. Select one or more elements.
    2. +
  2. Right click on the selection to show the menu and select the option “Focus on” or press F.
    3. +
+

Notice that the layer panel will now only show the focused layers. A focus mode status line will also appear at the top.

+

To exit focus mode and return to the original viewport and selection, right click anywhere and select “Focus off” or just press F again. You can also click anywhere on the focus mode status line at the top of the layer panel. +

+
+ +
+

Zoom

-

Zoom menu

+

Zoom menu

To zoom in and out hold Ctrl (or ⌘ if using macOS) and use the scroll wheel on your mouse. You also have a bunch of useful shortcuts for the most common zoom levels that you can find at the zoom menu in the navigation bar.

-

All zoom shortcuts →

+

All zoom shortcuts →

Zoom options
-

Zoom lense

+

Zoom lense

Press left click while pressing Z to zoom in to a specific point and Alt/⌥ + Z to zoom out.

zoom lense

-

Zooming from the layers panel

+

Zooming from the layers panel

Double click over a layer icon to zoom to the layer.

+

Comments

+

Comments allow the team to have one priceless conversation getting and providing feedback right over the designs and prototypes.

+ +

Adding comments

+
+ +
+
    +
  1. At the workspace, activate the comment tool by clicking the comment icon in the navbar or pressing the C key.
    2. +
  2. 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.
    3. +
  3. Write your comment in the text box.
    4. +
  4. Press Post to leave the comment or Cancel to not do it.
    5. +
+

How to reply a comment

+
    +
  1. Open a comment by clicking at its bubble (a circled number).
    2. +
  2. Write your comment at the text box at the end of the comment popup.
    3. +
  3. Press Post to leave the comment or Cancel to not do it.
    4. +
+

Mark threads as read

+

Mark a thread as read using the checkbox at the comment box to make it disappear from the comments notifications at the dashboard.

+
+ Marking comments as read +
+ +

Edit and remove comments

+

At the top right of the comment popup you can find options to edit or delete comments.

+ +

Dashboard notifications

+
+ Comments notifications +
+

At your projects Dashboard you will be able to see if you have unread comments inside the files of the team.

+ + +

File history versions

+

The history panel keeps track of the latest changes on an opened file as well as the different versions of the file, making it easier to track changes, revert to previous states and collaborate.

+ +

View history

+

To view the recent history of a file at the workspace click the history icon on the navbar at the left:

+ +
+ History versions button +
+ +

History panel

+

At the History panel, you can save the current version of your file, as well as access previous versions for up to 7 days.

+ +

Restore versions

+

All saved versions of the file—whether manually saved, autosaved, or pinned—can be restored, reverting the file back to its state at the selected time.

+
+ Restore versions +
+ +

Saved versions

+

You can save the current version of your file by clicking the pin icon at the History tab. This will allow the version to be named and it will add it to your list of versions.

+
+ Saved versions +
+ +

Autosaved versions

+

When you start working on a file, Penpot will start to automatically save versions of that file across time so that you can later restore them as needed.

+

In the History tab, if you click on the autosaved versions, you’ll see a list of the exact date and time when the version was automatically saved.

+
+ Autosaved versions +
+ +

Pinned versions

+

File versions can also be pinned. Pinning a file version will allow you to name it, making it easier to access at the History tab. Pinned file versions will be saved forever and can be renamed, restored or deleted at any time.

+
+ Pin versions +
+ +

Actions panel

+

At the Actions panel, you have the layer type (rectangle, text, image...) and type of change (New, Modified, Deleted...). If you press the item, it will be reverted to its state before that specific action was performed.

+
+ Actions panel +
+

The Actions panel shows only a limited list of changes at a current browser tab session. Refreshing the browser means refreshing the history of actions as well.

+ +

Navigate actions

+

To navigate through the actions press Ctrl/⌘ + Z to go backwards and Ctrl/⌘ + Shift/⇧ + Z to go forward.

+

You can also press any item of the actions list to get to this specific state.

+ +

Shortcuts panel

+

Shortcuts boost your productivity but they are not easy to learn. A handy panel at your workspace will help you with that.

+

Display the shortcuts panel at the workspace using the shortcut ? or through the option at the main menu.

+

The categories and a filter will help you to find the shortcut you need.

+
+ Shortcuts panel +
+

Full list of shortcuts →

+

Dynamic alignment

-

While moving objects at the viewport Penpot will show alignment guides for the edges and the center of the layers at sight. Dynamic alignment also snaps the object that is being moved to those guides to help you align to the center of the edges of other objects.

+

While moving layers at the viewport Penpot will show alignment guides for the edges and the center of the layers at sight. Dynamic alignment also snaps the layer that is being moved to those guides to help you align to the center of the edges of other layers.

-

If there are more than two objects nearby and you drag one of them Penpot will show their distance to help you distribute them equally.

+

If there are more than two layers nearby and you drag one of them Penpot will show their distance to help you distribute them equally.

-

Shortcuts panel

-

Shortcuts boost your productivity but they are not easy to learn. A handy panel at your workspace will help you with that.

-

Display the shortcuts panel at the workspace using the shortcut ? or through the option at the main menu.

-

The categories and a filter will help you to find the shortcut you need.

-
- Shortcuts panel -
-

File history versions

-

The history panel keeps track of the latest changes on an opened file as well as the different versions of the file, making it easier to track changes, revert to previous states and collaborate.

- -

View history

-

To view the recent history of a file at the workspace click the history icon on the navbar at the left:

- -
- History versions button -
- -

History panel

-

At the History panel, you can save the current version of your file, as well as access previous versions for up to 7 days.

- -

Restore versions

-

All saved versions of the file—whether manually saved, autosaved, or pinned—can be restored, reverting the file back to its state at the selected time.

-
- Restore versions -
- -

Saved versions

-

You can save the current version of your file by clicking the pin icon at the History tab. This will allow the version to be named and it will add it to your list of versions.

-
- Saved versions -
- -

Autosaved versions

-

When you start working on a file, Penpot will start to automatically save versions of that file across time so that you can later restore them as needed.

-

In the History tab, if you click on the autosaved versions, you’ll see a list of the exact date and time when the version was automatically saved.

-
- Autosaved versions -
- -

Pinned versions

-

File versions can also be pinned. Pinning a file version will allow you to name it, making it easier to access at the History tab. Pinned file versions will be saved forever and can be renamed, restored or deleted at any time.

-
- Pin versions -
- -

Actions panel

-

At the Actions panel, you have the object type (rectangle, text, image...) and type of change (New, Modified, Deleted...). If you press the item, it will be reverted to its state before that specific action was performed.

-
- Actions panel -
-

The Actions panel shows only a limited list of changes at a current browser tab session. Refreshing the browser means refreshing the history of actions as well.

- -

Navigate actions

-

To navigate through the actions press Ctrl/⌘ + Z to go backwards and Ctrl/⌘ + Shift/⇧ + Z to go forward.

-

You can also press any item of the actions list to get to this specific state.

- -

Comments

-

Comments allow the team to have one priceless conversation getting and providing feedback right over the designs and prototypes.

- -

Adding comments

-
- -
-
    -
  1. At the workspace, activate the comment tool by clicking the comment icon in the navbar or pressing the C key.
    2. -
  2. 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.
    3. -
  3. Write your comment in the text box.
    4. -
  4. Press Post to leave the comment or Cancel to not do it.
    5. -
-

How to reply a comment

-
    -
  1. Open a comment by clicking at its bubble (a circled number).
    2. -
  2. Write your comment at the text box at the end of the comment popup.
    3. -
  3. Press Post to leave the comment or Cancel to not do it.
    4. -
-

Mark threads as read

-

Mark a thread as read using the checkbox at the comment box to make it disappear from the comments notifications at the dashboard.

-
- Marking comments as read -
- -

Edit and remove comments

-

At the top right of the comment popup you can find options to edit or delete comments.

- -

Dashboard notifications

-
- Comments notifications -
-

At your projects Dashboard you will be able to see if you have unread comments inside the files of the team.

diff --git a/docs/user-guide/inspect/index.njk b/docs/user-guide/dev-tools/index.njk similarity index 58% rename from docs/user-guide/inspect/index.njk rename to docs/user-guide/dev-tools/index.njk index 6aa2951262..f7738b8f0f 100644 --- a/docs/user-guide/inspect/index.njk +++ b/docs/user-guide/dev-tools/index.njk @@ -1,23 +1,24 @@ --- -title: 14· Inspect designs +title: Dev tools +order: 5 desc: Learn how to inspect designs in Penpot! This guide covers distances, properties, code snippets (CSS, SVG, HTML), & exporting assets for seamless collaboration. --- -

Inspect designs

+

Dev tools

At Penpot, you can inspect designs to get measures, view properties, export assets and get production-ready code.

-

How to inspect designs

-

You can activate the Inspect mode both at the View mode and at the Workspace.

+

Inspect design

+

You can activate the Inspect mode both at the View mode and at the Workspace.

-

At the View mode

+

At the View mode

-

Go to the Inspect designs at the View mode section to know how to activate inspect mode at the View mode.

+

Go to the Inspect designs at the View mode section to know how to activate inspect mode at the View mode.

-

At the Workspace

+

At the Workspace