Technologien
Figma
Was ist Figma, und warum ist es in der Welt des Benutzeroberflächendesigns so beliebt?
Figma ist ein revolutionäres Tool für den Entwurf und das Prototyping von Benutzeroberflächen, das es Teammitgliedern ermöglicht, gleichzeitig an einem Projekt zu arbeiten. Das Besondere an dieser Anwendung ist, dass sie direkt im Browser läuft, wodurch der Zugriff auf eine erstellte Schnittstelle, Grafik oder Vorlage von jedem Gerät aus möglich ist. Die Idee der gemeinsamen Arbeit hat den immensen Erfolg von Figma und seine Popularität in der Welt des Designs begründet.
Wofür wird Figma verwendet?
Wie eingangs erwähnt, wird Figma für den Entwurf von Schnittstellen und Prototypen von Interaktionen verwendet. Immer mehr Menschen nutzen diese Plattform jedoch, um einfache Grafiken oder Banner für die digitale Nutzung zu erstellen. Um mit dem Entwerfen in Figma zu beginnen, müssen Sie lediglich die Website der Anwendung in einem Browser öffnen und ein kostenloses Konto erstellen, indem Sie einige Standard-Kontaktdaten ausfüllen. Obwohl Sie dieses Tool direkt im Browserfenster verwenden können, ist es möglich, eine Desktop App für Windows und macOS herunterzuladen.
Alle in Figma erstellten Projekte werden online gespeichert, so dass das Team in Echtzeit arbeiten kann. Diese Lösung funktioniert praktisch in jeder Entwurfsphase, vom Brainstorming, den ersten Skizzen und Konzepten bis hin zur Implementierung des etablierten Entwurfssystems und den internen Beratungen im Team. Außerdem wird der Arbeitsablauf nicht dadurch gestört, dass zusätzliche Kopien auf einem Gerät gespeichert werden müssen oder Dateien ständig zwischen Teammitgliedern ausgetauscht werden.
Figma ist ein Werkzeug, das den Front-End Codierungsprozess unterstützt. Deshalb ist es mit Funktionen ausgestattet, die das Webdesign aus der Perspektive des gesamten Produktionsprozesses einer mobilen oder Web Anwendung "richtig" machen. Natürlich ist es auch wichtig, dass Ihr Design verständlich und klar ist, wwas gleichzeitig die team collaboration verbessert. Hier kommen unter anderem Komponenten und die aus ihnen erstellten Ressourcensammlungen zum Einsatz, die leicht in Code exportiert werden können.
Was genau sind Komponenten? Komponenten sind Elemente, die Sie in Projekten wiederverwenden können. In der Regel werden sie aus Objekten erstellt, die mehrfach in einer Benutzeroberfläche vorkommen, z. B. Schaltflächen, Textfelder, Suchfelder, Navigations- oder Fußzeilen. Natürlich wird diese Sammlung im Laufe der Entwicklung des Projekts um weitere Komponenten erweitert. Durch den Aufbau und die Aktualisierung der Komponentenbibliothek wird das visuelle Design des digitalen Produkts in der Entwicklung einheitlicher. Dank der wiederverwendbaren Komponenten wird die Entwicklung effizienter, und Ihr Team kann seine working time verkürzen.
Man unterscheidet zwischen einer Hauptkomponente, für die bestimmte Objekteigenschaften entworfen wurden, und einer Instanz - einer Kopie einer Komponente, die in nachfolgenden Bildschirmen dupliziert werden soll. Diese Unterscheidung ist wichtig, da alle Änderungen, die in der Hauptkomponente vorgenommen werden, in den Instanzen aktualisiert werden. Bei der Arbeit mit dem Team wäre es von Vorteil, einige Richtlinien zu entwickeln, die die Arbeit mit der Bibliothek systematisieren, so dass sich alle Hauptkomponenten an einem Ort befinden, zum Beispiel auf einer separaten Seite in der Figma-Datei. Während das Entfernen einer Komponente leicht wiederhergestellt werden kann, wird die Zusammenarbeit, die Durchführung von Änderungen oder die Überprüfung der Konsistenz unseres Systementwurfs viel reibungsloser verlaufen, wenn bestimmte Richtlinien festgelegt sind.
10 Plug-ins, die die Arbeit in Figma erleichtern
Unsplash ist eine der größten Plattformen mit kostenlosen Bildern für die kommerzielle Nutzung. Dieses Plug-in ermöglicht es Ihnen, Fotos direkt zu Projekten in Figma hinzuzufügen, ohne dass Sie sie herunterladen oder von der Website kopieren müssen.
Das Iconify Plug-in ist eine umfangreiche Sammlung von Symbolen, die Sie in Ihrem Projekt verwenden können. Sie können die benötigten Materialien über ein Suchfeld oder durch das Durchsuchen von Sammlungen finden, die unter anderem von Google oder Material Design erstellt wurden. Wenn Sie sich für den ersten Ansatz entscheiden, achten Sie darauf, dass die Symbole, die Sie Ihrem Design hinzufügen, stilistisch einheitlich sind - wenn Sie sich für ein Symbol aus Linien mit abgerundeten Spitzen entscheiden, sollten auch die übrigen Symbole so gestaltet sein.
Wie der Name schon sagt, erleichtert dieses Plug-in die Erstellung von User Flows. Auch wenn Sie in Figma problemlos Pfeile erstellen können, kann das Zeichnen von Pfeilen neben jedem Objekt in einem umfangreichen User Flow ermüdend sein. Autoflow ist in einem solchen Fall äußerst praktisch, denn es verbindet zwei ausgewählte Objekte durch einen Pfeil, der automatisch auf die Bewegung der Elemente reagiert und seine Form an die neue Position anpasst.
Ein einzelner Schatten, der einem Objekt hinzugefügt wird, wird niemals so gut und realistisch aussehen wie eine Gruppe von mehreren richtig ausgewählten Schlagschatten. Beautiful Shadows erzeugt eine Reihe von Effekten und ermöglicht es Ihnen gleichzeitig, die Anzahl der Ebenen und - was noch wichtiger ist - die Quelle und die Intensität des Lichts zu steuern, wodurch Ihr Design subtiler wird.
Das in Figma verfügbare Contrast Plug-in ermöglicht es, den Kontrast zwischen ausgewählten Objekten schnell zu überprüfen. Es handelt sich dabei um eine wesentliche Phase des Designs, die darauf abzielt, ein integratives digitales Produkt zu schaffen, das den WCAG Richtlinien entspricht. Dieses Plug-in zeigt grundlegende Informationen zum Kontrast an, und auf der Grundlage der empfangenen Daten können Sie die Farben entsprechend den Anforderungen anpassen. Für eine genauere Analyse können Sie die ausgewählten Farben mit Adobe Color Contrast Checker überprüfen.
Beim Entwerfen von Benutzeroberflächen kommen Sie an einen Punkt, an dem Sie Musterdaten des Benutzers ausfüllen müssen - Name, Nachname, Adresse oder eine Muster-Produktbeschreibung. Content Reel kann Ihnen helfen, Textfelder mit etwas anderem als Lorem ipsum auszufüllen. Auf diese Weise können Sie überprüfen, wie der Inhalt in den entworfenen Modulen angeordnet ist, und das Design wird realistischere Informationen widerspiegeln.
Wie der Name schon sagt, können Sie mit diesem Plug-in den Hintergrund von Bildern entfernen. Obwohl die Effekte nicht mit der manuellen Freiform-Auswahl vergleichbar sind, die z. B. Photoshop bietet, ist es eine Alternative, um einfache Objekte aus Fotos mit gutem Kontrast zu isolieren.
Auch wenn sich dieses Plug-in noch im Anfangsstadium der Entwicklung befindet, wird es sich zweifellos als Referenz bei der Erstellung von Typografiestilen als nützlich erweisen. Das Plug-in erzeugt einen visuellen Rhythmus auf der Grundlage einer Schriftart, die im ausgewählten Objekt verwendet wurde. Danach können Sie den Basiswert, die Linienhöhe oder den Maßstab wählen, auf dessen Grundlage das System erstellt wird. Es ist zu beachten, dass die erstellten Textstile auch an die mobile Version der Schnittstelle angepasst werden sollten.
Es ist ein hilfreiches Programm zum Organisieren von Rahmen. Je nach den gewählten Optionen kann das Plug-in automatisch nicht sichtbare Ebenen löschen, ihre Reihenfolge organisieren oder einzelne Elemente gruppieren. Wenn Sie es sich nicht zur Gewohnheit machen, ein Dokument ständig zu organisieren, lohnt es sich, ein Plug-in zu verwenden, das Ihnen dabei hilft.
Dieses Plug-in zeigt auf einem ausgewählten Bildschirm eine Anmerkung mit Informationen zu seinem aktuellen Status an. So sieht jeder, der Zugriff auf die Datei hat, sofort, ob ein bestimmter Bildschirm zum Beispiel produktionsreif ist. Dies verbessert gleichzeitig Ihre Zusammenarbeit mit anderen Teammitgliedern.
Figma - Vorteile in Zusammenarbeit mit einem Kunden
Die Präsentation der Ergebnisse Ihrer Arbeit vor Kunden oder Teammitgliedern ist manchmal ein stressiger Teil der Arbeit. Hinzu kommen technische Probleme bei der gemeinsamen Nutzung des Bildschirms oder Unterschiede in der Schnittstelle zwischen verschiedenen Videokonferenzprogrammen. Da es sich bei Figma um eine Online-Anwendung handelt, können Sie andere Personen zu dem Projekt einladen, die Präsentation durchführen und Ihren Entwurf besprechen, ohne ihn über die Bildschirmfreigabe zu zeigen. Wenn ein Kunde oder ein Teammitglied Ihren Avatar in der rechten Ecke des Fensters auswählt, sehen sie dank der "Follow"-Option automatisch die gleichen Bildschirme und Abschnitte, die Sie gerade besprechen möchten.
Wenn Sie die Ergebnisse nicht in Echtzeit präsentieren müssen, zeigen Sie den Entwurf, indem Sie den Link zur Datei freigeben oder die Option "share prototype" wählen. In beiden Fällen ermöglicht Figma das Erstellen von Kommentaren und das Ändern ihrer Position auf dem Mockup. Dies ist besonders nützlich, wenn die entworfene Website oder App aus mehreren Bildschirmen oder Iterationen besteht.
Figma Community
Einfach ausgedrückt ist die Figma Community ein Raum, in dem Designer oder ganze Designteams Materialien zur öffentlichen Nutzung freigeben können. Im Laufe der Jahre hat sich eine große Gemeinschaft von Figma Nutzern gebildet. Die Ersteller der in der Community veröffentlichten Werke tragen zur Entwicklung der Anwendung bei und unterstützen die Fähigkeiten derjenigen, die gerade erst mit Figma beginnen. Die gemeinsam genutzten Plug-ins, Widgets und das Designsystem sollen anderen bei der Arbeitsoptimierung helfen. Jeder, der über ein Figma-Konto verfügt, kann die in der Figma Community verfügbaren Materialien durchsuchen und sie in seine Projekte kopieren, um die entwickelten Schnittstellen, Komponentenbibliotheken und Vorlagen zu verwenden oder einen genaueren Blick auf die Techniken des Prototyping zu werfen. Sie brauchen nur den Begriff einzugeben, nach dem Sie suchen, oder "start to explore it as it is." Die gemeinsame Nutzung von Materialien und die Funktionen, die eine Zusammenarbeit mit anderen Designern ermöglichen, sind wesentliche Merkmale, die in das Wesen von Figma eingeschrieben sind und die auch zum großen Erfolg der Plattform beigetragen haben.
Figma vs. Azure XD vs. Sketch
Es ist erwähnenswert, dass Figma nicht das einzige auf dem Markt erhältliche Werkzeug für die Gestaltung von Benutzeroberflächen ist. Obwohl die Anwendung viele Vorteile und Funktionen hat, die ihre Popularität und eine Menge zufriedener Nutzer ausmachen, sind unter den übrigen Plattformen, die für die Gestaltung digitaler Produkte verwendet werden, Werkzeuge wie Adobe XD und Sketch zu erwähnen. Das erste Programm ist im Rahmen des Adobe Creative Cloud Pakets sowohl für Nutzer von Windows als auch von macOS verfügbar. Es lohnt sich, diese Betriebssysteme zu erwähnen, da die zweite Plattform den Nutzern von iOS gewidmet ist. Bei beiden Plattformen handelt es sich um Desktop Anwendungen, die die Möglichkeit bieten, in Echtzeit zu arbeiten, um mit den Möglichkeiten von Figma gleichzuziehen. Leider ist diese Option nur nach dem Erwerb eines Abonnements verfügbar, was aus praktischer Sicht einen erheblichen Vorteil für Figma darstellt. Es lohnt sich auch, mobile Anwendungen zu nutzen, aber hier haben wir nur Figma und Adobe XD zur Auswahl.
Ist Figma kostenlos?
Figma ist ein kostenloses Tool für die Gestaltung von Benutzeroberflächen. Bei kommerziellen Aktivitäten kann es jedoch sein, dass der kostenlose Plan auf Dauer nicht ausreicht. Es ist auch erwähnenswert, dass Sie von Anfang an Zugang zu allen Funktionen der Anwendung haben und dass die Abonnementpläne die Möglichkeiten der Plattform in keiner Weise einschränken. Einen großen Unterschied macht hingegen die Anzahl der Projekte, die Sie erstellen können, sowie die Anzahl der Teammitglieder, die Sie hinzufügen können. Im Rahmen eines kostenlosen Plans können Sie drei Dateien erstellen und sie mit zwei Personen teilen, mit denen Sie gleichzeitig an dem Projekt arbeiten werden. Wie Sie sich denken können, hat dies negative Auswirkungen auf die team collaboration.
Die kostenpflichtigen Versionen bieten darüber hinaus Zugriff auf eine unbegrenzte Bearbeitungshistorie der Datei, Änderungen an der Freigabeberechtigung des Projekts und die Erstellung von Team-Bibliotheken, mit denen Sie Komponenten und Stile gemeinsam nutzen können. Wie viel müssen Sie für die Verwaltung von Projekten innerhalb eines Teams bezahlen? Derzeit gibt es zwei Abonnementstufen:
- Professional ($12/$15 für jeden Benutzer pro Monat auf jährlicher/monatlicher Basis)
- Organisation ($45 für jeden Benutzer pro Monat, nur bei jährlicher Abrechnung).
Beide Preispläne bieten alle oben genannten Funktionen. Im Gegensatz zum Professional Abonnement bietet Figma Organization jedoch zusätzlich eine Integration mit dem SSO Mechanismus, dank dem sich alle autorisierten Mitarbeiter mit Unternehmensdaten auf der Plattform anmelden können. Zu den weiteren Vorteilen gehören unter anderem private Plug-ins und Widgets sowie die Möglichkeit, eigene Bibliotheken zu erstellen und diese mit anderen Teams innerhalb einer Organisation zu teilen.
Zusammenfassend lässt sich sagen, dass Figma ein kostenloses Werkzeug ist, aber nur bis zu einem bestimmten Zeitpunkt. Obwohl die Plattform von Anfang an alle notwendigen Funktionen für die Gestaltung von Benutzeroberflächen bietet, wird es mit der Entwicklung der Organisation und der Erweiterung der angebotenen Dienstleistungen und der Ankunft neuer Designer notwendig sein, das Abonnement zu erwerben — to get the most out of Figma!