How-To

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

Seite 2 / 2

Test 3: Libraries austauschen

Symbols – in Figma auch „Components“ genannt – lassen sich über Team-Libraries einfach mit allen Kollegen teilen und synchronisieren. Deshalb ging es bei unserem dritten Test darum, herauszufinden, wie gut sich die Library in den Workflow einfügt. Bei Figma befinden sich in der unteren linken Sidebar die Tabs „Layer“, „Components“ und „Library“. Mit einem Rechtsklick können Designer neue Components einzeln zur Library hinzu­fügen, durch die Funktion „Publish to library“ auch alle auf einmal. Dann können sämtliche Teammitglieder auf diese Dateien gleichzeitig zugreifen. Wer Änderungen am Master Component durchführt, kann in Figma einen Kommentar hinterlassen, sie dann veröffentlichen und erhält eine Vorschau mit einem Vorher-Nachher-Bild. Alle Kollegen erhalten eine Benachrichtigung und können bei Bedarf ihre Library updaten. Damit die Libraries nicht unübersichtlich werden, sollten Figma-User zusammengehörige Elemente in einem Frame gruppieren und sinnvoll benennen. Auf diese Weise können sie sie in einzelne Sektionen separieren.

Libraries austauschen: Der Austausch von Elementen über Libraries ist für die tägliche Arbeit ein wichtiges Hilfsmittel. Hierbei zeigt Figma (links) klar seine Stärken gegenüber Invision Studio (rechts), denn dies ermöglicht das Teilen von Libraries im Team nur mit Hilfe von Plugins. (Screenshots: Figma, Invision)

Auch Invision Studio bietet einen separaten Tab für die ­Libraries. Dieser befindet sich oben rechts auf der linken Sidebar. Jedoch fällt er noch etwas mager aus: Components kann man hier lediglich ansehen und ändern – aber nicht teilen. Auch hier ist wohl wieder das Plugin Craft erforderlich, mit dem Teams ihre Libraries gemeinsam verwalten können. Komfortabler wäre es sicherlich, wenn man nicht auf Plugins angewiesen wäre.

Test 4: Verlinkungen herstellen

Natürlich ist es auch entscheidend, wie gut sich in den beiden Werkzeugen Prototypen erstellen lassen. Als erstes haben wir daher überprüft, wie sich Verlinkungen setzen lassen. In Figma gibt es dazu das Tab „Prototype“. Hier können Interface-Designer ein beliebiges Objekt auswählen und per Drag-and-Drop den Pfad an den gewünschten Zielort setzen. Alternativ können sie das Ziel im Dropdown-Menü über die rechte Sidebar definieren. Kleine Icons kennzeichnen Verlinkungen mit einem Effekt.

Verlinkungen herstellen: Das Erstellen von Prototypen ist eine zentrale Anforderung an beide Werkzeuge. Die dafür notwendigen Verlinkungen lassen sich in beiden Anwendungen einwandfrei anlegen. (Screenshots: Figma, Invision)

In Invision Studio sieht die Funktion zum Verlinken von Proto­typen ähnlich aus: Interface-Designer wählen ein Start­objekt aus, klicken in der oberen Werkzeugleiste auf „Add interaction“ und können dann einen Pfad an eine beliebige Position setzen. Die Objekte, die sie verknüpfen wollen, hebt Invision Studio dabei blau hervor. Sobald der Zielort definiert ist, zeigt ein Fenster alle Optionen, die die Designer hinzufügen können, wie Gesten, ­Zielort oder Transitions.

Test 5: Animationen erstellen

Animationen und Transitions sind eine weitere, wichtige Funktion für die Erstellung von Prototypen. Leider bietet Figma in diesem Bereich nicht viel an. Interface-Designer können lediglich einzelnen Verlinkungen animierte Interaktionen zuweisen wie „Dissolve“, „Move“, „Push“ und „Slide“. Hierbei können sie die Dauer, die Richtung und ein Easing definieren. Eine hilfreiche Funktion ist die Vorschau. Doch Figma fehlt die Möglichkeit, den Elementen eine fixe Position während des Scrollings zuzuweisen. Der Bereich Animation ist damit definitiv noch ausbaufähig.

