Unsere Reise zu einem Design Language System

Als ich vor vier Jahren bei RigUp anfing, hatte unsere Reise zu einem Design-Sprachsystem bereits begonnen. Wie so viele andere begann es mit umbenannten Bootstrap-Komponenten.

Wie Sie vielleicht aus erster Hand wissen, sind wir auf eine Reihe von Problemen gestoßen: Überschreibungen auf Rebrand-Komponenten führten zu langen Kaskaden und vielen wichtigen Ereignissen! Deklarationen in unseren SASS-Dateien. Die Bootstrap-Dokumentation wurde für unsere Anforderungen als ausreichend erachtet. Daher hat niemand die benutzerdefinierten Klassen oder die von uns hinzugefügten benutzerdefinierten Funktionen dokumentiert. All dies machte es sehr schwierig, das zu finden, was Sie brauchten, und führte zu mehreren funktionellen Duplikaten.

Zu der Zeit, als „Musterbibliothek“ das große Schlagwort war, entschieden wir uns, in diese Richtung zu gehen. Unsere Designer verspotteten die meisten der grundlegenden Komponenten, die wir für die Erstellung unserer Website verwendeten - Farben, Typografie, Knöpfe, Karten usw. - und wir begannen, sie zu Entwicklungszwecken zusammenzustellen.

Wir begannen mit einer Reihe von Designs in Sketch, die die Elemente umfassten, die wir für unsere Musterbibliothek erstellen wollten. Wir haben dann eine Reihe von Stilen und Klassen entwickelt, die wir Rhino nach unserem Maskottchen für Firmensportarten benannten, die es uns ermöglichen würden, diese Elemente als Entwickler schnell und einfach anzupassen.

Dadurch konnten wir einige unserer Probleme mit unseren Bootstrap-basierten Komponenten lösen. Zum ersten Mal hatten wir passende Gestaltungselemente in Sketch und in unserer Codebase, wodurch wir neue Funktionen schneller und konsistenter bereitstellen konnten. Klassenbasierte Stile erleichtern das Verschieben vorhandener Inhalte vom Bootstrap in die neuen Rhino-Muster. Wir haben uns auch stark darauf konzentriert, sicherzustellen, dass wir Dokumentation für alle von uns erstellten Muster und Klassen geschrieben haben, sodass sie leicht zu finden und zu verwenden sind.

Es traten jedoch schnell neue Probleme auf.

Unsere anfängliche Version der Dokumentation war hart codiert und statisch, so dass sie schnell veraltet war. Wir konnten einige dieser Probleme durch die Erstellung von Live-Dokumenten abmildern. Die funktionalen Komponenten wurden jedoch nicht immer an Änderungen angepasst. Da wir neue Komponenten hinzugefügt haben, waren wir nicht immer fleißig, Dokumentation zu schreiben, um sie zu begleiten.

Der begrenzte Umfang der ursprünglich von uns entwickelten Assets half uns, flexibel zu sein, konnte jedoch nicht auf komplexere Anwendungsfälle eingehen, was dazu führte, dass Designs bereitgestellt wurden, die sich innerhalb derselben Funktionalität drastisch unterschieden. Entwickler, die manchmal nicht über vorhandene Komponenten Bescheid wussten oder nur ungern verschiedene Ansätze diskutieren, wenn es um neue Designs ging, implementierten unterschiedliche Komponenten mit ähnlicher oder doppelter Funktionalität.

Wir haben auch versucht, eine Menge Magie in einige unserer komplexen Komponenten zu integrieren. Dies führte zu übermäßig bewerteten Komponenten, die sehr unflexibel waren und für verschiedene unerwartete Anwendungsfälle oft schwer oder gar nicht implementiert werden konnten. Infolgedessen wurden einige Komponenten unhaltbar komplex, während andere immer mehr Duplikate entwickelten. Unsere Dokumentation geriet schnell aus dem Gleichgewicht, was die Situation noch schlimmer machte.

