UI/UX-Design mit Figma, Teil 4 Die besten kostenlosen Erweiterungen für Figma

Anbieter zum Thema

Windhoff Group

Figma selbst bietet schon viel – wäre ohne Community-Inhalte allerdings deutlich weniger relevant. Erst mit den richtigen Erweiterungen sorgt das Prototyping-Tool für Effizienz und Spaß an der Arbeit.

Bevor man sich in die Tiefen der Plug-ins, Widgets und Bibliotheken stürzt, sollten die Figma-Grundlagen einigermaßen vertraut sein. Die Arbeit mit dem vielschichtigen Editor auf Ebene der Vektorgrafiken ist nicht gerade trivial, die Verwaltung eigener Assets verlangt nach Einarbeitung, Prototyping und sinnvolle Workflows wollen entwickelt werden – und anschließend kann man endlos Zeit in Details stecken.

UI- und UX-Design mit Figma

So mächtig und gut gestaltet der Figma-Kern auch sein mag, die Marktmacht lässt sich vor allem auf Community-Features zurückführen. Das beginnt mit der Möglichkeit, im Team kollaborativ zu designen. Vor allem dürften aber die vielen Bibliotheken mit Icons, Vorlagen, Grafiken, Demo-Apps und so weiter für eine gewisse Attraktivität sorgen. Man muss das Rad hier nicht ständig neu erfinden.

Neben den Bibliotheken, die selbst nichts weiter sind als Figma-Design-Dateien, gibt es noch Plug-ins und Widgets, die einem das Leben gehörig erleichtern können. Der Unterschied zwischen Plug-ins und Widgets ist eher marginal: Erstere laufen eigentlich eher im Hintergrund und sorgen dafür, dass Seiten/Pages wie gewünscht funktionieren. Widgets hingegen laufen direkt auf der Seite als grafisches, interaktives Element. So zumindest der Gedanke seitens Figma.

In der Praxis verschwimmen die Grenzen zwischen den Arten von Erweiterungen. Aber es ist auch egal, jede Wette, dass schon unser erster Tipp für manch einen Begeisterungssprung sorgt.

Figma to Code

Als Prototyping-Werkzeug dient Figma primär dazu, Designs für Apps und Webseiten zu kreieren und eine gewisse Grundfunktionalität zu simulieren. Mit Figma to Code, einer Erweiterung mit immerhin 1,3 Millionen Nutzern, schwingt sich Figma zum WYSIWYG-Editor auf: Designs werden per Klick in HTML-, Flutter-, Tailwind- oder SwiftUI-Code überführt, natürlich als Responsive Design.

Paper Wireframe Kit

Es gibt eine riesige Auswahl an Wireframe-Bibliotheken. Die grafische Ausgestaltung ist freilich Geschmackssache, aber wer ein an klassische Bleistiftzeichnungen angelehntes, freundliches Design mag, sollte Paper Wireframe Kit eine Chance geben. Mit vielen guten Beispielen, über 60 Komponenten, etlichen weiteren Icons und vernünftiger Navigation ist die Bibliothek definitiv ein Highlight.

User Flow Kit