Animationen erstellen: Bei der Erstellung von Prototypen sind Animationen unerlässlich. Hier sammelt Invision Studio (rechts) im Vergleich zu Figma (links) ganz klar Pluspunkte: Animationen lassen sich hier leicht anlegen und im Detail verfeinern. (Screenshots: Figma, Invision)

Was Animationen und Transitions angeht, lässt Invision ­Studio dagegen das Herz jedes Interface-Designers höher schlagen: Kinderleicht kann er hier tolle Effekte gestalten. Verlinkt er zwei gleiche oder gleichnamige Objekte in verschiedenen Artboards miteinander, animiert Invision Studio automatisch die Unterschiede in den Eigenschaften dieser Elemente. Daneben gibt es eine eigene Timeline, in der Designer die Details der Animation verfeinern können. Zum Beispiel können sie anhand von ­Bezier-Kurven schnell tolle Ergebnisse erzielen. Dafür waren zuvor Plugins wie „Principle“ nötig.

Test 6: Responsive Layouts anfertigen

Ebenfalls entscheidend für das Erstellen von Prototypen ist die Frage, wie gut sich in einem Werkzeug responsive Layouts anlegen lassen. In Figma gelingt dies, indem Designer Constraints für verschiedene Screens setzen. Diese Funktion ist sehr einfach zu bedienen und funktioniert einwandfrei. Über den Button „Play“  in der Werkzeugleiste öffnet Figma eine Vorschau des Projekts. In diesem Modus lassen sich auch Kommentare vergeben und anzeigen. Leider zeigt Figma das responsive Verhalten eines Designs nicht schon dann, wenn man die Fenstergröße verändert. Das gelingt nur im Arbeitsbereich selbst, indem Designer den Frame verändern, der das responsive Verhalten der Elemente darstellt.

Test 6: Responsive Layouts anfertigen: Wie gut können die Anwendungen responsive Layouts simulieren? Bei beiden können Interface-­Designer sie problemlos definieren. Bei der Ansicht überzeugt jedoch Invision Studio (rechts) mehr, weil sich das ­responsive Verhalten schon simulieren lässt, indem Designer das Fenster größer oder kleiner ziehen. (Screenshots: Figma, Invision)

In Invision Studio können Interface-Designer das responsive Verhalten ihrer Layouts über sogenannte „Pins“ definieren. Im Vorschaumodus können sie zwischen Ansichten und End­geräten wechseln. Um die responsive Ansicht zu simulieren, wählen ­Designer den Punkt „Resizable“ aus dem Dropdown-Menü. Wenn sie nun das Fenster vergrößern oder verkleinern, können sie sehen, wie sich die Elemente entsprechend der Größe anordnen.

Fazit

Wer auf Prototyping und Animationen setzt, ist mit Invision ­Studio auf jeden Fall besser bedient. Obwohl sich das Tool erst in der Betaphase befindet, ist das Werkzeug in diesem Part seinen Konkurrenten durch seine Einfachheit weit voraus. Dagegen zeigt Figma im Bereich der Kollaboration ganz klar seine Stärken. Wer also Wert auf interdisziplinäre Teamarbeit legt, findet hier eher seinen neuen Liebling. Auch der generelle Arbeitsablauf fühlt sich in Figma sehr intuitiv und damit gut an. Wir bei Format D haben uns noch nicht endgültig entschieden, sondern testen weiter. Wir werden noch eine Weile mit beiden Werkzeugen arbeiten. ­Dabei konzentrieren wir uns aber schwerpunktmäßig auf Figma.

Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Ein Kommentar
Oliver-K

Moin,

ich nutze auch seit einiger Zeit Invision Studio und arbeite so immer mit meinen Designern zusammen, um beispielsweise meine Ideen zu zeigen. Allerdings ist Design nicht wirklich meine Stärke, aber ich finde es sehr wichtig, dass wir allesamt zusammenarbeiten können und uns so besser austauschen. Von Figma habe ich noch nie etwas gehört, aber da sowieso Invision Studio empfohlen wird, bin ich diesbezüglich auf der sicheren Seite – danke ;-)

LG,
Oliver von Firmenpartnerschaft
https://www.firmenpartnerschaft.com/

Antworten

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!

Hey du! Schön, dass du hier bist. 😊

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team bestehend aus 65 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Danke für deine Unterstützung.

Digitales High Five,
Stephan Dörner (Chefredakteur t3n.de) & das gesamte t3n-Team

Anleitung zur Deaktivierung