Design System? A komu to potrzebne?
Jesteś Junior UX Designerem lub szukasz pierwszej pracy? Dowiedz się, czym jest, a czym nie jest, Design System.
Wypisałem, może trochę zbyt akademicko, z czego powinien się składać i jaki powinien być design system:
Baza komponentów wizualnych
To, co usprawnia prace w Figmie. Dobrze przygotowane, czyli takie, które da się łatwo powielać i dostosować do konkretnego przypadku. Tutaj już robotę robi sam program, udostępniając narzędzia. Trzeba zastanowić się ile wariantów i jakie powinny być przygotowane. Bardzo łatwo jest całość mocno rozdmuchać, przygotowując zbyt wiele kombinacji – utrzymanie tego może być problematyczne.
Komponenty w kodzie
To, co pomaga developerom. Tutaj też ważne jest odpowiednie zaplanowanie biblioteki i utrzymywanie. Każdy komponent w bazie wizualnej, powinien mieć dostępny odpowiednik w bibliotece, z której korzysta developer (i vice-versa). Dzięki temu będzie można zachować spójność pomiędzy projektem a wdrożeniem.
Dokumentacja
Niepopularna, ale istotna część dobrego systemu. Warto opisać, kiedy z czego korzystać w design systemie, wskazać przykłady i poprzednie wdrożenia. Dobra dokumentacja łączy projektantów z developerami, dlatego warto nie pisać jej tylko z jednej perspektywy.
Złożony z atomów, tokenów
Czyli ustalonych zmiennych. Zmienne mogą określać, jakie kolory są używane, jakie kroje pisma, odstępy lub dekoracje. Dzięki zapisaniu tego w zmiennych możemy w łatwy sposób wprowadzać zmiany, zmieniając na przykład kolor w źródle, wszystkie wystąpienia automatycznie się zaktualizują.
Żywy
Nie da się zrobić, zamknąć i zapomnieć. Wszystkie elementy powinny być na bieżąco aktualizowane. Czasami trzeba coś zoptymalizować, poprawić, lub zmienić. Jeżeli o tym zapomnimy, bardzo szybko nikt nie będzie korzystał z systemu.
Wspólny
Czyli wpływać na jego rozwój, powinna możliwie duża część zespołu. Pomysły na usprawnienia, sugestie zmian i propozycje nowych elementów nie powinny być ograniczone do grona wybranych. Projektanci, developerzy i inne osoby zaangażowane powinny wiedzieć, jak mogą wesprzeć i rozwijać design system.
To taka pigułka, w teorii bardzo łatwo jest o tym opowiadać. Prowadzenie takiej inicjatywy nie jest proste, wymaga zaangażowania i kooperacji wielu osób.
Przeglądając dostępne w internecie systemy, pod bardzo fajnie wizualnie wyglądająca baza komponentów często kryje się niedokończony lub niepołączony fragment biblioteki kodu. Jest to wtedy bardziej Design Kit, coś od projektantów, dla projektantów — zamiast narzędzia tez dla frontend developerów.