Penpot: An Open‑Source Design Tool for Seamless Design‑Code Collaboration

Core Features

Design‑Code Collaboration : Penpot represents designs as code, allowing designers to create visuals and developers to reuse the generated code without hand‑off.

Design System :

Design Tokens – unified language between design and development.

Components – reusable component system.

Variants – management of component variations.

Version 2.0 Update :

CSS Grid Layout – new layout system.

New UI – refreshed user interface.

Complete Component System – expanded component capabilities.

Main Features

Plugin System : Extend Penpot via the Penpot Hub to integrate with other applications.

Inspect Mode : Real‑time access to SVG, CSS, and HTML code for each element.

Self‑Hosted Deployment : Deploy a private Penpot server for full control and privacy.

Open Standards : Built on SVG, CSS, HTML, and JSON, avoiding vendor lock‑in.

API and Webhook : Provide API endpoints and webhooks for integration into development workflows.

Quick Start

Online Use : Access https://penpot.app in a browser without installation.

Self‑Hosting :

docker pull penpotapp/penpot  # or use docker‑compose to deploy

Developer Mode : Open a design file, click the Inspect panel, and view the CSS, SVG, and HTML code for each element.

Applicable Scenarios

UI/UX design

Design system construction

Design‑and‑development collaboration

Team design asset management

Prototype design

GitHub: https://github.com/penpot/penpot<br/>Stars: 46,975<br/>Language: Clojure<br/>License: MPL‑2.0