📚 Improve metadata descriptions (#6457)

This commit is contained in:
Ramiro Andres Sanchez Balo 2025-05-13 08:09:59 +02:00 committed by GitHub
parent 86bcd1b681
commit 5fc2208c16
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
61 changed files with 77 additions and 19 deletions

View file

@ -1,10 +1,11 @@
---
title: 11· Components
desc: Streamline your design workflow with Penpot's Components guide! Learn to create, duplicate, group, and manage reusable components.
---
<h1 id="components">Components</h1>
<p class="main-paragraph">Speed your workflow with the reusable power of components.</p>
<p>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.</p>
<p>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.</p>
<p>A component has two parts:</p>
<ul>
@ -62,7 +63,7 @@ title: 11· Components
<h2 id="component-group">Group components</h2>
<h3>Create component groups</h3>
<p>At the Components section from the Assets library, there are two ways to create groups in a components library.</p>
<p>At the Components section from the Assets library, there are two ways to create groups in a components library.</p>
<ol>
<li><strong>Using slashes (/):</strong> Select one component and rename it as follows: "FOLDER NAME/COMPONENT NAME". For example, "Buttons/Alert Button".</li>
<li><strong>Using the "Group" option:</strong> Select one or more components at the Assets library, right click to show the menu and then select "Group".</li>

View file

@ -1,5 +1,6 @@
---
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.
---
<h1 id="customfonts">Custom fonts</h1>
@ -13,9 +14,9 @@ title: 17· Custom fonts
<h3>To upload a local font:</h3>
<ol>
<li>Press “Add custom font”.</li>
<li>Inspect your local files to select one or more fonts that you want to upload. <strong>You can upload fonts with
<li>Inspect your local files to select one or more fonts that you want to upload. <strong>You can upload fonts with
the following formats: TTF, OTF and WOFF</strong>. Only one format will be needed.</li>
<li>Change the font name if needed. The font name is the name that will be shown in the font list at the workspace.
<li>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.</li>
<li>Once ready, press upload. That's it. The font will be available at the font list of this teams files.</li>
</ol>

View file

@ -1,5 +1,6 @@
---
title: 07· Exporting objects
desc: Learn how to export objects in Penpot, the free, open-source design collaboration tool. This guide covers export presets, file formats, and more!
---
<h1 id="export">Exporting objects</h1>

View file

@ -1,5 +1,6 @@
---
title: 08· Flexible Layouts
desc: Master responsive web design with Penpot's flexible and grid layouts! Learn Flexbox and CSS Grid standards. Explore tutorials, properties, and more.
---
<h1 id="layouts">Flexible Layouts</h1>

View file

@ -1,5 +1,6 @@
---
title: 15· Import/export files
desc: Learn how to import and export files in Penpot, the free, open-source design tool. Discover file formats, backups, sharing, and library management.
---
<h1 id="import-export">Import and export files</h1>

View file

@ -1,5 +1,6 @@
---
title: User guide
desc: Learn everything from interface basics to advanced features like prototyping and design sharing with Penpot's comprehensive user guide! Free access.
eleventyNavigation:
key: User guide
order: 2

View file

@ -1,5 +1,6 @@
---
title: 14· Inspect designs
desc: Learn how to inspect designs in Penpot! This guide covers distances, properties, code snippets (CSS, SVG, HTML), & exporting assets for seamless collaboration.
---
<h1 id="inspect">Inspect designs</h1>

View file

@ -1,5 +1,6 @@
---
title: 01· Introduction
desc: Begin with the Penpot user guide! Get quickstarts, shortcuts, and tutorials. Learn the interface, layers, objects, styling, and more.
---
<h1 id="section-1">Introduction</h1>

View file

@ -1,5 +1,6 @@
---
title: Tutorials & info
desc: Begin with Penpot's comprehensive user guide! Get tutorials, learn interface basics, and master design features. Discover FAQs and more.
---
<h1 id="section-1-1">Tutorials & info</h1>

View file

@ -1,5 +1,6 @@
---
title: Quickstart
desc: Start instantly with Penpot, the open-source design and prototyping platform! Access our free user guide to learn now.
---
<h1 id="section-1-1">Quickstart</h1>

View file

@ -1,5 +1,6 @@
---
title: Shortcuts
desc: Get quickstart tips, shortcuts, and tutorials for Penpot! Learn interface basics and more with this free, open-source design tool.
---
<h1 id="section-1-1">Shortcuts</h1>

View file

@ -1,5 +1,6 @@
---
title: 04· Layer basics
desc: Master layer basics with Penpot's user guide! Learn to create, manipulate, and organize layers for stunning designs. Try Penpot, it's free!
---
<h1 id="layer-basics">Layer basics</h1>

View file

@ -1,5 +1,6 @@
---
title: 09· Asset Libraries
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!
---
<h1 id="asset-libraries">Asset Libraries</h1>
@ -112,7 +113,7 @@ title: 09· Asset Libraries
</figure>
<h4>Group assets</h4>
<p>There are two ways to create groups in a library.</p>
<p>There are two ways to create groups in a library.</p>
<ol>
<li><strong>With slashes (/):</strong> Select an asset and rename it as follows: "FOLDER NAME/ASSET NAME". For example, "Buttons/Alert Button".</li>
<li><strong>With the "Group" option:</strong> Select one or more assets at the library, then right click to show the menu and then select "Group".</li>
@ -138,7 +139,7 @@ title: 09· Asset Libraries
<h2 id="libraries">Libraries</h2>
<h3 id="file-libraries">File libraries</h3>
<p>Each file has its own file library which is where the assets that belong to this file are stored.</p>
<p>Each file has its own file library which is where the assets that belong to this file are stored.</p>
<p>You have two ways to access the file library from the file <a href="/user-guide/the-interface/#interface-workspace">workspace</a>:</p>
<ul>
<li>Click the assets tab icon at the left sidebar.</li>

View file

@ -1,5 +1,6 @@
---
title: 05· Objects
desc: "Work with Penpot's objects: boards, shapes, text, paths, and graphics. Learn to create, select, rename, and customize boards for optimal workflow."
---
<h1 id="objects">Objects</h1>
@ -7,7 +8,7 @@ title: 05· Objects
available in Penpot, and how to get the most of them.</p>
<h2 id="Boards">Boards</h2>
<p>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
<p>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 <a href="/user-guide/view-mode">View mode</a>, 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.</p>
<h3>Create boards</h3>
@ -80,7 +81,7 @@ are shown by default at the <a href="/user-guide/view-mode">View mode</a>, actin
</figure>
<h3>Show in View mode</h3>
<p>Boards offer the option to be shown as a separate board/screen in the <a href="/user-guide/the-interface/#interface-viewmode">View mode</a>. Use this setting to decide what boards should be shown as individual items in your presentations.</p>
<p>Boards offer the option to be shown as a separate board/screen in the <a href="/user-guide/the-interface/#interface-viewmode">View mode</a>. Use this setting to decide what boards should be shown as individual items in your presentations.</p>
<p><strong>Defaults</strong></p>
<p>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.</p>
<ul>

View file

@ -1,5 +1,6 @@
---
title: 18· Plugins
desc: Extend Penpot's functionality with plugins! Install from PenpotHub or via URL. Learn to install, use, and create your own plugins.
---
<h1 id="penpot-plugins">Penpot Plugins</h1>

View file

@ -1,5 +1,6 @@
---
title: 12· Prototyping
desc: This Penpot user guide explains how to prototype interactions, connect boards, use triggers/actions, and animations. Learn to build flows and more!
---
<h1 id="prototype">Prototyping interactions</h1>

View file

@ -1,13 +1,14 @@
---
title: 06· Styling
desc: Style your designs with Penpot's options! Learn about color fills, gradients, strokes, shadows, blur, opacity, blend modes, and property copying.
---
<h1 id="styling">Styling</h1>
<p class="main-paragraph">Penpot has a variety of styling options for each object. When selected, the styling options are displayed in the design panel on the right.</p>
<h2 id="fill">Color fills</h2>
<p>Color fills can be added to boards, shapes, texts and groups of layers.</p>
<p>You can add as fills:</p>
<p>Color fills can be added to boards, shapes, texts and groups of layers.</p>
<p>You can add as fills:</p>
<ul>
<li>Custom colors (hex).</li>
<li>Color <a href="/user-guide/libraries/#asset-types">assets</a>.</li>
@ -169,7 +170,7 @@ title: 06· Styling
</figure>
<h2 id="blend">Opacity and blend</h2>
<p>Set the overal opacity for layers and their blend mode.</p>
<p>Set the overal opacity for layers and their blend mode.</p>
<p>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.</p>
<figure>
<img alt="Layer blend and opacity" src="/img/styling/blend-opacity.webp"/>
@ -195,7 +196,7 @@ title: 06· Styling
</ul>
<h2 id="copy-paste-properties">Copy/Paste properties</h2>
<p>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.</p>
<p>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.</p>
<figure>
<video title="Apply blur to a layer" muted="" playsinline="" controls="" width="100%" poster="/img/styling/copy-properties.webp" height="auto">

View file

@ -1,11 +1,12 @@
---
title: 16· Teams
desc: Manage teams and roles with Penpot's collaboration features! Learn how to manage teams, roles (Viewer, Editor, Admin, Owner), send invites and use webhooks.
---
<h1 id="teams">Teams</h1>
<p class="main-paragraph">A team is a group of members who collaborate on a collection of projects.
<p class="main-paragraph">A team is a group of members who collaborate on a collection of projects.
Team members are allowed to work with any project or file within the team. The actions that each team
member is allowed to do depends on their permissions.</p>
member is allowed to do depends on their permissions.</p>
<p class="main-paragraph">At Penpot you can create and join as many teams as you need and add all necessary stakeholders with no team size limits.</p>
<h2 id="teams-management">Manage teams</h2>

View file

@ -1,5 +1,6 @@
---
title: 02· The interface
desc: Discover Penpot's free user guide! Learn the interface, workspace basics, flexible layouts, and prototyping. Master Penpot today.
---
<h1 id="the-interface">The interface</h1>

View file

@ -1,5 +1,6 @@
---
title: 13· View mode
desc: Present designs and share prototypes with Penpot's View mode! Play interactions, navigate boards, zoom, and toggle fullscreen. Try it for free!
---
<h1 id="viewmode">View mode</h1>

View file

@ -1,5 +1,6 @@
---
title: 03· Workspace basics
desc: Master Penpot's workspace basics! Learn interface navigation, zoom tools, dynamic alignment, rulers, guides, and shortcuts.
---
<h1 id="workspace-basics">Workspace basics</h1>