# Funktionen ## Figma .fig-Dateien Öffnen und speichern Sie native Figma-Dateien direkt. Die Import/Export-Pipeline verwendet denselben Kiwi-Binär-Codec wie Figma — 194 Schema-Definitionen, ~390 Felder pro Knoten. Speichern mit ⌘S, Speichern unter mit ⇧⌘S. **Kopieren & Einfügen mit Figma** — Knoten in Figma auswählen, ⌘C, zu OpenPencil wechseln, ⌘V. Füllungen, Konturen, Auto-Layout, Text, Effekte, Eckenradien und Vektornetzwerke bleiben erhalten. Funktioniert in beide Richtungen. ## Zeichnen & Bearbeiten - **Formen** — Rechteck (R), Ellipse (O), Linie (L), Polygon, Stern - **Stiftwerkzeug** — Vektornetzwerke (keine einfachen Pfade), Bézier-Kurven mit Tangentengriffen - **Text** — Canvas-native Bearbeitung mit IME-Unterstützung, Doppelklick zum Betreten des Bearbeitungsmodus - **Rich Text** — Zeichenweise Fett (⌘B), Kursiv (⌘I), Unterstrichen (⌘U), Durchgestrichen - **Auto-Layout** — Flexbox via Yoga WASM: Richtung, Abstand, Polsterung, Ausrichtung, Kindgröße. ⇧A zum Umschalten - **Komponenten** — Erstellen (⌥⌘K), Component Sets (⇧⌘K), Instanzen mit Override-Unterstützung, Live-Synchronisation - **Variablen** — Design-Tokens mit Sammlungen, Modi (Hell/Dunkel), Farb-/Float-/String-/Boolean-Typen, Variablenbindung - **Sektionen** — Organisatorische Container mit automatischer Kindübernahme und Titel-Pills ## Eigenschafts-Panel Kontextsensitive Design | Code | KI-Tabs: - **Darstellung** — Deckkraft, Eckenradius (einheitlich oder pro Ecke), Sichtbarkeit - **Füllung** — Vollfarbe, Verlauf (Linear/Radial/Angular/Diamant), Bild - **Kontur** — Farbe, Breite, Ausrichtung (Innen/Mitte/Außen), Pro-Seite-Breiten, Cap, Join, Dash - **Effekte** — Schlagschatten, Innerer Schatten, Ebenen-Unschärfe, Hintergrund-Unschärfe, Vordergrund-Unschärfe - **Typografie** — Schriftart-Auswahl mit virtuellem Scrollen und Suche, Gewicht, Größe, Ausrichtung, Stil-Buttons - **Layout** — Auto-Layout-Steuerungen (wenn aktiviert) - **Export** — Skalierung, Format (PNG/JPG/WEBP/SVG), Live-Vorschau ## Rendering Skia (CanvasKit WASM) — dieselbe Rendering-Engine wie Figma: - Verlaufsfüllungen (Linear, Radial, Angular, Diamant) - Bildfüllungen mit Skalierungsmodi - Effekte mit Pro-Knoten-Caching - Bogendaten (partielle Ellipsen, Donuts) - Viewport-Culling und Paint-Wiederverwendung - Fanglinien mit rotationsbewusster Ausrichtung - Canvas-Lineale mit Auswahl-Badges - Hover-Hervorhebung entlang der tatsächlichen Geometrie ## Rückgängig/Wiederherstellen Jede Operation ist rückgängig machbar — Erstellen, Löschen, Verschieben, Größenänderungen, Eigenschaftsänderungen, Umordnung, Layout-Änderungen, Variablen-Operationen. Verwendet ein Inverse-Command-Muster. ⌘Z / ⇧⌘Z. ## Mehrseitige Dokumente Seiten hinzufügen, löschen, umbenennen. Jede Seite hat einen unabhängigen Viewport-Zustand. Doppelklick zum Inline-Umbenennen. ## Multi-Datei-Tabs Mehrere Dokumente in Tabs öffnen. ⌘T neuer Tab, ⌘W schließen, ⌘O Datei öffnen. ## Export - **Bild** — PNG, JPG, WEBP in konfigurierbarer Skalierung (0,5×–4×). Über Panel, Kontextmenü oder ⇧⌘E - **SVG** — Formen, Text mit Stil-Runs, Verläufe, Effekte, Mischmodi - **Tailwind JSX** — HTML mit Tailwind v4 Utility-Klassen, bereit für React oder Vue - **Als kopieren** — Text, SVG, PNG (⇧⌘C) oder JSX über das Kontextmenü CLI: `openpencil export design.fig -f jsx --style tailwind` ## KI-Chat ⌘J öffnet den KI-Assistenten. 90+ Werkzeuge zum Erstellen von Formen, Setzen von Stilen, Verwalten von Layout, Arbeiten mit Komponenten und Variablen, Ausführen boolescher Operationen, Analysieren von Design-Tokens und Exportieren von Assets. Verbinden Sie Anthropic, OpenAI, Google AI, OpenRouter oder einen kompatiblen Endpunkt. Tool-Aufrufe werden als einklappbare Timeline-Einträge angezeigt. Visuelle Überprüfung — der Assistent rendert seine Arbeit und vergleicht sie mit Ihrer Anfrage. Vollständige Undo-Unterstützung für alle KI-Mutationen. Siehe [KI-Chat](/programmable/ai-chat) für Einrichtung und Anbieter-Details. ## MCP-Server Claude Code, Cursor, Windsurf oder jeden MCP-Client verbinden, um `.fig`-Dateien headless zu lesen und zu schreiben. 90+ Werkzeuge. Zwei Transporte: stdio und HTTP. ```sh npm install -g @open-pencil/mcp ``` ```json { "mcpServers": { "open-pencil": { "command": "openpencil-mcp" } } } ``` Siehe [MCP-Tools-Referenz](/programmable/mcp-server) für die vollständige Werkzeugliste. ## CLI `.fig`-Dateien vom Terminal aus inspizieren, exportieren und analysieren: ```sh openpencil tree design.fig # Knotenbaum openpencil find design.fig --type TEXT # Suche openpencil export design.fig -f png # Rendern openpencil analyze colors design.fig # Farbanalyse openpencil analyze clusters design.fig # Wiederholte Muster openpencil eval design.fig -c "..." # Figma Plugin API ``` Wenn die Desktop-App läuft, kann die Datei weggelassen werden, um den Live-Editor via RPC zu steuern: ```sh openpencil tree # Live-Dokument openpencil export -f png # Canvas-Screenshot ``` Alle Befehle unterstützen `--json`. Installation: `npm install -g @open-pencil/cli` ## Echtzeit-Kollaboration P2P via WebRTC — kein Server erforderlich. Link teilen und gemeinsam bearbeiten. - Live-Cursor mit farbigen Pfeilen und Namens-Pills - Präsenz-Avatare - Folgemodus — auf einen Peer klicken, um seinem Viewport zu folgen - Lokale Persistenz via IndexedDB - Sichere Raum-IDs via `crypto.getRandomValues()` ## Desktop & Web **Desktop** — Tauri v2, ~7 MB. macOS (signiert & notarisiert), Windows, Linux. Native Menüs, Offline-Betrieb, automatisches Speichern. **Web** — läuft unter [app.openpencil.dev](https://app.openpencil.dev), als PWA auf Mobilgeräten installierbar mit touch-optimierter Oberfläche. **Homebrew:** ```sh brew install open-pencil/tap/open-pencil ``` ## Google Fonts Fallback Wenn eine Schriftart lokal nicht verfügbar ist, lädt OpenPencil sie automatisch von Google Fonts. Keine manuelle Installation nötig beim Öffnen von .fig-Dateien mit unbekannten Schriften.