openpencil/packages/docs/de/guide/features.md

Funktionen

Warum OpenPencil

Design-Tools sind ein Lieferkettenproblem. Wenn Ihr Tool proprietär ist, bestimmt der Anbieter, was möglich ist — er kann Ihre Automatisierung über Nacht brechen. OpenPencil ist eine Open-Source-Alternative: MIT-lizenziert, Figma-kompatibel, vollständig lokal und programmierbar.

Figma .fig-Datei Import & Export

Öffnen und speichern Sie native Figma-Dateien direkt. Der Import dekodiert das vollständige 194-Definitionen-Kiwi-Schema einschließlich NodeChange-Nachrichten mit ~390 Feldern. Der Export kodiert den Szenengraphen zurück in Kiwi-Binärformat mit Zstd-Kompression und Thumbnail-Generierung. Speichern (⌘S) und Speichern unter (⇧⌘S) verwenden native OS-Dialoge in der Desktop-App. Die Import/Export-Pipeline unterstützt Round-Trip-Treue.

Kopieren & Einfügen mit Figma

Knoten in Figma auswählen, ⌘C, zu OpenPencil wechseln, ⌘V — sie erscheinen mit Füllungen, Konturen, Auto-Layout, Text, Eckenradien, Effekten und Vektornetzwerken. Funktioniert auch umgekehrt.

Paste verarbeitet komplexe Szenarien: Vektorpfade werden von Figmas normalizedSize auf die tatsächlichen Knotenmaße skaliert, Instanz-Kinder werden aus den symbolData ihrer Komponente gefüllt, Component-Sets werden erkannt und symbolOverrides für Text, Füllungen, Sichtbarkeit und Layout-Eigenschaften angewendet. Schriften, die von eingefügten Textknoten referenziert werden, werden automatisch geladen.

Vektornetzwerke

Das Stiftwerkzeug verwendet Figmas Vektornetzwerk-Modell — keine einfachen Pfade. Klicken für Eckpunkte, Klicken+Ziehen für Bézier-Kurven mit Tangentengriffen. Offene und geschlossene Pfade werden unterstützt.

Formwerkzeuge

Die Werkzeugleiste bietet alle grundlegenden Figma-Formwerkzeuge: Rechteck (R), Ellipse (O), Linie (L), Polygon und Stern. Alle Formen unterstützen Füllung, Kontur, Hover-Hervorhebung und Auswahlumriss.

Auto-Layout

Yoga WASM bietet CSS-Flexbox-Layout. Frames unterstützen:

• Richtung — horizontal, vertikal, Umbruch
• Abstand — Zwischenraum zwischen Kindern
• Polsterung — einheitlich oder pro Seite
• Ausrichtung — Start, Mitte, Ende, Zwischenraum
• Querachse — Start, Mitte, Ende, Dehnen
• Kindgröße — fest, füllen, anpassen

Shift+A schaltet Auto-Layout um oder umschließt ausgewählte Knoten.

Inline-Textbearbeitung

Canvas-native Textbearbeitung — kein DOM-Textarea-Overlay. Doppelklicken Sie auf einen Textknoten, um den Bearbeitungsmodus zu betreten. Der Canvas rendert einen blinkenden Cursor, blaue Auswahlrechtecke und einen blauen Umriss.

Schriftart-Auswahl mit virtuellem Scrollen, Suchfilter und CSS-Schriftvorschau. In Tauri werden Systemschriften über Rusts font-kit-Crate aufgelistet.

Rich-Text-Formatierung

Zeichenweise Formatierung innerhalb eines Textknotens. ⌘B für fett, ⌘I für kursiv, ⌘U für unterstrichen. Rich-Text-Formatierung bleibt bei .fig-Import/Export erhalten.

Rückgängig/Wiederherstellen

Jede Operation ist rückgängig machbar. Das System verwendet ein Inverse-Command-Muster. ⌘Z macht rückgängig, ⇧⌘Z stellt wieder her.

Fanglinien

Kanten- und Mittenfang mit roten Führungslinien bei ausgerichteten Knoten. Rotationsbewusst.

Canvas-Lineale

Lineale an den oberen und linken Kanten zeigen Koordinatenskalen. Bei Auswahl eines Knotens werden Position und Koordinaten-Badges angezeigt.

Farbauswahl & Fülltypen

HSV-Farbauswahl mit Farbton-Schieberegler, Alpha-Schieberegler, Hex-Eingabe und Deckkraftsteuerung. Fülltypen: Vollfarbe, Verlauf (Linear, Radial, Winkel, Diamant) und Bild.

Ebenen-Panel

Baumansicht der Dokumenthierarchie mit Reka UI Tree-Komponente. Aufklappen/Zuklappen, Ziehen zum Umordnen, Sichtbarkeit pro Knoten umschalten.

Eigenschafts-Panel

Registerkarten-Oberfläche mit Design | Code | KI-Tabs.

Der Design-Tab zeigt kontextsensitive Abschnitte: Darstellung, Füllung, Kontur, Effekte, Typografie, Layout, Position, Export und Seite.

Der Code-Tab zeigt JSX-Export der Auswahl. Der KI-Tab bietet eine KI-Chat-Oberfläche.