Bei der Skalierung des Entwicklungsteams hatten neue Entwickler Schwierigkeiten, zu komplexe und meinungsübergreifende Komponenten zu analysieren, damit sie für die vorliegenden Zwecke funktionieren. Komponenten, die nie dokumentiert wurden, waren nicht zu finden, was zu noch mehr Duplikaten führte, von denen viele nur bei der Codeüberprüfung festgehalten wurden und viel Entwicklungszeit verschwendeten.

Wir begannen uns umzusehen, wie andere Unternehmen mit der Situation umgehen. Salesforce hatte Lightning bereits vor einigen Jahren veröffentlicht, und andere Systeme für das Design von Unternehmen wie AirBnB fanden großes Lob. An der Oberfläche war es jedoch schwer zu sagen, wie sie diese Probleme angehen.

Wir brauchten immer noch Lösungen für:

  1. Mangel an Konsistenz zwischen Design und Entwicklung.
  2. Übermässig bewertete Komponenten machen die Entwicklung schwierig.
  3. Doppelte Komponenten mit wenig Klarheit, um die "richtige" zu verwenden war.

Wir haben weiter nach der Idee eines Design-Sprachensystems gesucht und dabei gehofft, Einblicke aus der Art und Weise zu erhalten, wie andere Unternehmen diese Art von Problemen handhaben und mildern. Wir wollten auch sicherstellen, dass unsere Anwendung in der Zukunft besser zugänglich ist. Daher haben wir Tools integriert, um dies in unser Design-Sprachsystem zu gewährleisten.

Um diese Zeit haben wir auch die Entscheidung getroffen, zu React zu wechseln. Sie können hier mehr über diesen Prozess lesen, aber es war ein guter Startpunkt, um mit dem Aufbau unseres Design-Sprachsystems zu beginnen und es in die Realität umzusetzen.

Unser erster Schritt bestand darin, Konventionen und bewährte Vorgehensweisen im Vorfeld zu ermitteln und anschließend eine Roadmap für das Entwerfen, Erstellen und Implementieren der neuen Designkomponenten zu entwickeln. In der Zwischenzeit wurde unsere Migration zu React jedoch mit voller Kraft vorangetrieben, und wir brauchten sofort Designkomponenten. Wir haben die Entscheidung getroffen, unsere klassenbasierte Rhino-Musterbibliothek über das Plugin für Komponenten-Komponenten zu implementieren, während wir das neue System fertiggestellt haben.

Beim Aufbau unseres neuen Systems haben wir uns entschlossen, Präsentations- und Funktionsaspekte so oft zu trennen, wie dies für komplexe Komponenten sinnvoll ist, um die Probleme zu vermeiden, die wir mit Rhino-Komponenten hatten. Wir haben uns auch für einen kaskadierenden Ansatz entschieden. Während wir mit der Auswahl der ersten Farben und der Typografie beginnen und einfache Komponenten entwerfen und bauen, etablieren und verfolgen wir einen Prozess zur Einführung komplexerer Komponenten. Dies gab unserem Design-Sprachsystem eine nachhaltigere Plattform, auf der wir aufbauen konnten, als dies bei Rhino der Fall war.

Wir haben uns auch entschlossen, Storybook zu verwenden, um sicherzustellen, dass unsere Dokumentation immer auf dem neuesten Stand ist. Wir verbinden das Storybook mit Sketch, um die Synchronität zwischen Design und Entwicklung zu gewährleisten.

Während dies alles zusammenkam, erkannten wir ein neues Problem, das gelöst werden musste. Als unsere Anwendung und Plattform wuchs, brauchten wir ein Design-System, das von verschiedenen Codebases übernommen werden konnte. Wir haben uns entschieden, den Tokenisierungsansatz von Salesforce für das Design von Sprachensystemen zu befolgen, indem wir leicht aktualisierbare JSON-Dateien erstellt haben, die für verschiedene Plattformen in das richtige Format übersetzt werden können.

Wir sind immer noch dabei, unser Design-Sprachsystem aufzubauen, und wir bauen allmählich temporäre Rhino-Komponenten ein. Alle bei RigUp freuen sich, diese neue Seite im Buch unserer Design- und Entwicklungsgeschichte aufzurufen!