Penpot - Open Source Design Platform dla UI/UX

Czym jest Penpot?

Penpot to pierwsza na świecie w pełni open-source platforma do projektowania UI/UX, stworzona jako darmowa alternatywa dla Figmy. Uruchomiona w 2021 roku przez hiszpańską firmę Kaleidos, Penpot oferuje profesjonalne narzędzia do projektowania interfejsów użytkownika, które działają całkowicie w przeglądarce bez konieczności instalacji jakiegokolwiek oprogramowania.

To co wyróżnia Penpot na tle konkurencji to podejście "open standards first". Platforma używa natywnego formatu SVG do przechowywania projektów, co oznacza że Twoje pliki są Twoją własnością i możesz je otworzyć w dowolnym programie graficznym wspierającym SVG. Nie ma vendor lock-in, nie ma ukrytych formatów, nie ma ograniczeń.

W październiku 2022 roku Penpot osiągnęło ponad 100 000 zarejestrowanych użytkowników, a w 2023 roku firma otrzymała 8 milionów dolarów finansowania od inwestorów, co pozwoliło przyspieszyć rozwój platformy. Dziś Penpot jest używany przez tysiące firm i freelancerów na całym świecie, którzy cenią sobie wolność, prywatność i kontrolę nad swoimi danymi.

Dlaczego Penpot?

Kluczowe zalety

100% Open Source - Kod źródłowy dostępny na GitHub (Mozilla Public License 2.0)
Całkowicie darmowy - Bez ograniczeń funkcji, użytkowników czy projektów
Web-based - Działa w każdej przeglądarce bez instalacji
SVG Native - Standardowy format plików bez vendor lock-in
Self-hosting - Możliwość uruchomienia na własnym serwerze
Real-time Collaboration - Współpraca w czasie rzeczywistym
Cross-platform - Windows, macOS, Linux przez przeglądarkę
GDPR Compliant - Pełna kontrola nad danymi przy self-hosting

Penpot vs Figma vs Sketch vs Adobe XD

Cecha	Penpot	Figma	Sketch	Adobe XD
Cena	Darmowy	Free tier + $15+/mo	$12/mo	Wycofany
Open Source	Tak	Nie	Nie	Nie
Self-hosting	Tak	Nie	Nie	Nie
Web-based	Tak	Tak	Nie (Mac only)	Nie
SVG Native	Tak	Export only	Export only	Export only
Plugins	W rozwoju	1000+	700+	Wycofane
Auto-layout	Flex Layout	Auto Layout	Smart Layout	-
Collaboration	Tak	Tak	Limited	Tak
Offline mode	Tak (self-host)	Nie	Tak	Tak
Vendor lock-in	Brak	Wysoki	Średni	Wysoki

Instalacja i rozpoczęcie pracy

Opcja 1: Penpot Cloud (Najszybsze)

Code

Bash

# Wystarczy przejść na stronę
https://design.penpot.app

# Zarejestruj się darmowym kontem
# Gotowe - możesz zacząć projektować!

Opcja 2: Self-hosting z Docker

Code

Bash

# Sklonuj oficjalne repozytorium
git clone https://github.com/penpot/penpot.git
cd penpot/docker/images

# Uruchom za pomocą Docker Compose
docker-compose -f docker-compose.yaml up -d

# Penpot będzie dostępny pod adresem
# http://localhost:9001

Docker Compose Configuration

docker-compose.yaml

YAML

# docker-compose.yaml
version: "3.5"

services:
  penpot-frontend:
    image: "penpotapp/frontend:latest"
    restart: always
    ports:
      - 9001:80
    volumes:
      - penpot_assets_data:/opt/data/assets
    depends_on:
      - penpot-backend
      - penpot-exporter
    environment:
      - PENPOT_FLAGS=enable-registration enable-login-with-password

  penpot-backend:
    image: "penpotapp/backend:latest"
    restart: always
    volumes:
      - penpot_assets_data:/opt/data/assets
    depends_on:
      - penpot-postgres
      - penpot-redis
    environment:
      - PENPOT_FLAGS=enable-registration enable-login-with-password disable-email-verification
      - PENPOT_PUBLIC_URI=http://localhost:9001
      - PENPOT_DATABASE_URI=postgresql://penpot-postgres/penpot
      - PENPOT_DATABASE_USERNAME=penpot
      - PENPOT_DATABASE_PASSWORD=penpot
      - PENPOT_REDIS_URI=redis://penpot-redis/0
      - PENPOT_ASSETS_STORAGE_BACKEND=assets-fs
      - PENPOT_STORAGE_ASSETS_FS_DIRECTORY=/opt/data/assets

  penpot-exporter:
    image: "penpotapp/exporter:latest"
    restart: always
    environment:
      - PENPOT_PUBLIC_URI=http://penpot-frontend

  penpot-postgres:
    image: "postgres:15"
    restart: always
    stop_signal: SIGINT
    volumes:
      - penpot_postgres_v15:/var/lib/postgresql/data
    environment:
      - POSTGRES_INITDB_ARGS=--data-checksums
      - POSTGRES_DB=penpot
      - POSTGRES_USER=penpot
      - POSTGRES_PASSWORD=penpot

  penpot-redis:
    image: redis:7
    restart: always

volumes:
  penpot_postgres_v15:
  penpot_assets_data:

Opcja 3: Instalacja na Kubernetes

penpot-deployment.yaml

YAML

# penpot-deployment.yaml
apiVersion: apps/v1
kind: Deployment
metadata:
  name: penpot
  namespace: design-tools
spec:
  replicas: 1
  selector:
    matchLabels:
      app: penpot
  template:
    metadata:
      labels:
        app: penpot
    spec:
      containers:
      - name: penpot-frontend
        image: penpotapp/frontend:latest
        ports:
        - containerPort: 80
        env:
        - name: PENPOT_FLAGS
          value: "enable-registration enable-login-with-password"
      - name: penpot-backend
        image: penpotapp/backend:latest
        env:
        - name: PENPOT_PUBLIC_URI
          value: "https://penpot.yourdomain.com"
        - name: PENPOT_DATABASE_URI
          valueFrom:
            secretKeyRef:
              name: penpot-secrets
              key: database-uri
