Warum wir zu Figma wechseln

Figma ist ein kollaboratives Design-Programm für die Erstellung von Screendesigns und klickbaren Prototypen. Die Online-Funktionalität ermöglicht es, dass mehrere Personen gleichzeitig an derselben Datei arbeiten und sich austauschen können.

Auf den ersten Blick wirkte diese Funktion für mich mehr abschreckend als vorteilhaft. Denn bis jetzt war der Design-Prozess eher in sich geschlossen. Ideen und Moods gingen hinein und nach einer unbestimmten Zeit kam ein fertiges Design heraus. Ein Blick in die Design-Datei offenbarte die für Außenstehende chaotisch wirkenden Iterationszyklen – nichts, was ich bis dato unbedingt herzeigen wollte. Auf den zweiten Blick zeigte sich aber, worin die Vorteile des kollaborativen Arbeitens und des Öffnens dieses Design-Prozesses bestehen.

Eines für alle!

Bisher hat sich meine Design-Arbeit auf verschiedene Programme aufgeteilt. Moods habe ich in InVision gesammelt, Wireframes in diversen Programmen oder auf Papier erstellt und designed schlussendlich in Sketch. Der Prozess war damit aber noch lange nicht fertig, denn die Entwürfe wurden anschließend auf InVision hochgeladen, um sie sowohl intern mit dem Team als auch extern mit den Kunden abzustimmen. Nach einer Freigabe wurden sie noch mal in ein entsprechendes Zeplin-Projekt exportiert, damit die Spezifikationen von den Entwickler_innen einfach ausgelesen werden konnten. Bei den vielen verschiedenen Programmen konnte es dabei leicht passieren, dass unterschiedliche Versionen des gleichen Projekts kursierten und auch verschiedene Personen in separaten Programmen Anmerkungen dazu machten. Insgesamt war es machbar, aber zum Glück geht es jetzt auch einfacher.

Durch eine simple Kommentarfunktion können alle Abstimmungen direkt in Figma gemacht werden. Die Kommentare sind für alle ersichtlich und genau an der Stelle platzierbar, an der auch die Änderung gemacht werden soll – direkt in der Designdatei. Das bringt nicht nur alle Parteien an denselben Tisch, sondern sorgt auch dafür, dass alle auf dem aktuellen Stand sind. Das Beste daran? Designer_innen müssen dieselben Inhalte nicht mehr auf den verschiedenen Programmen aktuell halten, sondern können sich auf ein einziges Programm konzentrieren: Figma.

Next Step: Visual Coding

Ein weiteres großes Feature ist Autolayout. Dieses ermöglicht, Komponenten dynamisch aufzubauen. Das bedeutet, dass sich der Container seinem Inhalt anpasst und somit das Design einen weiteren Schritt Richtung Entwicklung geht. Alles, was in Figma geht, ist auch genauso in der Umsetzung möglich.

Diese Funktion macht ein Design nicht nur flexibler, es bietet für Designer_innen auch die Möglichkeit, wie Entwickler_innen zu denken und gewisse Hürden somit bereits im Vorhinein zu berücksichtigen. Bis zu einem fertigen Code-Export ist es zwar noch ein weiter Weg, allerdings ist es aus meiner Sicht schon ein großer Schritt in Richtung Visual Coding.

Im nächsten Blogartikel gebe ich einen Einblick in unsere Erfahrungen mit Figma und gehe dabei genauer auf die Vorteile für Design und Entwicklung in unserem Arbeitsalltag ein.