Gruppieren/Entgruppieren

⌘G gruppiert ausgewählte Knoten. ⇧⌘G entgruppiert.

Sektionen

Sektionen (S) sind organisatorische Container auf der obersten Ebene des Canvas.

Mehrseitige Dokumente

Dokumente unterstützen mehrere Seiten wie Figma. Jede Seite hat einen unabhängigen Viewport-Zustand.

Hover-Hervorhebung

Knoten werden beim Überfahren mit einem formgerechten Umriss hervorgehoben.

Erweitertes Rendering (Tier 1)

Der CanvasKit-Renderer unterstützt vollständige Tier-1-Visualfunktionen: Gradientenfüllungen (linear, radial, angular, diamant), Bildfüllungen, Effekte (Schatten, Unschärfe), Kontureigenschaften (Cap, Join, Dash), Bogendaten, Viewport-Culling, Paint-Wiederverwendung und RAF-Zusammenfassung.

Komponenten & Instanzen

Erstellen Sie wiederverwendbare Komponenten aus Frames oder Auswahlen (⌥⌘K). Live-Synchronisation, Override-Unterstützung und Komponenten-Sets (⇧⌘K).

Variablen

Design-Token als Variablen mit Sammlungen und Modi. Unterstützt COLOR-Typ mit vollständiger UI, FLOAT/STRING/BOOLEAN definiert. Organisieren Sie Variablen in Sammlungen, definieren Sie Modi (z.B. Hell/Dunkel).

Bildexport

Ausgewählte Knoten als PNG, JPG oder WEBP exportieren. Skalierung von 0,5× bis 4×, Formatauswahl und Live-Vorschau.

Kontextmenü

Rechtsklick auf dem Canvas öffnet ein Figma-ähnliches Kontextmenü mit Zwischenablage, Z-Reihenfolge, Gruppierung, Komponenten- und Sichtbarkeitsaktionen.

