5 Dinge, die Designer*innen für eine reibungslose Übergabe beachten sollten
Die Übergabe ist ein Vorgang, kein einzelner Moment. Wie lässt sich die Übergabe also optimieren, wenn sie eine ganze Reihe von WIP-Designs sowie viel Kommunikation und Kollaboration umfasst? Designer Advocate Lauren Andres hat dazu einige Tipps.
Nichts hält uns die Wahrheit vor Augen wie Google Autocomplete. Wenn du „Übergabe von Design an Entwicklung“ in die Suchleiste eingibst, beendet die Autovervollständigung diese Eingabe sofort mit „Probleme“ oder „funktioniert nicht“. Das liegt nicht daran, dass alle Übergabevorgänge fehlerhaft sind, sondern daran, dass wir stetig versuchen, sie zu verbessern.
Das ist keine Überraschung. Die Dinge entwickeln sich ständig weiter und dein Team besteht aus Mitarbeiter*innen in verschiedenen Ländern und Zeitzonen. Da kann es schwierig sein, zu wissen, wann du mit welchen Mitarbeiter*innen zusammenarbeiten und Inhalte teilen solltest. Wie kannst du also sicherstellen, dass „fertig für die Entwicklung“ auch wirklich fertig für die Entwicklung bedeutet? Figma Designer Advocate Lauren Andres, die viel Erfahrung damit hat, Teams bei der Optimierung ihrer Prozesse zu unterstützen, spricht über fünf Dinge, die Designer*innen für eine erfolgreiche und schnelle Übergabe beachten müssen.
1. Optimierte und präzise Anmerkungen
Mit Anmerkungen kannst du die Absichten hinter deinen Design-Entscheidungen verdeutlichen und wichtige Details hervorheben. Wenn du nicht sicher bist, welche Details das sind, frage deine Entwickler*innen, welche Anmerkungen für sie besonders hilfreich wären. Die Entwickler*innen, mit denen ich zusammenarbeite, benötigen beispielsweise keine Anmerkungen zu Abständen und Farben, wenn diese Eigenschaften bereits als Variablen definiert sind. In manchen Fällen kann es allerdings nützlich sein, Anmerkungen hinzuzufügen: zum Beispiel, wenn ich eine neue Komponente hinzugefügt habe, wenn eine bestimmte Interaktion passieren soll (sofern sich das nicht aus dem Prototyp selbst erschließt) oder wenn das Design auf verschiedenen Plattformen unterschiedlich aussehen soll.
Mit Anmerkungen kannst du Informationen, wie etwa Text und Eigenschaften, hinzufügen, um die Entwickler*innen während der Übergabe zu unterstützen. Erfahre hier mehr über das Tool für Anmerkungen und darüber, wie wir es entwickelt haben.
Du kannst bestimmten Ebenen Eigenschaften und Text hinzufügen und mit dem neuen Tool für Anmerkungen von Figma ganz leicht den Abstand zwischen Ebenen messen und diese Information bei der Übergabe anheften.
In der Vergangenheit wurden Dateien mit Kommentaren oder Notizen markiert. Dadurch war es jedoch schwierig, alle Details im Blick zu behalten. Figma hat kürzlich ein Tool für Anmerkungen im Dev Mode veröffentlicht. Damit sparen Designer*innen Zeit beim Hinzufügen von wichtigen Details wie Spezifikationen, Abmessungen und Notizen zum finalen Entwurf. Zudem unterstützt es Entwickler*innen dabei, schnell die richtigen Informationen zu finden. Dev Mode soll den Austausch zwischen Designer*innen und Entwickler*innen nicht eliminieren, sondern verbessern.
2. Nutze eine einheitliche Sprache
Bei aller Zusammenarbeit sind Design und Entwicklung doch zwei völlig unterschiedliche Disziplinen. Das bedeutet, dass Dinge leicht bei der Übersetzung verloren gehen können. (Zum Beispiel musst du erklären dass du mit einem „Toggle“ einen „Schalter“ meinst). Je mehr Zeit ihr am Anfang damit verbringt, die Terminologie abzustimmen, desto mehr Zeit bleibt euch später für tiefgehende Diskussionen, die nicht durch die Klärung von Details behindert werden.
Wenn es um grundlegendere Elemente wie Schriftart, Farben und Abstände geht, sind die Funktionen Variables und Styles (Variablen und Stile) hilfreich zur Abstimmung. Sprich mit deinen Entwickler*innen. Möglicherweise haben sie in ihrem Code bereits Benennungsvorgaben erarbeitet, die du für dein Design verwenden kannst. Und es ist um einiges angenehmer, wenn du darauf vertrauen kannst, dass die Entwickler*innen wissen, was gemeint ist, wenn es heißt, eine Schaltfläche sollte bg-primär-aktiv mit Text sein, statt zu versuchen, sich an den genauen Heximalcode und die Eigenschaften der Schriftart zu erinnern.
3. Bring Ordnung in deine Dateien mit Kennzeichnungen
Als Designerin liebe ich die unbegrenzte Arbeitsfläche von Figma. Aber es kann sehr verwirrend und überfordernd sein, wenn du eine Datei öffnest und nicht weißt, wo du findest, was du brauchst. Ich vermute, dass es für Entwickler*innen sehr aufwendig ist, sich in einer Datei zu orientieren, die so aussieht:
Es ist vollkommen in Ordnung, wenn unsere Dateien in der Brainstorming- und Iterationsphase noch nach „WIP“ aussehen, doch sobald wir sie zur Erstellung an die Entwickler*innen übergeben, sollten sie übersichtlich und geordnet sein.
Hilf mit, die unbegrenzte Arbeitsfläche zu reduzieren, indem du aus Gruppen von zusammenpassenden Designs Abschnitte erstellst. Versieh diese Abschnitte oder andere entwicklungsfertige Rahmen mit dem Status „Ready for Dev“ (entwicklungsfertig), um den Entwickler*innen zu zeigen, worauf sie sich konzentrieren sollten.
Vorlagen können ebenfalls dazu beitragen, Kontextverschiebungen zu reduzieren. Wenn sich dein Team auf eine Standardvorlage einigt, müssen die Entwickler*innen nicht jedes Mal, wenn sie mit unterschiedlichen Designer*innen arbeiten, erst herausfinden, wie eine Datei aufgebaut ist. Ich frage die Entwickler*innen, mit denen ich arbeite, auch immer, was sie von mir erwarten, wenn sie ein Design erstellen – sei es für Smartphones, Tablets oder Desktop. Oder ob ich deutlich machen soll, wann es sich um festen Text und wann um dynamische Elemente handelt. Davon ausgehend kannst du eine Checkliste entwickeln, die den mentalen Stress reduziert und dir und den anderen Designer*innen zeigt, wann eure Arbeit getan ist.
4. Archiviere alte Designs
Wenn du Seiten danach ordnest, was wichtig ist und was nicht, solltest du Erkenntnisse aus der Vergangenheit von deiner aktuellen Arbeit trennen. Ich bin kein Fan davon, alles immer gleich zu löschen. Es passiert mir häufig, dass ich 10 Iterationen durcharbeite, nur um dann wieder an meinem Ausgangspunkt zu landen (und wer kennt das nicht?). Und es ist hilfreich, aktuelle Versionen mit diesen älteren Versionen zu vergleichen. Wichtig ist allerdings, deutlich zu unterscheiden, was alt und was neu ist. Ich empfehle, alte Designs in eine eindeutig beschriftete Archivseite zu legen, um die Verwirrung in Grenzen zu halten. Alternativ kannst du auch Verzweigungen nutzen, um nur die Arbeit in der Übergabe einzufrieren, auf die Entwickler*innen den Fokus legen sollen.
5. Verwende Komponenten
Bei der Übergabe geht es natürlich nicht nur um das Design selbst. Es geht auch darum, dafür zu sorgen, dass deine Mitarbeitenden verstehen, wie und warum du zu dieser Lösung gelangt bist und welche Vision du für dein Design hast. Für Entwickler*innen ist Figma oft ein Raum, wo sie Informationen und Kontext sammeln, selbst wenn ihre Arbeit außerhalb davon stattfindet. Alles, womit sie einfacher finden, was sie brauchen und womit du ein Hin-und-Her an Fragen reduzierst, ist nützlich. Aus taktischen Gründen verwende ich gerne Komponentenbeschreibungen, damit die Details zur Verwendung einer Komponente immer damit verbunden bleiben und die Entwickler*innen nicht zu einer anderen Datei mit der Dokumentation zurückkehren müssen, um zu verstehen, wie sie verwendet wird.
Ich möchte Entwickler*innen auch ermutigen, Dev resources in Dev Mode zu verwenden, damit sie Links einfügen können, von denen sie wissen, dass sie für sie relevant sind. Man könnte die Links auch in die Komponentenbeschreibung einfügen, aber um ehrlich zu sein, bin ich nicht immer sicher, welche Links am nützlichsten sein werden (und kann möglicherweise nicht einmal darauf zugreifen). Ich finde es sehr viel sinnvoller, wenn Entwickler*innen die Links einfügen, die ihnen helfen, anstatt dass ich spekuliere, welche Links das sein könnten.
Als Designer*innen halten wir uns sehr viel in Figma auf. Viele Dinge sind uns in Fleisch und Blut übergegangen und wir vergessen leicht, dass es nicht allen so geht. Als ich vor Jahren Figma zum ersten Mal einem Team von Entwickler*innen vorgestellt habe, habe ich vieles vorausgesetzt, zum Beispiel das Wissen, wie Assets exportiert oder Dateien priorisiert werden. (So geht es mir heute, wenn ich mit VS Code arbeite. Ich kenne nicht einmal die Hälfte der Funktionen und wüsste ohne Hilfe nicht, was ich alles machen kann). Figma ist nur eines von vielen Tools, mit denen Entwickler*innen arbeiten, also liegt es in unserer Verantwortung, sie zu unterstützen und in die Lage zu versetzen, mit uns Hand in Hand zu arbeiten.
Lies alles über Anmerkungen und kommende Neuerungen in Dev Mode.
Erfahre mehr über die Optimierung der Übergabe in Dev Mode und Verbesserungsmöglichkeiten bei der Zusammenarbeit zwischen Designer*innen und Entwickler*innen.
