Figma vs. Sketch vs. Axure – Eine aufgabenbasierte Überprüfung

In einer kürzlich erschienenen Toptal-Infografik: „Die besten UX-Tools“ haben wir die breite Palette digitaler Design-Tools auf dem Markt untersucht, von denen die meisten in der Lage sind, die täglichen Aufgaben des einzelnen UX-Designers zu unterstützen.

Drei der vorgestellten Tools, Sketch, Figma und Axure, haben treue Anhänger gefunden, weil sie sich bei bestimmten Aufgaben innerhalb des UX-Design-Workflows auszeichnen.

Die Leistungsfähigkeit dieser Tools hängt jedoch von der jeweiligen Entwurfsaufgabe ab . Anstatt alle ihre Funktionen in einer Vergleichstabelle aufzulisten, bestimmen wir ihre Wirksamkeit mit einer aufgabenbasierten Überprüfung.

Hier ein kurzer Überblick über die Wettbewerber:

• Skizze von Bohemian Coding mit Sitz in Haag, NL. Sketch ist eine reine Mac-Anwendung.
• Figma von Figma mit Sitz in San Francisco, Kalifornien. Figma läuft auf jedem Betriebssystem über einen Browser.
• Axure von Axure Software Solutions mit Sitz in San Diego, Kalifornien. Axure hat eine Windows- und eine Mac-Version.

Wir bewerten jedes Tool danach, wie gut es alltägliche Designaufgaben sofort einsatzbereit macht – ohne Plugins, Add-Ons oder Apps von Drittanbietern. Zu den Aufgaben gehören:

1. Konzeptidee machen
2. Erstellen von Low-Fidelity-Ergebnissen
3. Erstellen von High-Fidelity-Ergebnissen
4. Interaktive Prototypen erstellen
5. Erstellen eines Designsystems
6. Lieferung an die Entwicklung

Hinweis: Wenn die Tools über nahezu identische Funktionen verfügen, die zum Abschließen einer Aufgabe erforderlich sind, geht der Gewinn an das Tool, das einfacher zu verwenden ist und eine schnellere Bereitstellung ermöglicht. Wenn diese Entschlossenheit zu knapp erscheint, ist der Drittanbieter-Support der entscheidende Faktor.

Aufgabe: Konzeptidee machen

Ideation ist ein kreativer Prozess zur Generierung neuer Ideen und wird normalerweise von interdisziplinären Gruppen durchgeführt, die aus Designern, Entwicklern, Product Ownern und Projektmanagern bestehen.

Das Ziel ist es, neue Ideen zu entwickeln, die in einem Produkt verwendet werden können, nachdem die grundlegenden Anforderungen und alle bereits im Bau befindlichen Arbeiten berücksichtigt wurden. Beispielsweise kann sich ein Team einer Konzeptfindungssitzung unterziehen, um eine Reihe von MVP-Funktionen für eine neue App zu erstellen – oder Funktionen der nächsten Generation in einer bestehenden App.

Viele Designer erstellen Konzeptideen auf einem Whiteboard oder Papier. Die Ideenfindung erfolgt jedoch auch digital, insbesondere in verteilten Büros. Die Konzeptgenerierung ist ein Teamsport und umfasst Nicht-Designer wie Product Owner/Manager und Front-End-Entwickler. Tools, die die Zusammenarbeit fördern und einfach zu bedienen sind, eignen sich am besten für diese Aufgabe.

Gewinner: Figma

Sketch und Axure bieten beide Cloud-Sharing-Dienste an, aber es gibt keine Möglichkeit, Bildschirme in Echtzeit mit Mitarbeitern zu teilen.

Dateien, die in Figma geteilt werden, können in Echtzeit verbunden werden, und der beschriftete Cursor jedes Teilnehmers wird angezeigt. Ein Klick auf repräsentative Avatare in der Symbolleiste schaltet die Ansicht auf die Perspektive dieser Person um, was es einfach macht, eine Idee schnell zu teilen. Außerdem verlangt Figma nicht, dass Nicht-Designer eine Kopie besitzen; Sie öffnen den Dateilink und beginnen mit der Arbeit.

Andere Whiteboard-Collaboration-Tools sind möglicherweise besser für die Konzeptidee geeignet als Figma, wie etwa Mural und Realtimeboard, aber als Design-Tool ist Figma um Längen besser als Sketch und Axure.