---
apiVersion: v1
kind: Service
metadata:
  name: penpot-service
  namespace: design-tools
spec:
  selector:
    app: penpot
  ports:
  - port: 80
    targetPort: 80
  type: LoadBalancer

Główne funkcje Penpot

1. Narzędzia do edycji wektorowej

Code

TEXT

Penpot oferuje pełny zestaw narzędzi wektorowych:

┌─────────────────────────────────────────────────────┐
│  🔷 Shape Tools                                      │
│  ├── Rectangle (R)                                   │
│  ├── Ellipse (E)                                     │
│  ├── Polygon                                         │
│  └── Star                                            │
│                                                      │
│  ✏️ Drawing Tools                                    │
│  ├── Pen Tool (P) - Bezier curves                   │
│  ├── Pencil Tool - Freehand drawing                 │
│  └── Path editing                                    │
│                                                      │
│  🔗 Boolean Operations                               │
│  ├── Union - Połącz kształty                        │
│  ├── Difference - Odejmij                           │
│  ├── Intersection - Część wspólna                   │
│  └── Exclusion - Wykluczenie                        │
└─────────────────────────────────────────────────────┘

2. Flex Layout (Auto-layout)

Penpot wprowadza Flex Layout inspirowany CSS Flexbox:

Code

CSS

/* Odpowiednik CSS dla Penpot Flex Layout */
.flex-container {
  display: flex;
  flex-direction: row | column;
  justify-content: flex-start | center | flex-end | space-between | space-around;
  align-items: flex-start | center | flex-end | stretch;
  gap: 16px;
  padding: 24px;
}

/* W Penpot ustawiasz to przez UI:
   1. Zaznacz kontener
   2. Panel Design > Layout > Flex
   3. Ustaw Direction, Alignment, Gap, Padding
*/

Przykład praktyczny:

Code

TEXT

┌─────────────────────────────────────────────────────┐
│  CARD COMPONENT z Flex Layout                       │
│                                                      │
│  ┌───────────────────────────────────────────────┐  │
│  │  [Image]                                       │  │
│  │                                                │  │
│  │  ┌─────────────────────────────────────────┐  │  │
│  │  │ Title                          [Icon]   │  │  │
│  │  │ Description text that can wrap to       │  │  │
│  │  │ multiple lines automatically            │  │  │
│  │  │                                         │  │  │
│  │  │ [Button]              [Button]          │  │  │
│  │  └─────────────────────────────────────────┘  │  │
│  └───────────────────────────────────────────────┘  │
│                                                      │
│  Struktura Flex:                                    │
│  - Główny kontener: Column, gap: 16px              │
│  - Header: Row, space-between                       │
│  - Buttons: Row, gap: 8px, align-end               │
└─────────────────────────────────────────────────────┘

3. Komponenty i instancje

Code

TEXT

┌─────────────────────────────────────────────────────┐
│  COMPONENT SYSTEM                                    │
│                                                      │
│  1. Stwórz Main Component:                          │
│     - Zaznacz elementy                              │
│     - Ctrl/Cmd + K lub prawy klik > Create Component│
│                                                      │
│  2. Użyj instancji:                                 │
│     - Przeciągnij z Assets panel                    │
│     - Lub Ctrl/Cmd + D dla duplikacji               │
│                                                      │
│  3. Edytuj Main Component:                          │
│     - Zmiany propagują się do wszystkich instancji  │
│                                                      │
│  4. Override w instancji:                           │
│     - Możesz nadpisać tekst, kolory, obrazy         │
│     - Reset override: prawy klik > Reset            │
└─────────────────────────────────────────────────────┘

4. Design Tokens i Style

Code

TEXT

/* Penpot obsługuje globalne style dla: */

/* Kolory */
--color-primary: #3366FF;
--color-secondary: #6B7280;
--color-success: #10B981;
--color-error: #EF4444;

/* Typografia */
--font-heading: Inter, 700, 32px;
--font-body: Inter, 400, 16px;
--font-caption: Inter, 400, 12px;

/* Shadows */
--shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
--shadow-md: 0 4px 6px rgba(0,0,0,0.1);
--shadow-lg: 0 10px 15px rgba(0,0,0,0.1);

/* W Penpot:
   1. Design panel > Fill/Stroke > + Add to library
   2. Nadaj nazwę stylu
   3. Użyj w innych elementach przez Assets panel
*/

5. Prototypowanie interaktywne

Code

TEXT

┌─────────────────────────────────────────────────────┐
│  PROTOTYPING INTERACTIONS                           │
│                                                      │
│  Dostępne triggery:                                 │
│  ├── On Click                                       │
│  ├── Mouse Enter (Hover)                            │
│  ├── Mouse Leave                                    │
│  └── After Delay                                    │
│                                                      │
│  Dostępne akcje:                                    │
│  ├── Navigate To - przejście do innej strony        │
│  ├── Open Overlay - otwórz popup/modal              │
│  ├── Close Overlay - zamknij overlay                │
│  ├── Previous Page - wróć                           │
│  └── Open URL - otwórz zewnętrzny link              │
│                                                      │
│  Animacje przejść:                                  │
│  ├── Dissolve - płynne przenikanie                  │
│  ├── Slide - przesunięcie                           │
│  │   ├── Right, Left, Up, Down                      │
│  └── Push - wypychanie                              │
└─────────────────────────────────────────────────────┘

Przykład tworzenia prototypu:

Code

TEXT

Scenariusz: Login Flow

[Login Screen] ──Click "Sign In"──> [Dashboard]
      │
      └──Click "Forgot Password"──> [Reset Password]
                                          │
                                    Click "Send"
                                          │
                                          v
                                    [Confirmation Modal]
                                          │
                                    After 3s / Click
                                          │
                                          v
                                    [Login Screen]

6. Grid System i Guides

Code

CSS

/* Penpot obsługuje różne typy gridów */

/* Layout Grid - dla responsywnego designu */
.layout-grid {
  columns: 12;
  gutter: 24px;
  margin: auto | fixed;
  type: stretch | center | left | right;
}

/* Square Grid - dla pixel-perfect designu */
.square-grid {
  size: 8px;
  color: rgba(0, 0, 0, 0.1);
}

