Penpot

Penpot to otwarte (MPL-2.0) narzędzie do projektowania interfejsów i prototypowania, działające w przeglądarce i oparte na standardach (SVG/CSS). Jako jeden z nielicznych edytorów natywnie wspiera design tokeny i można je z niego eksportować, co czyni go naturalnym mostem między pracą projektanta a „design-as-code”. Da się też hostować samodzielnie.

Kiedy używać

• Chcesz otwartej alternatywy dla zamkniętych narzędzi, z możliwością self-hostingu.
• Projektujesz UI i chcesz utrzymywać tokeny blisko kodu.
• Zależy Ci na formatach zgodnych z webem (SVG/CSS).

Przykład użycia

1. Zdefiniuj tokeny (kolory, spacing) w panelu Tokens.
2. Wyeksportuj tokeny do JSON.
3. Podaj JSON jako źródło do Style Dictionary → tokens.css.

# self-hosting przez Docker Compose
docker compose -f docker-compose.yaml up -d

W ten sposób decyzje projektowe z Penpot trafiają do kodu jako wersjonowane tokeny.

Warto wiedzieć

• Eksport tokenów dobrze łączy się ze Style Dictionary.
• Pełnia funkcji rośnie szybko; sprawdź aktualny zakres przed migracją z innego narzędzia.