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

Designsysteme sind in den letzten zehn Jahren in der Webentwicklungsbranche immer beliebter geworden, sogar US-Regierung ist voll im Trend! Hier bei FloQast sind wir gerade dabei, auf eine zweite Iteration unseres internen Designsystems Flow-UI zu migrieren. Ein Designsystem bietet der Organisation viele Vorteile, darunter:

• Eine Standarddesignsprache, die von allen Funktionsteams gemeinsam genutzt wird.
• Einheitlichere Benutzererfahrung durch zusätzliche Qualitätskontrolle.
• Skalierbarkeit und schnelle Übertragung von Änderungen durch Zentralisierung der Komponenten.

Und natürlich enthalten sie auch wiederverwendbare Komponenten, die es uns Entwicklern ermöglichen, Code schnell zu versenden und weniger Zeit mit der Behebung von UX-Edge-Fällen zu verbringen — Hurra, dass wir uns keine Gedanken darüber machen müssen, wie eine deaktivierte destruktive Schaltfläche beim Hover aussehen sollte!

Doch selbst mit einem Designsystem ist nicht alles Sonnenschein und Regenbogen. Die Arbeit mit einem neuen Designsystem kann Entwicklern Kopfschmerzen bereiten, insbesondere wenn ein altes Favoriten-Dropdown verschwindet und aus dem Nichts ein neues Farbschema erscheint. Hier sind einige Lektionen, die wir bei der Migration unseres MFE auf das neue Flow-UI Design-System gelernt haben.

Konzentrieren Sie sich auf die Grundlagen

Wie das alte Zitat von Bruce Lee lautet: „Ich fürchte mich nicht vor dem Mann, der einmal 10.000 Tritte geübt hat, sondern vor dem Mann, der 10.000 Mal einen Tritt geübt hat“. Ebenso fürchte ich nicht den Entwickler, der einmal tausend Designsysteme ausprobiert hat, sondern ich fürchte den Entwickler, der den Unterschied kennt zwischen Anzeige: Inline-Flex und Anzeige: Flow-Root.

Ein Hauptmerkmal unseres neuen Designsystems ist die Entfernung vieler Utility-Layout-Komponenten. Als wir mit der Migration begannen, wurde uns klar, dass die alten Komponenten oft nur syntaktischer Zucker für ein paar CSS-Zeilen sind und wir sogar mehrere Layout-/Container-Komponenten durch eine einzige benutzerdefinierte Komponente und ein paar CSS-Zeilen ersetzen können. Dadurch kann unsere Codebasis nach der Migration einfacher zu lesen und zu konfigurieren sein.

Die Freude an der Produkt- und Designpartnerschaft

Zusammenarbeit ist hier bei FloQast ein zentrales Prinzip, und unsere neue Design System-Implementierung ist eine Verkörperung dieses Prinzips. Hier ist ein häufiger Fallstrick: Der Produktmanager übergibt die Produktspezifikation an einen Designer, dann gibt der Designer die UX-Spezifikationen an die Entwickler weiter, nur um herauszufinden, dass die benötigte Komponente im Designsystem noch nicht ganz fertig ist oder die Komponente nicht ganz so funktioniert, wie sie ursprünglich vorgestellt wurde. Wir haben es geschafft, das Anti-Muster zu vermeiden, indem wir Entwickler früh und oft während des gesamten Designprozesses einbezogen haben. Auf diese Weise kann das Entwicklungsteam alle Probleme frühzeitig ansprechen und Komponenten in unseren Designs austauschen, bevor sie die Entwicklungsphase erreichen.

In einigen Fällen tauschten wir auch während der Entwicklung Komponenten aus oder behielten sogar ältere Komponenten bei, wobei das Design- und Produktteam die volle Zustimmung gab. Da wir pragmatisch und kooperativ blieben, konnten wir schneller liefern, ohne Abstriche bei der Endbenutzererfahrung machen oder defekte Funktionen veröffentlichen zu müssen.

Nutzen Sie das gesamte Designsystem

Ein Designsystem ist mehr als nur ein Satz wiederverwendbarer Komponenten — es ist auch eine neue Designsprache, die ein eigenes Vokabular hat. Genau wie bei der Anmeldung bei Duolingo vor einer Reise nach Barcelona ist es für Entwickler hilfreich, vor und während einer Migration das Vokabular des neuen Designsystems zu lernen.

In unserem Fall sind die neuen Wörter Benutzerdefinierte CSS-Eigenschaften die neue Designentscheidungen darstellen. Indem wir einige Zeit mit der neuen Designsprache verbringen, können wir übersetzen Schriftgröße: 20px; in Schriftgröße: var (--flo-base-font-size-8);. Als Entwickler müssen wir die neuen Tokens nicht in- und auswendig kennen, aber es hilft sehr, während einer Migration zumindest im neuen Designsystem „gesprächig“ zu sein.

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