/* Custom Guides */
.guides {
  horizontal: 64px, 128px, 512px;
  vertical: 50%, 100%;
}

7. Export Options

Code

TEXT

┌─────────────────────────────────────────────────────┐
│  EXPORT FORMATS                                      │
│                                                      │
│  Obrazy:                                            │
│  ├── PNG - z przezroczystością                      │
│  ├── JPEG - dla zdjęć                               │
│  ├── SVG - wektory (natywny format!)                │
│  └── PDF - dla dokumentacji                         │
│                                                      │
│  Scale options:                                      │
│  ├── 1x - standard                                  │
│  ├── 2x - retina                                    │
│  ├── 3x - high DPI                                  │
│  └── Custom - np. 0.5x, 4x                          │
│                                                      │
│  Export całego projektu:                            │
│  - File > Export project (.penpot)                  │
│  - Zawiera wszystkie strony, komponenty, assety     │
└─────────────────────────────────────────────────────┘

Generowanie kodu CSS

Penpot automatycznie generuje kod CSS dla zaznaczonych elementów:

Code

CSS

/* Przykład wygenerowanego CSS dla buttona */
.button {
  /* Layout */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  gap: 8px;

  /* Appearance */
  background: #3366FF;
  border-radius: 8px;

  /* Typography */
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  color: #FFFFFF;

  /* Effects */
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

/* Hover state (z prototypu) */
.button:hover {
  background: #2952CC;
  transform: translateY(-1px);
  box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.15);
}

Inspect Panel - Code Generation

Code

TEXT

┌─────────────────────────────────────────────────────┐
│  INSPECT MODE                                        │
│                                                      │
│  1. Włącz Inspect mode (ikona kodu w toolbarze)     │
│  2. Kliknij dowolny element                         │
│  3. Zobacz wygenerowany kod:                        │
│                                                      │
│  Tabs:                                              │
│  ├── Info - wymiary, pozycja                        │
│  ├── Design - CSS styles                            │
│  └── Code - pełny CSS/SVG                           │
│                                                      │
│  Kopiowanie:                                        │
│  - Click to copy pojedyncze właściwości             │
│  - "Copy all" dla pełnego CSS                       │
└─────────────────────────────────────────────────────┘

Współpraca zespołowa

Real-time Collaboration

Code

TEXT

┌─────────────────────────────────────────────────────┐
│  COLLABORATION FEATURES                              │
│                                                      │
│  👥 Multi-cursor editing                            │
│  ├── Widzisz kursory innych użytkowników            │
│  ├── Kolorowe awatary przy zaznaczeniach            │
│  └── Live preview zmian                             │
│                                                      │
│  💬 Comments                                        │
│  ├── Click anywhere + C to add comment              │
│  ├── Thread replies                                 │
│  ├── Resolve/Unresolve                              │
│  └── Mentions @username                             │
│                                                      │
│  📤 Sharing                                         │
│  ├── View link - tylko podgląd                      │
│  ├── Edit link - pełna edycja                       │
│  └── Prototype link - interaktywny prototyp         │
│                                                      │
│  📚 Team Libraries                                  │
│  ├── Shared components                              │
│  ├── Shared styles (colors, typography)             │
│  └── Sync across projects                           │
└─────────────────────────────────────────────────────┘

Version History

Code

TEXT

Historia wersji w Penpot:

┌─────────────────────────────────────────────────────┐
│  FILE > Version History                              │
│                                                      │
│  📅 Today                                           │
│  ├── 14:32 - Jan updated Button component           │
│  ├── 13:15 - Maria added new page                   │
│  └── 11:00 - Auto-save                              │
│                                                      │
│  📅 Yesterday                                       │
│  ├── 18:45 - Jan renamed project                    │
│  └── 09:30 - Initial version                        │
│                                                      │
│  Actions:                                           │
│  - Preview any version                              │
│  - Restore to previous version                      │
│  - Create named snapshot                            │
└─────────────────────────────────────────────────────┘

Plugins i rozszerzenia

Penpot aktywnie rozwija system pluginów:

Dostępne pluginy (2024+)

Code

TypeScript

// Przykład struktury pluginu Penpot
// penpot-plugin-example/manifest.json
{
  "name": "My Penpot Plugin",
  "version": "1.0.0",
  "description": "Example plugin for Penpot",
  "main": "index.js",
  "permissions": [
    "selection:read",
    "selection:write",
    "file:read",
    "file:write"
  ]
}

// penpot-plugin-example/index.js
penpot.ui.open("My Plugin", `
  <div style="padding: 16px;">
    <h2>My Plugin</h2>
    <button onclick="applyColors()">Apply Brand Colors</button>
  </div>
`);

async function applyColors() {
  const selection = await penpot.selection.get();

  for (const shape of selection) {
    await penpot.shape.update(shape.id, {
      fill: { color: "#3366FF" }
    });
  }
}

Plugin Ideas

Code

TEXT

Popularne typy pluginów:
├── Content generators (Lorem ipsum, avatars, data)
├── Design tokens import/export
├── Accessibility checkers
├── Icon libraries
├── Chart generators
├── Code export (Tailwind, CSS-in-JS)
├── Design system documentation
└── Integration with dev tools

Integracje

Integracja z Git

Code

Bash

# Eksport projektu do SVG i wersjonowanie w Git
penpot-cli export --project "My Project" --format svg --output ./designs

# Struktura plików
designs/
├── page-1/
│   ├── frame-login.svg
│   ├── frame-dashboard.svg
│   └── components/
│       ├── button.svg
│       └── card.svg
├── page-2/
│   └── ...
└── tokens.json

Webhooks

Code

JavaScript

// Konfiguracja webhooków (self-hosted)
// config.edn
{:webhooks
 {:events #{:file-change :comment-created :member-joined}
  :url "https://your-server.com/penpot-webhook"
  :secret "your-webhook-secret"}}

// Obsługa webhooka
app.post('/penpot-webhook', (req, res) => {
  const { event, payload } = req.body;

  switch (event) {
    case 'file-change':
      console.log(`File ${payload.file_id} was modified`);
      // Trigger CI/CD pipeline
      break;
    case 'comment-created':
      // Notify on Slack
      break;
  }

  res.status(200).send('OK');
});

API Access (Self-hosted)

Code

Python

