Design system to zbiór spójnych zasad projektowych, gotowych komponentów interfejsu, wytycznych i dokumentacji, który pozwala zespołom tworzyć jednolite, powtarzalne interfejsy. Łączy projektantów i programistów wspólnym językiem.
Z czego składa się design system?
- zasady: kolory, typografia, odstępy, ikony,
- biblioteka komponentów, np. przyciski, formularze, karty,
- wytyczne użycia i dostępności,
- kod komponentów gotowy do użycia.
Po co stosować design system?
Przyspiesza pracę, zapewnia spójność wyglądu i zachowania oraz ułatwia utrzymanie. Zmiana w jednym komponencie aktualizuje wszystkie miejsca, w których jest użyty.
Design system a styleguide
Styleguide opisuje zasady wizualne i marki, a design system obejmuje także gotowe komponenty i ich implementację w kodzie. Znane przykłady to Material Design czy Carbon.
Utrzymanie systemu projektowego
Design system żyje tylko wtedy, gdy ktoś go rozwija: ma właściciela, dokumentację z przykładami użycia, wersjonowanie i proces zgłaszania zmian. Tokeny projektowe, czyli nazwane wartości kolorów, odstępów i typografii, łączą projekt w Figmie z kodem. Dzięki temu zmiana koloru głównego w jednym miejscu aktualizuje cały produkt.
W pracy nad produktem uwzględnia się to na kolejnych etapach, jakie obejmuje proces projektowania UX.
Zobacz w praktyce
Proces projektowania UX krok po kroku – od badań do testów 
Clean Code - jak pisać czytelny i zrozumiały kod 
Działanie strony internetowej w przeglądarce