Jeżeli zespół chce odejść od Figmy, największym problemem zwykle nie jest nauczenie projektantów nowego interfejsu. Trudniejsze pytania brzmią: co stanie się z istniejącymi plikami, komponentami i tokenami, jak zmieni się handoff do developerów oraz kto będzie odpowiadał za infrastrukturę, jeśli narzędzie zostanie postawione we własnej sieci. Penpot odpowiada na te problemy inaczej niż typowy komercyjny SaaS. Kod projektu jest dostępny na licencji Mozilla Public License 2.0, aplikację można uruchomić we własnej infrastrukturze, a sam model projektowania mocno opiera się na otwartych standardach takich jak SVG, CSS Flexbox i CSS Grid.
Nie oznacza to jednak, że Penpot jest „Figmą za darmo”. Podstawowy sposób pracy jest znajomy, ale różnice wychodzą przy większych design systemach, migracji starych projektów i administracji. Przejście ma sens wtedy, gdy zespół rzeczywiście potrzebuje większej kontroli nad danymi albo chce zmniejszyć zależność od jednego dostawcy. Jeśli jedynym argumentem jest oszczędność kilku licencji, migracja potrafi kosztować więcej czasu niż przyniesie korzyści.
Jak Penpot działa w praktyce i gdzie różni się od Figmy
Penpot działa w przeglądarce i zachowuje schemat znany projektantom korzystającym z Figmy: są projekty i pliki, nieskończone płótno, warstwy, komponenty, biblioteki, komentarze, prototypowanie oraz jednoczesna praca kilku osób. Z punktu widzenia zespołu produktowego przesiadka nie oznacza więc powrotu do klasycznej aplikacji desktopowej ani ręcznego przesyłania plików między projektantami.
Najważniejsza różnica pojawia się niżej, w sposobie opisywania interfejsu. Penpot od początku mocno zbliża model projektu do technologii używanych później przez frontend.
Flex Layout odpowiada mechanice CSS Flexbox, a Grid Layout jest oparty na CSS Grid. Projektant może więc ustawiać kierunek elementów, odstępy, wyrównanie, rozciąganie czy zachowanie siatki w sposób bardziej zbliżony do tego, co później trafi do kodu. Dla developera oznacza to mniej sytuacji, w których wizualnie prosty układ z projektu trzeba odtwarzać zupełnie inną logiką w CSS.
Penpot udostępnia również tryb inspekcji. Po zaznaczeniu warstwy można odczytać jej właściwości, wymiary i odstępy oraz kopiować deklaracje CSS. Narzędzie generuje też fragmenty SVG i HTML. Nie należy traktować tego jako generatora gotowej aplikacji produkcyjnej. Kod z narzędzia projektowego jest przede wszystkim dokumentacją geometrii i stylu; logika komponentów Reacta, Vue czy Angulara nadal wymaga pracy developera.
Przy większych produktach istotne są komponenty, warianty i design tokens. Penpot obsługuje warianty komponentów, a tokeny mogą opisywać między innymi kolory, typografię, odstępy i cienie. Format tokenów jest powiązany ze specyfikacją rozwijaną przez W3C Design Tokens Community Group, co jest istotne w firmach próbujących utrzymywać jedno źródło wartości między projektem, dokumentacją i kodem.
To właśnie tutaj Penpot jest szczególnie interesujący dla zespołów technicznych. Nie chodzi o to, że automatycznie rozwiązuje problem niespójnego design systemu. Jeśli projektanci mają pięć niemal identycznych odcieni szarości i trzy komponenty przycisku stworzone niezależnie, zmiana narzędzia tego nie naprawi. Penpot daje natomiast sensowną bazę do uporządkowania systemu według reguł bliższych frontendowi.
Są też niedogodności. Ekosystem Figmy pozostaje większy, szczególnie jeśli firma jest uzależniona od konkretnych pluginów, rozbudowanych bibliotek społecznościowych albo procesów zbudowanych wokół produktów Figmy. Przed migracją trzeba spisać używane rozszerzenia i sprawdzić ich odpowiedniki. Stwierdzenie „korzystamy tylko z kilku pluginów” bywa mylące — po odłączeniu Figmy często okazuje się, że jeden z nich automatyzuje eksport ikon, drugi przygotowuje dane testowe, a trzeci jest częścią procesu accessibility review.
Aktualna oferta chmurowa Penpota wygląda przy tym dość agresywnie cenowo:
-
Professional – 0 USD za użytkownika miesięcznie, z podstawowymi funkcjami projektowania i współpracy;
-
Unlimited – 7 USD za użytkownika miesięcznie, przy czym miesięczny rachunek jest ograniczony do 175 USD; plan obejmuje między innymi do 25 GB przestrzeni, 30 dni automatycznie zapisanych wersji i 30 dni odzyskiwania usuniętych plików;
-
Enterprise – 950 USD miesięcznie, z limitem rachunku na tym poziomie, nielimitowaną przestrzenią oraz 90-dniową historią wersji i odzyskiwania;
-
osobna oferta Private Server jest wyceniana od 50 tys. USD rocznie i jest skierowana do organizacji potrzebujących zarządzanej, dedykowanej infrastruktury, kontroli dostępu czy wyboru regionu hostingu.
W praktyce mały zespół powinien najpierw przetestować bezpłatną wersję SaaS. Kupowanie serwera albo budowanie instalacji on-premise przed sprawdzeniem, czy projektantom odpowiada edytor, jest odwróceniem kolejności decyzji.
Migracja z Figmy: co da się przenieść, a co trzeba sprawdzić ręcznie
Penpot nie otwiera natywnie pliku Figmy na zasadzie „wrzuć wszystko i pracuj dalej”. Do migracji służy Penpot Exporter, plugin uruchamiany po stronie Figmy. Jego zadaniem jest przejście po strukturze dokumentu i utworzenie paczki możliwej do zaimportowania w Penpocie.
To ważne rozróżnienie. Migracja jest konwersją między dwoma modelami dokumentu, a nie kopiowaniem identycznego formatu. Im bardziej rozbudowany plik Figmy, tym bardziej trzeba traktować rezultat jako materiał wymagający kontroli.
Przy typowym interfejsie można przenosić strukturę ekranów, warstwy, tekst, obrazy, podstawowe elementy wektorowe, style oraz znaczną część informacji potrzebnych do odtworzenia komponentów i układów. Sam format Penpota przechowuje między innymi obiekty projektu, zasoby bitmapowe i wektorowe, biblioteki, tokeny, warianty i dane layoutu.
Aktualny importer Penpota przyjmuje pliki .penpot oraz .zip, a maksymalny rozmiar pojedynczego importu wynosi 1 GB. Przy migracji kilkudziesięciu dużych projektów nie ma więc sensu budować jednej gigantycznej paczki. Lepiej przenosić pliki partiami i zatwierdzać kolejne grupy dopiero po kontroli poprzedniej.
Najbardziej praktyczna procedura migracji wygląda tak:
-
Wybierz jeden reprezentatywny projekt, a nie najprostszy landing page. Powinien zawierać komponenty, formularze, ikony, zdjęcia, kilka breakpointów i przynajmniej fragment właściwego design systemu.
-
Wyeksportuj go z Figmy przy użyciu eksportera Penpota.
-
Zaimportuj plik do osobnego projektu testowego.
-
Porównaj ekran po ekranie wersję źródłową i wynikową.
-
Sprawdź osobno komponenty, warianty, fonty, style tekstowe, tokeny i biblioteki.
-
Dopiero wtedy oceń nakład pracy potrzebny do migracji całej organizacji.
Najwięcej ostrożności wymaga typografia. Jeśli organizacja korzysta z krojów, które nie są dostępne w nowym środowisku albo mają ograniczenia licencyjne dotyczące hostowania, tekst może zacząć układać się inaczej. Różnica o kilka pikseli w szerokości napisu wystarczy, żeby popsuć przyciski, tabele i nagłówki w kilkuset ekranach.
Drugim punktem kontroli są gradienty, efekty i bardziej złożone obiekty. Historia zgłoszeń dotyczących eksportera pokazuje, że nietypowe konstrukcje projektowe potrafią przejść niekompletnie lub inaczej niż w Figmie. Dlatego nie powinno się zatwierdzać migracji na podstawie informacji, że plik „zaimportował się bez błędu”. Kryterium powinno być inne: czy podstawowe ekrany wyglądają poprawnie, czy komponenty zachowują strukturę oraz czy da się dalej rozwijać bibliotekę bez ręcznego sprzątania każdej instancji.
Trzecia rzecz to design tokens i zmienne. W nowym projekcie często bardziej opłaca się uporządkować je już po stronie Penpota niż próbować zachować każdy historyczny wyjątek. Migracja to dobry moment, żeby skasować nieużywane wartości i ustalić hierarchię tokenów, zamiast konserwować lata bałaganu.
Nie robiłbym natomiast pełnej migracji „w weekend”. Bezpieczniejszy jest okres przejściowy: nowe lub wybrane projekty powstają już w Penpocie, a stare pozostają przez jakiś czas w Figmie w trybie odniesienia. Dopiero po sprawdzeniu dwóch–trzech rzeczywistych sprintów można ocenić, czy brakuje funkcji blokujących codzienną pracę.
Kiedy self-hosting Penpota ma sens — i ile obowiązków naprawdę dokłada
Najmocniejszą cechą Penpota nie jest brak abonamentu, lecz możliwość uruchomienia aplikacji na infrastrukturze kontrolowanej przez organizację. To istotne dla banków, administracji, firm medycznych, dostawców pracujących dla sektora publicznego i wszystkich organizacji, w których pliki projektowe zawierają informacje o niewydanych produktach, procesach wewnętrznych albo systemach objętych szczególnymi wymaganiami bezpieczeństwa.
Oficjalnie Penpota można wdrożyć między innymi przez Docker Compose albo Kubernetes. Dostępny jest również oficjalny Helm Chart. Do najprostszego uruchomienia przez Dockera potrzebne są Docker i Docker Compose, a usługę można wystartować na podstawie dostarczonego przez projekt pliku docker-compose.yaml.
To jednak dopiero początek. Produkcyjny self-hosting oznacza konieczność zapewnienia:
-
domeny i poprawnej konfiguracji DNS;
-
reverse proxy, np. NGINX, Caddy lub Traefik;
-
certyfikatu TLS/HTTPS;
-
mechanizmu wysyłki poczty przez SMTP, jeśli użytkownicy mają otrzymywać wiadomości i zaproszenia;
-
kopii zapasowych bazy i danych;
-
aktualizacji kontenerów;
-
monitorowania wolnego miejsca i wydajności;
-
procedury odtwarzania po awarii;
-
kontroli rejestracji i uwierzytelniania;
-
obserwacji logów oraz reagowania na błędy po aktualizacjach.
Penpot można dodatkowo konfigurować za pomocą zmiennych środowiskowych i flag. Dostępne są między innymi opcje dotyczące dostawców uwierzytelniania, LDAP, SMTP, magazynu danych i środowisk odizolowanych od internetu.
To wyjaśnia podstawową zasadę: self-hosting nie jest darmową wersją chmury, lecz zamianą opłaty za usługę na odpowiedzialność operacyjną.
Dla zespołu pięciu projektantów bez administratora lub DevOpsa własna instancja zwykle jest złym pierwszym ruchem. Nawet tani VPS za kilkadziesiąt złotych miesięcznie nie rozwiązuje problemu. Kosztem jest przede wszystkim czas człowieka, który aktualizuje usługę, diagnozuje problemy, sprawdza backupy i przywraca system po awarii.
W firmie mającej już Kubernetes, monitoring, centralne logowanie, backupy i zarządzanie tożsamością rachunek wygląda inaczej. Penpot staje się kolejną usługą w istniejącej platformie, więc koszt utrzymania marginalnie rośnie. W takim środowisku self-hosting zaczyna być racjonalny, szczególnie jeśli regulacje lub umowy wymagają dokładnej kontroli miejsca przechowywania danych.
Granica decyzyjna jest dość prosta. Nie stawiaj własnego Penpota tylko dlatego, że możesz. Rób to, jeśli co najmniej jeden z poniższych powodów jest konkretnym wymaganiem:
-
pliki projektowe nie mogą trafić do zewnętrznego SaaS;
-
organizacja musi kontrolować region przechowywania danych;
-
dostęp ma być spięty z wewnętrznym systemem tożsamości;
-
potrzebne jest środowisko odizolowane od publicznego internetu;
-
firma ma już zespół utrzymujący kontenery lub Kubernetes;
-
konieczna jest własna polityka backupu, retencji albo audytu.
Jeżeli żadnego z tych warunków nie ma, wersja hostowana przez Penpota będzie zwykle prostsza i tańsza operacyjnie.
Na self-hostingu irytuje przede wszystkim to, że awaria przestaje być problemem dostawcy. Jeśli po aktualizacji przestanie działać logowanie, wyczerpie się przestrzeń dyskowa albo backup okaże się uszkodzony, projektanci nie zadzwonią do „Penpota”. Zadzwonią do administratora we własnej firmie. Tę odpowiedzialność trzeba policzyć przed migracją, a nie po pierwszym incydencie.
FAQ
Czy Penpot jest naprawdę open source?
Tak. Główny kod projektu jest publikowany na licencji Mozilla Public License 2.0. Można uruchomić własną instancję i modyfikować oprogramowanie zgodnie z warunkami tej licencji.
Czy Penpot jest bezpłatny dla firmy?
Podstawowy plan chmurowy Professional kosztuje 0 USD za użytkownika miesięcznie, a rdzeń projektu pozostaje open source. Płatne plany dotyczą dodatkowych parametrów usługi, takich jak większa przestrzeń, dłuższa historia plików czy funkcje organizacyjne. Self-hosting również oznacza własne koszty infrastruktury i utrzymania.
Ile kosztuje Penpot Unlimited?
Aktualna cena to 7 USD za użytkownika miesięcznie, ale łączny miesięczny rachunek jest ograniczony do 175 USD. Przy 25 płatnych użytkownikach osiąga się więc maksymalny pułap tego planu.
Czy Penpot zaimportuje projekt z Figmy jeden do jednego?
Nie należy tego zakładać. Migracja odbywa się przez konwersję pliku za pomocą eksportera. Standardowe elementy przechodzą znacznie łatwiej niż rozbudowane systemy zawierające nietypowe efekty, bardzo złożone komponenty czy zależności od pluginów. Po imporcie potrzebna jest kontrola wizualna i strukturalna.
Jaki jest maksymalny rozmiar importowanego pliku?
Aktualny limit importu to 1 GB.
Czy projektanci muszą znać CSS, żeby używać Penpota?
Nie. Znajomość Flexboxa i CSS Grid pomaga jednak lepiej rozumieć zachowanie layoutów. To szczególnie przydatne w zespołach, w których projektanci blisko współpracują z frontendem.
Czy z Penpota można pobrać gotowy kod strony?
Można odczytywać i kopiować właściwości CSS oraz fragmenty SVG i HTML, ale nie jest to zamiennik implementacji aplikacji. Stan komponentów, logikę biznesową, routing, dostępność i integrację z frameworkiem nadal trzeba przygotować w kodzie.
Czy własny serwer oznacza większe bezpieczeństwo?
Nie automatycznie. Własny serwer daje większą kontrolę nad miejscem przechowywania danych i konfiguracją dostępu, ale źle zabezpieczony VPS bez aktualizacji, monitoringu i sprawdzonych backupów może być gorszym rozwiązaniem niż profesjonalnie utrzymywana usługa SaaS.
Od czego zacząć migrację z Figmy?
Nie od serwera i nie od przenoszenia całego archiwum. Najpierw wybierz jeden aktywny, średnio złożony produkt, przenieś go do bezpłatnego Penpota SaaS i przeprowadź na nim pełny sprint: projekt, komentarze, handoff i poprawki po implementacji. Jeśli komponenty, tokeny i workflow przejdą ten test, dopiero wtedy licz koszt migracji pozostałych plików oraz podejmuj decyzję o self-hostingu. Najdroższy błąd to budowanie własnej infrastruktury przed potwierdzeniem, że samo narzędzie pasuje zespołowi.
Dodatkowe informacje na: https://nokko.pl