Usecase Figma
Figma ist eine kollaborative Software zum Erstellen von Prototypen im Bereich des UX- bzw. UI-Design – sagt Wikipedia. Und was sagen wir dazu? Wir haben unsere UX-Expertin Julia Farkas gefragt. That’s what she said:
Veröffentlicht am: 28.06.2022
Von Sketch zu Figma
Lange war der Vektorgrafik-Editor Sketch der Platzhirsch unter den Tools für UX- und UI-Designer*innen. Deshalb haben auch wir damit gearbeitet. In den letzten Jahren kamen aber laufend neue Programme auf den Markt und entwickelten sich weiter. Julia hat in ihrer Zeit vor VERDINO schon mit Figma gearbeitet und nicht aufgehört, davon zu schwärmen. Denn für die Zusammenarbeit in einem Team hat das Tool viele Vorteile.
Da wir bei VERDINO viel Wert auf die Meinung unserer Mitarbeiter*innen legen, haben wir Figma genauer unter die Lupe genommen. Nach einer kurzen Pilotphase im Design-Team stand schnell fest, dass wir von Sketch zu Figma wechseln. Aber was macht Figma denn nun so großartig? Und was ist Figma eigentlich?
Was ist Figma?
Figma ist ein cloud-basiertes Designtool, das Sketch in Funktionalität und Features ähnelt. Damit können Wireframes, UI, Prototypen von Websites und Anwendungen, Illustrationen und Vektorgrafiken sowie Präsentationen erstellt werden. Den größten Vorteil bietet es für Teams, die #gemeinsam an Projekten arbeiten, weil die übergreifende Zusammenarbeit perfekt funktioniert.
#gemeinsam in Echtzeit arbeiten
Da Figma browserbasiert ist, können Teams ähnlich wie in Google Docs zusammenarbeiten. Alle, die in derselben Datei arbeiten, werden als Avatar angezeigt: Man kann den Cursor der Kolleg*innen verfolgen und einfacher zusammenarbeiten. Und auch ein Head of Design oder externe Mitarbeiter*innen – oder Kund*innen – haben die Möglichkeit, eine freigegebene Datei zu öffnen und anzusehen. So können alle Teammitglieder jederzeit eingreifen, korrigieren oder erklären und letztendlich Zeit sparen.
»Ich habe eine Anmerkung … «
Figma unterstützt In-App-Kommentare sowohl im Design- als auch im Prototyping-Modus. Es ist nicht erforderlich, PNG-Dateien zu veröffentlichen oder ständige Updates durchzuführen, um Feedback von einem Team zu erhalten, das ein Drittanbieter-Tool wie InVision verwendet. Durch die direkte Kommentarfunktion werden Missverständnisse verhindert und das spart in allen Projekt-Phasen wertvolle Zeit.
Die Design-Development-Schnittstelle
Figma zeigt auf jedem ausgewählten Rahmen oder Objekt in CSS-, iOS- oder Android-Formaten Codeausschnitte an, die Entwickler*innen beim Überprüfen einer Designdatei verwenden können. Entwickler*innen können also Designkomponenten in jeder Datei, die angezeigt werden kann, überprüfen.
Es ist auch hier nicht erforderlich, ein Drittanbieter-Tool zu verwenden, um diese Informationen zu erhalten oder einzelne Assets zu exportieren. Trotzdem verfügt Figma über eine vollständige Integration mit Zeplin, einer Design-Delivery-Plattform zum Austausch zwischen Designer*innen und Entwickler*innen, wenn Teams mehr als nur einfache Messungen und CSS-Anzeigen durchführen möchten.
Projektdateien und Prototyping
Die Dateiorganisation kann beliebig in Teams, Projekte, Dateien und Seiten gegliedert werden, sodass agile Teams ihre Projekte logisch organisieren können und die Zusammenarbeit reibungslos verläuft. So mögen wir das!
Auch das Prototyping ist unkompliziert, intuitiv und findet direkt in der App statt. Überwiegend werden Transitions via Drag + Drop erstellt und nach wenigen Klicks hat man realistische Animationen und Funktionen des Interfaces, die getestet werden können. Durch den Präsentationsmodus in der App ist auch ein Export hinfällig und alle Änderungen werden in Realtime aktualisiert. Präsentationen verlaufen dadurch intuitiver und unsere Kund*innen können sich selbst durch ihre neue Anwendung klicken.
Jedes Team braucht eine Bibliothek
Designsysteme sind für viele Unternehmen zu einer Notwendigkeit geworden. Darum gibt es Bedarf an Komponenten, die wiederverwend- und skalierbar sind, um sie in Musterbibliotheken zu verwenden, die UX-Designer*innen und Frontend-Entwickler*innen zur Verfügung stehen. Sobald eine Figma-Teambibliothek erstellt wurde, kann jede*r mit Zugriff auf ein Projekt die Instanzen der Komponenten in Entwürfen verwenden und sicher gehen, dass er*sie mit der aktuellsten Version arbeitet.
Plugin and find out
Inzwischen gibt es eine Vielzahl an Plug-Ins, die frei für Figma verfügbar sind. Sie helfen dabei, schneller und effizienter zu arbeiten. So kann ein Design in wenigen Sekunden für Menschen mit einer Sehbeeinträchtigung getestet und Änderungen mit nur wenigen Klicks eingearbeitet werden.
All we need is Figma
Unser Fazit: Figma ist eine einfache, aber multifunktionale Schnittstelle für viele Tätigkeitsbereiche. Und darum hervorragend für unser Team geeignet. Außerdem ist es ein praktisches Online-Tool, das die Zusammenarbeit zwischen Entwickler*innen, Designer*innen und dem Projektmanagement #leicht und effizient gestaltet. Es verändert die Art und Weise, wie wir im Team und mit Kund*innen zusammenarbeiten und vereint die besten Features aus der UI-Design-Tool-Welt. Klingt wie eine Liebeserklärung? Dazu stehen wir!
Wir haben noch mehr super interessante Blogartikel!