# Python SDK dla Penpot API
import requests

class PenpotAPI:
    def __init__(self, base_url, token):
        self.base_url = base_url
        self.headers = {"Authorization": f"Bearer {token}"}

    def get_projects(self):
        response = requests.get(
            f"{self.base_url}/api/rpc/command/get-all-projects",
            headers=self.headers
        )
        return response.json()

    def export_file(self, file_id, format="svg"):
        response = requests.post(
            f"{self.base_url}/api/export",
            headers=self.headers,
            json={
                "file_id": file_id,
                "format": format,
                "scale": 1
            }
        )
        return response.content

# Użycie
api = PenpotAPI("https://your-penpot.com", "your-api-token")
projects = api.get_projects()
svg_data = api.export_file("file-uuid", "svg")

Design System w Penpot

Tworzenie Design System

Code

TEXT

┌─────────────────────────────────────────────────────┐
│  DESIGN SYSTEM STRUCTURE                             │
│                                                      │
│  📁 Design System Project                           │
│  ├── 📄 Foundations                                 │
│  │   ├── Colors                                     │
│  │   │   ├── Primary palette                        │
│  │   │   ├── Neutral palette                        │
│  │   │   ├── Semantic colors                        │
│  │   │   └── Gradients                              │
│  │   ├── Typography                                 │
│  │   │   ├── Headings (H1-H6)                       │
│  │   │   ├── Body text                              │
│  │   │   └── UI text                                │
│  │   ├── Spacing                                    │
│  │   │   └── 4px, 8px, 12px, 16px, 24px, 32px...   │
│  │   ├── Shadows                                    │
│  │   └── Border radius                              │
│  │                                                   │
│  ├── 📄 Components                                  │
│  │   ├── Buttons                                    │
│  │   │   ├── Primary / Secondary / Ghost           │
│  │   │   ├── Small / Medium / Large                │
│  │   │   └── States: Default, Hover, Active, Disabled│
│  │   ├── Inputs                                     │
│  │   ├── Cards                                      │
│  │   ├── Navigation                                 │
│  │   └── Modals                                     │
│  │                                                   │
│  └── 📄 Patterns                                    │
│      ├── Forms                                      │
│      ├── Tables                                     │
│      └── Page layouts                               │
└─────────────────────────────────────────────────────┘

Shared Libraries

Code

TEXT

Współdzielenie Design System między projektami:

1. Opublikuj bibliotekę:
   File > Publish as Shared Library

2. Użyj w innym projekcie:
   Assets Panel > Libraries > + Add library

3. Synchronizacja:
   - Zmiany w source library
   - Assets Panel > Update available
   - Review changes > Update

Keyboard Shortcuts

Essential Shortcuts

Akcja	Skrót
Move tool	V
Rectangle	R
Ellipse	E
Frame	F
Text	T
Pen tool	P
Comments	C
Zoom in/out	Cmd/Ctrl + +/-
Zoom to fit	Cmd/Ctrl + 1
Zoom to selection	Cmd/Ctrl + 2
Pan	Space + drag
Duplicate	Cmd/Ctrl + D
Group	Cmd/Ctrl + G
Ungroup	Cmd/Ctrl + Shift + G
Create component	Cmd/Ctrl + K
Copy/Paste	Cmd/Ctrl + C/V
Undo/Redo	Cmd/Ctrl + Z / Shift + Z
Hide/Show UI	Cmd/Ctrl + \
Present prototype	Cmd/Ctrl + Enter

Migracja z Figma do Penpot

Eksport z Figma

Code

TEXT

1. W Figma:
   - Zaznacz frame lub całą stronę
   - File > Export
   - Wybierz format SVG
   - Zaznacz "Include 'id' attribute"

2. W Penpot:
   - File > Import
   - Wybierz wyeksportowane SVG
   - Dostosuj importowane elementy

Ograniczenia migracji

Code

TEXT

Co się przenosi dobrze:
✅ Kształty wektorowe
✅ Tekst (podstawowy)
✅ Kolory i gradienty
✅ Efekty (shadow, blur)
✅ Grupowanie

Co wymaga pracy ręcznej:
⚠️ Auto-layout → Flex Layout (ręczna konfiguracja)
⚠️ Komponenty (trzeba odtworzyć)
⚠️ Prototypowanie (trzeba odtworzyć)
⚠️ Plugins (nie ma odpowiedników)
⚠️ Variants (w rozwoju w Penpot)

Penpot Import Tool

Code

Bash

# Community tool do migracji
npx figma-to-penpot --file "Figma File URL" --output ./penpot-import

# Lub użyj oficjalnego importera (w development)
# https://github.com/penpot/penpot-importer

Cennik

Plan	Cena	Zawartość
Cloud Free	$0/miesiąc	Unlimited projects, users, files
Self-hosted	$0	Open source, własna infrastruktura
Enterprise	Custom	Dedicated support, SLA, custom features

Co zawiera darmowy plan:

✅ Nieograniczona liczba projektów
✅ Nieograniczona liczba użytkowników
✅ Nieograniczona liczba plików
✅ Real-time collaboration
✅ Komponenty i biblioteki
✅ Prototypowanie
✅ Export (SVG, PNG, PDF)
✅ Version history
✅ Comments

FAQ - Najczęściej zadawane pytania

Czy Penpot jest naprawdę darmowy?

Tak, Penpot jest 100% darmowy zarówno w wersji cloud jak i self-hosted. Nie ma ukrytych opłat, limitów użytkowników ani ograniczonych funkcji. Model biznesowy opiera się na enterprise support i custom features dla dużych organizacji.

Czy mogę użyć Penpot offline?

W wersji cloud Penpot wymaga połączenia z internetem. Jednak w wersji self-hosted możesz uruchomić Penpot na lokalnym serwerze i pracować całkowicie offline w sieci lokalnej.

Jak Penpot wypada w porównaniu do Figmy?

Penpot oferuje większość funkcji Figmy: komponenty, auto-layout (Flex), prototypowanie, współpracę real-time. Główne różnice to: Penpot jest open source i darmowy, używa natywnego SVG, umożliwia self-hosting. Figma ma większy ekosystem pluginów i bardziej dojrzałe niektóre funkcje jak Variants.

