mirror of
https://github.com/penpot/penpot.git
synced 2025-05-31 08:06:11 +02:00
📚 Improve metadata descriptions (#6457)
This commit is contained in:
parent
86bcd1b681
commit
5fc2208c16
61 changed files with 77 additions and 19 deletions
|
@ -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>
|
||||
|
|
|
@ -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 team’s files.</li>
|
||||
</ol>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue