Die Vorteile von Code Connect nutzen: Best Practices für Designsystem-Teams
Designsystem-Leads und Entwickler*innen bei Bumble, GitHub und HP berichten, wie sie die neuen Funktionen in Dev Mode nutzen, um die Grenzen zwischen Design und Code zu überwinden.
Designsysteme spielen eine entscheidende Rolle, wenn es darum geht, konsistente, effiziente und qualitativ hochwertige Nutzererlebnisse über alle Produkte und Plattformen hinweg zu erschaffen. Die Verwaltung von Designsystemen und die Gewährleistung konsistenten Programmcodes können jedoch eine Herausforderung darstellen, insbesondere wenn es um die Zusammenarbeit zwischen Designer*innen und Entwickler*innen geht. Diese beiden Disziplinen agieren häufig isoliert voneinander – Designer*innen konzentrieren sich darauf, überzeugende Nutzererlebnisse zu schaffen, bei Entwickler*innen liegt der Fokus darauf, robuste, wartungsfähige Codes zu generieren. Es kann jedoch neue Möglichkeiten eröffnen, eine gemeinsame Sprache und einen einheitlichen Workflow zu fördern und zu pflegen.
Wende dich an unser Vertriebsteam und erhalte maßgeschneiderte Anleitungen zur Nutzung unserer neuesten Funktionen für dein Designsystem.
Im vergangenen Monat fand Framework 2024 statt: Dort luden wir Vertreter*innen von Bumble, GitHub und HP dazu ein, mit Design Advocate Ana Boyer die Herausforderungen bei der Verbindung von Design und Programmcode zu diskutieren. Außerdem teilten sie ihre Erfahrungen und Eindrücke zu Code Connect, unserer neuesten Funktion in Dev Mode – jetzt in der Beta-Version verfügbar. Hier besprechen wir einige der wichtigsten Erkenntnisse aus dieser Veranstaltung.
Die gleiche Sprache sprechen
Als eines der größten Hindernisse, die in der Diskussion thematisiert wurden, wurde die inhärente Trennung der Bereiche Design und Entwicklung hervorgehoben. Lukas Oppermann, Staff System Designer bei GitHub, weist darauf hin, dass „Designer*innen und Entwickler*innen gewissermaßen unterschiedliche Sprachen sprechen“. Diese linguistische Barriere zeigt sich häufig in Form von inkonsistenten Namenskonventionen, falsch ausgerichteten Komponenteneigenschaften und unterschiedlichen Erwartungen. Gilson Hoffmeister, Design System Strategist bei HP, fügt hinzu: „Man muss diese dritte Sprache erschaffen, in der sie kommunizieren können, und dann verstehen sich alle gegenseitig“.
Designsysteme entwickeln sich als eine solche gemeinsame Sprache. Indem gemeinsame Begriffe, Muster und Komponenten definiert werden, können alle Teammitglieder gewährleisten, dass alle auf dem gleichen Stand sind. Um eine gemeinsame Sprache zu entwickeln, müssen diese Entscheidungen nicht nur kodifiziert werden, sondern es muss auch gewährleistet werden, dass sie leicht zu finden und umzusetzen sind.
Designer*innen und Entwickler*innen abholen
„Eine der größten Herausforderungen bei der Wahrung der Konsistenz besteht darin, zu bestimmen, was die Source of Truth ist“, meint Raul Menezes, Design System and Platform Engineer bei Bumble. Diese häufige Fehlkommunikation kann zu Inkonsistenzen, benutzerdefinierten Implementierungen und einer wachsenden Codebasis führen, die nur schwer zu verwalten ist. Raul erklärt: „Wenn du dieses Muster immer wieder wiederholst, wächst deine Codebasis und du kannst sie nicht mehr im Auge behalten“.
Er fährt fort: „Designer*innen werden immer die Dokumentation erstellen, und wenn es um die Entwicklung geht, verlassen sie sich vielleicht auf eine andere Quelle“. Aus diesem Grund haben wir Code Connect so entwickelt, dass es nahtlos in bestehende Workflows der Entwickler*innen integriert werden kann. Das ermöglicht es Teams, den Code-Editoren die Best Practices und Dokumentation ihres Designsystems direkt zu vermitteln.
Akzeptanz vereinfachen und klein anfangen
Viele Manager*innen von Designsystemen werden zustimmen, dass die Aussage „Richte es ein und es wird genutzt“ nicht immer zutrifft. Es ist also wichtig, die Hindernisse bei der Akzeptanz sowie Reibungen bestmöglich zu verringern, insbesondere auf Seiten der Entwickler*innen. Gilson weist darauf hin, wie Code Connect dies unterstützt: „Die Entwickler*innen müssen den Kontext nicht ändern. Früher mussten sie auf unsere Website gehen, um es sich anzusehen [wie ein Design implementiert wurde]“. Mit Code Connect können Entwickler*innen direkt in Dev Mode sehen, ob oder wie ein Design implementiert wurde.
Die Gesprächsteilnehmer*innen tauschten auch Best Practices aus, wie beispielsweise klein anzufangen oder sich auf jene Komponenten zu konzentrieren, die große Auswirkungen haben. Dieser Ansatz kann als effektive Strategie dienen, wenn du Code Connect bei deinem Team einführen möchtest. „Ziel ist es, klein anzufangen“, meint Gilson. „Code Connect ist für mich ein erster Schritt zu etwas Größerem“.
Raul empfiehlt, „zunächst mit viel kleineren Komponenten zu beginnen, wie einem Schalter, damit du nachvollziehen kannst, wie diese gemappt werden“.
Code Connect ist für mich ein erster Schritt zu etwas Größerem.
Das Fachwissen der anderen nutzen
Erfahre mehr über Code Connect, das den Programmcode deines Designsystems an Dev Mode übermittelt und Entwickler*innen so hilft, konsistent und schnell zu arbeiten und so die Übergabe zu optimieren.
Wir sprechen häufig darüber, die Lücke zwischen Design und Entwicklung zu schließen. Doch es ist ebenso wichtig, die einzigartige Expertise, die jeder Fachbereich mitbringt, zu erkennen und zu nutzen. Lukas betont: „Mit Code Connect können wir das Design und den Programmcode sogar wieder ein wenig weiter voneinander weg bewegen. Wir können uns darauf konzentrieren, die beste Benutzererfahrung für die Designer*innen bereitzustellen, die in Figma arbeiten, und auf der Programmcodeseite die beste Entwicklererfahrung zu bieten“. Indem die unterschiedlichen Stärken der einzelnen Disziplinen anerkannt und genutzt werden, können Designsysteme einen kooperativeren und effizienteren Workflow fördern. Er fügt hinzu: „Das ist etwas, an dem wir heute arbeiten können: Es so zu gestalten, dass die Arbeit mit beiden Seiten eines Designsystems wirklich fantastisch ist für die Menschen, die tatsächlich damit zu tun haben. Das kann auch bei der Akzeptanz helfen.“
Mit Code Connect können wir das Design und den Programmcode sogar wieder ein wenig weiter voneinander weg bewegen.
Kontinuierliche Zusammenarbeit fördern
In dieser Framework-Session gibt Figma Developer Advocate Jake Albaugh einen Überblick über Code Connect und ein paar hilfreiche Tipps für die ersten Schritte.
Ein effektives Design-to-Code-Handoff ist kein einmaliges Ereignis, sondern ein fortlaufender Prozess, der eine kontinuierliche Zusammenarbeit zwischen Designer*innen und Entwickler*innen erfordert. Raul betont: „Bei Code Connect geht es nur darum, effizienter zu sein – nicht nur als Ingenieur*in, sondern auch als Designer*in. Es schließt die Lücke in der Kommunikation zwischen beiden Teams.“ Designsysteme können diese kontinuierliche Zusammenarbeit erleichtern, indem sie eine gemeinsame Sprache, klare Dokumentation und offene Kommunikationswege bieten. Regelmäßige Design-Kritiken, Code-Reviews und Feedback-Schleifen können dazu beitragen, dass sich Designer*innen und Entwickler*innen besser abstimmen und auf ein gemeinsames Ziel hinarbeiten.
Das volle Potenzial von Designsystemen entfalten
Indem Designer*innen und Entwickler*innen an ihrem Standpunkt abgeholt, Einführungsprozesse vereinfacht und eine kontinuierliche Zusammenarbeit gefördert werden sowie von der Expertise des jeweils anderen profitiert wird, können Unternehmen das volle Potenzial ihrer Designsysteme ausschöpfen, um die Produktentwicklung zu optimieren und die Erfahrung für die Endnutzer*innen zu verbessern.
Wir bei Figma haben es uns zum Ziel gesetzt, Teams zu einer besseren Zusammenarbeit zu befähigen, und Code Connect ist erst der Anfang dieser Reise. Gilson formuliert es folgendermaßen: „Als [Code Connect] herauskam, entfachte es ein Feuerwerk der Dinge, die jetzt mit Figma möglich sind.“ Und wir hätten es selbst nicht besser sagen können.