Aufgabe: Erstellen von Low-Fidelity-Ergebnissen

Lo-Fidelity-Ergebnisse werden normalerweise als Wireframes oder digitale Skizzen erstellt, die von anderen Designern und Produktbesitzern verteilt und überprüft werden können. Je nach UX-Prozess können sie auch von Entwicklern und anderen Stakeholdern eingesehen werden.

Wireframes sollen die Grundstruktur einer App zeigen, damit das Interaktionsmodell definiert werden kann, bevor Zeit mit der Erstellung von Hi-Fidelity-Mockups verbracht wird.

Das Erstellen von Lo-Fidelity-Drahtmodellen kann mit Tools erfolgen, die speziell auf diese Aufgabe ausgerichtet sind, darunter Balsamiq Mockups, Moqups und FluidUI. Sketch, Axure und Figma können jedoch alle die gleiche Aufgabe erfüllen, insbesondere wenn Benutzer Drahtgitter-Komponentenbibliotheken erstellen.

Da Wireframes normalerweise als anfängliches UI-Layout für eine App oder Seite dienen, sind sie monochromatische Rohschnitte, die sich häufig ändern. Dies hilft, die Erwartungen der Stakeholder in Schach zu halten.

Bei Wireframes sind Benutzerfreundlichkeit, Liefergeschwindigkeit und Modifizierung von entscheidender Bedeutung, da sie es Designern ermöglichen, Variantendesigns effizient zu erstellen.

Gewinner: Axure

Axure gewinnt hier, weil es unmittelbar nach der Installation der Software vorgefertigte Komponenten für das Wireframing enthält. Sketch und Figma verfügen über die Werkzeuge , mit denen Sie Drahtgitter erstellen können, aber Sie müssen entweder eine Drahtgitterkomponente zeichnen oder eine Datei herunterladen, die diese enthält. In jedem Fall müssen sie in eine Symbol- (Sketch) oder Komponentenbibliothek (Figma) integriert werden, damit sie wie Axure-Komponenten per Drag-and-Drop verschoben werden können.

Axure verfügt über viele Bibliotheken von Drittanbietern zum Erstellen von Low-Fidelity-Ergebnissen, und Sketch bietet eine Vielzahl kostenloser und kostenpflichtiger Dateien, die heruntergeladen werden können, während die öffentlichen Ressourcen von Figma noch in den Kinderschuhen stecken.

Sobald ein Designer Drahtgitter-Komponentenbibliotheken erstellt hat, sind die drei Werkzeuge gleichmäßig aufeinander abgestimmt. Beachten Sie, dass die Komponenten von Axure parametrische und anpassbare Eigenschaften besitzen, aber für statische Drahtmodelle funktionieren alle drei Tools gut, wenn die Bibliotheken verfügbar sind.

Aufgabe: Erstellen von High-Fidelity-Ergebnissen

High-Fidelity-Ergebnisse entstehen aus dem Feedback und den Erkenntnissen aus Low-Fidelity-Drahtmodellen. Sie sind Mockups, die Farbe, visuelle Details und vorgeschlagene endgültige Designs für eine App zeigen.

High-Fidelity bedeutet auch Bildschirmmodelle, die präsentationsreif sind und Kunden, internen Führungskräften und anderen Stakeholdern gezeigt werden, die keine Designer sind. Die Design-Tools, die sich für diese Aufgabe auszeichnen, verfügen über alle erforderlichen Funktionen, um den Schliff zu verleihen, der erforderlich ist, um eine Darstellung der endgültigen kundenorientierten Ergebnisse zu erstellen.

Dazu gehört die Kontrolle über Objektfüllungen und Striche, das Hinzufügen von Effekten wie Schatten und Verlaufsfüllungen und das Exportieren von Kunst in ein leicht verdauliches Format (png, pdf, jpg).

Gewinner: Figma

Sketch und Figma haben fast identische Toolsets, mit denen High-Fidelity-Mockups erstellt werden können, aber das Interaktionsmodell von Figma ist ausgefeilter und das Tool ist von Anfang an einfacher zu verwenden. Beide Tools haben einfachen Zugriff auf erweiterte Bearbeitungs- und boolesche Befehle wie Join, Intersect, Union und Subtract. Während die Plugin-Unterstützung von Sketch es Drittanbietern ermöglicht, zusätzliche Funktionen zu erstellen, sind diese Tools nicht sofort nach der Installation verfügbar.

