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.

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

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

• https://github.com/penpot/penpot
• https://penpot.app/
• https://help.penpot.app/technical-guide/getting-started/