From 033569a65839b8093e098e72abb4f013dd78813b Mon Sep 17 00:00:00 2001
From: Yamila Moreno
- At Kaleidos we believe that the tools that we use to build end products should be as accessible to everyone, regardless of their background, skills or purchasing power. Also, not having a free & open source UX/UI tool that would make devs participate in the design process and bridge the gap between UX/UI and code was a terrible itch for us. + At Kaleidos we believe that the tools that we use to build end products should be accessible to everyone, regardless of their background, skills or purchasing power. Also, not having a free & open source UX/UI tool that would make devs participate in the design process and bridge the gap between UX/UI and code was a terrible itch for us.
diff --git a/user-guide/components/index.njk b/user-guide/components/index.njk index 070515e1..24b4f533 100644 --- a/user-guide/components/index.njk +++ b/user-guide/components/index.njk @@ -4,12 +4,12 @@ title: 10· 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 user files (projects and teams in the future). All copies of a component used in user files are linked. That is, any update made to the Main component is reflected in all component copies (if you accept the update) . You can even create overrides for specific parts of component copies.
+A component is an object or group of objects that can be reused multiple times across files (projects and teams in the future). All copies of a component used in files are linked. That is, any update made to the Main component is reflected in all component copies (if you accept the update) . You can even create overrides for specific parts of component copies.
A component has two parts:
Overrides are differences at the copy components from their main components. With overrides you can keep changes at the component copies while maintaining synchronization with the Main component.
+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.
Component layers with overrides are marked with a “*” at the layers list.
Detach a component copy to unlink it from its Main component will transform it in a group layer. Press Ctrl + Shift + K or right click and select the option “Detach instance” at the component menu.
-You can acknowledge this achievement in bulk by selecting several components and committing the same action.
+You can also detach components in bulk by selecting several components and performing the same action.
To easily show the Main component of a component copy there is the option at the component menu “Show main component” that will open the library where the component belongs.
+To easily locate the Main component of a component copy there is the option at the component menu “Show main component” that will open the library where the Main component belongs.
diff --git a/user-guide/custom-fonts/index.njk b/user-guide/custom-fonts/index.njk index 2c76040c..3631af52 100644 --- a/user-guide/custom-fonts/index.njk +++ b/user-guide/custom-fonts/index.njk @@ -6,7 +6,7 @@ title: 16· Custom fontsIf 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.
To use a font that you have on your local machine, you need to upload it first to the Penpot team where you want to use it.
+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.
@@ -21,7 +21,7 @@ title: 16· Custom fontsFonts 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 at the upload that it has the same font family name.
+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.
- Exported PDF files try to leverage the capabilities of PDF vectorial format (unpixelated zoom, select & copy texts, etc.). But cannot guarantee that 100% of SVG features may be converted perfectly to PDF. You may see differences between an object display inside Penpot and in the exported file. If you need and exact match, a workaround is to export the object into PNG and convert it to PDF with some of the many tools that exist for it.
+ Exported PDF files try to leverage the capabilities of PDF vectorial format (unpixelated zoom, select & copy texts, etc.), but cannot guarantee that 100% of SVG features may be converted perfectly to PDF. You may see differences between an object displayed inside Penpot and in the exported file. If you need an exact match, a workaround is to export the object into PNG and convert it to PDF with some of the many tools that exist for it.
Currently known issue: - When exporting objects with masks, the mask does not work when opening the PDF file with some open source tools (e.g. evince or inkscape). This is not a Penpot fault, but a bug in poppler, a library used by many of the open source tools. If you open the file with an official Adobe viewer, or a tool like okular or in a browser like Chrome or Firefox, you can see it well. + When exporting objects with masks, the mask does not work when opening the PDF file with some open source tools (e.g. evince or inkscape). This is not a Penpot's fault, but a bug in poppler, a library used by many of the open source tools. If you open the file with an official Adobe viewer, or a tool like okular or in a browser like Chrome or Firefox, you can see it well.
Penpot's unique Flex Layout allows you to create flexible designs that can adapt automatically. Resize, fit, and fill content and containers without the need to do it manually.
- to help you learn the fundamentals of Flex Layout here’s a dedicated website where you will find a video tutorial and a playground template. + To help you learn the fundamentals of Flex Layout here’s a dedicated website where you will find a video tutorial and a playground template.
Penpot's proposal tries to get as close as possible to the final output that we will see on the web. Design and development speak the same language in order to embrace web standards and improve communication between roles. +
Penpot's proposal tries to get as close as possible to the final output that we will see on the web. Design and development speak the same language in order to embrace web standards and improve communication between roles. Penpot's Flex Layout is built over Flexbox, a CSS module that provides a more efficient way to lay out, align and distribute space among items in a container. As there are already many comprehensive explations about Flexbox we are not going to write another one. If you are interested we can recommend you to read the one at CSS Tricks.
Image from CSS Tricks @@ -27,7 +27,7 @@ Penpot's Flex Layout is built over Flexbox, a CSS module that provides a more efTo add an object to a Flex Layout you can just drag it at the position of your desire. You can also create or paste elements like in any regular board.
+To add an object to a Flex Layout you can just drag it at the position of your choice. You can also create or paste elements like in any regular board.
To reorder elements you can drag them or use the UP/DOWN keystrokes.
@@ -54,7 +54,7 @@ Penpot's Flex Layout is built over Flexbox, a CSS module that provides a more efSelecting absolute position will exclude the element from the Flex layout flow allowing you to freely position an element in a specific place regardless of the size of the layout where it belongs.
With the new z-index option you can decide the order of overlapping elements while maintaining the layers order.
+With the z-index option you can decide the order of overlapping elements while maintaining the layers order.
@@ -62,17 +62,17 @@ Penpot's Flex Layout is built over Flexbox, a CSS module that provides a more efWhen creating Flex layouts, the spacing is predicted, helping you to maintain your design composition.
-Set paddings, margins and gaps using their respective numeric inputs
+Set paddings, margins and gaps using their respective numeric inputs.
You can also click and drag to resize them while visualizing the value that is being edited:
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.
diff --git a/user-guide/import-export/index.njk b/user-guide/import-export/index.njk index 3c3c7747..1e873366 100644 --- a/user-guide/import-export/index.njk +++ b/user-guide/import-export/index.njk @@ -8,7 +8,7 @@ title: 14· Import/export filesImporting files from other tools and services are among the main priorities of the Penpot team. Related features are coming soon.
Exporting files is useful if you want to share Penpot files with a user that does not belong to one of your teams or you want to have a backup of your files outside penpot.app.
+Exporting files is useful if you want to share Penpot files with a user that does not belong to one of your teams or you want to have a backup of your files outside Penpot, both Saas (https://penpot.app) or your instance.
To export a file select the one of the download options from the file menu at the dashboard and the file will be downloaded to your computer. You can select between two formats, binary and standard. Each format has its advantages and disadvantages, choose what suits your case better.
Penpot file (.penpot): the fast.Select multiple files to export them at the same time. An overlay will show you the progress of the different exports.
Exported files linked to shared libraries provide different ways to export their assets. Choose the one that suits you better!
+Exported files linked to shared libraries provide different ways to export their assets. Choose the one that suits you better.
Choose the one that suits you better for each occasion!
You can also export / download a file from its main menu at the design workspace.
The import option is at the projects menu. Press “Import files” and then select one or more .penpot files to import.
+The import option is at the projects menu. Press “Import files” and then select one or more .penpot files to import. You can import a .zip file as well.
Before actually importing the files to your project, you’ll still have the chance to change their names or get rid of unwanted files.
diff --git a/user-guide/inspect/index.njk b/user-guide/inspect/index.njk index 848ab59a..21998768 100644 --- a/user-guide/inspect/index.njk +++ b/user-guide/inspect/index.njk @@ -13,11 +13,11 @@ title: 13· Inspect designsAt the Workspace, select the Inspect tab at the right sidebar to enter inspect mode.
-Inspect mode provides a safer view-only mode at so developers can work at the Workspace without the fear of breaking things ;)
+Inspect mode provides a safer view-only mode so developers can work at the Workspace without the fear of breaking things ;)
You can easily get measurements and distances between an object and other objects and board edges.
+You can easily get measurements and distances between an object and other objects or board edges.
To get distances:
You can copy property values individually or full sections of them pressing the copy buttons that are shown at the right when hovering. For example you could copy all the layout properties or only the width.
+You can copy the value of one property or full sections of properties pressing the copy buttons that are shown at the right when hovering. For example you could copy all the layout properties or only the width.
You can start using Penpot right in your browser or installing it in a server of your own.
-To use Penpot online point your browser to design.penpot.app and start designing. Use the latest Google Chrome or Mozilla Firefox for the best experience. We also provide specific support to WebKit (Safari / Epiphany).
-You simply go to penpot.app and click on the Signup button. You will be asked to create an account. We only ask for an email. There are some authentication providers available, too.
+You can also go to penpot.app if you want to read more about Penpot and our new releases. There, click on the Signup button. You will be asked to create an account. We only ask for an email. There are some authentication providers available, too.
-Current private Penpot instances are only requiring basic Docker knowledge.
+Currently, private Penpot instances only require basic Docker knowledge.
You can run your own Penpot server following the instructions at the Technical Guide
diff --git a/user-guide/introduction/shortcuts.njk b/user-guide/introduction/shortcuts.njk index d26d5e62..da4f52bd 100644 --- a/user-guide/introduction/shortcuts.njk +++ b/user-guide/introduction/shortcuts.njk @@ -8,7 +8,7 @@ title: ShortcutsHere you can find a list of all keyboard shortcuts that you can use in Penpot. Bear in mind that most of them are at the workspace, where they are more needed.
-You can also check the shortcuts at the GitHub file.
+You can also check the most updated list of shortcuts at the GitHub file.
It is possible to combine shapes in a group in different ways to create more complex objects by using -"boolean" operators. Boolean operators are non destructive and the original shapes remain grouped and available or 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.
+"boolean" operators. Boolean operators are non destructive and the original shapes remain grouped and available or 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.Diversity and inclusion is one major Penpot concern and that's why we love to give support to RTL languages, unlike in most design tools.
+Diversity and inclusion is one 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.
diff --git a/user-guide/libraries/index.njk b/user-guide/libraries/index.njk index 9e250d20..4f113cdc 100644 --- a/user-guide/libraries/index.njk +++ b/user-guide/libraries/index.njk @@ -6,13 +6,13 @@ title: 09· Asset LibrariesAsset 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.
Each file has a File Library that allows assets that belong to it to be stored. You can find File Libraries at the workspace. To access them, click the assets panel icon at the bottom of the left toolbar or press Alt/⌥ + i.
+Each file has a File Library where assets are stored. You can find File Libraries at the workspace. To access them, click the assets panel icon at the bottom of the left toolbar or press Alt/⌥ + i.
In Penpot you can store four type of assets: components, graphics, colors and typographies:
Press Ctrl/⌘ + left click to select multiple assets and be able to perform operations on them simultaneously.
+Press Ctrl/⌘ + left click to select multiple assets and perform operations on them simultaneously.
Penpot allows you to create groups inside libraries. To create a group, use the slash-separated naming convention and the group will be created automatically. e.g. group / subgroup / asset_name
.
Penpot allows you to create groups inside libraries. To create a group, use the slash-separated naming convention when renaming an asset and the group will be created automatically. e.g. group / subgroup / asset_name
.
Another way to create a group is to right click with more than one asset selected and then click “Group” in the contextual menu.
You can also move assets from or to groups by dragging them.
diff --git a/user-guide/prototyping/index.njk b/user-guide/prototyping/index.njk index 3cf99a71..42742e5a 100644 --- a/user-guide/prototyping/index.njk +++ b/user-guide/prototyping/index.njk @@ -3,9 +3,9 @@ title: 11· Prototyping ---Penpot allows you to prototype interactions by connecting boards (which can act as screens). Learn how to build interactive prototypes to visualize how users navigate through your screens and mimic your product behaviour.
+
Penpot allows you to prototype interactions by connecting boards, which can act as screens. Learn how to build interactive prototypes to visualize how users navigate through your screens and mimic your product behaviour.
-
Once the prototype is prepared with interactions and/or flows it can be used at the View mode and shared through a shareable link.
+
Once the prototype is prepared with interactions and/or flows, it can be used at the View mode and shared through a link.
The classic, most usual of the prototyping actions. It takes the user to one board to the one that is being set in the interaction.
+The classic, most usual of the prototyping actions. It takes the user from one board to the destination set in the interaction.
It opens a board right over the current board. This action is typically used to display tooltips, modal windows or notifications.
@@ -159,4 +159,3 @@ title: 11· PrototypingSelect an element and check the option "Fix when scrolling" that you can find inside the Constraints section at the Design sidebar (right side).
Launch the View Mode to see the elements with a fixed scroll position.
-We are aware that this capability is still difficult to use whithout being able to restrict the screen size at the View Mode, something that we are already working on.
diff --git a/user-guide/styling/index.njk b/user-guide/styling/index.njk index 390df705..908d1e8f 100644 --- a/user-guide/styling/index.njk +++ b/user-guide/styling/index.njk @@ -7,7 +7,7 @@ title: 06· StylingColor fills can be added to boards, shapes, texts and groups of layers. A fill can be a custom color (in Hex) or a color style from a library.
-To apply a fill you can use the color picker, the color palette or a color styles.
+To apply a fill you can use the color picker, the color palette or a color style.
You can also set the opacity for custom fill colors.
TIP: Select an element and press numbers from 0 to 9 to set their fill opacity. 1 to get 10%, 2 to get 20% and so on. You can set precise opacity by pressing two numbers consecutively in less than a second (for example 5 and 4 to set 54% opacity).
@@ -26,13 +26,13 @@ title: 06· StylingThe color palette allows you to have a selected color library in plain sight. Use the menu to easily switch between libraries.
+The color palette allows you to have a selected color library in plain sight.
There are three ways to show/hide the color palette:
The stroke caps options are:
A team allows you to collaborate with other penpot users. Team members are allowed to work with any project or file within the team depending on their permissions. Members with admin permissions can also invite other members. Create or join as many teams as you need with different groups of people.
+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 depending on their permissions. Members with admin permissions can also invite other members. Create or join as many teams as you need with different groups of people.
At Penpot you can create as many teams as you need and be invited to teams owned by others. Learn how to manage them.
@@ -15,7 +15,7 @@ title: 15· TeamsTo create a new team go to the bottom of the team selector and press "+ Create new team". Then you will be asked to enter a team name and that's it. A new team is created where you will be able to invite new team members.
+To create a new team go to the bottom of the team selector and press "+ Create new team". Then you will be asked to enter a team name and that's it. A new team is created and you will be able to invite new team members.
More team roles will be eventually available, as fine grained permissions management to control members accesses and actions.
+More team roles will be eventually available, as well as fine grained permissions management to control members access and actions.
An owner can transfer their ownership to another team member anytime and has to transfer it before leaving the team.
+An owner can transfer their ownership to another team member anytime and is requested to transfer it before leaving the team.
You can perform the following actions over existing invitations:
Launch the view mode to present and share your designs or play with the interactions set at the workspace. You also have an Inspect mode where you can get objects specifications and code snippets. More about the View mode
+Launch the view mode to present and share your designs or play with the interactions set at the workspace. You also have an Inspect mode where you can get objects specifications and code snippets. More about the View mode.
@@ -122,17 +122,17 @@ title: 02· The interface
You can activate comments at the View mode by pressing the comments icon at the top navbar.
-At the View mode only boards are shown so the comments that are placed outside boards will not show here.
+At the View mode only boards are shown so the comments that are placed outside boards will not be shown here.
@@ -43,7 +43,7 @@ title: 12· View modeTip: Add your desired "Interactions" setting (show / don't show / show on click) before creating the Share prototype link. This way the link will keep your selection.
+Tip: Add your preferred "Interactions" setting (show / don't show / show on click) before creating the Share prototype link. This way the link will keep your selection.
Manage permissions:
diff --git a/user-guide/workspace-basics/index.njk b/user-guide/workspace-basics/index.njk index 70a4673b..30e58642 100644 --- a/user-guide/workspace-basics/index.njk +++ b/user-guide/workspace-basics/index.njk @@ -3,7 +3,7 @@ title: 03· Workspace basics ---The Workspace is where you create designs. You have an infinite canvas in where you can directly work but you also have the ability to create pages and boards that will help you to create exportable components.
+The Workspace is where you create designs. You have an infinite canvas where you can directly work but you also have the ability to create pages and boards that will help you to create exportable components.
Surrounded by panels, header and toolbars, in the middle of the workspace, you can find the viewport. The viewport is the design area of a file page. It is practically infinite. If what you need is a frame with specific, limited dimensions, you can create a board.
@@ -43,14 +43,10 @@ title: 03· Workspace basicsPenpot has rulers that measure in pixels. Soon there will be guides that can be dragged from the rulers.
+Penpot has rulers that measure in pixels.
- - - -Grids are design aids that are used to help you to align content to a geometric structure. In Penpot there are three types of grids: @@ -120,15 +116,15 @@ geometric structure. In Penpot there are three types of grids:
Objects automatically snap to the pixel grid. If you need a different kind of precision like working at subpixel level using measures with decimals you can disable this option . This option can be disabled anytime from the main menu.
+Objects automatically snap to the pixel grid. If you need a different kind of precision like working at subpixel level using measures with decimals you can disable this option anytime from the main menu.
Set your desired distance to move objects using the keyboard. This is a must if you’re working with grids (if you’re not, you should ;)), being able to adjust the movement to your baseline grid (8px? 5px?) is a huge timesaver that will improve your quality of life while designing.
+Set your chosen distance to move objects using the keyboard. This is a must if you’re working with grids (if you’re not, you should ;)). Being able to adjust the movement to your baseline grid (8px? 5px?) is a huge timesaver that will improve your quality of life while designing.
Shortcuts boost your productivity but are not easy to find and learn. A handy panel at your workspace will help you with that.
+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 by clicking on the shortcuts button at the bottom of the left toolbar or using the shortcut ?
Categories and a filter will help you to find the shortcut you need.
@@ -144,19 +140,19 @@ geometric structure. In Penpot there are three types of grids:To navigate through the history press Ctrl/⌘ + Z to go backwards and Ctrl/⌘ + Shift/⇧ + Z to go forward.
-You can also press any item of the history list to got to this specific state.
+You can also press any item of the history list to get to this specific state.
Comments allows the team to have one priceless conversation getting and providing feedback right over the designs and prototypes.
+
Comments allow the team to have one priceless conversation getting and providing feedback right over the designs and prototypes.