Alle drei Tools verfügen über Funktionen, die die Erstellung benutzerdefinierter Objekte ermöglichen, aber Axure erschwert den Zugriff auf die Befehle etwas. Die oben erwähnten Bearbeitungen sind in der Symbolleiste nicht verfügbar. Der Zugriff erfolgt nur über das Kontextmenü, wenn mehrere Objekte ausgewählt sind.

Darüber hinaus machen die Vektornetzwerke von Figma die Arbeit mit den Linienwerkzeugen zum Kinderspiel.

Aufgabe: Interaktive Prototypen erstellen

Interaktive Prototypen können so grob wie ein Papierprototyp oder so detailliert wie eine verzweigte Version einer bestehenden App sein, die geändert wurde, um neue Funktionen zu erkunden. In der Regel ermöglichen interaktive Prototypen Benutzern, von Bildschirm zu Bildschirm zu navigieren und Funktionen wie Menüs und Listen zu verwenden.

Für viele Designer reicht eine einfache interaktive Diashow aus, um ihre Arbeit zu präsentieren. Dies gilt insbesondere für mobile Apps, da einfache Übergänge genügend Geräteinteraktion bieten, um das Design zu erklären.

Das Prototyping-Modell von Figma ist gut integriert und einfach zu verwenden, und da es sich um eine Cloud-basierte Echtzeit-App handelt, müssen HTML-Seiten nicht aktualisiert werden, wenn eine Datei aktualisiert wird.

Gelegentlich möchten Interessengruppen Live-Datenverbindungen, um einen Prototyp mit realen Daten zu laden, um die Skalierbarkeit eines Designs zu testen, aber die überwiegende Mehrheit der Designer hat heute kaum noch Bedarf an komplexen Prototypen.

Gewinner: Figma

Sketch und Figma unterstützen beide einfaches Prototyping mit „Objekt-zu-Zeichenfläche“-Verknüpfung und einer begrenzten Anzahl von Übergängen. Plugins unterstützen die einfachen Prototyping-Fähigkeiten von Sketch, aber Axure ist am leistungsstärksten, wenn es darum geht, ein robustes Interaktionsmodell für Prototypen bereitzustellen.

Aufgabe: Erstellen eines Designsystems

Designsysteme sind zwar relativ neu in der UX-Designdomäne, gibt es aber schon seit Jahrzehnten. Sie umfassen eine gemeinsame Designsprache, Komponenten, Ressourcen und Richtlinien, die es Teams ermöglichen, zusammenzuarbeiten und bessere Entscheidungen zu treffen. Eine Designsystembibliothek wird in der Regel als Website implementiert und fungiert als Single Source of Truth für ein Produkt im gesamten Unternehmen.

Gewinner: Figma

Während Komponentenbibliotheken in jedes der Programme eingebaut werden können, erlaubt keines von ihnen den Designern, einen Schalter umzulegen und sofort eine brauchbare Komponentenbibliothek zu erstellen. Axure kann eine HTML-Seite mit benutzerdefinierten Komponenten darauf generieren, aber es gibt keine Möglichkeit, die einzelne Komponente abzufragen, um den Farbwert, die Größe und andere Eigenschaften herauszufinden.

Das Erstellen eines Designsystems mit einem dieser Tools ist immer noch ein manueller Prozess. Es gibt jedoch Plugins für Sketch (wie das kürzlich veröffentlichte Material Design-Plugin von Google) und mindestens ein Tool von Drittanbietern, das für Figma in Arbeit ist.

Figma gewinnt, weil Zusammenarbeit das Herzstück eines guten Designsystems ist. Unternehmensmitarbeiter aus verschiedenen Disziplinen (Design, Entwicklung, Qualität, Inhalt) müssen auf eine Designsystembibliothek zugreifen, und viele werden der Designkomponentendatei hinzufügen, die mit der gemeinsam genutzten Bibliothek synchronisiert wird. Figma kann von jedem verwendet werden, nicht nur von einem Lizenzinhaber, wodurch der Zugriff auf und das Hinzufügen von Dateien zu einer freigegebenen Datei problemlos möglich ist.

Aufgabe: An die Entwicklung liefern

Wenn UI-Designer die Erstellung einer Benutzeroberfläche abgeschlossen haben, liegt es in ihrer Verantwortung, Designdateien an Entwickler zu übergeben, damit das Projekt abgeschlossen werden kann. Aber eine Übergabe ist mehr als ein einfacher Datenaustausch, es ist eine Gelegenheit für Designer, die Gründe für ihre Arbeit zu kommunizieren und dadurch Entwicklern zu helfen, Form und Funktion zu verbinden.

