Design System In Flux: 3 Lektionen aus der Flow-UI Migration

Designsysteme sind in den letzten zehn Jahren in der Webentwicklung immer beliebter geworden, sogar die US-Regierung hat sich dem Trend angeschlossen! Hier bei FloQast sind wir dabei, auf eine zweite Iteration unseres internen Designsystems, Flow-UI, umzusteigen. Ein Designsystem bietet dem Unternehmen viele Vorteile, darunter:

• Eine standardisierte Entwurfssprache, die von allen Funktionsteams genutzt wird. 
• Ein einheitlicheres Nutzererlebnis durch zusätzliche Qualitätskontrolle. 
• Skalierbarkeit und schnelle Weitergabe von Änderungen durch Zentralisierung der Komponenten. 

Und natürlich kommen sie auch mit wiederverwendbaren Komponenten, die es uns Entwicklern ermöglichen, Code schnell auszuliefern und weniger Zeit mit der Fehlersuche in UX-Edge-Cases zu verbringen - hurra, wir müssen uns keine Gedanken darüber machen, wie ein deaktivierter, zerstörerischer Button beim Hovern aussehen sollte!

Doch auch mit einem neuen Designsystem ist nicht alles eitel Sonnenschein. Die Arbeit mit einem neuen Designsystem kann den Entwicklern Kopfzerbrechen bereiten, insbesondere wenn ein altes Lieblings-Dropdown verschwindet und ein neues Farbschema aus dem Nichts auftaucht. Hier sind ein paar Lektionen, die wir bei der Migration unseres MFE auf das neue Flow-UI Design System gelernt haben.

Konzentration auf das Wesentliche

Wie das alte Bruce Lee-Zitat besagt: "Ich fürchte nicht den Mann, der einmal 10.000 Tritte geübt hat, sondern den Mann, der einen Tritt 10.000 Mal geübt hat". Genauso fürchte ich nicht den Entwickler, der tausend Designsysteme einmal ausprobiert hat, sondern den Entwickler, der den Unterschied kennt zwischen display:inline-flex und display: flow-root.

Als wir mit der Migration begannen, stellten wir fest, dass die alten Komponenten oft nur syntaktischer Zucker für ein paar Zeilen CSS sind, und wir können sogar mehrere Layout-/Container-Komponenten durch eine einzige benutzerdefinierte Komponente und ein paar Zeilen CSS ersetzen. Infolgedessen ist unsere Codebasis nach der Migration leichter zu lesen und zu konfigurieren.

Die Freude an der Partnerschaft zwischen Produkt und Design

Zusammenarbeit ist ein Schlüsselprinzip hier bei FloQast, und unsere neue Design-System-Implementierung ist eine Verkörperung dieses Prinzips. Ein häufiger Fallstrick: Der Produktmanager übergibt die Produktspezifikationen an den Designer, der wiederum die UX-Spezifikationen an die Entwickler weitergibt, nur um dann festzustellen, dass die benötigte Komponente im Designsystem noch nicht ganz fertig ist oder die Komponente nicht ganz so funktioniert, wie man es sich ursprünglich vorgestellt hat. Wir haben es geschafft, das anit-Muster zu vermeiden, indem wir die Entwickler frühzeitig und häufig in den Designprozess einbezogen haben. Auf diese Weise kann das Entwicklungsteam frühzeitig auf Probleme hinweisen und Komponenten in unseren Entwürfen ersetzen, bevor sie das Entwicklungsstadium erreichen.

In einigen Fällen haben wir auch Komponenten mitten in der Entwicklung ausgetauscht oder sogar ältere Komponenten mit voller Zustimmung des Design- und Produktteams beibehalten. Durch diese pragmatische und kooperative Vorgehensweise konnten wir die Entwicklung beschleunigen, ohne Abstriche bei der Benutzerfreundlichkeit zu machen oder fehlerhafte Funktionen zu veröffentlichen.

Nutzen Sie das gesamte Designsystem

Ein Designsystem ist mehr als nur ein Satz wiederverwendbarer Komponenten - es ist auch eine neue Designsprache, die mit einem eigenen Vokabular ausgestattet ist. So wie man sich vor einer Reise nach Barcelona für Duolingo anmeldet, ist es für Entwickler hilfreich, das Vokabular des neuen Designsystems vor und während einer Migration zu lernen.

In unserem Fall sind die neuen Wörter Benutzerdefinierte CSS-Eigenschaften Wenn wir einige Zeit mit der neuen Designsprache verbringen, können wir sie übersetzen. font-size: 20px; in font-size: var(--flo-base-font-size-8);. Als Entwickler müssen wir die neuen Token nicht in- und auswendig kennen, aber es ist sehr hilfreich, wenn wir uns während einer Migration zumindest mit dem neuen Designsystem auskennen.

Ich kann zwar nicht versprechen, dass die oben genannten Lektionen alle Probleme im Zusammenhang mit dem Designsystem lösen, aber ich hoffe, dass sie Ihnen die Reise ein wenig erleichtern können. Gute Reise!

Shimin Zhang

Shimin ist Senior Software Engineer bei FloQast mit Schwerpunkt auf der Produktlinie Flux Analysis. Wenn er nicht an seinem Schreibtisch sitzt, kann man Shimin beim Kochen, Wandern, Radfahren und Trailrunning im pazifischen Nordwesten antreffen.