UX/UI Prototyping Tools: Unser Designer Flo beantwortet wichtige Fragen

Lese­dau­er: ca. 6–7 Minuten

Bei all unse­ren Pro­jek­ten ist eine hohe Nut­zer­freund­lich­keit von ent­schei­den­der Bedeu­tung. Für die opti­ma­le Gestal­tung ste­hen uns eine Viel­zahl von Design-Tools zur Ver­fü­gung. In die­sem Arti­kel werden wir uns auf die zwei gro­ßen Play­er im Pro­to­ty­p­ing- und Design-Tool Wett­be­werb kon­zen­trie­ren. Beide Tools bie­ten bemer­kens­wer­te Funk­tio­nen, die die Arbeit von Designern auf ein neues Level heben können. 

Es geht um die Pro­gram­me Adobe XD und Figma. Im letz­ten Jahr gab Adobe die Über­nah­me von Figma bekannt, inzwi­schen ist jedoch von Kar­tell­kla­gen die Rede und ein Abschluss der Trans­ak­ti­on ist noch nicht in Sicht. Wir gehen daher davon aus, dass beide Tools noch eine Zeit lang unab­hän­gig von­ein­an­der bestehen werden. Lasst uns also einen Blick auf die Stär­ken und Unter­schie­de die­ser bei­den Pro­gram­me wer­fen. Unser Head of UX Desi­gner Flo­ri­an Möl­le­ring erklärt im Inter­view mit wel­chem Tool wir bei Lichtblick in Zukunft arbei­ten werden und warum. 

Adobe XD – Eine All-in-One-Lösung für Designer

Adobe XD ist ein viel­sei­ti­ges Tool, das es Designern ermög­licht, ihre Visio­nen zum Leben zu erwe­cken. Mit XD kön­nen Benut­zer­ober­flä­chen erstellt, Pro­to­ty­pen ent­wi­ckelt und sogar Ani­ma­tio­nen hin­zu­ge­fügt werden. Die naht­lo­se Inte­gra­ti­on mit ande­ren Adobe-Pro­duk­ten wie Pho­to­shop und Illus­tra­tor macht es zu einer ver­trau­ten Umge­bung für die­je­ni­gen, die bereits mit der Adobe Crea­ti­ve Cloud arbeiten.

Eine der her­aus­ra­gen­den Funk­tio­nen von Adobe XD ist die Mög­lichkeit, glo­ba­le Design­ele­men­te zu erstel­len, die wie­der­holt ein­ge­setzt werden kön­nen. Durch das Erstel­len von Kom­po­nen­ten kann der Desi­gner Ände­run­gen an einem Ele­ment vor­neh­men und diese Ände­run­gen werden auto­ma­tisch in allen Instan­zen die­ses Ele­men­tes aktua­li­siert. Dies spart Zeit und erhöht die Effi­zi­enz bei der Erstel­lung von UI-Designs.

Figma – Kollaboration und Cloud-basiertes Design

Figma hin­ge­gen zeich­net sich durch seine kol­la­bo­ra­ti­ven Funk­tio­nen und seine Cloud-basier­te Platt­form aus. Meh­re­re Desi­gner kön­nen gleich­zei­tig an einem Pro­jekt arbei­ten und Ände­run­gen in Echt­zeit ver­fol­gen. Dies ermög­licht eine rei­bungs­lo­se Zusam­men­ar­beit und einen effek­ti­ven Work­flow, ins­be­son­de­re wenn sich das Design­team an ver­schie­de­nen Stand­or­ten befindet.

Die Fähig­keit, Pro­jek­te in der Cloud zu spei­chern und frei­zu­ge­ben, macht Figma zu einer benut­zer­freund­li­chen Platt­form für die gemein­sa­me Arbeit an Design­pro­jek­ten. Durch die Mög­lich­keit, Pro­to­ty­pen an Kun­den frei­zu­ge­ben, kön­nen Stake­hol­der und Kun­den leicht auf die Ent­wür­fe zugrei­fen und Feed­back geben. Zudem bie­tet Figma die Mög­lich­keit, Live-Prä­sen­ta­tio­nen zu erstel­len, die es Teams ermög­li­chen, Feed­back in Echt­zeit zu erhal­ten und schnel­le­re Ent­schei­dun­gen zu tref­fen. Ein wei­te­rer Plus­punkt ist die große Com­mu­ni­ty in Figma. In der Online Biblio­thek kann auf Tem­pla­tes, Assets und vor­han­de­ne Design­bei­spie­le zurück­ge­grif­fen werden. Zum Teil sind die Designs kos­ten­los oder kön­nen über wei­te­re Platt­for­men erwor­ben werden.

