Penpot, otwarte narzędzie do projektowania interfejsów

Penpot to narzędzie do projektowania interfejsów działające w przeglądarce, którego kod jest otwarty i które można uruchomić na własnym serwerze. Rozwija je hiszpańska firma Kaleidos, licencja to Mozilla Public License 2.0, a repozytorium ma ponad pięćdziesiąt osiem tysięcy gwiazdek. Bieżące wydanie nosi numer 2.17.0 i pochodzi z 22 lipca 2026 roku.

Dla kogo to jest naprawdę

Uczciwa odpowiedź brzmi: dla zespołów, dla których liczy się kontrola nad danymi, a nie dla tych, które szukają narzędzia lepszego od Figmy pod względem samego projektowania.

Sens tej platformy widać najwyraźniej w trzech sytuacjach. Pierwsza to organizacja, w której projekty nie mogą leżeć na cudzym serwerze, czyli sektor publiczny, ochrona zdrowia, obronność. Instalacja na własnej infrastrukturze rozwiązuje problem, którego żadne rozwiązanie zamknięte nie rozwiąże, bo nie oferuje takiej opcji.

Druga to niechęć do uzależnienia się od jednego dostawcy. Projekty zapisane w formacie zamkniętym są zakładnikiem decyzji cenowych producenta, a doświadczenia branży z ostatnich lat nauczyły wiele zespołów ostrożności. Tutaj pliki są zapisane w formatach otwartych i dają się otworzyć poza samą aplikacją.

Trzecia to koszt przy dużym zespole, ale tylko w wariancie z własnym serwerem. W chmurze, jak zaraz zobaczysz, plan darmowy ma limity.

Jeśli natomiast szukasz narzędzia, w którym praca projektowa idzie szybciej niż w rozwiązaniach komercyjnych, to nie jest to. Penpot nadgonił dystans w podstawach, ale ekosystem wtyczek, dojrzałość animacji i drobne wygody codziennej pracy nadal są po drugiej stronie. Ten wybór podejmuje się z powodów strategicznych, nie z powodu wygody.

Cennik, czyli sprostowanie

To wymaga poprawienia, bo w sieci utrwaliło się przekonanie, że Penpot jest w całości darmowy bez ograniczeń, a wcześniejsza wersja tego tekstu je powielała. Kod jest otwarty i instalacja na własnym serwerze rzeczywiście nie kosztuje nic poza infrastrukturą. Usługa w chmurze ma natomiast plany.

Plan w chmurze	Cena	Zakres
Professional	0 USD	do 8 osób w zespole, 10 GB miejsca, historia wersji 7 dni
Unlimited	7 USD za osobę miesięcznie	25 GB miejsca, historia 30 dni, rachunek ograniczony do 175 USD miesięcznie
Enterprise	25 USD za osobę miesięcznie	miejsce bez limitu, historia 90 dni, konsola administracyjna, logowanie jednokrotne, dzienniki audytu, od 950 USD miesięcznie
Prywatny serwer	50 000 USD rocznie	wydzielona infrastruktura, wybór regionu, gwarantowane czasy reakcji

Limit ośmiu osób w planie darmowym jest tym, o który rozbija się najwięcej zespołów, bo liczba oglądających jest nieograniczona, ale projektujących już nie. Zanim jednak przeliczysz zespół po pełnej stawce, sprawdź zniżki dla organizacji pozarządowych, edukacji i projektów otwartych, bo dostawca prowadzi je poza cennikiem i trzeba się o nie zwrócić. Warto też zauważyć ograniczenie rachunku w planie płatnym do stu siedemdziesięciu pięciu dolarów miesięcznie: przy zespole większym niż dwadzieścia pięć osób cena za osobę zaczyna spadać, co jest rzadkie w tej kategorii.

Wariant z własnym serwerem pozostaje bez opłat licencyjnych. Warto jednak policzyć go uczciwie, doliczając serwer, kopie zapasowe, aktualizacje i czas kogoś, kto to utrzyma. Przy zespole ośmioosobowym plan darmowy w chmurze wychodzi taniej niż własna instalacja liczona z kosztem pracy.

Format plików i co z niego wynika

Argument o braku uzależnienia od dostawcy pojawia się w każdym materiale o tym narzędziu, więc warto go doprecyzować, bo bywa przedstawiany zbyt optymistycznie.

Prawdą jest, że kształty i grafika opierają się na standardach otwartych, więc pojedynczy ekran wyeksportowany do pliku wektorowego otworzysz w dowolnym programie graficznym. To realna przewaga nad formatami binarnymi, których nie odczytasz niczym innym niż aplikacją producenta.

Nie jest natomiast prawdą, że cały projekt jest przenośny. Komponenty, biblioteki, interakcje prototypu i zależności między plikami to struktury specyficzne dla tej aplikacji. Otworzenie eksportu w innym programie da Ci grafikę, a nie działający system projektowy z powiązaniami.

