Dokumentacja Design Systemu
Dokumentacja to klucz do adopcji Design Systemu. Bez dobrej dokumentacji nawet najlepszy DS nie będzie używany przez zespół.
Co to jest?
Dokumentacja Design Systemu to zbiór wytycznych, przykładów i specyfikacji opisujących każdy element systemu. Obejmuje: opis fundacji (kolory, typografia, spacing), dokumentację komponentów (warianty, API, przykłady kodu, Do/Don't), wzorce (patterns) dla typowych scenariuszy i przewodniki kontrybuowania. Dokumentacja musi być aktualna, przeszukiwalna i dostępna dla designerów i developerów.
Jak to działa?
Dobra dokumentacja DS działa na trzech poziomach: 1) Strona główna z przeglądem systemu i szybkim startem. 2) Strony fundacji i komponentów z interaktywnymi przykładami (Storybook, Playroom). 3) Wzorce (patterns) opisujące jak łączyć komponenty w typowych scenariuszach (np. formularz logowania, tabela z filtrowaniem).
Jak wdrożyć?
Przykłady z prawdziwych Design Systemów
Carbon IBM oferuje dedykowaną stronę z interaktywnymi przykładami, kodem React i Storybook-iem. Polaris Shopify ma wbudowany playground do testowania komponentów. GOV.UK Design System dokumentuje każdy pattern z przykładami z życia i wynikami badań z użytkownikami.