Figma Plugins sind Drittanbieter-Erweiterungen, die über die Figma Community installiert werden und den Design-Workflow durch zusätzliche Funktionen erweitern – von Icon-Bibliotheken und Stock-Fotos über Barrierefreiheitsprüfungen bis hin zu Code-Export-Tools.
Rubrik: Software & Tools · Unterrubrik: Figma · Niveau: Einsteiger Synonyme / Auch bekannt als: Figma Extensions, Third-Party Plugins; Zugang über Figma Community (figma.com/community)
Was sind Figma Plugins?
Figma öffnete seine Plattform 2019 für Drittanbieter-Plugins. Seitdem hat sich eine umfangreiche Ökosystem aus tausenden kostenlosen und kostenpflichtigen Plugins entwickelt, die nahezu jeden Aspekt des Design-Workflows verbessern: Icon-Bibliotheken, Placeholder-Inhalte, Barrierefreiheitsprüfungen, Code-Export, Animationen, Übersetzungen, Datenvisualisierung und vieles mehr.
Plugins laufen direkt in Figma und können über das Figma-Community-Portal gesucht, installiert und bewertet werden. Viele der populärsten Plugins sind kostenlos, manche bieten Premium-Features gegen Gebühr.
Erklärung
Plugins installieren und ausführen
- Im Figma-Interface: Rechtsklick auf die Canvas → „Plugins" → „Find more plugins" (oder über das Figma-Logo-Menü → Plugins → Community).
- Im Browser: figma.com/community → Plugins-Tab.
- Plugin auswählen → „Install" klicken.
- Installed Plugin ausführen: Rechtsklick auf Canvas → „Plugins" → Plugin-Name auswählen; oder über das Figma-Menü → Plugins.
Plugins können auch durch einen Shortcut geöffnet werden: Im Figma-Menü → Plugins → Tastaturkürzel „Recent Plugins".
Kategorie: Icon-Bibliotheken
Iconify (kostenlos): Zugriff auf über 150.000 Icons aus 100+ Icon-Sets (Material Design Icons, Feather Icons, Phosphor Icons, Heroicons, Font Awesome und viele mehr) direkt in Figma. Icons werden als vektorielle Figma-Komponenten eingefügt und lassen sich sofort anpassen. Eines der meistgenutzten Plugins überhaupt.
Material Symbols (kostenlos, Google): Direktzugriff auf Googles Material Design 3 Icon-Set mit über 2.500 Icons in verschiedenen Stilen (Outlined, Filled, Rounded, Sharp) und Variablen für Weight, Grade und Size.
Kategorie: Inhalte und Placeholder
Unsplash (kostenlos): Einfügen von qualitativ hochwertigen Stock-Fotos aus der Unsplash-Datenbank direkt in Figma, ohne den Browser öffnen zu müssen. Fotos können als Fill in bestehende Formen eingefügt werden. Unverzichtbar für realistische Mockups.
Content Reel (kostenlos): Füllt Textfelder mit realistischen Platzhalter-Inhalten (Namen, Adressen, E-Mail-Adressen, Telefonnummern, Lorem Ipsum) per Zufallsgenerator. Verhindert unrealistische „Lorem Ipsum"-Layouts.
UI Faces (kostenlos/premium): Fügt realistische Placeholder-Profilfotos (Avatare) für User-Interface-Designs ein.
Kategorie: Barrierefreiheit
Stark (freemium): Das führende Barrierefreiheits-Plugin für Figma. Prüft Kontrastverhältnisse (WCAG 2.1 AA/AAA), simuliert Farbsehschwächen (8 Arten, inkl. Protanopie, Deuteranopie), prüft Tap-Target-Größen und generiert Barrierefreiheits-Berichte. Ein unverzichtbares Tool für jeden Designer, der WCAG-konforme Designs erstellt.
A11y - Annotation Kit (kostenlos): Ermöglicht Barrierefreiheits-Annotationen direkt im Design (Lesereihenfolge, ARIA-Labels, Tastaturnavigation), die für Entwickler beim Handoff sichtbar sind.
Kategorie: Flows und Diagramme
Autoflow (kostenlos): Zeichnet automatisch Flow-Pfeile zwischen Frames für User-Flow-Diagramme. Einfach zwei Frames auswählen, das Plugin ausführen und ein beschriftbarer Pfeil erscheint.
Figma Flowkit (kostenpflichtig): Umfassendes Flowchart- und Diagram-Kit mit vordefinierten Shapes für User Flows, Site Maps, Wireframes und mehr.
Kategorie: Code und Entwickler-Handoff
Anima (freemium): Exportiert Figma-Designs als React-, HTML/CSS- oder Vue.js-Code. Besonders nützlich für Prototypen, die in Code überführt werden sollen.
Locofy Lightning (freemium): Generiert produktionsfähigen React- oder Next.js-Code aus Figma-Designs mit Auto-Layout-Unterstützung.
Figma to HTML (kostenlos): Einfacheres HTML/CSS-Export-Plugin für kleinere Projekte.
Kategorie: Design-System-Verwaltung
Tokens Studio for Figma (ehemals Figma Tokens, freemium): Das mächtigste Token-Management-Plugin: Synchronisiert Design Tokens zwischen Figma und Code-Repositories (GitHub, GitLab), unterstützt JSON-Export für Style Dictionary und Token-Aliasing über Figmas native Variables-Funktion hinaus.
Figma Cleaner (kostenlos): Bereinigt Figma-Dateien von ungenutzten Styles, Components und Fonts. Hält große Dateien performant.
Kategorie: Produktivität
Lorem ipsum (kostenlos): Füllt Text-Elemente schnell mit Lorem-Ipsum-Platzhaltertext verschiedener Länge.
Similayer (kostenlos): Wählt alle Layer aus, die bestimmte Eigenschaften teilen (gleiche Farbe, gleicher Style, gleicher Font). Extrem nützlich für das Massenbearbeiten von Elementen.
Find and Replace (kostenlos): Sucht Text-Inhalte in der Figma-Datei und ersetzt sie – ähnlich wie „Suchen und Ersetzen" in einem Texteditor.
Scale (kostenlos): Skaliert Elemente prozentual oder auf eine bestimmte Größe – besonders nützlich, wenn proportionale Skalierung ohne die Standard-Skalierung von Figma nötig ist.
Kategorie: Animationen
LottieFiles (kostenlos): Ermöglicht den Import von Lottie-JSON-Animationen in Figma und deren Vorschau direkt in der Canvas. Lottie-Animationen sind JSON-basierte, skalierbare Vektoranimationen, die in Web- und App-Projekten eingesetzt werden.
Motion (freemium): Erstellt komplexere Animationen in Figma, die als Lottie oder CSS exportiert werden können.
Kategorie: Daten und Visualisierung
Chart (kostenlos): Erstellt Diagramme (Balken, Linien, Kuchen, Scatter) direkt in Figma aus eingegebenen oder importierten Daten.
Datavizer (freemium): Erweiterte Datenvisualisierung für Dashboard-Designs.
Beispiele
- Vollständiges Icon-Set: Iconify installieren, 120 Icons aus dem Feather-Set als Figma-Komponenten einfügen, alle in eine Icon-Bibliothek organisieren.
- Realismus-Boost im Mockup: Unsplash für Hintergrundbilder, Content Reel für Namen und Texte, UI Faces für Profilfotos – ein Wireframe wird in Minuten zu einem realistischen Mockup.
- Barrierefreiheits-Check: Stark vor Übergabe an Entwicklung ausführen – Kontrast-Check aller Textelemente, Farbsehschwäche-Simulation für das gesamte Design.
- User-Flow-Diagramm: Autoflow nutzen, um alle Screen-Verbindungen mit beschrifteten Pfeilen zu visualisieren.
- Token-Synchronisation: Tokens Studio nutzen, um Design-Tokens aus Figma automatisch per GitHub-Action in das CSS-Projekt zu synchronisieren.
In der Praxis
Shortcuts:
- Zuletzt verwendetes Plugin ausführen:
Strg+Alt+P/Cmd+Option+P - Plugin-Menü öffnen: Rechtsklick → Plugins
Best Practices:
- Plugin-Bibliothek regelmäßig überprüfen – viele Plugins werden nicht mehr gepflegt. Auf Installations-Zahlen und letztes Update-Datum achten.
- Nur Plugins von verifizierten Publishern installieren, da Plugins auf die Canvas und Layer zugreifen.
- Die besten kostenfreien Pflicht-Plugins: Iconify, Unsplash, Stark, Content Reel, Autoflow.
- Nicht zu viele Plugins installieren – das verlangsamt das Figma-Interface nicht direkt, aber es ist übersichtlicher, mit wenigen, gut ausgewählten Plugins zu arbeiten.
Häufige Fehler:
- Veraltete Plugins verwenden, die nicht mehr mit der aktuellen Figma-API kompatibel sind – prüfen, wann das Plugin zuletzt aktualisiert wurde.
- Kostenpflichtige Plugins kaufen, ohne die Testversion zu evaluieren.
Vergleich & Abgrenzung
Das Figma-Plugin-Ökosystem ist das umfangreichste unter den Design-Tools. Sketch hat ebenfalls Plugins, aber eine kleinere Community. Adobe XD wurde eingestellt, weshalb sein Plugin-Ökosystem nicht mehr relevannt ist. Adobe Creative Cloud hat eine eigene Plugin-Plattform (Creative Cloud Marketplace), die aber auf den gesamten CC-Stack ausgerichtet ist. Figma bleibt das Design-Tool mit der aktivsten Plugin-Entwickler-Community und den meisten professionell gepflegten Erweiterungen.
Häufige Fragen (FAQ)
Sind Figma-Plugins sicher? Figma-Plugins können auf Layer und Text zugreifen, aber nicht auf externe Dateien oder das Betriebssystem. Offizielle Plugins aus der Figma-Community werden von Figma überprüft. Trotzdem sollte man nur Plugins von bekannten Publishern oder mit großer Nutzer-Community installieren. Figma zeigt an, welche Berechtigungen ein Plugin anfordert.
Kann ich eigene Plugins entwickeln? Ja, Figma bietet ein Plugin-API auf Basis von JavaScript/TypeScript. Eigene Plugins können lokal entwickelt, intern geteilt oder in der Community veröffentlicht werden. Die Figma Plugin-Dokumentation unter figma.com/plugin-docs ist der Startpunkt.
Kosten Premium-Plugins einmalig oder als Abo? Beides ist möglich. Manche Premium-Plugins haben ein Einmal-Kaufmodell, andere ein monatliches Abo. Im Figma-Community-Portal wird das Preismodell angegeben.
Verwandte Einträge
Weiterführend
- Figma Community Plugins – figma.com/community/plugins
- Figma Plugin API Docs – figma.com/plugin-docs
- Flux Academy: „Top 10 Figma Plugins 2024" (YouTube, 2024)
