Die Texte in diesem Artikel wurden teilweise mit Hilfe künstlicher Intelligenz erarbeitet und von uns korrigiert und überarbeitet. Für die Generierung wurden folgende Dienste verwendet:
Erneut beschäftigen wir uns mit der Schnittstelle zwischen Design und Entwicklung - diesmal in Erweiterung unserer früheren Diskussion über Designsysteme. In diesem Artikel werfen wir einen ersten Blick auf Komponentenbibliotheken, ein wichtiger, aber oft diskutierter Ansatz für Designer:innen und Entwickler:innen gleichermaßen.
Wie ihr Gegenstück, das Designsystem, bilden Komponentenbibliotheken die Grundlage des Design- und Entwicklungsprozesses eines Unternehmens. Sie stellen eine (einzige) Quelle für Designer- und Entwickler:innen dar und gewährleisten Konsistenz und Effizienz in allen Bereichen.
Eine einzige Quelle schaffen
Da Komponenten sowohl in der Design- als auch in der Entwicklungsdomäne vorkommen, ist es wichtig, eine einzige Quelle für beide Teams zu schaffen. Diese Quelle reduziert das Risiko von Inkonsistenzen und Fehlkommunikation zwischen den beiden Teams.
Die Schaffung einer einzigen Quelle bringt die Herausforderung mit sich, Design und Entwicklung auf dem gleichen Stand zu halten. Es entsteht ein koordinierter Ansatz, bei dem Designer- und Entwickler:innen ein gemeinsames Verständnis und eine gemeinsame Kommunikation aufbauen und pflegen.
Kommunikation und Synchronisierung von Änderungen
Werkzeuge zur Überbrückung der Kluft
Moderne Werkzeuge wie Figma und Storybook helfen, die Kluft zwischen Design und Entwicklung zu überbrücken. Sie bieten beiden Teams eine Plattform für die Kommunikation und den zeitnahen Abgleich von Änderungen.
Beide Werkzeuge decken in hervorragender Weise die Funktionalitäten ab, die zur Erleichterung der Kommunikation und der Synchronisierung von Änderungen erforderlich sind, und eignen sich gut für die Arbeit mit den jeweiligen Teams, während sie gleichzeitig eine Plattform für die Zusammenarbeit und den Einblick in andere Teams bieten.
| Figma Merkmale | |
|---|---|
| Echtzeit-Zusammenarbeit | Gleichzeitig mit anderen Designer:innen arbeiten |
| Design Systems | Arbeite dateiübergreifend mit Token und Komponenten |
| Prototyping | Erstelle interaktive Prototypen zum Testen von Benutzerabläufen |
| Dev Mode | Entwürfe dokumentieren und an Entwickler:innen weitergeben |
| Versionshistorie | Änderungen nachverfolgen und zu früheren Versionen zurückkehren |
| Storybook Merkmale | |
|---|---|
| Isolierte Entwicklung | Entwickle Komponenten außerhalb der Anwendung |
| Komponententests | Verhalten simulieren und im Browser überprüfen |
| Visuelles Testen | UI-Änderungen visuell durch Vergleich bestimmen |
| Dokumentation | Automatisierte Dokumentation für Komponenten erstellen |
| Erweiterbar | Erweitern mit Addons für spezielle Anwendungsfälle |
Rollen im Prozess
Entwurf
Designer:innen sind mitverantwortlich für die Konzeption von Komponenten, wobei sie das System im Auge behalten und Standards wie Barrierefreiheit einhalten. Sie veröffentlichen Komponenten und deren Dokumentation, kommunizieren Änderungen und pflegen und aktualisieren Komponenten.
Übergabe
Die Übergabe ist eher ein gemeinsamer Prozess als eine Rolle zwischen Design und Entwicklung. Sie ist dafür verantwortlich, dass die Ergebnisse und das damit verbundene Wissen effizient und zeitnah zwischen den Teams übertragen werden. Sie ist das Rückgrat für einen reibungslosen Ablauf sowohl im Design als auch in der Entwicklung.
Entwicklung
Die Entwickler:innen definieren die Anforderungen an die Komponenten, bewerten die Anwendungsfälle und prüfen die diskutierten Konzepte vor dem Designprozess. Sie entwickeln, publizieren, dokumentieren und warten Komponenten plattform- und versionsübergreifend.
Reibungsverluste reduzieren
Bei der anfänglichen Bereitstellung einer Komponentenbibliothek ist es mehr als wahrscheinlich, dass es zwischen den beiden Teams zu Reibungsverlusten in Bezug auf Kommunikation und Verantwortlichkeiten kommt. Als Teil eines größeren Projekts liegt es in der gemeinsamen Verantwortung, diese Reibungsverluste zu reduzieren und den Prozess zu vereinfachen.
Gemeinsame Probleme können vorhanden sein, schließen sich aber nicht gegenseitig aus:
- Vernachlässigung der Kommunikation auf einer oder mehreren Seiten
- Unklarheit über Verantwortlichkeiten oder Aufgaben
- Synchronisierung der Benutzerschnittstelle zwischen Design und Entwicklung
- Widersprüchliche Design- und technische Anforderungen
- Zu viele oder zu wenige Prozessanforderungen
Selbst wenn du auf eines oder mehrere dieser Probleme stößt, kannst du sicher sein, dass in den meisten Fällen eine gute Kommunikation zwischen den Teams diese Übergangsprobleme lösen wird. Das Ergebnis ist ein reibungsloser und angenehmer Prozess für beide Teams.
Rinse and repeat
Sobald ein Prozess gefunden wurde, ist „Rinse and repeat“ an der Tagesordnung. Verinnerliche und dokumentiere den Prozess und identifiziere frühzeitig weitere Schmerzpunkte in beiden Teams, um den Prozess der Prozessverbesserung zu verbessern.
Es mag sich wiederholen, aber Kommunikation ist hier wirklich der Schlüssel. Im nächsten Artikel werden wir mehr über Komponentenbibliotheken und Design erfahren und ein reales Beispiel mit den hier beschriebenen Konzepten entwickeln. Bleib dran für mehr.
TL;DR
Komponentenbibliotheken sind ein Eckpfeiler moderner Designsysteme und haben einen positiven Einfluss auf das Design und die Entwicklung eines Produktes. Basierend auf einer soliden Kommunikation zwischen den Teams wird die Verwaltung und Erweiterung einer Komponentenbibliothek zum Kinderspiel.