mirror of
https://github.com/penpot/penpot.git
synced 2025-05-29 12:36:14 +02:00
📚 Improve metadata descriptions (#6457)
This commit is contained in:
Ramiro Andres Sanchez Balo
GitHub
parent
86bcd1b681
commit
5fc2208c16
61 changed files with 77 additions and 19 deletions
|
|
@ -3,7 +3,6 @@
|
|||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="{{ description or metadata.description }}">
|
||||
<link rel="stylesheet" href="{{ '/css/index.css' | url }}">
|
||||
<link rel="stylesheet" href="{{ '/css/prism.css' | url }}">
|
||||
<link rel="shortcut icon" href="/img/favicon.png">
|
||||
|
|
@ -15,7 +14,7 @@
|
|||
<link href="https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
|
||||
{% metagen
|
||||
title=title or metadata.title,
|
||||
desc=desc or metadata.desc,
|
||||
desc=desc or metadata.desc or description or metadata.description,
|
||||
url="https://help.penpot.app" + page.url,
|
||||
img="https://help.penpot.app/img/th-help-center.jpg",
|
||||
img_alt=alt,
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
---
|
||||
title: 04· Code of Conduct
|
||||
desc: Learn about contributing to the Penpot project! This page outlines the Code of Conduct, reporting bugs, translations, core code contributions, & more.
|
||||
---
|
||||
|
||||
<h1 id="coc">Code of conduct</h1>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
---
|
||||
title: 03· Core code contributions
|
||||
desc: Learn how to contribute to Penpot's open-source design collaboration platform. Find guidelines for bug reporting, code contributions & more.
|
||||
---
|
||||
|
||||
<h1 id="code-contributions">Core code contributions</h1>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
---
|
||||
title: Contributing
|
||||
desc: Learn how to contribute to Penpot, the open-source design collaboration platform! Find guides on bug reporting, translations, code contributions, and more.
|
||||
eleventyNavigation:
|
||||
key: Contributing
|
||||
order: 3
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
---
|
||||
title: 05· Libraries & Templates
|
||||
desc: Contribute to Penpot's libraries & templates! Learn how to share your files and access resources. Try Penpot - It's free!
|
||||
---
|
||||
|
||||
<h1 id="libraries">Libraries & templates</h1>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
---
|
||||
title: 01· Reporting bugs
|
||||
desc: Learn how to contribute to Penpot, the open-source design and prototyping platform! Find guidelines for reporting bugs, translations, & code contributions.
|
||||
---
|
||||
|
||||
<h1 id="reporting-bugs">Reporting bugs</h1>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
---
|
||||
title: 02· Translations
|
||||
desc: Contribute to Penpot! Learn how to translate Penpot into your language using Weblate. Add new translations, languages, or edit existing ones today.
|
||||
---
|
||||
|
||||
<h1 id="translations">Translations</h1>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
---
|
||||
title: Help center
|
||||
desc: Find user guides, technical documentation, plugin info, FAQs, and contributing guidelines in Penpot's help center. Join the open-source community!
|
||||
layout: layouts/home.njk
|
||||
twitter: "@penpotapp"
|
||||
image: img/placeholder.png
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
---
|
||||
layout: layouts/plugins.njk
|
||||
title: 4. API
|
||||
desc: Create, deploy, and use the Penpot plugin API with our comprehensive documentation. Get started today and expand Penpot's capabilities.
|
||||
---
|
||||
|
||||
# Penpot plugins API
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
---
|
||||
layout: layouts/plugins-no-sidebar.njk
|
||||
title: Beta changelog
|
||||
desc: See the Penpot plugin API changelog for version 1.0! Find breaking changes, deprecations, new features, and updated documentation. Try Penpot for free.
|
||||
---
|
||||
|
||||
# Beta changelog
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
---
|
||||
layout: layouts/plugins.njk
|
||||
title: 2. Create a Plugin
|
||||
desc: Dive into Penpot plugin development! This guide covers creating plugins from scratch or using templates, libraries, API communication, & deployment.
|
||||
---
|
||||
|
||||
# Create a Plugin
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
---
|
||||
layout: layouts/plugins.njk
|
||||
title: 3. Deployment
|
||||
desc: Deploy your free Penpot plugins! Learn about Netlify, Cloudflare, Surge & Penpot submission in this guide. Build and share your creations.
|
||||
---
|
||||
|
||||
# Deployment
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
---
|
||||
layout: layouts/plugins.njk
|
||||
title: 5. Examples and templates
|
||||
desc: Learn to create shapes, text, layouts, components, themes, and interactive prototypes. Start building now! See Penpot plugins with examples & templates!
|
||||
---
|
||||
|
||||
# Examples and templates
|
||||
|
|
@ -117,7 +118,6 @@ Just a friendly reminder that it's important to have the <b>comment permissions<
|
|||
|
||||
<a target="_blank" href="https://github.com/penpot/penpot-plugins-samples/tree/main/create-comments">Comments example</a>
|
||||
|
||||
|
||||
## 5.2. Templates
|
||||
|
||||
As we mentioned in the <a target="_blank" href="/plugins/create-a-plugin/">Create a plugin</a> section, we've got two great options for you to get started with your plugin.
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
---
|
||||
layout: layouts/plugins.njk
|
||||
title: 6. FAQ
|
||||
desc: Find answers to common questions about plugin development, from choosing the right Node version to creating components. See Penpot plugins!
|
||||
---
|
||||
|
||||
# FAQ
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
---
|
||||
layout: layouts/plugins.njk
|
||||
title: 1. Getting started
|
||||
desc: Dive into Penpot plugins! Extend Penpot's functionality by automating tasks and adding new features using JavaScript, HTML, & CSS. Get started now!
|
||||
---
|
||||
|
||||
# Getting started
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
---
|
||||
layout: layouts/plugins-home.njk
|
||||
title: Plugins
|
||||
desc: "Get started with Penpot Plugins: Installation, development, and deployment. Access API documentation, examples, templates, and FAQs."
|
||||
eleventyNavigation:
|
||||
key: Plugins
|
||||
order: 5
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
---
|
||||
title: 2. Penpot Configuration
|
||||
desc: Learn about self-hosting, configuration via environment variables, and authentication providers. Try Penpot - It's free! See Penpot's technical guide.
|
||||
---
|
||||
|
||||
# Penpot Configuration
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
---
|
||||
title: Backend app
|
||||
desc: Dive into self-hosting, configuration, developer insights (architecture, data model), integration, and troubleshooting. See Penpot's Technical Guide.
|
||||
---
|
||||
|
||||
# Backend app
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
---
|
||||
title: Common code
|
||||
desc: Learn about architecture, data models, and development environments. See Penpot's technical guide for developers. Dive into common code.
|
||||
---
|
||||
|
||||
# Common code
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
---
|
||||
title: Exporter app
|
||||
desc: Learn about self-hosting, configuration, architecture (backend, frontend), data model, and development environment. See Penpot's technical guide.
|
||||
---
|
||||
|
||||
# Exporter app
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
---
|
||||
title: Frontend app
|
||||
desc: Dive into the UI, data namespaces, ClojureScript, React, and worker app functionalities. View Penpot's frontend app architecture. Free to try!
|
||||
---
|
||||
|
||||
### Frontend app
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
---
|
||||
title: 3.1. Architecture
|
||||
desc: Dive into architecture, backend, frontend, data models, and development environments. Contribute and self-host for free! See Penpot's technical guide.
|
||||
---
|
||||
|
||||
# Architecture
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
---
|
||||
title: 3.4. Common Guide
|
||||
desc: "View Penpot's technical guide: self-hosting, configuration, developer insights, architecture, data model, integration, and troubleshooting."
|
||||
---
|
||||
|
||||
# Common guide
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
---
|
||||
title: 3.7. Data Guide
|
||||
desc: Learn about data structures, code organization, file operations, migrations, shape editing, and component syncing. See Penpot's technical guide. Try it free!
|
||||
---
|
||||
|
||||
# Data Guide
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
---
|
||||
title: 3.2. Data model
|
||||
desc: Learn about self-hosting, configuration, developer tools, data models, architecture, and integrations. View Penpot's technical guide. Free to use!
|
||||
---
|
||||
|
||||
# Penpot Data Model
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
---
|
||||
title: 3.3. Dev environment
|
||||
desc: Dive into Penpot's development environment. Learn about self-hosting, configuration, developer tools, architecture, and more. See the Penpot Technical Guide!
|
||||
---
|
||||
|
||||
# Development environment
|
||||
|
|
@ -95,7 +96,7 @@ npx shadow-cljs cljs-repl main
|
|||
### Storybook
|
||||
|
||||
The storybook local server is started on tmux **window 2** and will listen
|
||||
for changes in the styles, components or stories defined in the folders
|
||||
for changes in the styles, components or stories defined in the folders
|
||||
under the design system namespace: `app.main.ui.ds`.
|
||||
|
||||
You can open the broser on http://localhost:6006/ to see it.
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
---
|
||||
title: 3.5. Frontend Guide
|
||||
desc: "See Penpot's technical guide: self-hosting, configuration, developer insights (architecture, data model), frontend, backend, and integrations & more!"
|
||||
---
|
||||
|
||||
# Frontend Guide
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
---
|
||||
title: 3. Developer Guide
|
||||
desc: Dive into architecture, data models, and more. Start building today! See Penpot's technical guide for self-hosting, configuration, and developer insights.
|
||||
---
|
||||
|
||||
# Developer Guide
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
---
|
||||
title: Assets storage
|
||||
desc: Learn about assets storage, API, object buckets, sharing, and garbage collection. See Penpot's technical guide for developers. Try Penpot - It's free.
|
||||
---
|
||||
|
||||
# Assets storage
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
---
|
||||
title: Authentication
|
||||
desc: Dive into Penpot today! Learn about self-hosting, configuration, developer insights, authentication, and more. View Penpot's technical guide. Try it free.
|
||||
---
|
||||
|
||||
# User authentication
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
---
|
||||
title: 3.8. Penpot subsystems
|
||||
desc: Learn about architecture, data models, and subsystems. View Penpot's technical guide for self-hosting, configuration, and development insights. Free!
|
||||
---
|
||||
|
||||
# Penpot subsystems
|
||||
|
|
@ -12,4 +13,3 @@ implemented, over the whole app (backend, frontend or exporter), and points to
|
|||
the most relevant source files to look at to start exploring it. When some
|
||||
special considerations are needed (performance questions, limits, common
|
||||
"gotchas", historic reasons of some decisions, etc.) they are also noted.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
---
|
||||
title: 3.9. UI Guide
|
||||
desc: Learn UI development with React & Rumext, design system implementation, and performance considerations. See Penpot's technical guide. Free to use!
|
||||
---
|
||||
|
||||
# UI Guide
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
---
|
||||
title: 1.3 Install with Docker
|
||||
desc: This Penpot technical guide covers self-hosting, Docker installation, configuration, updates, backups, and proxy setup with NGINX and Caddy. Try Penpot!
|
||||
---
|
||||
|
||||
<p class="advice">
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
---
|
||||
title: 1. Self-hosting Guide
|
||||
desc: Customize your Penpot instance today. Learn how to install with Elestio, Docker, or Kubernetes from the technical guide for self-hosting options.
|
||||
---
|
||||
|
||||
# Self-hosting Guide
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
---
|
||||
title: 1.4 Install with Kubernetes
|
||||
desc: Learn how to install and configure Penpot on your Kubernetes cluster using Helm. Our technical guide provides step-by-step instructions for setup.
|
||||
---
|
||||
|
||||
# Install with Kubernetes
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
---
|
||||
title: 1.1 Recommended storage
|
||||
desc: Learn recommended self-hosting settings, Docker & Kubernetes installs, configuration, and troubleshooting tips in Penpot's technical guide.
|
||||
---
|
||||
|
||||
# Recommended storage
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
---
|
||||
title: 1.5 Unofficial self-host options
|
||||
desc: Find guides for Docker, Kubernetes, and more in Penpot's Technical Guide for self-hosting options! Discover unofficial self-host options too.
|
||||
---
|
||||
|
||||
# Unofficial self-host options
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
---
|
||||
title: Technical Guide
|
||||
desc: Get self-hosting instructions, integration details, and developer resources. Troubleshoot issues easily. Try Penpot free! See Penpot's technical guide.
|
||||
eleventyNavigation:
|
||||
key: Technical Guide
|
||||
order: 4
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
---
|
||||
title: 4. Integration Guide
|
||||
desc: Connect Penpot with other apps using webhooks and access tokens! Learn from Penpot's integration guide for seamless workflows. Try Penpot - It's free.
|
||||
---
|
||||
|
||||
# Integration Guide
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
---
|
||||
title: 5. Troubleshooting Penpot
|
||||
desc: Troubleshoot Penpot like a pro! Our technical guide offers tips and tricks for diagnosing issues, reading logs, and resolving problems. Get started now!
|
||||
---
|
||||
|
||||
# Troubleshooting Penpot
|
||||
|
|
|
|||
|
|
@ -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