Praktyczny wniosek jest taki, że otwartość chroni Cię przed utratą dostępu do treści, a nie przed kosztem migracji. To i tak więcej, niż daje większość konkurencji, ale warto wiedzieć, na co dokładnie się liczy.

Jest jeszcze druga strona tej otwartości, rzadziej wymieniana, a przydatna w codziennej pracy. Skoro grafika stoi na standardach sieciowych, eksport idzie bezpośrednio do formatu, który wstawisz na stronę, bez pośredniego kroku konwersji. Przy ikonach i prostych ilustracjach oszczędza to trochę tarcia między projektem a wdrożeniem, bo programista dostaje plik gotowy do użycia zamiast czegoś, co najpierw trzeba przepuścić przez narzędzie eksportujące.

Warto natomiast wiedzieć, że pliki wychodzące z narzędzi projektowych rzadko są zoptymalizowane. Niosą metadane, nadmiarową precyzję współrzędnych i grupy, które nic nie wnoszą, więc przed wdrożeniem i tak przechodzą przez optymalizator. To drobiazg, ale wraca przy każdym projekcie i lepiej ustawić go raz w procesie budowania, niż robić ręcznie przy każdej ikonie.

Dlaczego Penpot?

Kluczowe zalety

Otwarty kod - Repozytorium dostępne publicznie, licencja Mozilla Public License 2.0
Własny serwer - Możliwość uruchomienia na własnej infrastrukturze bez opłat licencyjnych
Praca w przeglądarce - Działa w każdej przeglądarce bez instalacji
Otwarte formaty - Grafika oparta o standardy, bez formatu binarnego
Współpraca w czasie rzeczywistym - Wiele osób w jednym pliku
Niezależność od systemu - Windows, macOS i Linux przez przeglądarkę
Kontrola nad danymi - Przy własnej instalacji dane nie opuszczają organizacji

Penpot vs Figma vs Sketch vs Adobe XD

Cecha	Penpot	Figma	Sketch	Adobe XD
Cena	plan darmowy do 8 osób, potem od 7 USD	plan darmowy plus abonament	abonament	produkt wycofany
Otwarty kod	tak, MPL 2.0	nie	nie	nie
Własny serwer	tak	nie	nie	nie
Praca w przeglądarce	tak	tak	nie, tylko macOS	nie
Otwarty format grafiki	tak	tylko eksport	tylko eksport	tylko eksport
Wtyczki	nieliczne	bardzo dużo	dużo	wycofane
Układy elastyczne	tak, oparte o model CSS	tak	tak	nie dotyczy
Praca bez sieci	tak, przy własnym serwerze	nie	tak	tak

Instalacja i rozpoczęcie pracy

Opcja 1: Penpot Cloud (najszybciej)

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

Konfiguracja Docker Compose

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. Siatka i prowadnice

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. Opcje eksportu

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);
}

Panel inspekcji i generowanie kodu

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

Współpraca w czasie rzeczywistym

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                           │
└─────────────────────────────────────────────────────┘

Historia wersji

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                            │
└─────────────────────────────────────────────────────┘

Wtyczki i rozszerzenia

Penpot aktywnie rozwija system pluginów:

Dostępne wtyczki (2024 i później)

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" }
    });
  }
}

Pomysły na wtyczki

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');
});

Dostęp do API (wdrożenie własne)

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")

System projektowy w Penpot

Tworzenie systemu projektowego

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                               │
└─────────────────────────────────────────────────────┘

Biblioteki współdzielone

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

Skróty klawiszowe

Skróty najważniejsze

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 Figmy do Penpot

Eksport z Figmy

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:
Uwaga: Auto-layout na Flex Layout (ręczna konfiguracja)
Uwaga: Komponenty (trzeba odtworzyć)
Uwaga: Prototypowanie (trzeba odtworzyć)
Uwaga: Plugins (nie ma odpowiedników)
Uwaga: Variants (w rozwoju w Penpot)

Narzędzie do importu

Migracja idzie przez oficjalną wtyczkę uruchamianą po stronie Figmy, która pakuje projekt do pliku przyjmowanego przez Penpot. Nie ma narzędzia wiersza poleceń robiącego to samo, więc krok eksportu wykonuje się ręcznie w Figmie.

Code

TEXT

1. Zainstaluj wtyczkę Penpot exporter w Figmie
2. Uruchom ja na pliku, ktory chcesz przeniesc
3. Pobierz wygenerowany plik .penpot
4. W Penpot wybierz import i wskaz pobrany plik

Kod wtyczki stoi w repozytorium penpot-exporter-figma-plugin, więc przed migracją dużego projektu warto zajrzeć do zgłoszonych problemów i sprawdzić, czy któryś dotyczy używanych przez Ciebie elementów.

Czego brakuje w porównaniu z konkurencją

