JetBrains IDE-Plugin
Flexible for Penpot: Penpot Design-Tokens in Ihrer IDE
Holen Sie Ihr Penpot-Designsystem in die IDE. Vervollständigen und prüfen Sie Design-Tokens in CSS, SCSS und Less, durchsuchen Sie Komponenten mit ihren Varianten und erzeugen Sie ein Stylesheet aus dem Design.
IntelliJ IDEA · WebStorm · PhpStorm · PyCharm · + Alle JetBrains IDEs (ab 2025.3). Vervollständigung, Hover und Inspektionen benötigen CSS-Unterstützung, etwa in WebStorm oder IntelliJ IDEA Ultimate.
- Tokens
- Vervollständigung, Hover und Inspektionen in CSS, SCSS und Less
- Stylesheet
- Erzeugtes CSS, Tailwind-v4-Theme oder TypeScript
- Verknüpft
- Quelldateien zeigen, wenn sich das Design ändert
01
Token-Vervollständigung und Hover
Nutzen Sie Ihre Penpot-Tokens in
var(...) in CSS, SCSS und Less. Per Hover sehen Sie, woher ein Token kommt.- Vervollständigung von Penpot-Tokens in
var(...) - Hover zeigt den aufgelösten Wert, die Alias-Kette, das Token-Set und den Wert in jedem Theme
- Farbmuster und ein Link zur Penpot-Datei
02
Inspektionen mit Quick Fixes
Die IDE meldet, wenn Stylesheet und Design nicht zusammenpassen. Jeder Fund hat einen Quick Fix.
- Fest codierte Werte: Farben, Abstände und Radien, die zu einem Token passen, mit Fix auf
var(...) - Abweichung: Custom Properties, deren Wert vom Penpot-Token abweicht, mit Fix auf den Penpot-Wert
- Entfernte Tokens:
var(...)-Verweise auf entfernte oder umbenannte Tokens
03
Komponenten und Varianten
Durchsuchen Sie die Komponenten Ihrer Penpot-Bibliothek, ohne die IDE zu verlassen.
- Ordner, Variantensets, eine Vorschau und ein Link zur Komponente in Penpot
- Varianten-Auswahl und gültige Kombinationen
- Varianteneigenschaften als Liste, TypeScript, JSON oder Attribute
- Tokens, die eine Komponente oder alle ihre Varianten nutzen
04
Code mit dem Design verknüpft
Verknüpfen Sie Quelldateien in Vue, React, Svelte, Angular, HTML und mehr mit Penpot-Komponenten. Die Verknüpfungen liegen in einer Datei, die Sie committen können.
- Ein Editor-Banner mit Link zur Komponente und Copy CSS
- Ein Hinweis, wenn sich die Komponente in Penpot ändert
- Eine Liste Implemented in für jede Komponente und Vorschläge für Dateien, die wie eine Komponente heißen
05
Ein erzeugtes Stylesheet
Erzeugen Sie aus dem Design ein Stylesheet mit allen Themes.
- CSS Custom Properties oder SCSS-Variablen
- Ein Tailwind-CSS-v4-Theme
- Tokens als TypeScript
- Komponenten-CSS aus den Penpot-Formen, mit Tokens als
var(...)und Varianten als Modifier-Klassen
06
Penpot-Datei verbinden
Funktioniert mit design.penpot.app oder Ihrem eigenen Penpot-Server. Geben Sie die Penpot-URL und ein Zugriffstoken ein, testen Sie die Verbindung und wählen Sie Team, Projekt und Dateien mit Ihren Design-Tokens.
Einfache, transparente Preise
Kauf über JetBrains Marketplace.
Einzelperson
Für Solo-Entwickler
$3.90/Monat
oder $39/Jahr (17% sparen)
- Token-Vervollständigung, Hover und Inspektionen
- Komponenten- und Varianten-Browser
- Erzeugtes Stylesheet
- Quelldateien mit dem Design verknüpft
TEAMS
Organisation
Für Teams und Unternehmen
$5.90/Monat
- Alles aus Einzelperson
- Eine Lizenz für das ganze Team
- Kauf über JetBrains Marketplace
- Fragen: info@ilscipio.com
Feedback-Angebot: Melden Sie einen Fehler oder eine Idee und erhalten Sie 20% Rabatt auf die Jahreslizenz oder einen Monat gratis. Schreiben Sie uns.
Code und Design im Gleichschritt
Installieren Sie Flexible for Penpot aus dem JetBrains Marketplace und verbinden Sie Ihre Penpot-Datei.