Figma ist ein webbasiertes Designwerkzeug zur Erstellung von Benutzeroberflächen, Prototypen und Grafiken. Eine seiner wichtigsten Funktionen - die Möglichkeit, Plugins zu verbinden - erweitert die Funktionalität des Editors. In diesem Artikel haben wir 42 beliebte Plugins ausgewählt, die für Webdesigner und alle, die mit Figma arbeiten, nützlich sind. Mit dieser Sammlung wird die Gestaltung eines Website-Layouts schneller und angenehmer.
Inhalt:
Plugins für Bilder, Icons und Formen
Fügen Sie kostenlose, hochwertige Bilder in Ihre Designs ein. Mit diesem Plugin haben Sie freien Zugang zu einer umfangreichen Fotobibliothek, ohne den Editor zu verlassen.
Durchsuchen Sie Illustrationen verschiedener Künstler, fügen Sie sie in Ihr Layout ein und ordnen Sie sie in beliebiger Reihenfolge an. Sie können diese Illustrationen sowohl in persönlichen als auch in kommerziellen Projekten verwenden.
Entfernen Sie den Hintergrund von jedem Bild in Sekundenschnelle. Nach dem Entfernen des Hintergrunds behält das Bild seine ursprüngliche Größe und Qualität.
Fügen Sie hochauflösende Bilder in Figma ein, ohne deren Qualität zu verlieren.
Entfernt automatisch alle zusätzlichen transparenten Pixel um ein Bild herum. Wenn Sie z. B. einen Hintergrund aus einem Foto entfernen, um ein Objekt zu isolieren, bereinigt dieses Plugin den verbleibenden transparenten Bereich, sodass sich das endgültige Bild leichter bewegen und positionieren lässt.
- Federsymbole: Eine Sammlung von Umriss-Symbolen (Striche).
- Iconic Icon Set öffnen: Bietet einfarbige (gefüllte) Icons. Verwenden Sie diese für Bereiche wie Dienste, Leistungen oder Zeitpläne.
Eine Bibliothek mit Emojis im klassischen Stil zum schnellen Einfügen in Figma. Alle Emojis haben einen einheitlichen Stil und sind nach Kategorien gruppiert.
- Blobs erzeugt zufällige Vektorformen, die Tintenklecksen ähneln.
- Wave&Curve erzeugt verschiedene Kurven und Wellen.
Eine kategorisierte Sammlung von trendigen und klassischen Formen. Sie können diese Formen in persönlichen und kommerziellen Projekten verwenden.
Anordnen von Text oder Formen entlang einer Kurve (z. B. um einen Halbkreis).
Vektorformen verzerren, verbiegen oder verzerrt darstellen.
Erzeugt grobe, handgezeichnete Vektorformen. Nützlich für die Schaffung einer skizzenartigen Ästhetik in Website-Layouts.
Bei Tilda können Sie mit allen vorgefertigten Blöcken und Zero Block Vektorelemente hochladen, bearbeiten und von Grund auf neu erstellen - ohne zusätzliche Werkzeuge.
Wussten Sie schon?
Plugins für die Arbeit mit Farben, Schatten und Texturen
Erzeugt eine Farbpalette aus einem beliebigen Bild - praktisch, wenn Sie Markenfarben mit einem Referenzfoto eines Kunden abgleichen müssen.
Wählen Sie aus über 350 Farbverläufen, die Sie mit einem einzigen Klick auf Rahmen, Gruppen und Text anwenden können.
Erzeugt strukturierte Farbverläufe mit einem "Körnungs"-Effekt. Sie können die Intensität des Rauschens steuern.
Simuliert, wie Menschen mit verschiedenen Formen der Farbenblindheit Ihr Layout wahrnehmen, und hilft so, die Zugänglichkeit für alle Nutzer zu gewährleisten.
Fügt Rauschen, Texturen, Muster und Farbverläufe hinzu. Sie können die Mischmodi und Überlagerungseinstellungen für den gewünschten Effekt anpassen.
Sie können verschiedene Filter auf Bilder anwenden und beliebte Effekte wie Skeuomorphismus, Neon, Glitch, Reflexionen, Glas und Farbverlaufsüberlagerungen erstellen.
Ermöglicht es Ihnen, verschiedene Schlagschatteneffekte zu erzeugen, indem Sie eine "Lichtquelle" um ausgewählte Elemente ziehen.
Plugins für 3D-Objekte und Animation
Eine Bibliothek mit 3D-Elementen und Illustrationen, die alle unter einer Creative-Commons-Lizenz für die kommerzielle Nutzung frei sind.
Verzerrt Oberflächenelemente oder Bilder perspektivisch, indem Winkel und Achsen angepasst werden.
Transformiert ein Bild oder eine Form in eine 3D-Welle. Zum Beispiel wird ein mit einem Farbverlauf gefülltes Rechteck in eine wellenförmige Oberfläche verwandelt.
Erstellt fortschrittliche Animationen in Figma, die mit After Effect vergleichbar sind - ideal für die Vorschau von Web-Animationen vor der Entwicklung.
Animation im Web
Kostenlose Anleitung mit Schritt-für-Schritt-Anweisungen für beliebte Animationseffekte
Animiert Text nach Buchstaben, Wörtern, Zeilen oder Absätzen. Wählen Sie aus vordefinierten Vorlagen oder entwerfen Sie Ihre eigenen Effekte.
Wendet einen Parallaxen-Effekt an: Objekte im Hintergrund bewegen sich langsamer als die im Vordergrund, wodurch eine Illusion von Tiefe entsteht.
Figma-Plugins für Texte
Ermöglicht es Ihnen, Ihr Layout schnell mit Platzhalterdaten zu füllen, z. B. mit Namen, Adressen, Telefonnummern und E-Mail-Adressen.
Krümmt Text in Bögen oder Kreise. Verwenden Sie es zum Beispiel, um Text entlang eines Halbkreises anzuordnen.
Ein Plugin, das automatisch die Kontrastverhältnisse von Farben auf einer Webseite überprüft. Es funktioniert mit allen Elementen und Abschnitten einer Website, einschließlich Textblöcken.
Überprüft schnell die Anzahl der Zeichen und Zeilen in einem Textblock, um sicherzustellen, dass er die Zeichengrenzen einhält und sich nahtlos in das Layout oder die Oberfläche einfügt.
Füllt eine ausgewählte Form mit Text.
Plugins mit Mockups
Eine Bibliothek mit Mockups für praktisch jeden Produkttyp. Mit einem Mausklick verwandeln sich Rahmen in reale Produktpräsentationen.
Eine Sammlung von 3D-Gerätemodellen (Telefone, Laptops usw.) mit einstellbarer Modellart, Farbe und Betrachtungswinkel.
Ein großer Satz von Geräte-Mockups - Telefone, Tablets und Laptops. Die kostenlose Version enthält eine begrenzte Auswahl aus jeder Kategorie, während ein kostenpflichtiges Abonnement die gesamte Sammlung freischaltet.
Andere nützliche Plugins
Ermöglicht den Import von Tildas Zero Block und deren Anzeige als Rasterstile, so dass diese nicht mehr manuell in Figma erstellt werden müssen. Dies vereinfacht die Arbeit mit Rahmen und die Vorbereitung Ihrer Layouts für die Übertragung nach Tilda.
Eine umfangreiche Bibliothek von Wireframe-Vorlagen für das Rapid Prototyping. Ideal, um eine neue Schnittstelle zu entwickeln oder erste Konzepte zu testen. Jede Datei liegt im SVG-Format vor und lässt sich leicht bearbeiten.
Ermöglicht die mühelose Erstellung verschiedener Arten von Tabellen. Nützlich, wenn das Layout Ihrer Website eine tabellarische Struktur erfordert.
Unerwünschte Elemente in einem Projekt, wie Hyperlinks, Stile, Variablen usw., können mit einer einzigen Aktion schnell gelöscht werden.
Wie man Plugins in Figma installiert
Plugins für Figma sind in der Figma Community erhältlich, die wie ein mobiler App Store funktioniert. Sie können nach Schlüsselwörtern suchen, die Anzahl der Installationen einsehen und Bewertungen lesen. Nach der Installation bleiben die Plugins an Ihr Konto gebunden, sodass Sie auf Ihre Favoriten von jedem Gerät aus zugreifen können.
Wie man ein Plugin über die Figma Community installiert
1
Starten Sie die Figma Desktop App oder öffnen Sie die Figma Web App in Ihrem Browser.
2
Klicken Sie auf das Figma Community-Symbol in der unteren linken Ecke. Wenn Sie einen direkten Link zu einem Plugin haben, können Sie es sofort öffnen oder nach dem Namen suchen.
3
Klicken Sie in der Plugin-Karte auf Öffnen in... und wählen Sie dann das Projekt, in dem Sie das Plugin verwenden möchten. Um das Plugin für eine spätere Verwendung zu speichern, klicken Sie auf das Flaggensymbol.
So installieren Sie ein Plugin über die Projektseite
1
Öffnen Sie Ihr Projekt. Wählen Sie in der oberen Symbolleiste Ressourcen und wechseln Sie dann zur Registerkarte Plugins.
2
Geben Sie den Titel des Plugins in das Suchfeld ein.
3
Klicken Sie auf das Flaggensymbol, um das Plugin zu speichern. Wenn Sie auf die drei Punkte klicken und Details anzeigen wählen, öffnet sich ein Fenster mit weiteren Informationen über das Plugin. Um es zu starten, klicken Sie auf Ausführen.
Wo Sie gespeicherte Plugins finden
Sie können Ihre gespeicherten Plugins über die Projekt-Symbolleiste finden: Ressourcen → Plugins → Gespeicherte.
Um ein gespeichertes Plugin zu entfernen, klicken Sie einfach erneut auf das Flaggensymbol. Plugins erscheinen automatisch unter " Recents", nachdem Sie sie in einem Projekt gestartet haben.
Um ein gespeichertes Plugin zu entfernen, klicken Sie einfach erneut auf das Flaggensymbol. Plugins erscheinen automatisch unter " Recents", nachdem Sie sie in einem Projekt gestartet haben.
Wenn Ihnen der Artikel gefallen hat, teilen Sie ihn mit Ihren Freunden. Vielen Dank dafür!
Lesen Sie auch:
Kostenloses Kursbuch über das Entwerfen, Einrichten und Betreiben von
Landing Pages mit hoher Konversionsrate
Landing Pages mit hoher Konversionsrate
Kostenloser praktischer Leitfaden für Webanimation mit Beispielen und Techniken,
und Tipps zu ihrer Verwendung
