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