Welches Tool ist das Richtige für wen?

Die Wahl zwi­schen Adobe XD und Figma hängt von den spe­zi­fi­schen Anfor­de­run­gen des Design­pro­zes­ses und der Team­dy­na­mik ab. Wenn man bereits mit der Adobe Crea­ti­ve Cloud ver­traut ist und naht­los zwi­schen ver­schie­de­nen Adobe-Pro­duk­ten arbei­ten möch­te, könn­te XD die beste Wahl sein. Es bie­tet eine umfang­rei­che Funk­tio­na­li­tät und eine ver­trau­te Benutzeroberfläche.

Wenn hin­ge­gen in einem Team gear­bei­tet wird, das auf Zusam­men­ar­beit und Echt­zeit-Feed­back ange­wie­sen ist, ist Figma mög­li­cher­wei­se die rich­ti­ge Lösung. Die cloud-basier­te Platt­form und die kol­la­bo­ra­ti­ven Funk­tio­nen machen es zum idea­len Werk­zeug für Teams, die an ver­teil­ten Stand­or­ten arbei­ten oder remo­te zusammenarbeiten.

Unab­hän­gig von der Wahl zwi­schen Adobe XD und Figma ist es wich­tig zu beto­nen, dass beide Tools kon­ti­nu­ier­lich wei­ter­ent­wi­ckelt werden. Neue Funk­tio­nen und Ver­bes­se­run­gen werden regel­mä­ßig ein­ge­führt, um den Design­pro­zess noch effi­zi­en­ter und benut­zer­freund­li­cher zu gestalten.

“Der nächs­te Schritt wird sein, dass wir Pro­to­ty­pen-Ele­men­te, die wir aktu­ell an einen Pro­gram­mie­rer wei­ter­ge­ben, schon pro­gram­miert werden bei der Erstel­lung des Layouts.”

- Flo­ri­an Möl­le­ring, Head of UX Design Lichtblick Digital 

Unser Desi­gner Flo­ri­an Möl­le­ring erklärt im Inter­view, warum Lichtblick sich für einen Wech­sel von XD zu Figma ent­schie­den hat:

Frage: Wie lange arbei­test du schon mit XD bzw. Figma? Wie hast du die Tools jeweils kennengelernt? 

Flo: Adobe XD kenne ich durch die Crea­ti­ve Cloud, in der Adobe seine Pro­duk­te gesam­melt anbie­tet und Figma kenne ich eigent­lich nur durch Emp­feh­lun­gen. Zu der Zeit, als ich Web­de­sign begon­nen habe, gab es nur weni­ge Pro­to­ty­p­ing Tools. Figma gab es schon, aber es war noch nicht so ent­wi­ckelt wie jetzt. Damals haben wir noch in Illus­tra­tor und Pho­to­shop Web­sei­ten gelay­outet. Die mir bekann­ten Pro­to­ty­p­ing-Tools gab es damals nur von Mar­vel, Sketch und InVi­si­on. Das ist jetzt so fünf, sechs Jahre her. 

Frage: Mit wel­chen Tools arbei­ten die meis­ten Agen­tu­ren heute?

Flo: Die grö­ße­ren Agen­tu­ren gehen heute eher auf Figma und die klei­ne­ren arbei­ten eher mit XD, was dem Kos­ten­mo­dell geschul­det ist. Wenn eine Agen­tur eine Adobe Cloud hat, ist XD auto­ma­tisch inklu­diert. Figma müss­te dann noch on top dazu gebucht werden. Grö­ße­re Agen­tu­ren haben meis­tens beides.

Frage: Was gefällt dir per­sön­lich an den Tools im Ver­gleich zu ande­ren Anwen­dun­gen wie Invi­si­on oder Sketch? 

