# 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. ## 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. ## 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. ## Web- & Desktop-App OpenPencil läuft im Browser unter [app.openpencil.dev](https://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. ## KI-Chat Integrierter KI-Assistent über den KI-Tab oder ⌘J. Kommuniziert direkt mit OpenRouter. **29 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 ` — Dokumentstatistiken - `open-pencil tree ` — visueller Knotenbaum - `open-pencil find ` — Suche nach Name/Typ - `open-pencil export ` — Rendern als PNG/JPG/WEBP - `open-pencil eval ` — JavaScript mit Figma Plugin API ausführen Alle Befehle unterstützen `--json` für maschinenlesbare Ausgabe. ## Codequalität Copy-Paste-Erkennung via jscpd — projektweite Duplikation von 15,6% auf 0,62% reduziert.