Penpot is an free, self hosted, open source design and prototyping tool for product teams. Penpot offers a browser based platform where teams can collaborate on creating beautiful user interfaces. With features like prototyping, real time collaboration, and developer centric tools, Penpot ensures a easy design process. Penpot offers components, libraries, code inspection and community engagement and other features that make it a great tool for product teams.
Login
On your first visit to the site, you will be presented with the login/signup screen.
When your instance is first created, an account is created for you with the email you chose. You can get the password for this account by going to your Elestio dashboard and clicking on the "Show Password" button.
Enter your email, name and password and click the "Login" button
You might be asked your preferred design or prototype tool. You can choose one of the options or skip this step. This step helps Penpot undestand your background and provide you with a better experience with similar tools and features
Projects
Projects in Penpot are used to organize your work. You can create your projects by clicking on the "Projects" tab on the left side of the screen and then clicking on the "New Project" button. The projects are listed as drafts and can be downloaded as .Penpot files or .svg+.json files. You can also choose to add your project to shared library that can be accessed by other users. Projects are collections for different designs that you can create and share with your team.
Design & Prototype Editor
Design and prototype editor is the main part of the Penpot. You can access the editor by clicking on the project your created in the previous step. The editor is where you can create your designs and prototypes. Penpot provides different shapes, images, drawing options to enable you to customize your design and prototype it as you want.
Libraries
The project files your choose to add as Shared Library will appear in the Libraries tab. You can access the libraries by clicking on the "Libraries" tab on the left side of the screen. Libraries are collections of design elements that can be used across multiple projects. Head over to Penpot website to download templates and other resources that you can use in your projects.
Fonts
You can add custom fonts to your projects by clicking on the "Fonts" tab on the left side of the screen. Add new font by clicking on "Add custom font". Fonts are great way to add personality to your designs. You can also add fonts so that they can be used across multiple projects. Fonts with the same font family name will be grouped as a single font family. You can upload fonts with the following formats: TTF, OTF and WOFF
Teams
Create teams in Penpot by heading over to drop down in the top left corner of the screen and click on "Create new team". This will allow you to invite your teams to Penpot and start sharing libraries and working on projects.
Additional Options
Penpot provides community support, tutorials, different templates and assets to get you started with you designs and prototypes. You can access these resources by clicking on the your user profile on the left side of the screen.