Flo: Adobe XD und Figma haben sich aus ver­schie­de­nen Grün­den gegen­über ande­ren Tools durch­ge­setzt. Ein gro­ßer Vor­teil ist die Kol­la­bo­ra­ti­on und die Erstel­lung glo­ba­ler Design­sys­te­me in den Pro­gram­men. Das bie­tet einen Mehr­wert für kom­ple­xe, große Pro­jek­te, da die Feh­ler­quo­te gerin­ger ist und die Pfle­ge der Ele­men­te ein­fa­cher wird. Der Desi­gner bestimmt das Aus­se­hen der Ele­men­te und kann Updates an einer Stel­le vor­neh­men, wodurch sich die Ände­run­gen im gesam­ten Pro­jekt aus­brei­ten und die Mit­ar­bei­ter benach­rich­tigt werden. Dies ist bei Figma Stan­dard, wäh­rend bei Adobe XD die Datei­en online gespei­chert werden müs­sen, was den Ein­satz der Adobe Cloud und den Kauf von zusätz­li­chem Spei­cher­platz erfordert.

Ein wei­te­rer Punkt ist die schnel­le Erstel­lung von Pro­to­ty­pen. Es gibt drei Pha­sen: Design und Lay­out, Inter­ak­ti­on und Pro­to­ty­pe­ner­stel­lung sowie Über­ga­be an die Pro­gram­mie­rer. Bei der Über­ga­be ist Figma wei­ter fort­ge­schrit­ten als XD, da Figma dem Web­de­sign näher kommt und die Hand­ha­bung von Design­ele­men­ten erleichtert.

Ein wei­te­rer Vor­teil bei­der Anwen­dun­gen, sowohl bei Figma als auch bei XD, ist die Mög­lich­keit, dem Kun­den einen Link zu schi­cken, damit er online die Inhal­te über­prü­fen und kom­men­tie­ren kann. Frü­her wur­den PDFs ver­schickt, auf denen der Kunde Kom­men­ta­re hin­ter­ließ, ohne den genau­en Zusam­men­hang zu erken­nen. Die neuen Pro­to­ty­p­ing-Tools bie­ten die Mög­lich­keit, das End­ergeb­nis bes­ser zu simu­lie­ren und den Pro­to­ty­pen näher an das zu brin­gen, was die Pro­gram­mie­rer am Ende erstel­len werden. Dadurch ist der Ver­satz zwi­schen Lay­out und dem fer­ti­gen Pro­dukt geringer.

Frage: Wel­ches Tool hat eher das Poten­ti­al, im gesam­ten Unter­neh­men ein­ge­setzt zu werden, even­tu­ell auch in Kol­la­bo­ra­ti­on mit Kun­den oder Partnern? 

Flo: Das wird bei Figma jetzt immer mehr der Fall sein, weil Figma jetzt auch Fig­Jam, ein White­board-Tool, anbie­tet. Und da ist der große Vor­teil, dass man zwi­schen den Wel­ten hin und her kopie­ren kann, zwi­schen der Figma Datei und Fig­Jam. Das ist auf jeden Fall auch ein Rie­sen­mehr­wert. Ich muss nicht die Wire­frame-Datei expor­tie­ren und in Figma wie­der impor­tie­ren, son­dern ich kann die Ele­men­te ein­fach ins Fig­Jam rüber­zie­hen. Genau­so kann ich auch anders­rum Ele­men­te von Fig­Jam zu Figma rüber­ho­len. Das haben wir gera­de bei einem Pro­jekt schon gemacht, dass wir eine Site­map und eine Page­map in Fig­Jam für das Wire­frame erstellt haben und diese dann in Figma imple­men­tiert haben. Das ist dann ein­fach ein biss­chen schnel­ler vom Work­flow. Bei XD gibt es der­zeit noch kein inte­grier­tes Whiteboard-Tool. 

Frage: Ver­trägt sich Figma mit Anwen­dun­gen aus der Adobe Crea­ti­ve Cloud oder soll­te man in dem Fall lie­ber auf XD zurückgreifen? 

Flo: Die Adobe Crea­ti­ve Cloud wird haupt­säch­lich für klas­si­sche Cor­po­ra­te Design Pro­jek­te ver­wen­det, was jedoch nur etwa 10–20 Pro­zent unse­rer aktu­el­len App-Nut­zung aus­macht. Schät­zungs­wei­se arbei­ten wir zu 80 Pro­zent mit Figma. Der Bedarf für Adobe-Tools besteht zwar noch, aber ihr Ein­satz wird defi­ni­tiv redu­ziert. Für die Erstel­lung von Vek­tor­da­ten kann man zum Bei­spiel auch Figma ver­wen­den statt Adobe lllus­tra­tor. Illus­tra­tor wird eher für die Erstel­lung von Illus­tra­ti­ons­gra­fi­ken oder Erklär­gra­fi­ken benö­tigt, die als Bild expor­tiert werden sollen. 