Czy mogę zaimportować pliki z Figmy?

Bezpośredni import .fig nie jest możliwy (format jest własnościowy). Możesz eksportować z Figmy do SVG i zaimportować do Penpot. Komponenty i prototypy trzeba będzie odtworzyć ręcznie.

Jak bezpieczne są moje dane?

W wersji cloud dane są przechowywane na serwerach w Europie (GDPR compliant). W wersji self-hosted masz pełną kontrolę nad danymi - przechowujesz je na własnych serwerach.

Czy Penpot wspiera Figma plugins?

Nie, Penpot ma własny system pluginów (w rozwoju). Pluginy Figma nie są kompatybilne. Społeczność Penpot aktywnie rozwija własne rozszerzenia.

Jak mogę przyczynić się do rozwoju Penpot?

Penpot jest open source! Możesz:

Zgłaszać bugi i feature requesty na GitHub
Kontrybuować kod (Clojure backend, ClojureScript frontend)
Tworzyć pluginy
Pisać dokumentację
Tłumaczyć interfejs

Podsumowanie

Penpot to rewolucyjna platforma design, która oferuje:

100% Open Source pod licencją Mozilla Public License
Całkowicie darmowy bez ograniczeń funkcji
SVG Native bez vendor lock-in
Self-hosting dla pełnej kontroli nad danymi
Współpraca real-time dla zespołów
Flex Layout inspirowany CSS Flexbox
Prototypowanie z animacjami przejść

Penpot to idealne rozwiązanie dla zespołów i organizacji, które cenią sobie wolność, prywatność i kontrolę nad swoimi narzędziami projektowymi.

Penpot - open source design platform for UI/UX

What is Penpot?

Penpot is the world's first fully open-source UI/UX design platform, created as a free alternative to Figma. Launched in 2021 by the Spanish company Kaleidos, Penpot offers professional user interface design tools that work entirely in the browser without the need to install any software.

What sets Penpot apart from the competition is its "open standards first" approach. The platform uses the native SVG format to store designs, which means your files are your property and you can open them in any graphics application that supports SVG. There is no vendor lock-in, no hidden formats, no restrictions.

In October 2022, Penpot reached over 100,000 registered users, and in 2023 the company received 8 million dollars in funding from investors, which allowed it to accelerate the platform's development. Today Penpot is used by thousands of companies and freelancers around the world who value freedom, privacy, and control over their data.

Why Penpot?

Key advantages

100% Open Source - Source code available on GitHub (Mozilla Public License 2.0)
Completely free - No limits on features, users, or projects
Web-based - Works in any browser without installation
SVG Native - Standard file format without vendor lock-in
Self-hosting - Ability to run on your own server
Real-time Collaboration - Collaborate in real time
Cross-platform - Windows, macOS, Linux via browser
GDPR Compliant - Full control over data with self-hosting

Penpot vs Figma vs Sketch vs Adobe XD

Feature	Penpot	Figma	Sketch	Adobe XD
Price	Free	Free tier + $15+/mo	$12/mo	Discontinued
Open Source	Yes	No	No	No
Self-hosting	Yes	No	No	No
Web-based	Yes	Yes	No (Mac only)	No
SVG Native	Yes	Export only	Export only	Export only
Plugins	In development	1000+	700+	Discontinued
Auto-layout	Flex Layout	Auto Layout	Smart Layout	-
Collaboration	Yes	Yes	Limited	Yes
Offline mode	Yes (self-host)	No	Yes	Yes
Vendor lock-in	None	High	Medium	High

Installation and getting started

Option 1: Penpot Cloud (fastest)

Code

Bash

# Just go to the website
https://design.penpot.app

# Register a free account
# Done - you can start designing!

Option 2: Self-hosting with Docker

Code

Bash

# Clone the official repository
git clone https://github.com/penpot/penpot.git
cd penpot/docker/images

# Start using Docker Compose
docker-compose -f docker-compose.yaml up -d

# Penpot will be available at
# http://localhost:9001

Docker Compose configuration

docker-compose.yaml

YAML

# docker-compose.yaml
version: "3.5"

services:
  penpot-frontend:
    image: "penpotapp/frontend:latest"
    restart: always
    ports:
      - 9001:80
    volumes:
      - penpot_assets_data:/opt/data/assets
    depends_on:
      - penpot-backend
      - penpot-exporter
    environment:
      - PENPOT_FLAGS=enable-registration enable-login-with-password

  penpot-backend:
    image: "penpotapp/backend:latest"
    restart: always
    volumes:
      - penpot_assets_data:/opt/data/assets
    depends_on:
      - penpot-postgres
      - penpot-redis
    environment:
      - PENPOT_FLAGS=enable-registration enable-login-with-password disable-email-verification
      - PENPOT_PUBLIC_URI=http://localhost:9001
      - PENPOT_DATABASE_URI=postgresql://penpot-postgres/penpot
      - PENPOT_DATABASE_USERNAME=penpot
      - PENPOT_DATABASE_PASSWORD=penpot
      - PENPOT_REDIS_URI=redis://penpot-redis/0
      - PENPOT_ASSETS_STORAGE_BACKEND=assets-fs
      - PENPOT_STORAGE_ASSETS_FS_DIRECTORY=/opt/data/assets

  penpot-exporter:
    image: "penpotapp/exporter:latest"
    restart: always
    environment:
      - PENPOT_PUBLIC_URI=http://penpot-frontend

  penpot-postgres:
    image: "postgres:15"
    restart: always
    stop_signal: SIGINT
    volumes:
      - penpot_postgres_v15:/var/lib/postgresql/data
    environment:
      - POSTGRES_INITDB_ARGS=--data-checksums
      - POSTGRES_DB=penpot
      - POSTGRES_USER=penpot
      - POSTGRES_PASSWORD=penpot

  penpot-redis:
    image: redis:7
    restart: always

volumes:
  penpot_postgres_v15:
  penpot_assets_data:

Option 3: installation on Kubernetes

penpot-deployment.yaml

YAML

# penpot-deployment.yaml
apiVersion: apps/v1
kind: Deployment
metadata:
  name: penpot
  namespace: design-tools
