Welches UX-Tool ist das beste?
Lange Zeit war Sketch der Platzhirsch unter den Tools für UX und UI Designer*innen. Doch die Konkurrenz wie Figma und Adobe XD holt auf. Insbesondere in den letzten Monaten greifen Figma und Adobe XD mit einzigartigen Funktionen den Marktführer an. Grund für uns, die wichtigsten Tools für UX und UI Designer*innen genauer unter die Lupe zu nehmen und in sechs Kategorien gegeneinander antreten zu lassen: Wer überzeugt beim Prototyping? Welches Tool ist am einfachsten zu bedienen? Mit welcher Software können Teams am besten kollaborativ zusammenarbeiten? Erfahrt, welches Tool das Rennen macht.
Eine kurze Übersicht über die Kandidaten
Sketch
Mit seinem Launch 2010 zählt Sketch zu den alten Hasen im UI Design und genießt weltweit großes Ansehen. Das liegt unter anderem an den zahlreichen Plugins und Tutorials, aber vor allem daran, dass es mit vielen anderen Design-Programmen kompatibel ist. Größte Schwäche: Nutzer*innen können Sketch nur mit einem Mac verwenden. Außerdem schwächelt Sketch beim kollaborativen Arbeiten, das noch in den Kinderschuhen steckt.
Figma
Diese Schwäche von Sketch nutzt Figma aus: Die webbasierte App lässt Designer*innen in Echtzeit zusammenarbeiten. Damit eignet sich Figma besonders gut für große Projekte mit verschiedenen Stakeholdern. Größte Schwäche: Um mit Figma bestmöglich arbeiten zu können, ist ein Internetzugang erforderlich. Es gibt zwar eine Offline-Desktop-Version. Diese bietet jedoch nicht den vollen Funktionsumfang. Beispielsweise können Nutzer*innen offline nicht auf alle Figma-Dateien zugreifen.
Adobe XD
Adobe XD fokussiert sich auf UI Design und schließt damit eine Lücke in der Adobe Suite. Wer in einem Projekt viel mit anderen Adobe-Programmen arbeitet, für den bietet es sich an, in der Familie zu bleiben. Größte Schwäche: Adobe XD hat einen ähnlichen Funktionsumfang wie Figma. Im Vergleich zu seinem Konkurrenten fehlen Adobe XD einige Funktionen beziehungsweise Adobe XD löst diese nicht so gut wie Figma. Beispiele hierfür sind Styles, das Ablesen von CSS Daten oder Auto Layout (Anpassen des Elements an den Inhalt). Für uns daher kein Wunder, dass Figma aktuell an Beliebtheit gewinnt.
Axure
Bekannt für sowohl schnelle als auch komplexere HTML Prototypen glänzt dieses Design-Tool mit besonders umfangreichen und realistischen Prototypen. Größte Schwäche: Axure eignet sich nur begrenzt für visuelles Design.
Der Vergleich im Detail
Der harte Faktor: Geldbeutel
Auch wenn Figma eine kostenlose Variante anbietet, für Firmen fallen mindestens 12 $ pro Nutzer*in pro Monat an. Sketch ist mit 9 $ im Monat der Gewinner dieser Kategorie. Die anderen Tools sind teurer, bieten aber je nach Situation auch eine günstigere Lösung an. So fallen bei Adobe XD keine zusätzlichen Kosten an, wenn die Adobe Cloud schon abonniert ist. Auch ein Blick auf den Funktionsumfang ist sinnvoll. Es können beispielsweise versteckte Kosten entstehen, wenn ein weiteres Programm gebraucht wird, um gewünschte Funktionen zu ergänzen. Bei Sketch – dem objektiv günstigsten Tool – sind für bestimmte Funktionen Programme wie Abstract oder ProtoPie erforderlich.
Die Antwort, welches Tool das Günstigste ist, ist also nicht so leicht zu beantworten. Fest steht nur: Axure mit mindestens 25 $ pro Monat ist es nicht.
Verlierer: Axure
Der Einstieg
Wer das Interface von Adobe XD, Figma oder Sketch kennt, dem wird aufgefallen sein, dass alle Programme sich irgendwie ähneln. Dadurch fällt es Nutzer*innen leicht, das Programm zu wechseln. Viel schwerer gestaltet sich der Start in Axure. Es verfügt über mehr Funktionen rund ums Prototyping. Zudem geht es mit Frames und Artboards anders um, so dass weniger Wiedererkennungsmerkmale bestehen. Wobei die neuste Version – Axure 10 – eine verbesserte Usability mit sich bringt und das Interface sich optisch stärker an den anderen Tools orientiert.
Wer mit keinem der Programme bisher in Berührung gekommen ist, dem bietet Sketch den einfachsten Einstieg.
Gewinner: Sketch
Der Start in Projekte
Für die ersten digitalen Skizzen und den Bauplan der Architektur bietet Axure eine implementierte Wireframe- und Flowchart-Library mit verschiedenen Elementen.
Doch der klare Gewinner dieser Kategorie ist Figma. Das kollaborative Arbeiten, welches in frühen Design-Phasen sehr relevant sein kann, setzt Figma am besten um. Außerdem punktet das Unternehmen mit einem neuen Tool: FigJam ist ähnlich wie Miro eine Art digitales Whiteboard und enthält verschiedene Templates zu bekannten Design-Methoden wie User Journeys oder Flow Charts.
Gewinner: Figma
Visuelles Design
Wie oben schon als größte Schwäche angekündigt, holt Axure beim visuellen Designs nicht die Poleposition. Prinzipiell verfügt Axure über sehr ähnliche Funktionen wie die anderen drei Programme. Diese sind jedoch teilweise versteckter und schwieriger zu handhaben.
In Sketch, Figma und Adobe XD können Nutzer*innen bestehende UI Kits von Material Design verwenden, um sich besser zu orientieren.
Um Konsistenz im visuellen Design sicherzustellen, müssen Nutzer*innen vor allem Libraries mit Elementen wie Buttons sowie Styles wie verwendete Schriftschnitte oder Farben anlegen können. Diese zwei Themen lösen Figma und Sketch am besten. Elemente, die in Sketch als Symbol (Komponente) gespeichert werden, sind in einer Übersichtsseite zu finden. Figma hingegen trumpft mit viel Flexibilität auf. Als einziges Tool ermöglicht es Figma, mehrere Eigenschaften anzulegen. Dadurch können Nutzer*innen neben Zuständen zum Beispiel auch verschiedene Größen oder Varianten in einer Komponente speichern.
Gewinner: Figma
Responsive Design
Inzwischen ermöglichen es alle vier Programme mit Constraints (auch Resizing genannt), die Frames responsive zu gestalten. Nutzer*innen können das Verhalten von Screen-Elementen so umschreiben, dass sie den Screen problemlos größer ziehen können, ohne dass das Layout verunstaltet wird. Adobe XD sticht in dieser Kategorie durch eine Einstellungsmöglichkeit besonders hervor: Dank der Einstellung "Auto Layout" passen sich alle verwendeten Elemente automatisch an, wenn der Screen vergrößert wird. Die Funktion ist noch nicht perfekt, so dass Nutzer*innen einzelne Elemente manuell nachjustieren müssen. Für uns ist die Funktion dennoch ein großer Pluspunkt.
Gewinner: Adobe XD
Prototyping
Für das UX Design unverzichtbar sind mittlerweile die Funktionen, um einen Prototypen zu gestalten. Ohne Plugin sind in Sketch nur Klickdummys möglich. Mit Figma und Adobe XD hingegen können es Nutzer*innen zu weit mehr als nur einem Klickdummy bringen. Mit den implementierten Interaktionen und Übergängen lassen sich schnell tolle Prototypen kreieren. Beide Tools haben einen ähnlichen Funktionsumfang. Wie Sketch bauen sie auf das Prinzip "Veränderungen im Interface erfordern neues Frame". Soll beispielsweise ein Dialogfenster dynamisch erscheinen, muss hierfür ein neuer Frame erstellt werden. Dieses Prinzip führt zu einem linearen Prototyp. Ist ein realistischer und flexibler Prototyp gefragt, punktet Axure. Denn mit Axure können Nutzer*innen echte Daten implementieren, und Bedingungen für Interaktionen festlegen. Zudem ermöglicht Axure es, Daten in den Prototypen einzugeben. Das Fine Tuning von Transitions ist jedoch aufwendig.
Verlierer: Sketch
Fazit
Das perfekte Tool für UX und UI Design gibt es noch nicht. Aber wird es das überhaupt jemals geben? Aktuell hat für uns Figma an vielen Stellen die Nase vorne. Welches Programm sich für ein Projekt oder eine Person am besten eignet, hängt von Präferenzen und Anforderungen ab. Wenn Kund*innen beispielsweise ihre Projekte nicht in einer Cloud speichern wollen, so wird Figma nicht die erste Wahl sein. Auch die bisherige Erfahrung mit Programmen spielt natürlich eine Rolle. Wer jahrelang mit Sketch gearbeitet hat, ist bei einem neuen Projekt mit Sketch zunächst schneller als mit Adobe XD. Ein Wechsel ist Chance und Risiko zugleich: Bei einem Wechsel können Nutzer*innen mit neuen Funktionen belohnt werden, die ihr Arbeiten erleichtern. Anderseits könnten sie Altbekanntes bitter vermissen.
Auch wenn Figma für uns aktuell vieles richtig macht. Langfristig hat Figma das Rennen noch nicht gewonnen: Alle vier Tools haben in den letzten Monaten Neuerungen herausgebracht. Auch zukünftig werden sie sich kontinuierlich weiterentwickeln und im Vergleich zu den Konkurrenten "nachziehen". Es ist kein Zufall, dass die Programme einen ziemlich identischen Funktionsumfang haben. Das zeigt das Beispiel von Sketch: Seit Frühjahr 2021 können Nutzer*innen auch in Sketch in Echtzeit zusammenarbeiten – auch wenn diese Funktion noch verbesserungswürdig ist. Kein Wunder: War doch die kollaborative Zusammenarbeit die Funktion, mit der Figma in Corona-Zeiten punkten konnte. Figma wiederum wird – inspiriert von Adobe XD und Axure – Komponenten interaktiv machen. Auch Axure geht seine größte Schwäche an und investiert in die Usability, damit es genauso einfach bedienbar wird wie die anderen Tools.
Alles in allem lohnt es sich, neugierig und offen für neue Funktionen zu bleiben und sich regelmäßig über Updates zu informieren. Denn Design und damit auch die Design-Tools werden sich stetig weiter wandeln.
Welches Tool eignet sich für Euch und Euer Projekt am besten? Unser Download bietet Euch einen Überblick über die Unterschiede zwischen den einzelnen Tools.
Mehr Infos
- Agile UX: Architekten der digitalen Transformation
- UX Design: Nutzererlebnisse gestalten
- UID Buzzword Dschungel: User Experience = Usability plus X?
- UX Buzzword-Dschungel: Mit Prototyping frühzeitig Nutzer abholen