Ähnlich populär wie Wireframe-Kits sind Komponentensammlungen zum Thema User Flow. Empfehlenswert ist hier zum Beispiel das User Flow Kit [https://www.figma.com/community/file/1196083494685833369], das zwar nicht zu den populärsten Vertretern gehört, aber sehr leichtgewichtig im Design und sehr generisch gehalten ist. Dadurch dürfte es für sehr viel Visualisierungen von Abläufen interessant sein.

Code Editor

UI/UX mag anfänglich vor allem im Grafikeditor stattfinden, über kurz oder lang geht es aber auch um Code. Es gibt massenhaft Möglichkeiten, Code-Blöcke darzustellen. Das Schöne an Code Editor von Dylan Freedman ist, dass sich hier tatsächlich eigener Code eingeben lässt, der dann samt Syntax-Highlighting für unter anderem HTML, C++, JSON, PHP, CSS und Python wahlweise in einem Light- oder Dark-Theme dargestellt wird. Auch nachträgliche Änderungen sind möglich. Das Widget ist praktisch zum Visualisieren, aber auch zum Diskutieren von Code.

Lorem Ipsum

Ein Plug-in, das mehr leistet, als der Name vermuten lässt. Lorem Ipsum macht zunächst aber genau das: Es füllt Ebenen mit Lorem-Ipsum-Platzfreihalter-Text. Neben dem Standard-Lorem-Ipsum können allerdings auch Personendaten erzeugt und verwendet werden, also beispielsweise Namen, Adressen, Job-Bezeichnungen und so weiter. Zum Ausfüllen von Formularen ein wahrer Segen! Noch besser: Das Plug-in kann Unsplash nach Bildern durchsuchen und diese zum Füllen von Formen verwenden.

Vectorize Image – Trace Image

Im Herzen ist Figma ein Editor für Vektorgrafiken – und da liegt es nahe, eingefügte Bitmaps zu vektorisieren. Eine von vielen Erweiterungen dafür ist Vectorize Image. Das Plug-in bietet dafür einen simplen Dialog, über den sich die Anzahl der Farben und ein paar weitere Parameter bestimmen lassen. Darüber lassen sich sehr reduzierte Ergebnisse erzielen, wie unten im Bild zu sehen, oder deutlich detailliertere Vektorgrafiken mit etlichen Dutzend Ebenen. Im Hintergrund werkelt übrigens Photopea.

Color Palettes

Gute Farbkombinationen zu finden ist nicht ganz trivial und spätestens, wenn die Zeit eine Rolle spielt, sind Helferlein für Zusammenstellungen ein Muss – wie zum Beispiel Color Palettes. Das simple Widget stellt allerlei Paletten zur Verfügung, fixe wie KI-generierte, und dazu Farbverläufe. Das Verhalten bei Klick auf eine Farbe lässt sich anpassen, standardmäßig wird direkt die Füllfarbe gesetzt. So geht die Arbeit sehr fix von der Hand.

Simple Markdown Notes

Figma-Projekte können bisweilen ausufernd groß werden, was nach ein wenig Organisation schreit. Es gibt Integrationen für Drittanbieter-To-Do-Listen, die obligatorische Jira-Anbindung und viele andere Spezialisten. Wer es etwas generischer und flexibler mag, wird mit Simple Markdown Notes glücklich werden.

Mit Markdown lassen sich problemlos eigene To-Do-Listen erstellen, aber auch übersichtliche Notizen oder ganze Dokumentationen. Dabei unterstützt das Widget auch Task-Lists, wie man sie zum Beispiel von der Markdown-Implementierung bei GitHub kennt. Über die Syntax „- [x]“ lassen sich so check- und uncheck-bare Listeneinträge erzeugen.

Jitter – Animation for Figma

Mit der Jitter-Erweiterung kommt Bewegung in Ihre Designs: Einfach eine Ebene auswählen, in Jitter öffnen, animieren und letztlich als GIF oder Video exportieren. Praktisch ist das zum Beispiel für Präsentationen oder Anzeigen.

Das Plug-in verzeichnet zwar stolze 189.000 Nutzer und ist kostenlos, allerdings weder völlig ausgereift noch ist der Jitter-Dienst komplett kostenlos. Hier hat zum Beispiel die Synchronisation zwischen Figma und Jitter nicht funktioniert und kostenfreie Jitter-Exporte sind auf wenige, kleinere Formate beschränkt und beinhalten ein (dezentes) Wasserzeichen. Dennoch ist Jitter ein schönes Beispiel, wie Figma-Werke in externen Diensten weiterverarbeitet werden können.

Die meisten der vorgestellten Plug-ins darf man getrost als Stellvertreter für ganze Genres verstehen. Und jedes Genre ist prall gefüllt mit Alternativen. Aber alle obigen Erweiterungen funktionieren Out-of-the-Box und ohne große Einarbeitung oder Probleme – und vermitteln einen guten Eindruck von Leistungsspektrum und Arbeitsweise von Figma.

UI- und UX-Design mit Figma

(ID:49973599)