Frage: Mit wel­chem Tool arbei­ten wir zur­zeit bei Lichtblick und warum? Wel­che Ent­wick­lun­gen ste­hen bei uns in der Agen­tur dies­be­züg­lich an? 

Flo: Seit April lau­fen alle Pro­jek­te bei Lichtblick mit Figma. Wir arbei­ten aber erst seit kur­zem mit Figma, nach­dem wir eini­ge Jahre Adobe XD genutzt haben. Die Ent­schei­dung für den Wech­sel der Anwen­dung fiel aus ver­schie­de­nen Grün­den. Ers­tens, die Über­nah­me von Figma durch Adobe. Letz­tes Jahr hat Adobe den Deal ver­kün­det und obwohl die­ser gera­de noch­mal in Frage gestellt wird, haben wir das Gefühl, dass Figma lang­fris­tig über­le­ben und sich durch­set­zen wird. Ein zwei­ter Grund ist der Kos­ten­fak­tor. Bis dato gab es immer die zwei Lager Figma und XD. Wir waren lange im XD Lager, da wir die kos­ten­lo­se Ver­si­on nut­zen konn­ten und nicht so viele Profi-Lizen­zen benö­tig­ten. Dies hat sich aber nun geän­dert, da unser Design-Team gewach­sen ist und auch ver­mehrt remo­te arbei­tet. Kol­la­bo­ra­ti­ons­mög­lich­kei­ten sind daher viel wich­ti­ger gewor­den. Bei XD muss als Agen­tur dafür die gesam­te Crea­ti­ve Cloud gebucht werden, wäh­rend bei Figma das kol­la­bo­ra­ti­ve Arbei­ten güns­ti­ger ist und viel­sei­ti­ge­re Optio­nen bie­tet. Drit­tens bie­tet Figma, wie bereits ange­spro­chen, Vor­tei­le auf­grund des inte­grier­ten White­board-Tools. Bis­her arbei­ten wir noch mit Con­cept­board als White­board-Tool. Dies könn­te aber durch die erwähn­ten Vor­tei­le in Zukunft von  Fig­Jam abge­löst werden. 

Frage: Wel­chen Vor­teil siehst du bei der Imple­men­tie­rung von Figma für unse­re Kunden? 

Flo: Unser Pro­zess wird durch die Ver­wen­dung von Figma nicht beein­flusst. Aller­dings bie­tet dies unse­ren Kun­den die Mög­lich­keit, stär­ker in den Pro­zess ein­ge­bun­den zu werden. Sie erhal­ten einen eige­nen Figma-Account über eine spe­zi­el­le Lichtblick-Mail-Adres­se und kön­nen über einen Link alle Ite­ra­ti­ons­schrit­te des Pro­jekts ein­se­hen. Dadurch werden sie immer mehr in das Pro­jekt ein­ge­bun­den und haben jeder­zeit Zugriff auf die Datei­en, den Pro­to­ty­pen und die offe­ne Datei­struk­tur. Dies ist ein Vor­teil, da unse­re Kun­den nun eine Board-Über­sicht haben und die Desi­gner-Per­spek­ti­ve erhal­ten. Sie kön­nen die ein­zel­nen Art-Boards im Flug­mo­dus betrach­ten und erhal­ten somit einen umfas­sen­den Über­blick über das Design, die Ele­men­te und die Sei­ten. Dies erleich­tert das Ver­ständ­nis der Web­sei­te und ermög­licht es den Kun­den, bereits in die­sem Modus Kom­men­ta­re zu hin­ter­las­sen. Zudem bie­tet Figma die ein­fa­che Erstel­lung von Ani­ma­tio­nen und Inter­ak­tio­nen, wodurch das End­pro­dukt rea­li­täts­nä­her dar­ge­stellt werden kann.

Frage: Wo siehst du die Zukunft für Pro­to­ty­p­ing- und UX/UI-Tools? Wie werden sich die Design­pro­zes­se weiterentwickeln?

