Home IT Figma vs. Invision Studio: Welches Tool ist das Must-have im Interface-Design?

Figma vs. Invision Studio: Welches Tool ist das Must-have im Interface-Design?

10
0
SHARE

Sowohl Figma als auch Invision Studio wollen Kollaboration und Prototyping ­vereinfachen. Die Digitalagentur Format D hat sie verglichen – ein Erfahrungsbericht.

Es war ein gewollter, aber nicht ganz einfacher Schritt: Vor dreieinhalb Jahren verabschiedeten wir uns von der eierlegenden Wollmilchsau Photoshop und stiegen um auf Sketch und ­Invision. Das Team war von Sketch begeistert: Endlich eine Software, die auf die Bedürfnisse von Interface-Designern zugeschnitten ist. In Kombination mit der ­Prototyping-Funktion von Invision empfanden nicht nur wir unseren Arbeitsprozess als „rund“. Auch unsere Kunden konnten ihr Produkt in einer frühen Phase kommentieren und – besser mit uns als Team verzahnt – verfeinern.

Auch heute funktioniert dieses Setup noch zufriedenstellend. Doch immer häufiger geraten Abläufe ins Stocken: Zum Beispiel aufgrund der Vielzahl von Plugins, die bei der Arbeit mit Sketch notwendig sind. Sind diese nach einem Update nicht mehr kompatibel, ist der Ärger groß. Zusätzlich geht der Einsatz der zahlreichen Programme und Plugins natürlich zulasten der Übersichtlichkeit – „Wo soll ich mir das jetzt noch mal anschauen, bei Sketch oder Invision? Brauche ich auch Craft?“. Die immer stärkere Verbreitung von agilen Arbeitsmethoden hat unsere Ansprüche ebenfalls steigen lassen. Einzelne Module werden immer häufiger in Projektteams erarbeitet, in die der Kunde direkt einbezogen ist. Statt nach dem Wasserfallprinzip zu arbeiten, wollen die Teams schnell und flexibel auf Feedback reagieren können – ohne dabei das große Ganze aus den Augen zu verlieren.

Auf der Suche nach neuen Alternativen sind wir zum einen auf Figma gestoßen – ein browserbasiertes Werkzeug für die Kollaboration in Echtzeit. Plugins oder Updates sind hier nicht mehr notwendig, ebenso wenig wie das Hochladen und Synchronisieren einzelner Dateien. Figma wird schon seit einigen Jahren heiß in der Branche diskutiert, seine Verbreitung wächst. Doch auch Invision hat sich weiterentwickelt: Mit „Studio“ gibt es seit wenigen Monaten eine native Desktop-App für Designer mit speziellem Fokus auf Kollaboration und responsives Design. Wir haben Figma (Version 3.6.8 ) und die Beta-Version von Invision Studio (Version 0.10.81) einem direkten Vergleich unterzogen.

Test 1: Kollaborativ zusammenarbeiten

Zunächst haben wir getestet, wie gut die Zusammenarbeit mit Kollegen sowie die Präsentation neuer Entwürfe vor Kunden klappt. Figma bietet links neben der Vorschau den Button „Share“, über den Interface-Designer ihre Projekte mit Teammitgliedern oder Kunden teilen können. Eine Funktion, die hierbei besonders heraussticht, ist die Live-Kollaboration: Wer einen Link zu einem Projekt erhält, sieht alle Änderungen in Echtzeit, ähnlich wie bei Google Docs. Zudem können Agenturen Projektteams erstellen und einzelnen Mitgliedern Lese- oder Schreibrechte geben. Neue Mitglieder lassen sich per E-Mail einladen, über einen Public-Link oder über die Funktion „Public Embed“. Im ersten Fall kann der Empfänger das Projekt nur ansehen, es sei denn, der Einladende gibt ihm die Möglichkeit zum Editieren. Über einen Public-Link können auch Nutzer, die nicht registriert sind, ein Projekt ansehen, haben jedoch keine Kollaborationsfunktionen. „Public ­embed“ dagegen ist ein iFrame, mit dem sich Figma-­Entwürfe als Live-Vorschau, zum Beispiel im Kollaborationwerkzeug Trello, einbetten lassen. Außerdem bietet Figma auch noch eine Versionierung. Das ist besonders beim interativen Arbeiten hilfreich – und das wird immer wichtiger. Die Versionierung befindet sich im Dropdown-Menü neben dem Projekttitel. Hier können ­Figma-Nutzer ihre Entwicklungsschritte als Versionen anlegen.

Kollaborativ zusammenarbeiten: Wie gut klappt das Teilen von Projekten im Team und mit dem Kunden? Figma (links) bietet hier umfangreichere Möglichkeiten als Invision Studio (rechts), wie zum Beispiel eine Rechteverwaltung oder Versionierung. (Screenshots: Figma, Invision)

Invision Studio ist nicht webbasiert, sodass Designer ihre neuesten Projekte hochladen müssen. Dann können sie diese wie gewohnt als Link an andere Mitglieder senden, die wiederum ihre Kommentare setzen können. Unterschiedliche Nutzerrechte lassen sich in Invision Studio derzeit noch nicht vergeben. Allerdings wird dies sicherlich bald kommen. Die Funktion für die Zusammenarbeit in Echtzeit wird es jedoch wohl nicht so bald geben, denn dafür gibt es eigene Plugins, wie etwa Craft.

Test 2: Developer Handoff

Der zweite Testfall betrifft das Developer Handoff, also die Vermittlung von Informationen zwischen Designern und Entwicklern. Das Code-Panel von Figma zeigt Entwicklern in der linken Spalte sämtliche Ebenen mitsamt aller Gruppierungen, Pfade und so weiter – und zwar auch, wenn sie nur „View-only“-Rechte haben. Wählen sie ein Element innerhalb eines Frames aus, sehen sie wie gewohnt die Maße und Abstände. Außerdem gibt es auch bei Figma den Code-Tab im rechten Panel. Er gibt neben CSS auch den iOS- und Android-Code aus. Dabei können Entwickler zwischen den Ansichten „Table“ und „Code“ wechseln: Erstere zeigt die Positionierungs- und Ausrichtungsangaben der Elemente, letztere die jeweiligen Code-Schnipsel. Darüber hinaus lassen sich Elemente auch exportieren: So ist ein Entwickler nicht jedes Mal auf den Designer angewiesen, wenn er ein Icon im erzeugten Asset vermisst oder es in einem anderen Format benötigt.

Developer Handoff: Beim Developer Handoff liegen Figma (links) und Invision Studio (rechts) in etwa gleich auf. Aus beiden Werkzeugen können Entwickler Elemente exportieren, sich allgemeine Informationen, Maße und Abstände oder Code anzeigen lassen. (Screenshots: Figma, Invision)

In Invision Studio gibt es den bereits aus Invision bekannten „Inspect Mode“ mit neuen Möglichkeiten. Wie bei Figma zeigt er Abmessungen und Abstände an. Darüber hinaus bietet der ­Inspect Mode am rechten Bildschirmrand eine Leiste mit allgemeinen Informationen zum Artboard, Code, Assets sowie eine Layer-Ansicht. Über das Tab „Assets“ können Entwickler hier ebenfalls Elemente exportieren und dabei zwischen verschiedenen Formaten und Auflösungen wählen. Anders als bei Figma können Entwickler dabei einiges anpassen: etwa die Units, den Code oder die Farbe.





LEAVE A REPLY

Please enter your comment!
Please enter your name here