Ta sekcja jest w takich artykułach zwykle pomijana, a to ona najbardziej pomaga podjąć decyzję.

Wtyczki to największa różnica. Konkurencja ma ekosystem liczony w tysiącach dodatków, od generatorów treści zastępczych po narzędzia sprawdzające dostępność. Penpot dopuszcza wtyczki, ale ich liczba jest niewspółmiernie mniejsza, a wiele wygód codziennej pracy trzeba wykonać ręcznie.

Druga sprawa to prototypowanie. Podstawowe przejścia między ekranami działają, natomiast bardziej rozbudowane interakcje, animowane stany komponentów i sterowanie zmiennymi są tu uboższe. Do prezentacji przepływu wystarczy, do pokazania mikrointerakcji klientowi już niekoniecznie.

Trzecia to wydajność przy dużych plikach, podobnie jak w innych narzędziach działających w przeglądarce, na przykład Figmie. Aplikacja działa w przeglądarce i przy projekcie z setkami ekranów potrafi zwolnić bardziej, niż jest to akceptowalne. Dzielenie pracy na wiele plików pomaga i w praktyce jest tu koniecznością, a nie preferencją.

Czwarta to dostępność osób znających narzędzie. Zatrudniając projektanta, znajdziesz dziesiątki kandydatów pracujących w rozwiązaniach komercyjnych i pojedynczych znających to. Nauka podstaw zajmuje krótko, bo koncepty są zbliżone, ale to nadal koszt, który trzeba doliczyć.

Piąta to przekazywanie projektów na zewnątrz. Jeśli współpracujesz z agencją albo klientem, który pracuje w innym narzędziu, wymiana plików staje się problemem. Import z formatów konkurencji istnieje, ale odtwarza grafikę, a nie komponenty i prototypy, więc część pracy trzeba wykonać ponownie.

FAQ

Czy Penpot jest naprawdę darmowy?

Kod jest otwarty, a instalacja na własnym serwerze nie wiąże się z opłatami licencyjnymi. Usługa w chmurze ma natomiast plany: darmowy obejmuje do ośmiu osób w zespole i dziesięć gigabajtów miejsca, powyżej tego progu płacisz za osobę.

Czy mogę pracować bez dostępu do sieci?

W chmurze nie. Przy własnej instalacji tak, o ile serwer stoi w Twojej sieci lokalnej, bo aplikacja i tak działa w przeglądarce i wymaga połączenia z serwerem.

Czy zaimportuję projekty z Figmy?

Tylko częściowo. Grafikę przeniesiesz przez format wektorowy, ale komponenty, biblioteki i prototypy trzeba odtworzyć ręcznie, bo to struktury specyficzne dla każdej aplikacji.

Czy wtyczki z konkurencyjnych narzędzi zadziałają?

Nie. Penpot ma własny system wtyczek i nie jest zgodny z rozszerzeniami innych programów. Liczba dostępnych dodatków jest przy tym wyraźnie mniejsza niż u konkurencji.

Kiedy własna instalacja opłaca się bardziej niż chmura?

Zwykle dopiero przy zespole przekraczającym limit planu darmowego i przy wymaganiu, żeby dane nie opuszczały organizacji. Przy małym zespole bez takich wymagań koszt utrzymania serwera przewyższa oszczędność na abonamencie.

Typowe błędy przy wdrożeniu

Pierwszy to potraktowanie własnej instalacji jako rzeczy do zrobienia raz. Aplikacja składa się z kilku usług, bazy danych i magazynu plików, więc aktualizacje, kopie zapasowe i monitorowanie stają się czyimś obowiązkiem. Jeśli nikt tego nie przejmie, po pół roku pracujecie na wersji z niezałatanymi błędami.

Drugi to pominięcie kopii zapasowych magazynu plików. Sama baza nie wystarczy, bo obrazy i zasoby leżą osobno, a odtworzenie projektu bez nich daje puste ramki w miejscu grafiki.

Trzeci to migracja całego zespołu naraz. Rozsądniej zacząć od jednego projektu, sprawdzić, czy brakujące funkcje faktycznie przeszkadzają w Waszej pracy, i dopiero wtedy podejmować decyzję o reszcie.

Czwarty to trzymanie wszystkiego w jednym pliku. Aplikacja działa w przeglądarce i przy dużych projektach zwalnia, więc podział na pliki tematyczne jest tu praktyczną koniecznością, a nie kwestią porządku.

Piąty to zakładanie, że przekazanie projektu programiście wygląda tak samo jak w narzędziu, z którego przyszliście. Tryb podglądu ze specyfikacją istnieje, ale generowany kod traktuj jako punkt odniesienia dla wartości, a nie jako coś do wklejenia do projektu na Tailwind CSS czy w Reakcie.

Kod źródłowy i wydania znajdziesz w repozytorium Penpot, a aktualne plany na stronie cennika.