15 KiB
15 KiB
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 | ✅ | Erstellung aus Frame/Gruppe; UI für Text, Sichtbarkeit, Instanztausch und Varianten |
| Komponenten-Sets | ✅ | Mehrdimensionale, lückenhafte Varianten mit Duplikatprüfung und Standard oben links |
| Komponenteninstanzen | ✅ | Assets-Browser, Einfügen, bearbeitbare Eigenschaften und Overrides, Live-Sync und Update-Prüfung |
| Varianten | ✅ | Authoring, Instanzwechsel und Fallback auf die Variante oben links |
| Komponenteneigenschaften | ✅ | Text-, boolesche Sichtbarkeits- und 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) | ✅ | Unveränderliche lokale/Speicher-Revisionen, Aktivierung, selektive Veröffentlichung, Update-Prüfung, Offline-Nutzung und .fig-Persistenz |
| 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 |