Es gibt Dutzende von Handoff-Methoden und noch mehr Tools von Drittanbietern, um das Redlining und Abfragen von Objektinformationen aus Sketch- und Figma-Dateien zu erleichtern (siehe Avocode und Zeplin). In diesem Vergleich betrachten wir jedoch das ursprüngliche Designtool, bevor es mit Plugins oder anderen Apps ergänzt wird.

Interessanterweise verringert der Aufstieg von UX-Designsystemen die Notwendigkeit dieser Form der Übergabe, da die veröffentlichten Komponentenbibliotheken die einzige Quelle der Wahrheit für den Entwickler sind. Sie können die genauen Layout- und Designinformationen der Komponenten extrahieren, ohne auf eine lieferbare oder UX-Beratung warten zu müssen.

Außerdem kann das Abrufen von Informationen von Objekten in einer Designdatei während der Konstruktion eines Designsystems hilfreich sein, daher ist ein Blick auf das CSS eine gute Sache.

Mit Sketch können Sie Objekte auswählen und ein Kontextmenü zum „Kopieren von CSS-Attributen“ verwenden, aber es ist nicht ideal. Figma macht einen fairen Job, indem es im Eigenschaftsfenster eine Registerkarte „Code“ bereitstellt, die CSS-, iOS- oder Android-Werte für ausgewählte Objekte erzeugt (Entwickler können diese Funktion im Nur-Ansichts- oder Prototypmodus verwenden).

Gewinner: Axure

Derzeit verfügt nur Axure über leistungsstarke „Generatoren“, die vollständig veröffentlichbare HTML-Dateien, Word-Spezifikationen und sogar CSV-formatierte Berichte zum Import in eine Tabellenkalkulation erstellen. Die Ergebnisse sind zwar keine Designbibliothek, aber die App bietet nützliche Materialien für Entwicklerübergaben.

Gewinner des Gesamtdesign-Tools: Figma

Den Zahlen nach ist Figma der Gewinner dieses Vergleichs, vor allem wegen seines kollaborativen Charakters und seiner plattformübergreifenden Verfügbarkeit. Da immer mehr Teams Designsysteme verwenden, die eine engere Integration zwischen Front-End-Entwicklung und Design erfordern, bieten die Echtzeit-Zusammenarbeit und die Live-Einbettungsfunktion von Figma einen großen Vorteil. Auf der anderen Seite ist Figma eine Online-Anwendung, deren Verwendung in einem Unternehmen aus Sicherheitsgründen möglicherweise verboten ist.

Axure belegt den zweiten Platz aufgrund seiner sofort einsatzbereiten Stärke mit vorgefertigten Komponenten, leistungsstarken interaktiven Prototyping-Funktionen und Dokumenterstellung. In dem selteneren Fall, dass ein Unternehmen auf reale Datenspeicher zugreifen muss, um zu sehen, wie sich eine bestimmte Funktion verhält, ist Axure die beste oder einzige Option.

Sketch ist vielleicht das letzte, aber sobald Benutzer die vielen Plugins und Ressourcen nutzen, die für das Tool verfügbar sind, ist es extrem leistungsfähig und kann an die Bedürfnisse einer Designgruppe angepasst werden. Die Einschränkung hier ist, dass Plugins nach jedem Sketch-Update aktualisiert werden müssen, und als reine Mac-Anwendung können Unternehmen, die Windows-PCs verwenden, es nicht verwenden.

Alle drei in diesem Artikel besprochenen Tools sind für sich genommen leistungsstark. Jeder hat jedoch Einschränkungen. Es liegt an den einzelnen Designern und Teams, ihre Workflow-Anforderungen zu identifizieren, die Vor- und Nachteile jedes Programms abzuwägen und eine geeignete Wahl zu treffen.

Weiterführende Literatur im Toptal Design Blog:

• Verzichten Sie auf MVPs, übernehmen Sie Minimum Viable Prototypes (MVPr)
• Die Kraft von Figma als Designtool
• So erstellen Sie einen Sketch-Styleguide, eine Bibliothek und ein UI-Kit
• Verständnis von Designsystemen und -mustern
• Tod dem Wireframe. Direkt zu High-Fidelity!