Z-Ordnung, Sichtbarkeit & Sperre

] bringt ausgewählte Knoten nach vorne, [ sendet nach hinten. ⇧⌘H schaltet Sichtbarkeit um. ⇧⌘L schaltet die Sperre um — gesperrte Knoten können nicht vom Canvas aus ausgewählt oder verschoben werden. Knoten zwischen Seiten verschieben über das Kontextmenü „Auf Seite verschieben".

Web- & Desktop-App

OpenPencil läuft im Browser unter app.openpencil.dev. Die Desktop-App verwendet eine Tauri v2-Shell (~5 MB).

App-Menü (Browser)

Im Browser-Modus bietet eine mit reka-ui Menubar erstellte Menüleiste Zugriff auf alle wichtigen Editor-Aktionen. Sechs Menüs: Datei, Bearbeiten, Ansicht, Objekt, Text, Anordnen.

Automatisches Speichern

Dateien werden 3 Sekunden nach der letzten Szenenänderung automatisch gespeichert.

P2P-Kollaboration

Echtzeit-Peer-to-Peer-Kollaboration — kein Server erforderlich. Teilen Sie einen Link und bearbeiten Sie gemeinsam. Basiert auf Trystero (WebRTC) für direkte Peer-Verbindungen und Yjs (CRDT) für konfliktfreie Dokumentensynchronisation.

• Keine Hosting-Kosten — Signalisierung über öffentliche MQTT-Broker, Daten fließen direkt zwischen Peers
• NAT-Traversal — Google STUN, Cloudflare STUN und Open Relay TURN-Server
• Live-Cursor — Figma-ähnliche farbige Cursor-Pfeile mit weißem Rand und Namens-Pills, im Bildschirmraum gerendert
• Präsenz — sehen Sie, wer im Raum ist, mit farbigen Avataren
• Folgemodus — klicken Sie auf den Avatar eines Peers, um seinem Viewport in Echtzeit zu folgen
• Lokale Persistenz — y-indexeddb hält den Raum über Seitenaktualisierungen hinweg am Leben
• Sichere Räume — IDs werden mit crypto.getRandomValues() generiert

Multi-Datei-Tabs

Öffnen Sie mehrere Dokumente in Tabs innerhalb eines einzigen Fensters. Tab-Leiste mit Schließen-Buttons. Mittelklick zum Schließen eines Tabs.

• ⌘N oder ⌘T — neuer Tab
• ⌘W — aktuellen Tab schließen
• ⌘O — Datei in neuem Tab öffnen

Jeder Tab pflegt seinen eigenen Dokumentzustand, Undo-Verlauf und Viewport.

Effekt-Rendering

Vollständiges Rendering von Figma-Effekten über CanvasKit:

• Schlagschatten — Versatz, Unschärferadius, Ausdehnung, Farbe
• Innerer Schatten — eingefügter Schatten mit Versatz, Unschärfe und Farbe
• Ebenen-Unschärfe — Gaußsche Unschärfe auf der gesamten Ebene
• Hintergrund-Unschärfe — Unschärfe des Inhalts hinter der Ebene (Glas-/Matteffekt)
• Vordergrund-Unschärfe — Unschärfe im Vordergrund

Per-Knoten SkPicture-Cache bedeutet, dass unveränderte Schatten-/Unschärfe-Knoten aus dem Cache wiedergegeben werden.

Multi-Selektion-Eigenschaften

Wählen Sie mehrere Knoten aus und bearbeiten Sie gemeinsame Eigenschaften gleichzeitig:

• Gemeinsame Werte werden in allen Abschnitten normal angezeigt (Position, Größe, Darstellung, Füllung, Kontur, Effekte)
• Unterschiedliche Werte zeigen „Mixed"
• Breiten- und Höheneingaben funktionieren über die Auswahl
• Horizontal/vertikal spiegeln gilt für alle ausgewählten Knoten

ScrubInput

Alle numerischen Eingaben im Eigenschafts-Panel verwenden eine Zieh-zum-Ändern-Interaktion — horizontal ziehen zum Anpassen des Wertes, oder klicken zum direkten Eingeben. Unterstützt Suffix-Anzeige (°, px, %).

CI/CD-Builds

GitHub Actions baut native Tauri-Desktop-Apps bei Versions-Tags. Die Build-Matrix umfasst macOS (arm64, x64), Windows (x64, arm64) und Linux (x64). macOS-Builds sind mit Apple-Developer-Zertifikaten signiert und notarisiert. Release-Notes werden automatisch aus CHANGELOG.md befüllt.

Bild- & SVG-Export

Exportieren Sie ausgewählte Knoten als PNG, JPG, WEBP oder SVG. SVG-Export unterstützt Rechtecke, Ellipsen, Linien, Sterne, Polygone, Vektoren, Text, Verläufe, Bildausfüllungen, Effekte und verschachtelte Gruppen.

CLI: bun open-pencil export --format svg file.fig. MCP/KI-Tool: export_svg.

Als kopieren

Das Als kopieren-Untermenü im Kontextmenü bietet:

• Als Text kopieren — sichtbarer Textinhalt
• Als SVG kopieren — SVG-Markup der Auswahl
• Als PNG kopieren — rendert bei 2× in die Zwischenablage (⇧⌘C)
• Als JSX kopieren — OpenPencil JSX

Konturausrichtung & Pro-Seite-Breiten

Konturausrichtung: Innen, Mitte oder Außen (beschneidungsbasiertes Rendering wie in Figma). Individuelle Konturbreiten pro Seite (Oben/Rechts/Unten/Links) über das Seitenauswahl-Dropdown.

Mobile Layout & PWA

OpenPencil ist als Progressive Web App auf Mobilgeräten installierbar. Das Layout passt sich kleinen Bildschirmen an — Seitenpanels werden durch ein wischbares unteres Drawer mit Tabs ersetzt: Ebenen, Eigenschaften, Design, Code.

Tailwind CSS v4 JSX-Export

Der Code-Tab bietet einen Formatschalter zwischen OpenPencil JSX und Tailwind CSS v4 (HTML mit Utility-Klassen). CLI: bun open-pencil export --format jsx --style tailwind file.fig

Google Fonts Fallback

Wenn eine Schriftart lokal nicht verfügbar ist, lädt OpenPencil sie automatisch von der Google Fonts API.

Homebrew-Tap

macOS-Nutzer können die Desktop-App über Homebrew installieren:

brew install open-pencil/tap/open-pencil

Ebenen-Inline-Umbenennen

Doppelklick auf einen Ebenennamen zum Inline-Umbenennen. Enter oder Klick außerhalb bestätigt, Escape bricht ab.

Renderer-Profiler

Ein HUD-Overlay zeigt Frame-Timing, GPU-Phasen und Frame-Budget. Zugänglich über das Ansichtsmenü.

KI-Chat

Integrierter KI-Assistent über den KI-Tab oder ⌘J. Kommuniziert direkt mit OpenRouter. 87 Werkzeuge für Lesen, Erstellen, Ändern und Organisieren von Design-Elementen. MCP-Server für externe KI-Coding-Tools.

@open-pencil/core & CLI

Die Engine ist in packages/core/ extrahiert. CLI bietet headless .fig-Dateioperationen:

• open-pencil info <file> — Dokumentstatistiken
• open-pencil tree <file> — visueller Knotenbaum
• open-pencil find <file> — Suche nach Name/Typ
• open-pencil export <file> — Rendern als PNG/JPG/WEBP
• open-pencil eval <file> — JavaScript mit Figma Plugin API ausführen

Alle Befehle unterstützen --json für maschinenlesbare Ausgabe.

JSX-Renderer

Programmatische Design-Erstellung über TreeNode-Builder-Funktionen aus @open-pencil/core. Unterstützt Tailwind-ähnliche Kurzform-Props — w, h, bg, rounded, flex, gap, p/px/py.

Code-Panel

Der Code-Tab im Eigenschafts-Panel zeigt die Code-Darstellung der aktuellen Auswahl mit Syntaxhervorhebung und einem Kopieren-Button. Ein Formatschalter wechselt zwischen OpenPencil JSX und Tailwind CSS v4.

Codequalität

Copy-Paste-Erkennung via jscpd — projektweite Duplikation von 15,6% auf 0,62% reduziert.