Penpot: an open-source Prototyping and design platform for teams

Penpot is a free, open-source web-based design and prototyping application for teams. It works with open web standards as it uses SVG (Scalable Vector Graphics) format.

Penpot can be installed on a remote server or the local machine with help of Docker and Docker Compose.

With Penpot, you can quickly design a web or mobile prototype in no time.

Penpot in action

If you are a designer, you will feel familiar with Penpot's interface, as it looks similar to other design and prototyping tools.

You can use Penpot as a solo designer to work directly with your customers or, as a part of a team to work on  your prototypes.

Penpot Features

Penpot takes care of collaboration, team management, real-time commenting, shared resources, assets library and more.

Here is a list of Penpot features:

  • Supports unlimited projects
  • Large artboards selection: mobile, web, tablet, social media posters, and custom.
  • Unlimited users with roles and different permissions
  • Eases real-time collaboration between team members
  • Easily switch between prototyping and design views
  • Run prototyping player
  • Layer support
  • Enable scale text
  • Drafts which helps designer publish their work as it finishes
  • Export artboards to PDF
  • Record your color selection
  • Comments tool
  • Comments viewer
  • Supports multiple teams
  • Shared libraries among teams
  • Download the source image with SVG and CSS support.
  • Add your custom fonts to the asset libraries
  • Shared library among designers
  • Assets library
  • Built-in notification
  • System-wide comments
  • Search assets libraries
  • Convert your design elements into components
  • Drafts management
  • SMTP email support
  • Drag-and-drop assets download
  • Download full projects in a combat file
  • Easily drop your downloaded project file into Penpot's page which will download all project files and assets

Install Penpot

I managed to install Penpot on my MacBook Pro M1 using Docker and Docker compose.

mkdir penpot
cd penpot 
wget https://raw.githubusercontent.com/penpot/penpot/main/docker/images/docker-compose.yaml
wget https://raw.githubusercontent.com/penpot/penpot/main/docker/images/config.env


You can configure SMTP, users, demo accounts, and more using config.env file.

Now let's install and run the app:

docker-compose -p penpot -f docker-compose.yaml up -d

If everything is ok, you can start using Penpot at: http://localhost:9001.

Although the configuration was easy, SMTP did not seem to work, I could not activate any of my accounts through email.


Creating the account through the command does not seem to work, as the created accounts still needed email activations, therefore I had to do some low-level approaches.

docker exec -ti penpot_penpot-backend_1 ./manage.sh create-profile
did not work :(

My approach was simple, access the database, and activate the account profile by changing the right values.

First, We have to expose Penpot's PostgreSQL database to the localhost, by editing docker-compose.yaml and configuring ports for the penpot-postgres.


Then, connect to the database with any SQL editor then change the is_active value to true, save and login to your account.

License

Penpot is released under Mozilla Public License v. 2.0 (MPLv2.0).

Resources



    If you own a managed services business, you should make it a priority to build your revenue and grow your business if you want to keep up with the competitive nature of the industry. It shouldn’t matter what the focal point of your business is, whether you specialize in...Read more...


    What is FreeScout?FreeScout is a free, open-source web-based support and ticketing system. It is written in PHP using the Laravel framework. FreeScout features a responsive user interface that works on small mobile screens and tablets. It is an ideal solution for team, technical support, and customer support for small...Read more...


    What are time series?Time series is a series of time-value pairs in a successive, timely order. As an example, a daily/or a monthly closing price over a year. It is commonly used for storing, searching, retrieving, and managing timely data. Time series has 4 components which are: Secular...Read more...


    As every daily internet user, you have resources all around, which include posts, links, comments, passwords, images, and more. Some create a text file or a spreadsheet file to keep track of their data. Well, with Shaark, they do not need to do that. What is Shaark?Shaark is an...Read more...


    Low-code is a software development trending topic, in summary, it is an approach that speeds up the software products cycle with minimal hand-coding as it automates the repeated process and code. Some may argue that Low-code developments platforms aim to help non-professional or citizen developers to build apps quickly; however,...Read more...




Read more