Czym jest design system i kiedy się opłaca

Po tej lekcji wyjaśnisz, czym jest design system, czym różni się od biblioteki komponentów i księgi znaku oraz ocenisz, czy Twój zespół już go potrzebuje.

Czym jest design system

Design system to wspólny zestaw decyzji projektowych, gotowych elementów interfejsu i zasad ich użycia, z którego korzysta cały zespół produktowy: projektanci, programiści, osoby od treści i właściciele produktu. Najprościej opisać go jako umowę. Zamiast za każdym razem ustalać od nowa, jak wygląda przycisk, ile wynosi odstęp między polami formularza albo jak brzmi komunikat błędu, zespół sięga do jednego źródła i robi to tak samo.

Na design system składają się zwykle cztery warstwy:

• Fundamenty, czyli tokeny: nazwane wartości kolorów, typografii, odstępów, zaokrągleń i cieni.
• Komponenty: przyciski, pola, karty, okna dialogowe, każdy z wariantami i stanami.
• Wzorce: sprawdzone połączenia komponentów, na przykład formularz logowania albo pusty stan listy.
• Dokumentacja i zasady pracy: kiedy czego używać, kto może zmieniać system, jak zgłaszać poprawki.

Model używany w całym kursie.

Design system, biblioteka komponentów i księga znaku

Te trzy pojęcia często się mieszają, a każde oznacza co innego.

Księga znaku (brand book) opisuje markę: logo, kolory firmowe, krój pisma, ton komunikacji. Powstaje dla marketingu i drukarni. Nie mówi, jak ma działać pole wyszukiwania na telefonie.

Biblioteka komponentów to zbiór gotowych elementów w Figmie albo w kodzie. Jest częścią systemu, ale sama nie wystarczy. Bez zasad dwie osoby użyją tego samego przycisku na dwa sprzeczne sposoby.

Design system łączy bibliotekę z decyzjami i procesem. Ma właściciela, numer wersji, historię zmian i sposób przyjmowania poprawek. Dlatego mówi się, że design system to produkt wewnętrzny: jego użytkownikami są inni członkowie zespołu.

Kiedy design system się opłaca

Design system kosztuje czas: trzeba go zbudować, opisać i utrzymywać. Opłaca się wtedy, gdy ten sam problem rozwiązujecie wielokrotnie. Sygnały, że to już ten moment:

1. Ten sam element wygląda różnie na różnych ekranach, bo każdy projektant rysował go od zera.
2. Programiści pytają o wartości odstępów i kolorów, bo w makietach są „prawie takie same” liczby.
3. Nowa osoba w zespole potrzebuje tygodni, żeby nauczyć się, „jak u nas się projektuje”.
4. Produkt ma kilka platform (strona, aplikacja mobilna, panel administracyjny) albo kilka marek.
5. Trzeba spełnić wymagania dostępności, a każdy ekran sprawdza się osobno.

Gdy pracujesz sam nad jedną małą stroną, pełny system zwykle jest na wyrost. Wystarczy wtedy kilka stylów i komponentów w jednym pliku. Zasada z tego kursu: zaczynasz od małego zestawu, który rozwiązuje najczęstszy problem, i rozbudowujesz go, gdy pojawia się kolejna potrzeba.

Przykład, który poprowadzi Cię przez kurs

W całym kursie pracujesz na fikcyjnym przykładzie. Finanse Pro to aplikacja do planowania domowego budżetu, którą rozwija niewielka firma z Poznania. Zespół to dwie projektantki, pięciu programistów i właścicielka produktu. Aplikacja działa w przeglądarce i na telefonach, pokazuje wydatki w złotych (na przykład „Zakupy spożywcze: 1250,00 zł”) i ma panel dla doradców finansowych.

Problem zespołu: na ekranach aplikacji jest kilka odcieni niebieskiego przycisku, trzy różne style pól formularza i komunikaty błędów pisane za każdym razem inaczej. Każda zmiana koloru marki oznacza ręczne poprawki w wielu plikach. W kolejnych lekcjach zrobisz dla Finanse Pro audyt, zdefiniujesz tokeny, zbudujesz komponenty i ustalisz zasady utrzymania. W projekcie końcowym te same kroki powtórzysz na własnym produkcie.

Jedno zastrzeżenie: Finanse Pro jest przykładem projektowym. Kurs uczy budowy interfejsu, nie doradza w sprawach finansowych.

Najważniejsze w 3 punktach

1. Design system to tokeny, komponenty, wzorce i zasady pracy, a nie sama biblioteka w Figmie.
2. Księga znaku opisuje markę, biblioteka daje gotowe elementy, system dodaje do nich decyzje, wersje i właściciela.
3. System opłaca się, gdy te same problemy rozwiązujecie wielokrotnie; zaczynasz od małego zestawu i rozbudowujesz go stopniowo.

Źródła

• Brad Frost, „Atomic Design”, rozdz. 1–2, 2016: https://atomicdesign.bradfrost.com/chapter-2/ (dostęp: październik 2026)
• Figma Learn, „Figma plans and features” (biblioteki komponentów, stylów i zmiennych): https://help.figma.com/hc/en-us/articles/360040328273-Figma-plans-and-features (stan na październik 2026)