spec:
  replicas: 1
  selector:
    matchLabels:
      app: penpot
  template:
    metadata:
      labels:
        app: penpot
    spec:
      containers:
      - name: penpot-frontend
        image: penpotapp/frontend:latest
        ports:
        - containerPort: 80
        env:
        - name: PENPOT_FLAGS
          value: "enable-registration enable-login-with-password"
      - name: penpot-backend
        image: penpotapp/backend:latest
        env:
        - name: PENPOT_PUBLIC_URI
          value: "https://penpot.yourdomain.com"
        - name: PENPOT_DATABASE_URI
          valueFrom:
            secretKeyRef:
              name: penpot-secrets
              key: database-uri
---
apiVersion: v1
kind: Service
metadata:
  name: penpot-service
  namespace: design-tools
spec:
  selector:
    app: penpot
  ports:
  - port: 80
    targetPort: 80
  type: LoadBalancer

Main Penpot features

1. Vector editing tools

Code

TEXT

Penpot offers a full set of vector tools:

┌─────────────────────────────────────────────────────┐
│  🔷 Shape Tools                                      │
│  ├── Rectangle (R)                                   │
│  ├── Ellipse (E)                                     │
│  ├── Polygon                                         │
│  └── Star                                            │
│                                                      │
│  ✏️ Drawing Tools                                    │
│  ├── Pen Tool (P) - Bezier curves                   │
│  ├── Pencil Tool - Freehand drawing                 │
│  └── Path editing                                    │
│                                                      │
│  🔗 Boolean Operations                               │
│  ├── Union - Merge shapes                           │
│  ├── Difference - Subtract                          │
│  ├── Intersection - Common area                     │
│  └── Exclusion - Exclude overlap                    │
└─────────────────────────────────────────────────────┘

2. Flex Layout (auto-layout)

Penpot introduces Flex Layout inspired by CSS Flexbox:

Code

CSS

/* CSS equivalent of Penpot Flex Layout */
.flex-container {
  display: flex;
  flex-direction: row | column;
  justify-content: flex-start | center | flex-end | space-between | space-around;
  align-items: flex-start | center | flex-end | stretch;
  gap: 16px;
  padding: 24px;
}

/* In Penpot you set this through the UI:
   1. Select the container
   2. Design panel > Layout > Flex
   3. Set Direction, Alignment, Gap, Padding
*/

Practical example:

Code

TEXT

┌─────────────────────────────────────────────────────┐
│  CARD COMPONENT with Flex Layout                    │
│                                                      │
│  ┌───────────────────────────────────────────────┐  │
│  │  [Image]                                       │  │
│  │                                                │  │
│  │  ┌─────────────────────────────────────────┐  │  │
│  │  │ Title                          [Icon]   │  │  │
│  │  │ Description text that can wrap to       │  │  │
│  │  │ multiple lines automatically            │  │  │
│  │  │                                         │  │  │
│  │  │ [Button]              [Button]          │  │  │
│  │  └─────────────────────────────────────────┘  │  │
│  └───────────────────────────────────────────────┘  │
│                                                      │
│  Flex structure:                                    │
│  - Main container: Column, gap: 16px               │
│  - Header: Row, space-between                       │
│  - Buttons: Row, gap: 8px, align-end               │
└─────────────────────────────────────────────────────┘

3. Components and instances

Code

TEXT

┌─────────────────────────────────────────────────────┐
│  COMPONENT SYSTEM                                    │
│                                                      │
│  1. Create Main Component:                          │
│     - Select elements                               │
│     - Ctrl/Cmd + K or right-click > Create Component│
│                                                      │
│  2. Use instances:                                  │
│     - Drag from Assets panel                        │
│     - Or Ctrl/Cmd + D to duplicate                  │
│                                                      │
│  3. Edit Main Component:                            │
│     - Changes propagate to all instances            │
│                                                      │
│  4. Override in instance:                           │
│     - You can override text, colors, images         │
│     - Reset override: right-click > Reset           │
└─────────────────────────────────────────────────────┘

4. Design Tokens and styles

Code

TEXT

/* Penpot supports global styles for: */

/* Colors */
--color-primary: #3366FF;
--color-secondary: #6B7280;
--color-success: #10B981;
--color-error: #EF4444;

/* Typography */
--font-heading: Inter, 700, 32px;
--font-body: Inter, 400, 16px;
--font-caption: Inter, 400, 12px;

/* Shadows */
--shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
--shadow-md: 0 4px 6px rgba(0,0,0,0.1);
--shadow-lg: 0 10px 15px rgba(0,0,0,0.1);

/* In Penpot:
   1. Design panel > Fill/Stroke > + Add to library
   2. Name the style
   3. Use in other elements via Assets panel
*/

5. Interactive prototyping

Code

TEXT

┌─────────────────────────────────────────────────────┐
│  PROTOTYPING INTERACTIONS                           │
│                                                      │
│  Available triggers:                                │
│  ├── On Click                                       │
│  ├── Mouse Enter (Hover)                            │
│  ├── Mouse Leave                                    │
│  └── After Delay                                    │
│                                                      │
│  Available actions:                                 │
│  ├── Navigate To - go to another page               │
│  ├── Open Overlay - open popup/modal                │
│  ├── Close Overlay - close overlay                  │
│  ├── Previous Page - go back                        │
│  └── Open URL - open external link                  │
│                                                      │
│  Transition animations:                             │
│  ├── Dissolve - smooth fade                         │
│  ├── Slide - sliding motion                         │
│  │   ├── Right, Left, Up, Down                      │
│  └── Push - pushing transition                      │
└─────────────────────────────────────────────────────┘

Example of creating a prototype:

Code

TEXT

Scenario: Login Flow

[Login Screen] ──Click "Sign In"──> [Dashboard]
      │
      └──Click "Forgot Password"──> [Reset Password]
                                          │
                                    Click "Send"
                                          │
                                          v
                                    [Confirmation Modal]
                                          │
                                    After 3s / Click
                                          │
                                          v
                                    [Login Screen]

6. Grid system and guides

Code

CSS

/* Penpot supports various grid types */

/* Layout Grid - for responsive design */
.layout-grid {
  columns: 12;
  gutter: 24px;
  margin: auto | fixed;
  type: stretch | center | left | right;
}

/* Square Grid - for pixel-perfect design */
.square-grid {
  size: 8px;
  color: rgba(0, 0, 0, 0.1);
}

