Penpot Tips

Penpot is a free web-based tool for designers and programmers ("Teams") to collaborate and prototype user interfaces, responsive web sites, interactive documents, basic virtual tours, and other projects.

Using Penpot, it is easy for everyone to draw and arrange Objects visually, then get actual HTML, CSS and SVG code. The native file format is ".penpot" which is an archive of JSON files and images, mostly.

There are three main modes: "DESIGN", "PROTOTYPE "and "INSPECT". Anybody familiar with drawing software such as Inkscape, Adobe Illustrator, or CorelDRAW will be able to get started drawing in Penpot, too.

Penpot is free and open-source. It is written in Clojure and ClojureScript, and source code can be downloaded from GitHub. There are also self-hosted free versions available.

Links to related PPM Wiki pages:

SVG File Format Tips

JSON File Format Tips

File Format Tips

 

Tips

☐ Place or move objects visually, or by entering dimensions directly in a panel

☐ Use math to change dimensions: for example, type *2 over a selected dimension to double it. (Typing /.5 will also double the dimension!)

☐ Boolean operations are non-destructive (they create groups)

☐ Give your Boards, Layers, Groups, and Objects useful names. (This is also important in other programs such as Adobe Illustrator.)

☐ Context menus are used extensively in Penpot (right click, or two-finger press on a trackpad)

☐ Keystroke shortcuts are complete, well thought out, and searchable

☐ Keystroke shortcuts are not editable, however, unless the source code is edited and then Penpot is self-hosted

☐ Comments and Notifications can used for collaboration among Team members

File Formats Supported

Open

.penpot native files, (of course)

Import (including Drag & Drop)

.png, .jpg, .WebP, but not .pdf

not .md, .rtf, or .txt (paste text into a text block)

Download

.penpot

Copy

CSS, HTML and SVG formats.

EXPORT

PNG, JPG, SVG and PDF formats.

Training

DESIGN Mode

Tools

☐ Creation tools Rectangle, Ellipse, Text, Image, Curve, and Path (Bezier curves) are available on an infinite Canvas.

☐ HISTORY and ACTIONS are available to revert changes.

☐ Use of LOCAL LIBRARIES, including ASSETS such as COMPONENTS and COLORS encourage design consistency.

☐ Layers, Groups, Masks, and all the usual suspects, are available, too.

Grids

☐ Grids, Guides and Snapping options are very advanced.

Plugins

☐ Plugins, such as Shapes or image editors, or QR Code generators, are available for installation, free of charge.

PROTOTYPE Mode

☐ Add interactivity to Boards or Objects (such as buttons).

☐ Create Animations such as Dissolve, Slide, or Push without programming (no JavaScript, for example).

☐ Transitions are not yet as comprehensive as typical presentation software.

INSPECT Mode

☐ Inspect parts of your project without fear of changing anything.

View Mode

☐ Test and demo both the layout and interactions.

External Training

Pikes Peak Makerspace (PPM) does not currently offer any training classes on Penpot.

To ask questions or potentially meet other users, use our Slack channel #computing.

Penpot is active on the usual social media sites, however their YouTube videos are not particularly current, and Penpot is not represented at all on Wikipedia, for some reason.

Links to penpot.app without any accounts or login required:

Features

Learning Center

Alternatives to Penpot:

Figma — popular tool for designers, product managers, writers and developers or anyone involved in the (website) design process

Miro — collaboration platform, a digital white board

Hand-Curated Links

Links to external pages:

Clojure — functional programming language, "fun to use"

ClojureScript — powerful language for programming the web

Additional Help

Links to related PPM Wiki pages:

GitHub Tips

Visual Studio Code Tips

Inkscape Tips

Adobe Illustrator Tips

CorelDRAW Tips

Use the PPM Slack channel #computing

List of all PPM Slack channels

Note that we have a Slack channel (#job-board) for members to post, discuss, or accept job opportunities either within PPM or from the community.

Search the PPM Wiki — include Content pages as well as Multimedia.

Contact Us if you cannot find your answer here on our Wiki or if you notice any information that is outdated.