openpencil/packages/docs/de/reference/figma-compatibility.md

Figma-Funktionsmatrix

Feature-für-Feature-Vergleich der Figma-Design-Funktionen mit dem aktuellen Implementierungsstand von Open Pencil.

::: tip Statuslegende ✅ Unterstützt — Funktion funktioniert vollständig · 🟡 Teilweise — Grundverhalten vorhanden, einige Unterfunktionen fehlen · 🔲 Noch nicht implementiert :::

Abdeckung: 94 von 158 Figma-Feature-Punkten adressiert — 76 ✅ vollständig unterstützt, 18 🟡 teilweise, 64 🔲 noch nicht. Zuletzt aktualisiert: 2026-03-07.

Benutzeroberfläche & Navigation

Funktion	Status	Anmerkungen
Werkzeugleiste mit Design-Tools	✅	Untere Leiste (UI3-Stil): Auswählen, Frame, Sektion, Rechteck, Ellipse, Linie, Text, Hand, Stift
Ebenen-Panel (linke Seitenleiste)	✅	Baumansicht mit Auf-/Zuklappen, Drag-Neuordnung, Sichtbarkeits-Toggle; skalierbare Breite
Seiten-Panel	✅	Seiten hinzufügen, löschen, umbenennen; Viewport-Zustand pro Seite
Eigenschafts-Panel (rechte Seitenleiste)	✅	Abschnitte: Darstellung, Füllung, Kontur, Effekte, Typografie, Layout, Position; skalierbare Breite
Zoom & Schwenken	✅	Strg+Scroll, Pinch, ⌘+ / ⌘− / ⌘0, Leertaste+Ziehen, mittlere Maustaste, Hand-Werkzeug (H)
Canvas-Lineale	✅	Oben/links Lineale mit Auswahl-Bändern und Koordinaten-Badges
Canvas-Hintergrundfarbe	✅	Pro-Seite-Hintergrund über Eigenschafts-Panel
Canvas-Hilfslinien	🔲	Figma unterstützt ziehbare Hilfslinien von Linealen
Aktionsmenü / Befehlspalette	🔲	Figmas Schnellaktionssuche
Kontextmenü	✅	Rechtsklick mit Zwischenablage, Z-Ordnung, Gruppierung, Komponente, Sichtbarkeit, Sperre, Verschieben
Tastaturkürzel	🟡	Kern-Kürzel + Komponenten + Z-Ordnung + Sichtbarkeit/Sperre implementiert; Skalieren, Pfeil, Bleistift, Spiegeln, Textformatierung noch nicht verbunden
Suchen und Ersetzen	🔲	Textsuche/-ersetzung im gesamten Dokument
Ebenenumriss-Ansicht	🔲	Drahtgitteransicht aller Ebenen
Benutzerdefinierte Dateiminiatur	🔲	Miniatur beim Export generiert, aber kein benutzerdefinierter Auswähler
Nudge-Wert-Einstellungen	🔲	Standard 1px/10px; Figma erlaubt benutzerdefinierte Werte
App-Menü (Browser-Modus)	✅	Datei, Bearbeiten, Ansicht, Objekt, Text, Anordnen; Tauri verwendet native Menüs
KI-Werkzeuge	🟡	90+ Werkzeuge via Anthropic, OpenAI, Google AI, OpenRouter + MCP-Server; noch keine KI-generierten Bilder oder KI-Suche

Ebenen & Formen