Flo: Der nächs­te Schritt wird sein, dass die Pro­to­ty­pen-Ele­men­te, die wir aktu­ell an einen Pro­gram­mie­rer wei­ter­ge­ben, schon pro­gram­miert werden bei der Erstel­lung des Lay­outs. Und da liegt auch ein ent­schei­den­der Unter­schied zwi­schen Figma und XD, weil die Arbeits­wei­se in Figma schon viel mehr dem Pro­gram­mie­rer ent­spricht als einem Desi­gner. In Figma muss der Desi­gner teil­wei­se schon Design- und Auf­bau­ent­schei­dun­gen tref­fen, die eher dem Web­de­sign ähneln als dem klas­si­schen Design. Bei­spiels­wei­se einen But­ton baut man im Web­de­sign so auf, dass man einen Text­bau­stein hat und in die­sem Text­bau­stein Abstän­de nach links, rechts, oben und unten, das soge­nann­te Pad­ding. Und dann würde man die­sem Text­bau­stein eine Hin­ter­grund­far­be geben. Und damit ist der But­ton schon fer­tig. In XD würde man anfan­gen, ein Recht­eck zu zeich­nen und dann ein Text­feld drauf zu legen. In Figma würde man die Vari­an­te mit dem Text­bau­stein machen, so wie in der Pro­gram­mie­rung. Und in XD macht man es, wie man es aus dem klas­si­schen Design­be­reich kennt. 

Die Zukunft wird sein, dass die Kom­po­nen­ten, die jetzt im nor­ma­len Lay­out erstellt werden, schon eins zu eins direkt als Web­kom­po­nen­ten benutzt werden kön­nen. Und diese müs­sen dann nur noch ver­knüpft werden mit einer Daten­bank, Java­Script etc., sodass es gar kei­nen Ver­satz mehr geben wird. Das Front­end-Design wird immer weni­ger gebraucht werden. Das spielt inso­fern dem “klas­si­schen” Desi­gner in die Kar­ten, da das End­pro­dukt so immer mehr dem erstell­ten Lay­out glei­chen wird, ohne dass Details für die Funk­tio­na­li­tät geän­dert werden müs­sen. Der nächs­te Schritt ist dann, dass die KI (Künst­li­che Intel­li­genz) im Prin­zip schon die Pro­gram­mie­rung über­nimmt. Das gibt es tat­säch­lich schon und wird ste­tig weiterentwickelt. 

Die grund­le­gen­den Ent­schei­dun­gen lie­gen der­zeit aber noch beim Men­schen. Auch die Ver­knüp­fung der Kom­po­nen­ten mit dem Sys­tem, z.B. Word­Press, funk­tio­niert noch nicht auto­ma­tisch. Aller­dings werden die Pro­gram­me immer schnel­ler und auch Design­ent­schei­dun­gen werden weni­ger. Auf Grund­la­ge von bestimm­ten Anga­ben kön­nen Pro­gram­me zum Bei­spiel schon gewis­se Vor­ent­schei­dun­gen tref­fen zu Farbe und For­men etc.. Eine KI kann dann bei­spiels­wei­se nach einer Design­ent­schei­dung alle Ele­men­te auto­ma­tisch anpas­sen. Das wird sicher­lich auch eine der kom­men­den Ent­wick­lun­gen sein. 

Fazit

Als Agen­tur haben wir uns ent­schie­den, von Adobe XD zu Figma als unser bevor­zug­tes Design-Tool zu wech­seln. Wir schät­zen die kol­la­bo­ra­ti­ven Funk­tio­nen und die Cloud-basier­te Platt­form von Figma, die es uns ermög­li­chen, naht­los mit Kun­den und Team­mit­glie­dern zusam­men­zu­ar­bei­ten, unab­hän­gig von deren Stand­ort. Dar­über hin­aus bie­tet Figma eine benut­zer­freund­li­che Ober­flä­che, die ein­fach zu erler­nen und zu bedie­nen ist, was unse­re Pro­duk­ti­vi­tät und Effi­zi­enz ver­bes­sert. Obwohl Adobe XD auch eine leis­tungs­star­ke Opti­on ist, erfüllt Figma unse­re Anfor­de­run­gen als Agen­tur am besten. 

Wenn Sie Fra­gen zu unse­ren Tools und Metho­den haben oder wei­te­re Infor­ma­tio­nen benö­ti­gen, zögern Sie nicht, uns zu kon­tak­tie­ren. 

Quel­len:

• https://www.figma.com/de/figma-vs-adobe-xd/
• https://stadt-bremerhaven.de/adobe-kartellklage-soll-figma-uebernahme-verhindern/
• https://www.adobe.com/de/about-adobe/intent-to-acquire-20220915.html
• https://praxistipps.chip.de/adobe-xd-vs-figma-welches-programm-ist-besser_157807
• https://www.jwied.de/blog/figma-vs-adobe-xd-ein-vergleich-der-top-design-tools