Agiles Arbeiten zwischen Entwicklern und Designern
Als UX Designer entwickle ich minimalistische und klare digitale Produkte, die den Nutzer in den Mittelpunkt stellen. Heißt, ich kümmere mich darum, dass der Nutzer intuitiv den inhaltlichen Aufbau und die Funktion der Anwendung unmittelbar versteht.
Hierfür trage ich Informationen und Feedback von Kollegen und Kunden zusammen und erstelle auf dieser Basis einheitliche Styleguides und Prototypen, die eine effektive, benutzerfreundliche Lösungen darstellen. Für jeden Arbeitsschritt nutze ich entweder ein oder mehrere Tools.
Figma ist ein leicht bedienbares Tool, welches die Zusammenarbeit von Entwicklern und Designern vereinfacht. Auch wir Coodooler nutzen die Vorteile, die uns von Figma geboten werden.
Uns ging es vorerst hauptsächlich darum, dass unsere Entwickler im Arbeitsalltag schnell Feedbacks geben und sich die ersten Code Snippets aus bestehenden Designaufgaben rausziehen können.
Arbeitsprozess
Bevor jedoch die Entwickler den ersten Stand des gestalteten Designs zu Gesicht bekommen, bereite ich eine übersichtliche Figma Datei vor, die in vier Pages (Styleguide, Konzeption, Layout und Final) eingeteilt ist.
Am Anfang, wenn ich Informationen und Daten zusammentrage, werden Wireframes in der Page »Konzeption« eingerichtet. Hier kommen alle groben Skizzen rein, die inhaltlich relevant sind.
In der Page »Layout« ist mein Arbeitsbereich zu der grafischen Umsetzung des digitalen Layouts. Mit der Übersicht aus der Page »Konzeption«, gestalte ich nun die Screens.
Während ich die Screens in der Page »Konzeption« ausarbeite, entstehen viele wiederkehrende Komponenten, wie zum Beispiel Buttons, Navigationselemente oder Icons. In der Page »Styleguide« führe ich all diese Elemente zusammen und strukturiere sie.
Ist meine gestalterische Aufgabe abgeschlossen und für Feedbackrunden geöffnet, kopiere ich meine entstandenen Layouts in die Page »Final«, und baue für die Übersicht der Architektur des digitalen Produktes eine Sitemap oder einen Prototyp. Hier können sich nun die Entwickler, nachdem ich sie für die File freigegeben habe, die Designs anschauen.
Öffnet der Entwickler die Figma Datei, kann er alle Inhalte überblicken. Je nach gegebenem Zugriffsrecht, die Dateien in Figma nur kommentieren oder auch bearbeiten.
Das wichtigste zuerst…
Code Tab
Der Code Tab oben links in Figma ist das Herzstück an Informationen für Entwickler. Es stellt die Code Snippets in der Sprache (CSS, iOS oder Android) bereit. Auf den ersten Blick kann man so Typografie, Farbe, Objektposition und Größe des ausgewählten Frames oder Objektes erfahren. Einmal ausgewählt, kann man den Codetext auch einfach rauskopieren.
Export von Icons
Natürlich gibt es auch Dinge, die sich nicht mit Code herauskopieren lassen. Dazu gehören zum Beispiel Icons. Da der Entwickler am ehesten Bescheid weiß, welche Icons, Icongrößen und -dateien er braucht, kann er auch hier in einer bestehenden Figmadatei dieses entsprechende Objekte exportieren.
Unten rechts im Arbeitspanel von Figma findet man das kleine und übersichtliche Export Tab. Aus den Dateitypen PNG, JPG, SVG und PDF kann man in unterschiedlich einstellbaren Größen seine Datei exportieren, und das sogar in mehreren Dateitypen gleichzeitig!
Feedback
Fällt dem Entwickler ein Feedback ein oder er hat Fragen im bestehenden Design, kann er, um keine Missverständnisse mit anderen Kommunikationstools aufkommen zu lassen, die Designs kommentieren. Bei coodoo haben wir uns darauf geeinigt, um eine mit Kommentaren übersäte Figma File zu vermeiden, nur in der Page »Final« zu kommentieren. Es stellt sicher, dass die Kommentare nur den aktuellsten sowie den letzten Stand des Designs reflektieren.
Alles in allem macht es unseren Entwicklern Spaß Figma zu nutzen, da es den Austausch mit uns Designern erleichtert. Durch die gemeinsame Arbeitsfläche können Ideen und Anmerkungen leichter visualisiert werden und von mehreren Personen gleichzeitig genutzt werden.