Funktion	Status	Anmerkungen
Formwerkzeuge (Rechteck, Ellipse, Linie, Polygon, Stern)	✅	Alle Grundformtypen; Polygonseitenzahl und Stern-Innenradius konfigurierbar
Frames	✅	Inhalt beschneiden, unabhängiges Koordinatensystem
Gruppen	✅	⌘G zum Gruppieren, ⇧⌘G zum Entgruppieren
Sektionen	✅	Titel-Pills, automatische Übernahme überlappender Knoten, luminanzadaptiver Text
Bogen-Werkzeug (Bögen, Halbkreise, Ringe)	✅	arcData mit Start-/Endwinkel und Innenradius
Bleistift (Freihand-Werkzeug)	🔲	Figmas Freihand-Zeichenwerkzeug
Masken	🔲	Formmasken zum Beschneiden von Ebenen
Ebenentypen & Hierarchie	✅	17 Knotentypen, flache Map + Eltern-Kind-Baum
Ebenen auswählen	✅	Klick, Umschalt-Klick, Markierungsauswahl
Ausrichtung & Position	✅	Position, Drehung, Abmessungen im Panel
Objekte kopieren & einfügen	✅	Standard-Zwischenablage + Figma-Kiwi-Binärformat
Ebenen proportional skalieren	🟡	Umschalt-Resize hält Proportionen; kein dediziertes Scale-Werkzeug (K)
Ebenen sperren/entsperren	✅	⇧⌘L schaltet Sperre um
Ebenensichtbarkeit umschalten	✅	Augen-Icon im Panel + ⇧⌘H-Kürzel
Ebenen umbenennen	✅	Doppelklick-Inline-Umbenennen; Enter/Escape/Blur zum Bestätigen
Nach vorne / Nach hinten	✅	] und [ Tastaturkürzel; auch im Kontextmenü
Auf Seite verschieben	✅	Knoten zwischen Seiten verschieben via Kontextmenü
Einschränkungen (responsives Resize)	🔲	Kanten/Mitte fixieren für Eltern-Resize-Verhalten
Intelligente Auswahl (verteilen/ausrichten)	🔲	Gleichmäßig verteilen und ausrichten
Layout-Hilfslinien (Spalten, Zeilen, Raster)	🔲	Spalten-/Zeilen-/Raster-Hilfslinien auf Frames
Abstände zwischen Ebenen messen	🔲	Alt-Hover zeigt Abstände
Objekte in Masse bearbeiten	✅	Multi-Selektion-Panel: gemeinsame Werte normal, unterschiedliche zeigen „Mixed"
Übereinstimmende Objekte identifizieren	🔲	Ähnliche Ebenen finden
Eigenschaften kopieren/einfügen	🔲	Füllung/Kontur/Effekte zwischen Ebenen kopieren
Eltern-Kind-Beziehungen	✅	Vollständige Hierarchie mit parentIndex, Drag-Reparenting

Vektor-Werkzeuge

Funktion	Status	Anmerkungen
Vektornetzwerke	✅	Figma-kompatibles Modell, keine einfachen Pfade
Stift-Werkzeug	✅	Eckpunkte, Bézier-Kurven, offene/geschlossene Pfade
Vektorebenen bearbeiten	🟡	Erstellung funktioniert; fortgeschrittene Vertex-Bearbeitung begrenzt
Boolesche Operationen (Vereinigen, Subtrahieren, Schneiden, Ausschließen)	🔲	Formen mit Bool-Operationen kombinieren
Ebenen abflachen	🔲	Vektorpfade zusammenführen
Konturen in Pfade umwandeln	🔲	Outline-Stroke-Befehl
Text in Pfade umwandeln	🔲	Text zu Vektorkonturen abflachen
Shape-Builder-Werkzeug	🔲	Interaktives Bool-Werkzeug
Pfad-Offset	🔲	Inset/Outset eines Vektorpfads
Pfad vereinfachen	🔲	Vektorpunktanzahl reduzieren

Text & Typografie

Funktion	Status	Anmerkungen
Textwerkzeug & Inline-Bearbeitung	✅	Canvas-native Bearbeitung, Phantom-Textarea, Style-Runs (⌘B / I / U, S-Button)
Textrendering (Paragraph API)	✅	CanvasKit Paragraph für Formgebung, Zeilenumbrüche, Metriken
Schriftladung (Systemschriften)	✅	Inter Standard, font-kit in Tauri mit OnceLock-Cache, queryLocalFonts im Browser
Schriftfamilie & -stärke	✅	FontPicker mit virtuellem Scrollen, Suche, CSS-Vorschau
Schriftgröße & Zeilenhöhe	✅	Bearbeitbar im Typografie-Abschnitt
Textausrichtung	🟡	Grundausrichtung; Figma hat vertikale Ausrichtung und Auto-Breite/-Höhe-Modi
Textstile	🟡	Fett/Kursiv/Unterstrichen/Durchgestrichen pro Auswahl; noch keine wiederverwendbaren benannten Stil-Presets
Text-Resize-Modi	🔲	Figmas Auto-Breite, Auto-Höhe, Fixgröße-Modi
Aufzählungs- & nummerierte Listen	🔲	Listenformatierung im Text
Links im Text	🔲	Hyperlinks innerhalb von Textinhalten
Emojis & intelligente Symbole	🔲	Emoji-Rendering und Sonderzeichen
OpenType-Funktionen	🔲	Ligaturen, stilistische Alternativen, Tabellenziffern
Variable Schriften	🔲	Einstellbare Schriftachsen (Stärke, Breite, Neigung)
CJK-Textunterstützung	🔲	Chinesisches, japanisches, koreanisches Textrendering
RTL-Textunterstützung	🔲	Rechts-nach-links-Textlayout
Icon-Schriften	🔲	Spezielle Behandlung für Icon-Schrift-Glyphen

Farbe, Verläufe & Bilder

Funktion	Status	Anmerkungen
Farbauswahl (HSV)	✅	HSV-Quadrat, Farbton-Regler, Alpha-Regler, Hex-Eingabe
Einfarbige Füllungen	✅	Hex-Farbe mit Deckkraft
Linearer Verlauf	✅	Verlaufsstopps, Transformationsgriffe
Radialer Verlauf	✅	Gerendert über CanvasKit-Shader
Winkel-Verlauf	✅	Sweep-/konischer Verlauf
Diamant-Verlauf	✅	Vierpunkt-Diamant-Verlauf
Bildfüllungen	✅	Aus Blob-Daten dekodiert mit Skalierungsmodi (Füllen, Anpassen, Beschneiden, Kacheln)
Musterfüllungen	🔲	Sich wiederholende Bild-/Musterfüllungen
Mischmodi	🔲	Ebenen- und Füllungs-Mischmodi (Multiplizieren, Negativ Multiplizieren, Überlagern usw.)
Bilder & Videos hinzufügen	🟡	Bildfüllungen gerendert; kein Drag-and-Drop-Import oder Video-Unterstützung
Bild-Eigenschaftsanpassung	🔲	Belichtung, Kontrast, Sättigung usw.
Bild zuschneiden	🔲	Interaktives Bildzuschneiden
Pipetten-Werkzeug	🔲	Farben vom Canvas aufnehmen
Farbbearbeitung bei gemischter Auswahl	🔲	Farben in heterogener Auswahl anpassen
Farbmodelle (RGB, HSL, HSB, Hex)	🟡	HSV + Hex im Picker; kein HSL- oder RGB-Modus-Umschalter

Effekte & Eigenschaften

Funktion	Status	Anmerkungen
Schlagschatten	✅	Versatz, Unschärferadius, Farbe über CanvasKit-Filter
Innerer Schatten	✅	Eingefügter Schatteneffekt
Ebenen-Unschärfe	✅	Gaußsche Unschärfe auf der Ebene
Hintergrund-Unschärfe	✅	Inhalt hinter der Ebene unscharf
Vordergrund-Unschärfe	✅	Unschärfe im Vordergrund
Konturstärke	✅	Konfigurierbar im Eigenschafts-Panel
Kontur-Endung (Rund, Quadrat, Pfeil)	✅	NONE, ROUND, SQUARE, ARROW_LINES, ARROW_EQUILATERAL
Kontur-Verbindung (Gehrung, Abschrägung, Rund)	✅	Alle drei Verbindungstypen
Strichmuster	✅	Strich-An/Strich-Aus-Muster
Eckenradius	✅	Einheitlicher und pro-Ecke-Radius mit unabhängigem Toggle
Eckenglättung (iOS-Stil)	🔲	Figmas kontinuierliche Eckenabrundung
Mehrere Füllungen/Konturen pro Ebene	🔲	Figma erlaubt gestapelte Füllungen und Konturen

Auto Layout

Funktion	Status	Anmerkungen
Horizontaler & vertikaler Fluss	✅	Yoga-WASM-Flexbox-Engine
Auto Layout umschalten (⇧A)	✅	Auf Frame umschalten oder Auswahl umhüllen
Gap (Abstand zwischen Kindern)	✅	Konfigurierbar im Panel
Padding (einheitlich & pro Seite)	✅	Alle vier Seiten unabhängig
Justify Content	✅	Start, Center, End, Space-Between
Align Items	✅	Start, Center, End, Stretch
Kindgröße (fix, füllen, anpassen)	✅	Größenmodi pro Kind
Wrap	✅	Flex-Wrap für mehrzeiliges Layout
Grid-Auto-Layout-Fluss	✅	CSS Grid über Yoga-Fork — Spalten-/Zeilen-Tracks, Gaps, Spans
Kombinierte Flüsse (verschachtelt)	✅	Verschachtelte Auto-Layout-Frames mit verschiedenen Richtungen
Drag-Neuordnung in Auto Layout	✅	Visueller Einfügeindikator
Min/Max Breite und Höhe	🔲	Figma unterstützt Min/Max-Einschränkungen

Komponenten & Design-Systeme

Funktion	Status	Anmerkungen
Komponenten erstellen	🟡	⌥⌘K erstellt aus Frame/Gruppe; noch kein Komponenten-Eigenschafts-UI
Komponenten-Sets	🟡	⇧⌘K kombiniert Komponenten; gestrichelter violetter Rand; keine Varianten-Eigenschaftsbearbeitung
Komponenteninstanzen	🟡	Instanz aus Kontextmenü erstellen; Live-Sync; kein Override-Bearbeitungs-UI
Varianten	🔲	Variantenwechsel und eigenschaftsbasierte Auswahl
Komponenteneigenschaften	🔲	Boolesche, Text-, Instanztausch-Eigenschaften
Override-Propagation	✅	Änderungen an Hauptkomponente werden propagiert; Overrides erhalten
Variablen (Farbe, Zahl, String, Boolean)	🟡	COLOR mit vollem UI; FLOAT/STRING/BOOLEAN definiert ohne Bearbeitungs-UI
Variablensammlungen & Modi	🟡	Sammlungen, Modi, activeMode-Wechsel funktionieren; kein Variablen-Theming-UI
Stile (Farbe, Text, Effekt, Layout)	🔲	Wiederverwendbare benannte Stil-Presets
Bibliotheken (veröffentlichen, teilen, aktualisieren)	🔲	Geteilte Komponenten-/Stil-Bibliotheken
Instanz ablösen	✅	⌥⌘B wandelt Instanz in Frame um
Zur Hauptkomponente navigieren	✅	Zur Quellkomponente navigieren, seitenübergreifend

Prototyping

Funktion	Status	Anmerkungen
Prototyp-Verbindungen	🔲	Noch nicht unterstützt
Auslöser (Klick, Hover, Ziehen usw.)	🔲	Noch nicht unterstützt
Aktionen (Navigieren, Overlay, Scroll usw.)	🔲	Noch nicht unterstützt
Animationen & Übergänge	🔲	Noch nicht unterstützt
Smart Animate	🔲	Übereinstimmende Ebenen automatisch animieren
Overlays	🔲	Modale/Popover-Prototypen
Scroll- & Overflow-Verhalten	🔲	Scrollbare Frames in Prototypen
Prototyp-Flüsse	🔲	Benannte Startpunkte
Variablen in Prototypen	🔲	Bedingte Logik mit Variablen
Easing & Feder-Animationen	🔲	Benutzerdefinierte Animationskurven
Prototypen präsentieren & abspielen	🔲	Vollbild-Prototyp-Viewer

Import & Export

Funktion	Status	Anmerkungen
.fig-Datei-Import	✅	Vollständiger Kiwi-Codec: 194 Definitionen, ~390 Felder pro NodeChange
.fig-Datei-Export	✅	Kiwi-Encoding + Zstd-Kompression + Miniatur-Generierung
Speichern / Speichern unter	✅	⌘S / ⇧⌘S; native Dialoge (Tauri), File System Access API (Chrome/Edge), Download-Fallback (Safari)
Figma-Zwischenablage (Einfügen)	✅	Kiwi-Binär aus Figma-Zwischenablage dekodieren
Figma-Zwischenablage (Kopieren)	✅	Kiwi-Binär kodieren, das Figma lesen kann
Sketch-Datei-Import	🔲	.sketch-Datei-Parsing
Bild/SVG/PDF-Export	🟡	PNG/JPG/WEBP/SVG-Export ✅; PDF-Export 🔲
Versionsverlauf	🔲	Vorherige Versionen durchsuchen und wiederherstellen
Assets zwischen Tools kopieren	🟡	Figma-Zwischenablage funktioniert; kein SVG/PDF-Clipboard

Plugin-API & Scripting

Funktion	Status	Anmerkungen
Eval-Befehl mit Figma Plugin API	✅	Headless-JavaScript-Ausführung mit kompatiblem figma-Globalobjekt

Kollaboration & Entwicklermodus

Funktion	Status	Anmerkungen
Kommentare (Anheften, Threads, Auflösen)	🔲	Noch nicht unterstützt
Echtzeit-Multiplayer	✅	P2P via Trystero + Yjs CRDT, Cursor, Folgemodus; kein Server
Cursor-Chat	🔲	Inline-Chat-Blasen am Cursor
Branching & Merging	🔲	Versions-Branches für Design-Dateien
Entwicklermodus (Inspizieren)	🟡	Code-Tab zeigt JSX; keine CSS-Eigenschaften oder Handoff-Specs
Code Connect	🔲	Design-Komponenten mit Code verknüpfen
Code-Snippets	🟡	JSX-Export mit Hervorhebung und Kopieren; keine CSS/Swift/Kotlin-Snippets
Figma für VS Code	🔲	Editor-Plugin-Integration
MCP-Server	✅	@open-pencil/mcp mit stdio- und HTTP-Transporten sowie mehr als 90 Werkzeugen einschließlich Dateioperationen
CLI-Werkzeuge	✅	Headless-CLI: info, tree, find, export, analyze, node, pages, variables, eval; MCP-Server

Figma Draw

Funktion	Status	Anmerkungen
Illustrations-Werkzeuge	🔲	Spezialisierte Zeichenwerkzeuge von Figma Draw
Muster-Transformationen	🔲	Sich wiederholende Muster mit Transformationen erstellen