/* Custom Guides */
.guides {
  horizontal: 64px, 128px, 512px;
  vertical: 50%, 100%;
}

7. Export options

Code

TEXT

┌─────────────────────────────────────────────────────┐
│  EXPORT FORMATS                                      │
│                                                      │
│  Images:                                            │
│  ├── PNG - with transparency                        │
│  ├── JPEG - for photos                              │
│  ├── SVG - vectors (native format!)                 │
│  └── PDF - for documentation                        │
│                                                      │
│  Scale options:                                      │
│  ├── 1x - standard                                  │
│  ├── 2x - retina                                    │
│  ├── 3x - high DPI                                  │
│  └── Custom - e.g. 0.5x, 4x                         │
│                                                      │
│  Full project export:                               │
│  - File > Export project (.penpot)                  │
│  - Includes all pages, components, assets           │
└─────────────────────────────────────────────────────┘

CSS code generation

Penpot automatically generates CSS code for selected elements:

Code

CSS

/* Example of generated CSS for a button */
.button {
  /* Layout */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  gap: 8px;

  /* Appearance */
  background: #3366FF;
  border-radius: 8px;

  /* Typography */
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  color: #FFFFFF;

  /* Effects */
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

/* Hover state (from prototype) */
.button:hover {
  background: #2952CC;
  transform: translateY(-1px);
  box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.15);
}

Inspect panel - code generation

Code

TEXT

┌─────────────────────────────────────────────────────┐
│  INSPECT MODE                                        │
│                                                      │
│  1. Enable Inspect mode (code icon in toolbar)      │
│  2. Click any element                               │
│  3. View the generated code:                        │
│                                                      │
│  Tabs:                                              │
│  ├── Info - dimensions, position                    │
│  ├── Design - CSS styles                            │
│  └── Code - full CSS/SVG                            │
│                                                      │
│  Copying:                                           │
│  - Click to copy individual properties              │
│  - "Copy all" for full CSS                          │
└─────────────────────────────────────────────────────┘

Team collaboration

Real-time collaboration

Code

TEXT

┌─────────────────────────────────────────────────────┐
│  COLLABORATION FEATURES                              │
│                                                      │
│  👥 Multi-cursor editing                            │
│  ├── See other users' cursors                       │
│  ├── Colored avatars next to selections             │
│  └── Live preview of changes                        │
│                                                      │
│  💬 Comments                                        │
│  ├── Click anywhere + C to add comment              │
│  ├── Thread replies                                 │
│  ├── Resolve/Unresolve                              │
│  └── Mentions @username                             │
│                                                      │
│  📤 Sharing                                         │
│  ├── View link - view only                          │
│  ├── Edit link - full editing                       │
│  └── Prototype link - interactive prototype         │
│                                                      │
│  📚 Team Libraries                                  │
│  ├── Shared components                              │
│  ├── Shared styles (colors, typography)             │
│  └── Sync across projects                           │
└─────────────────────────────────────────────────────┘

Version history

Code

TEXT

Version history in Penpot:

┌─────────────────────────────────────────────────────┐
│  FILE > Version History                              │
│                                                      │
│  📅 Today                                           │
│  ├── 14:32 - Jan updated Button component           │
│  ├── 13:15 - Maria added new page                   │
│  └── 11:00 - Auto-save                              │
│                                                      │
│  📅 Yesterday                                       │
│  ├── 18:45 - Jan renamed project                    │
│  └── 09:30 - Initial version                        │
│                                                      │
│  Actions:                                           │
│  - Preview any version                              │
│  - Restore to previous version                      │
│  - Create named snapshot                            │
└─────────────────────────────────────────────────────┘

Plugins and extensions

Penpot is actively developing its plugin system:

Available plugins (2024+)

Code

TypeScript

// Example Penpot plugin structure
// penpot-plugin-example/manifest.json
{
  "name": "My Penpot Plugin",
  "version": "1.0.0",
  "description": "Example plugin for Penpot",
  "main": "index.js",
  "permissions": [
    "selection:read",
    "selection:write",
    "file:read",
    "file:write"
  ]
}

// penpot-plugin-example/index.js
penpot.ui.open("My Plugin", `
  <div style="padding: 16px;">
    <h2>My Plugin</h2>
    <button onclick="applyColors()">Apply Brand Colors</button>
  </div>
`);

async function applyColors() {
  const selection = await penpot.selection.get();

  for (const shape of selection) {
    await penpot.shape.update(shape.id, {
      fill: { color: "#3366FF" }
    });
  }
}

Plugin ideas

Code

TEXT

Popular plugin types:
├── Content generators (Lorem ipsum, avatars, data)
├── Design tokens import/export
├── Accessibility checkers
├── Icon libraries
├── Chart generators
├── Code export (Tailwind, CSS-in-JS)
├── Design system documentation
└── Integration with dev tools

Integrations

Git integration

Code

Bash

# Export project to SVG and version with Git
penpot-cli export --project "My Project" --format svg --output ./designs

# File structure
designs/
├── page-1/
│   ├── frame-login.svg
│   ├── frame-dashboard.svg
│   └── components/
│       ├── button.svg
│       └── card.svg
├── page-2/
│   └── ...
└── tokens.json

Webhooks

Code

JavaScript

// Webhook configuration (self-hosted)
// config.edn
{:webhooks
 {:events #{:file-change :comment-created :member-joined}
  :url "https://your-server.com/penpot-webhook"
  :secret "your-webhook-secret"}}

// Webhook handler
app.post('/penpot-webhook', (req, res) => {
  const { event, payload } = req.body;

  switch (event) {
    case 'file-change':
      console.log(`File ${payload.file_id} was modified`);
      // Trigger CI/CD pipeline
      break;
    case 'comment-created':
      // Notify on Slack
      break;
  }

  res.status(200).send('OK');
});

API access (self-hosted)

Code

Python

# Python SDK for Penpot API
import requests

