Jak developerzy i designerzy w software house'ie mogą korzystać z jednego design systemu

Design system często zaczyna żyć własnym życiem — istnieje jako plik we Figmie, wygląda świetnie na prezentacji, a kilka sprintów później interfejs w produkcji ma inne odstępy, inne odcienie kolorów i przyciski, których nie ma w żadnej bibliotece. To nie wina żadnej ze stron — to efekt braku wspólnego, jednego źródła prawdy dla designu i kodu.

Skąd bierze się rozjazd między designem a kodem

Najczęstsza przyczyna to brak mapowania wartości: kolor czy odstęp ustalony w design toolu nie ma swojego odpowiednika w kodzie, więc developer pod presją terminu wpisuje wartość na oko. Po kilku takich decyzjach system przestaje być systemem, a staje się zbiorem wyjątków.

Tokeny jako wspólny język

Rozwiązaniem są tokeny designu — nazwane wartości koloru, typografii i odstępów, które istnieją równocześnie jako zmienne w narzędziu projektowym i jako zmienne w kodzie (np. CSS custom properties). Zmiana koloru marki w jednym miejscu aktualizuje się wszędzie, zamiast wymagać ręcznej poprawki w dziesiątkach plików.

Komponenty to coś więcej niż wygląd

Dobra dokumentacja komponentu opisuje nie tylko jak wygląda, ale też jak się zachowuje: stan hover, disabled, błąd walidacji, wersja mobilna. Bez tego każdy zespół developerski dopisuje brakujące stany po swojemu, co z czasem różnicuje interfejs między modułami tego samego produktu.

Dokumentacja, którą developerzy faktycznie otwierają

Statyczny plik PDF z brand bookiem szybko się dezaktualizuje. Sprawdza się żywa dokumentacja spięta z realnym kodem — nawet prosta strona z przykładami komponentów renderowanymi bezpośrednio z biblioteki, której używa produkt — bo wtedy nie może się rozjechać z tym, co faktycznie działa w aplikacji.

Jak podchodzimy do tego w MOVOO

Projektując system wizualny dla software house'ów, od razu planujemy jego wdrożenie w kodzie — tokeny i komponenty przekazujemy w formacie gotowym do pracy zespołu deweloperskiego, a nie tylko jako galerię w prezentacji. Szczegóły tego podejścia znajdziesz w sekcji oferty.