13 min 
Die Auswahl geeigneter Tools ist nie einfach.
Erschwerend kommt jedoch hinzu, dass die Zahl der Alternativen rapide wächst.
Wo es früher bspw. quasi nur Photoshop, Illustrator und InDesign in der Adobe Creative Suite für die Erstellung von Designs gab, sind es heute unzählige Cloud- bzw. Web-basierte Einzellösungen und Mobile Apps – für Retusche, Bildbearbeitung, Illustration, Freistellen, Komprimierung, Collagen und und und.
Ich kann mich noch gut daran erinnern, wie froh ich selbst über den Launch von Adobe Express war. Nicht nur, weil es plötzlich eine Cloud-native Alternative zu Canva gab, sondern weil ich dadurch jederzeit und von überall arbeiten konnte. Denn auch mein Content- bzw. Design-Workflow hat sich in den letzten Jahren quasi komplett in den Browser verlagert.
Eben diese Anforderung hat damals auch dazu geführt, dass ich mich für Figma und gegen Adobe XD entscheiden musste.
Auch wenn diese Entscheidung mit der Übernahme von Figma durch Adobe nun ein Stück weit relativiert wird, wage ich – gemeinsam mit Design-Kollegen – doch noch mal einen vergleichenden Blick auf die beiden Tools.
Die Design-Experten in diesem Beitrag
Freelance Experience Designer & Content Strategist, Dozent für Grafik- & Visual Interface Design
Favorit: Figma (früher Sketch und Zeplin)
CEO und Gründer von Type Studio
Favorit: Figma
UX Consultant bei konversionsKRAFT
Favorit: Figma (früher Sketch und Balsamiq)
Und ich sag’ auch gleich, wie’s ist: Ich nutze Figma inzwischen für (fast) alles. Für Illustrationen in Artikeln, für LinkedIn Slider und natürlich auch für das Webdesign von toushenne.de – sei es für die Erstellung von Wireframes oder Prototypen für Responsive Design. Lediglich Audio- und Video-Content mach’ ich mit den Tools aus der Adobe Creative Cloud. Aber je weniger Tools ich grundsätzlich brauche, desto weniger muss ich lernen und desto effizienter werde ich. #LessIsMore
Wie wähle ich das passende (Design-)Tool?
Um diese Frage beantworten zu können, habe ich verschiedene Designer nach ihren Auswahlkriterien gefragt. Für den selbständigen Experience-Designer Emanuel Jochum (der mich auch beim Redesign von toushenne.de unterstützt), hängt die Wahl des Tools bspw. maßgeblich vom Projektumfang, Zeitraum, Fokus (Ideenfindung, Konzept, Design, Testing etc.) sowie der Form der Zusammenarbeit ab.
Darüber hinaus spielen Preise und die technische Performance eines Tools eine wichtige Rolle, woraus sich schon die wichtigsten Anforderungen für die Wahl des passenden Design-Tools ergeben:
- Projektumfang und Form der Zusammenarbeit
- Funktionen (z. B. Wireframing, Web/UI Design, Prototyping usw.)
- Preis bzw. Preismodell
- Flexibilität (Plugins, Schnittstellen etc.)
- Kompatibilität / Umgebung (Browser, App, lokal installierte Software)
- Bestehende Tool-Landschaft
Die beliebtesten Tools für Designer:innen und Design-Teams
Eine gute Übersicht über Design-Tools bietet die 2022 Design Tools Survey von UX Tools. Der Blick auf die Kategorien “UI Design”, “(Basic) Prototyping” und “Design Systems” ergibt ein eindeutiges Bild: Figma ist mit Abstand die Nummer 1 – mit dem stärksten Wachstum, den meisten Nutzer:innen und der besten Bewertung. Sogar in der Kategorie Digital Whiteboarding steht das Tool gemeinsam mit FigJam auf Platz 2 und 3 direkt hinter Miro.
Ein Blick auf Figmas Wachstum (siehe Diagramm unten) bestätigt den ersten Eindruck: Kein anderes Tool ist so stark gewachsen – mit Ausnahme von Adobe ist genau genommen keine der Alternativen überhaupt gewachsen. Dieselbe Tendenz wird auch mit Blick auf die Vorjahresumfragen sichtbar.
Laut Slintel hat sich Figma inzwischen einen Marktanteil von knapp 33 % erarbeitet – zu einem großen Anteil durch eine produktgetriebene Wachstumsstrategie, ähnlich wie Notion oder Typeshare. Wenn man bedenkt, dass Adobe XD knapp 15 % Anteil hat und die beiden Tools bald zum selben Unternehmen gehören, dann ergibt sich daraus die inzwischen fast schon selbstverständliche Dominanz von Adobe – knapp 50 % Marktanteil sind “gut genug”, bieten aber gleichzeitig noch ausreichend Wachstumspotenzial.
Vielleicht auch interessant für dich:
Die G2 Grids für Prototyping und Wireframing ergeben eine ähnliche Top-Liste. Einziger auffälliger Unterschied ist die Einordnung von InVision als “Leader” für Prototyping – in der Umfrage belegte das Tool gerade einmal Platz 6 in der Kategorie Basic Prototyping. Da es aber hinter Figma und Adobe XD rangiert, spielt es wohl ohnehin keine große Rolle.
Kein Wunder also, dass innovative Unternehmen wie Netflix, Airbnb und Spotify auf Figma setzen.
Wenn dich die Vor- & Nachteile der Tools nicht interessieren, dann spring gerne direkt zu meinem Fazit und weiteren Tool-Tipps.
Marktführer: Figma
Das Unternehmen hat es sich auf die Fahne geschrieben, “Design für alle zugänglich zu machen”. Dieses Ziel ist seit der ersten Idee im Jahre 2011 bis heute Programm, denn Nutzer:innen können das Designtool nicht nur kostenlos nutzen, sondern haben auch von überall Zugriff auf die Dateien.
Vor- und Nachteile von Figma
|
Vorteile |
Nachteile |
|
|
Die grundlegenden Funktionen von Figma
Der Aufbau und die Funktionen des webbasierten Tools ähneln Adobe XD (siehe unten), die Werkzeuge sind intuitiv und selbsterklärend. Wer nicht das erste Mal mit einem Webdesign- oder Prototyping-Tool arbeitet, wird sich in Figma schnell zurechtfinden. Startpunkt ist oft ein Frame – etwa für einen App-Screen oder ein Website-Layout. Die Taste F ist hier dein Freund, um die Schnellauswahl zu öffnen. Mit dem Frame-Tool kannst du natürlich auch eine individuelle Zeichenfläche erstellen.
Wie bei anderen Design-Tools sind deine Ebenen auf der linken Seite und lassen sich per Drag-and-drop beliebig sortieren oder gruppieren. Darüber hinaus gibt es die Möglichkeit, verschiedene Seiten (Pages) einzurichten und globale Komponenten (Assets) zu erstellen und zu speichern.
1. Bildbearbeitung
Eine weitere wichtige Funktion ist die Bildbearbeitung. Du kannst nicht nur Bilder einfach in dein Design hineinziehen, sondern eben auch verschiedene Einstellungen, wie Schnitt, Farbe oder Sättigung, vornehmen. Um direkt aus Figma heraus auf lizenzfreie Bilder zuzugreifen, bietet sich bspw. das Unsplash-Plugin an.
2. Prototyping
Um einen Prototyp in Figma zu erstellen, wähle das entsprechende Frame aus und klicke anschließend im rechten Menü auf “Prototype”. Über die Prototype Settings kannst du dann diverse Einstellungen vornehmen und Aktionen bestimmen, die du über die Live-Ansicht (Play-Button) abspielen, kommentieren und prüfen kannst.
Für eine Live-Vorschau auf mobilen Endgeräten kannst du die Figma Mirror App nutzen.
Tipp: Mit dem Prototype-Feature kannst du sogar den typischen Präsentationsmodus von Powerpoint & Co. imitieren und Figma direkt nutzen, um deine Konzepte und Designentwürfe in einer Präsentation – zum Beispiel beim Kunden – zustellen. Deine Design-Frames werden dabei zu Slides!
3. Kollaboration
Via Mail kannst du auch ganz einfach weitere Personen zu deinem Projekt einladen und mit ihnen zusammenarbeiten – live (in der Bezahlversion sogar per Audio-Chat) oder per Kommentare. Emanuel und ich arbeiten so bspw. gemeinsam am Redesign von toushenne.de (siehe Screenshot unten) und auch Erik Eimterbäumer nutzt Figma mit dem gesamten Team.
Im Produktbereich arbeiten wir gemeinsam mit Designern und Entwicklern am Tool und der Website. Im Marketing erstellen wir Grafiken für Werbeanzeigen, E-Mail Templates und YouTube Thumbnails und seit kurzem haben wir sogar ein gemeinsames Dokument in dem wir visuell unseren Fortschritt festhalten, um uns die Entwicklung vor Augen zu halten und gemeinsam die Erfolge zu feiern.
4. Inspect: Design to Code
Mithilfe der Inspect-Funktion können wir unsere Designs – d. h. jedes einzelne Element – und allgemeinen Styles dann schnell und unkompliziert als CSS-Code kopieren und damit die Umsetzung beschleunigen. Das hat den Vorteil, dass bspw. auch mein Entwickler in Figma arbeitet und sich dort quasi alle Vorgaben selbst holen kann. Das spart Zeit beim Briefing bzw. Handoff und macht zusätzliche Tools wie Zeplin überflüssig.
Lediglich für besondere Anforderungen wie bspw. den Export von SVG-Grafiken als HTML bedarf es Plugins.
Das macht aber nichts, denn die Figma-Community ist so groß, dass es inzwischen fast für jede Aufgabe eine Lösung gibt. Ganz allgemein stellt Figma Nutzer:innen ein umfangreiches Repertoire an verschiedenen Ressourcen bereit:
- Der Figma Blog informiert unter anderem über neue Produktupdates, gibt hilfreiche Tipps für die Nutzung und beinhaltet Insights von verschiedenen Designer:innen. Mit den Best-Practice-Guides und YouTube-Videos gehst du noch eine Ebene tiefer ins Detail.
- Die Figma Templates sind eine Sammlung verschiedener Vorlagen, die du nutzen kannst, um nicht bei null anfangen zu müssen. Und im Community Hub selbst findest du unzählige weitere Ressourcen.
Unterm Strich ist Figma ein extrem vielseitiges Tool, mit dem wir nicht nur Website- oder App-Layouts konzipieren können, sondern auch Bilder bearbeiten, Social Media Creatives gestalten oder Logos entwickeln – so wie ich oder auch Erik.
Ich nutze Figma die meiste Zeit für das UI Design für unser Produkt Type Studio und für die Gestaltung der Website. Außerdem habe ich unser Corporate Design in Figma erstellt und sogar unser Logo ist in Figma entstanden. Nur das Pen Tool ist in Adobe Illustrator ist nach wie vor viel mächtiger und präziser. Für manche Illustrationen, besonders wenn ich Effekte wie Grain benutzen möchte, nutze ich daher weiterhin Illustrator.
Runner-up: Adobe XD
Im Kontrast zu anderen Creative Cloud-Programmen, ist die Bedienoberfläche von Adobe XD sehr übersichtlich, fast schon minimalistisch. Aber weniger ist oft mehr und so ist auch XD in der Handhabung viel intuitiver.
Vor- und Nachteile von Adobe XD
| Vorteile | Nachteile |
|
|
Die grundlegenden Funktionen von Adobe XD
Das Vektor-basierte Design-Tool von Adobe setzt vor allem auf drei zentrale Funktionen:
- Design
- Prototyp
- Freigeben (Zusammenarbeit).
Du musst dich lediglich für ein Layout entscheiden und schon kannst du damit beginnen, deinen Ideen erste Konturen zu geben. Dafür kannst du dich für eine vorgegebene Zeichenfläche oder benutzerdefinierte Größen entscheiden – ähnlich den Frames bei Figma.
1. Design
Die erste Funktion in Adobe XD ist zugleich die wichtigste. Im Design-Tab finden die meisten Aktionen statt: Du kannst deine Elemente steuern, auf verschiedene Ebenen zugreifen und weitere Plug-ins verwalten. Als „Elemente“ können wir über die linke Werkzeugleiste individuelle Farben, Zeichenformate und Komponenten, wie etwa häufig genutzte Buttons, speichern. Außerdem befindet sich dort der Link zu Plug-ins via Adobe Exchange. Darüber hinaus bietet Adobe XD zahlreiche Erweiterungen an, um andere Programme, wie beispielsweise Microsoft Teams oder Slack, für den Freigabe-Prozess anzubinden.
Wer hier nicht fündig wird, kann auch seine eigenen Funktionen und benutzerdefinierten Plug-ins erstellen, siehe adobe.io.
2. Prototyp
Im “Prototyp”-Bereich kannst du deine Designs ganz einfach per Drag-and-drop zu interaktiven Prototypen machen und über die Vorschau in Echtzeit testen – über die Adobe XD Mobile App und ein USB-Kabel sogar direkt am gewünschten Endgerät. Mithilfe des Menüs auf der rechten Seite definierst du dann alle weiteren Einstellungen, etwa den Trigger (z. B. der Klick auf ein Element) und die gewünschte Aktion (z. B. Anzeige des nächsten Screens). Welche Aktionen bestehen, zeigen dir die grauen Pfeile an, die sichtbar werden, sobald eine Ebene ausgewählt wird.
3. Freigeben
Im dritten Bereich legst du Zugriffsrechte fest und kannst dabei sogar individuell definieren, welche Ansicht eine Person erhalten soll.
4. Trainings, Templates und Ideen
Für alle, die sich mit Adobe XD vertraut machen möchten, gibt es detaillierte Schritt-für-Schritt-Anleitungen (Tutorials) und ein Übungs-Template, um die ersten Schritte zu gehen. Weitere Inspiration findest du im XD Ideas Blog und natürlich auf der (inzwischen ebenfalls zu Adobe gehörenden) Design-Plattform behance.
Randnotiz: Ist Sketch eigentlich noch eine ernstzunehmende Alternative?
Wenn es um das Erstellen von vektorbasierten Designs, multiplen Artboards oder klassischen Wireframes geht, schwör(t)en viele Designer:innen auf das macOS-Tool mit dem gelben Diamanten. Sowohl als Alternative als auch als Ergänzung zu den Programmen von Adobe war Sketch bis ca. 2019 für viele die erste Wahl. Auch mein Kollege Ole Freigang nutzte lange Zeit Sketch, um Konzepte, Wireframes, Designs und Prototypen zu erstellen – aus einem sehr pragmatischen Grund:
Als ich damals vor der Entscheidung stand, gab es für den Bereich Design nur Photoshop (kompliziert und eigentlich nicht dafür ausgelegt), und ganz neu Sketch. Damals war ich noch Student und ich konnte Sketch für einmalig 50 € statt 100 € kaufen. Das war ein gutes Angebot, da Adobe schon auf die CC umgestiegen war, was monatliche Gebühren bedeutete. Zusätzlich gab es damals schon viele hilfreiche (kostenlose) Plugins für Sketch, die es so für Photoshop nicht gab oder die einfach nicht so reibungslos funktioniert haben.
Allerdings hat Sketch gravierende Nachteile. Es fehlt beispielsweise die Möglichkeit, als Team an einer Datei zu arbeiten – so wie das bei uns inzwischen gang und gäbe ist. Denn auch ich als Content-Stratege arbeite regelmäßig mit den Design- und Marketing-Kolleg:innen (in Figma) zusammen, um Konzepte und Layouts für die Website oder auch Social Media Creatives abzustimmen.
“Da Figma als Desktop- und Browserversion verfügbar ist, ist der Zugang leichter und geräteunabhängig. Je nachdem für welche Version man sich entscheidet, brauche ich auch keine Schriften mehr teilen oder extra installieren. Auch Kommentare können gesetzt werden, so kann schnell Feedback an der richtigen Stelle gegeben werden, das ist übersichtlich und effizient. Aus meiner Sicht war Sketch lange auf Platz eins, wurde aber mit der Zeit von Figma überholt.”
Figma und Adobe XD im direkten Vergleich (plus Sketch und Framer X)
Ich denke, es ist inzwischen alles gesagt, um guten Gewissens eine Entscheidung für Figma zu treffen. Dennoch möchte ich dir abschließend die folgende Tool-Übersicht von Tomas Urlikas nicht vorenthalten, für die er Mitte 2020 gemeinsam mit seinem Team die vielen Features und vermeintlichen Vor- und Nachteile der Tools bewertet hat. Das ist natürlich eine sehr subjektive Einschätzung und in der Zwischenzeit hat sich am Funktionsumfang viel getan, aber sie kamen schon damals zu der Entscheidung, dass Figma wohl das größte Potenzial als “Allround-Design-Tool” hat – recht haben sie behalten.
Nützliche Tools für Content-Designer:innen und Creators, um den eigenen Tech-Stack zu komplettieren
Auch wenn die Wahl eines „Meta-Designtools“ wohl zwischen Figma und Adobe XD entschieden wird (wenn letzteres wirklich noch als Konkurrent bezeichnet werden kann), gibt es darüber hinaus unzählige Tools, die uns als Content-Schaffende die Arbeit enorm erleichtern.
Im direkten mit Figma steht für mich persönlich Markup.io, um nicht nur intern, sondern vor allem auch extern Feedback einzuholen. Für das Redesign von toushenne.de habe ich dort beispielsweise zwei Screenshots hochgeladen und meinen Newsletter-Abonnent:innen über einen einfachen Link zum Kommentieren freigegeben (siehe Screenshot unten). Auf diese Weise konnte ich prüfen, inwieweit das neue Layout „funktioniert“.
Ein weiteres Tool, dass ich gerne für User Research nutze, ist Hotjar. Die Plattform bietet Heatmaps und Session Recordings zur Analyse des Nutzerverhaltens, Feedback- und Umfrage-Widgets zum Sammeln von qualitativem Feedback und neuerdings auch die Möglichkeit für Face-to-Face-Interviews.
Vielmehr braucht es – in Ergänzung zur klassischen Webanalyse mit Google Analytics & Co. – eigentlich kaum, um gute Webinhalte zu gestalten. Vielleicht noch ein A/B-Testing-Tool wie VWO (die einzige kostenlose Alternative nach dem Sunset von Google Optimize) und eine Content-Cloud wie Sanity; und natürlich Adobe Express oder Canva, wenn es mal nicht um Interface Design geht.
Weitere Tool-Tipps – von mir, meinem Co-Autor Ben Harmanus und Tool-Experte Jens Polomski – für diverse Content-Aufgaben findest du natürlich auch im Buch Content Design!
WERBUNG
Content Design (2. Auflage)
Robert Weller, Ben Harmanus
Mit diesem Buch lernst du die Konzeption und audiovisuelle Gestaltung von Content holistisch zu betrachten und zielgerichtet umzusetzen.
Letztendlich ist die Entscheidung für oder gegen ein Tool aber vor allem eines: individuell. Stell dir dabei einfach Fragen wie:
- Warum will ich überhaupt ein bestimmtes Tool nutzen?
- Verspüre ich einen konkreten Schmerz im Prozess oder bin ich mit meinen aktuellen Ergebnissen unzufrieden? Oder bin ich einfach nur durch eine Empfehlung oder Hörensagen auf ein Tool aufmerksam geworden und will es ausprobieren?
- Habe ich einen echten Bedarf für ein weiteres Tool? Bin ich mir sicher, dass keines meiner bereits genutzten Tools diesen Bedarf ausreichend bedienen kann?
- Ist mir ein weiteres Tool die Kosten wert?
Ich würde fast darauf wetten, dass es nicht immer ein neues Tool sein muss und wir uns den „cost of switching“ sparen können. Es muss nicht immer das neuste und vermeintlich beste sein, manchmal reicht auch das praktische und bewährte. ;-)
Welche Tools nutzt du in deinen Content-Workflows?
Möchtest du weiterhin investigative, inspirative und inhaltlich tiefgründige Fachartikel mit journalistischen Anspruch erhalten? Dann unterstütze mich dabei – jeder Beitrag, schon ab 1 Euro, ist eine wertvolle Hilfe, um die Zukunft von toushenne.de zu sichern.
unterstützen
Robert ist Autor des Bestsellers „Content Design“ (Hanser Verlag), unabhängiger Content-Stratege und Gründer dieses Magazins (ehem. „toushenne.de“). Daneben lehrt er Content-Marketing an der FH JOANNEUM sowie Content Design an der ZHAW. Mit über zehn Jahren Erfahrung aus dem Agenturgeschäft, E-Commerce- & SaaS-Unternehmen sowie zahlreichen Freelance-Projekten mit führenden Marken wie Adobe, Bike24 und contentbird, entwickelt er wirksame Strategien für die Optimierung des Content ROI.