class PenpotAPI:
    def __init__(self, base_url, token):
        self.base_url = base_url
        self.headers = {"Authorization": f"Bearer {token}"}

    def get_projects(self):
        response = requests.get(
            f"{self.base_url}/api/rpc/command/get-all-projects",
            headers=self.headers
        )
        return response.json()

    def export_file(self, file_id, format="svg"):
        response = requests.post(
            f"{self.base_url}/api/export",
            headers=self.headers,
            json={
                "file_id": file_id,
                "format": format,
                "scale": 1
            }
        )
        return response.content

# Usage
api = PenpotAPI("https://your-penpot.com", "your-api-token")
projects = api.get_projects()
svg_data = api.export_file("file-uuid", "svg")

Design system in Penpot

Creating a design system

Code

TEXT

┌─────────────────────────────────────────────────────┐
│  DESIGN SYSTEM STRUCTURE                             │
│                                                      │
│  📁 Design System Project                           │
│  ├── 📄 Foundations                                 │
│  │   ├── Colors                                     │
│  │   │   ├── Primary palette                        │
│  │   │   ├── Neutral palette                        │
│  │   │   ├── Semantic colors                        │
│  │   │   └── Gradients                              │
│  │   ├── Typography                                 │
│  │   │   ├── Headings (H1-H6)                       │
│  │   │   ├── Body text                              │
│  │   │   └── UI text                                │
│  │   ├── Spacing                                    │
│  │   │   └── 4px, 8px, 12px, 16px, 24px, 32px...   │
│  │   ├── Shadows                                    │
│  │   └── Border radius                              │
│  │                                                   │
│  ├── 📄 Components                                  │
│  │   ├── Buttons                                    │
│  │   │   ├── Primary / Secondary / Ghost           │
│  │   │   ├── Small / Medium / Large                │
│  │   │   └── States: Default, Hover, Active, Disabled│
│  │   ├── Inputs                                     │
│  │   ├── Cards                                      │
│  │   ├── Navigation                                 │
│  │   └── Modals                                     │
│  │                                                   │
│  └── 📄 Patterns                                    │
│      ├── Forms                                      │
│      ├── Tables                                     │
│      └── Page layouts                               │
└─────────────────────────────────────────────────────┘

Shared libraries

Code

TEXT

Sharing a Design System across projects:

1. Publish the library:
   File > Publish as Shared Library

2. Use in another project:
   Assets Panel > Libraries > + Add library

3. Synchronization:
   - Make changes in the source library
   - Assets Panel > Update available
   - Review changes > Update

Keyboard shortcuts

Essential shortcuts

Action	Shortcut
Move tool	V
Rectangle	R
Ellipse	E
Frame	F
Text	T
Pen tool	P
Comments	C
Zoom in/out	Cmd/Ctrl + +/-
Zoom to fit	Cmd/Ctrl + 1
Zoom to selection	Cmd/Ctrl + 2
Pan	Space + drag
Duplicate	Cmd/Ctrl + D
Group	Cmd/Ctrl + G
Ungroup	Cmd/Ctrl + Shift + G
Create component	Cmd/Ctrl + K
Copy/Paste	Cmd/Ctrl + C/V
Undo/Redo	Cmd/Ctrl + Z / Shift + Z
Hide/Show UI	Cmd/Ctrl + \
Present prototype	Cmd/Ctrl + Enter

Migrating from Figma to Penpot

Exporting from Figma

Code

TEXT

1. In Figma:
   - Select a frame or the entire page
   - File > Export
   - Choose SVG format
   - Check "Include 'id' attribute"

2. In Penpot:
   - File > Import
   - Select the exported SVG files
   - Adjust the imported elements

Migration limitations

Code

TEXT

What transfers well:
✅ Vector shapes
✅ Text (basic)
✅ Colors and gradients
✅ Effects (shadow, blur)
✅ Grouping

What requires manual work:
⚠️ Auto-layout → Flex Layout (manual configuration)
⚠️ Components (need to be recreated)
⚠️ Prototyping (needs to be recreated)
⚠️ Plugins (no equivalents)
⚠️ Variants (in development in Penpot)

Penpot Import Tool

Code

Bash

# Community migration tool
npx figma-to-penpot --file "Figma File URL" --output ./penpot-import

# Or use the official importer (in development)
# https://github.com/penpot/penpot-importer

Pricing

Plan	Price	Includes
Cloud Free	$0/month	Unlimited projects, users, files
Self-hosted	$0	Open source, your own infrastructure
Enterprise	Custom	Dedicated support, SLA, custom features

What the free plan includes:

Unlimited number of projects
Unlimited number of users
Unlimited number of files
Real-time collaboration
Components and libraries
Prototyping
Export (SVG, PNG, PDF)
Version history
Comments

FAQ - frequently asked questions

Is Penpot really free?

Yes, Penpot is 100% free in both the cloud and self-hosted versions. There are no hidden fees, user limits, or restricted features. The business model is based on enterprise support and custom features for large organizations.

Can I use Penpot offline?

In the cloud version, Penpot requires an internet connection. However, in the self-hosted version you can run Penpot on a local server and work completely offline on a local network.

How does Penpot compare to Figma?

Penpot offers most of Figma's features: components, auto-layout (Flex), prototyping, real-time collaboration. The main differences are: Penpot is open source and free, uses native SVG, and allows self-hosting. Figma has a larger plugin ecosystem and some more mature features like Variants.

Can I import files from Figma?

Direct import of .fig files is not possible (the format is proprietary). You can export from Figma to SVG and import into Penpot. Components and prototypes will need to be recreated manually.

How secure is my data?

In the cloud version, data is stored on servers in Europe (GDPR compliant). In the self-hosted version, you have full control over your data - you store it on your own servers.

Does Penpot support Figma plugins?

No, Penpot has its own plugin system (in development). Figma plugins are not compatible. The Penpot community is actively developing its own extensions.

How can I contribute to Penpot's development?

Penpot is open source! You can:

Report bugs and feature requests on GitHub
Contribute code (Clojure backend, ClojureScript frontend)
Create plugins
Write documentation
Translate the interface

Summary

Penpot is a revolutionary design platform that offers:

100% Open Source under the Mozilla Public License
Completely free with no feature limitations
SVG Native without vendor lock-in
Self-hosting for full control over your data
Real-time collaboration for teams
Flex Layout inspired by CSS Flexbox
Prototyping with transition animations

Penpot is the ideal solution for teams and organizations that value freedom, privacy, and control over their design tools.