Design system
Jeden zestaw klocków, z którego powstaje cały Twój produkt: strona, aplikacja i panel. Projektant i programista budują z tych samych elementów, więc produkt rośnie szybciej i nie rozjeżdża się po drodze.
- Kolory i typografia
- Przyciski
- Formularze
- Komponenty
- Tryb ciemny
Przychody
1–30 września
Największe kanały
- Sklep online21 400 zł
- Aplikacja14 900 zł
- Marketplace8 150 zł
- Sprzedaż B2B3 800 zł
Design system to wspólny język projektantów i programistów: biblioteka gotowych elementów i zasad, z których składa się każdy ekran produktu.
Od jednego koloru do całej strony
System rośnie warstwami. Najmniejsze decyzje, czyli kolor, odstęp i krój, składają się w przyciski i pola, te w większe bloki, a te w gotowe ekrany. Zmiana na dole przechodzi przez wszystkie warstwy wyżej.
- Tokeny01Nazwane wartości: kolory, rozmiary pisma, odstępy, zaokrąglenia.
- Atomy02Najmniejsze elementy: przycisk, pole, ikona, przełącznik.
- Molekuły03Proste połączenia atomów, np. wyszukiwarka z przyciskiem.
- Organizmy04Większe bloki: karta, tabela, nawigacja.
- Szablony05Układ ekranu, czyli gdzie stoi który blok.
- Strony06Gotowy ekran z prawdziwą treścią.
Bez systemu każdy ekran projektuje się od nowa
Nowa funkcja, nowy ekran, nowe decyzje: jaki odcień, jaki odstęp, jak duży przycisk. Po roku produkt ma kilka wersji przycisku „Zapisz” i trzy odcienie tego samego koloru. Użytkownik tego nie nazwie, ale poczuje: produkt wydaje się mniej dopracowany, a zespół traci czas na ustalanie, która wersja jest tą właściwą.
- 3 różne przyciski główne
- 4 promienie zaokrągleń
- 3 odcienie jednego koloru
Kolory
Każdy kolor ma nazwę, rolę i dziewięć odcieni. Nikt nie wybiera „jakiegoś niebieskiego”. Sięga się po token, który mówi, gdzie go użyć.
Kolory z rolami
Na ekranach nie używa się odcieni wprost, tylko ról: „tło”, „tekst pomocniczy”, „akcja”. Dzięki temu tryb ciemny to inne wartości tych samych ról, a nie drugi projekt.
- Tło#F4F4F5
- Powierzchnia#FFFFFF
- Tekst#131311
- Tekst pomocniczy#6F6F6A
- Linia#E5E5E6
- Akcja#6563FF
- Tło#141518
- Powierzchnia#1D1E23
- Tekst#F5F4F0
- Tekst pomocniczy#9A9A94
- Linia#2E3036
- Akcja#7F7DFF
Typografia
Jeden krój, kilka grubości i ustalona skala rozmiarów. Każdy tekst w produkcie ma swoje miejsce w hierarchii.
General Sans
AĄBCĆDEĘFGHIJKLŁMNŃOÓPRSŚTUWYZŹŻ
aąbcćdeęfghijklłmnńoóprsśtuwyzźż 0123456789
- Regularny400
- Średni500
- Półgruby600
- Gruby700
- DisplayJasny układ, czytelny tekst56/60
- Nagłówek 1Jasny układ, czytelny tekst40/48
- Nagłówek 2Jasny układ, czytelny tekst32/40
- Nagłówek 3Jasny układ, czytelny tekst24/32
- Tekst dużyTekst podstawowy, w którym czyta się większość treści. Ma wygodną długość wiersza i interlinię, która nie męczy oka.18/28
- TekstTekst podstawowy, w którym czyta się większość treści. Ma wygodną długość wiersza i interlinię, która nie męczy oka.16/24
- PodpisTekst podstawowy, w którym czyta się większość treści. Ma wygodną długość wiersza i interlinię, która nie męczy oka.13/18
Ikony
Wspólna siatka 24×24 i jedna grubość linii. Każda nowa ikona wygląda, jakby była w zestawie od początku.
Zestaw ikon
Ikony dziedziczą kolor tekstu, więc same dopasowują się do stanu elementu i trybu ciemnego.
Odstępy i zaokrąglenia
Stała skala odstępów i promieni daje rytm. Każda wartość jest tokenem, więc ekrany układają się przewidywalnie, bez mierzenia „na oko”.
Odstępy
Marginesy i wypełnienia biorą wartości ze skali. Na karcie obok każdy odstęp to jeden z tokenów.
Zaokrąglenia
Kilka promieni zamiast dowolnych. Małe elementy mają mniejszy, karty i okna większy.
Cienie
Kilka poziomów głębi zamiast przypadkowych cieni. Im wyżej element, tym ważniejszy w danej chwili.
Przyciski
Jeden komponent, wiele sytuacji. Rozmiar, typ, stan i ikony to właściwości: projektant przełącza je w Figmie, programista w kodzie, a wygląd zawsze się zgadza.
Warianty i stany
Każda kombinacja typu i stanu jest zaprojektowana z góry. Nikt nie zgaduje, jak wygląda przycisk wyłączony albo najechany.
Zmień właściwości. Tak działa komponent w Figmie i w kodzie.
Pola formularzy
Etykieta, pole, tekst pomocniczy i komunikat błędu tworzą jedną całość. Formularz zachowuje się tak samo przy rejestracji, w koszyku i w ustawieniach.
Budowa pola
Pole może mieć ikonę, przycisk, listę wyboru albo prefiks, zawsze z tymi samymi odstępami.
Stany i warianty
Domyślne, najechane, w trakcie pisania, aktywne, z błędem i wyłączone. Każdy stan w dwóch stylach.
Biblioteka komponentów
Gotowe elementy zbudowane na wspólnych tokenach. Każdy ma te same zasady odstępów, rozmiarów i stanów, także w trybie ciemnym.
- PrzyciskiKolory znaczeniowe i komplet stanów.
- PolaEtykieta, pole, pomoc i walidacja.
- ANProjekt2ChipyFiltry, tagi i wybór wielu opcji.
- ANPKML+5AwataryOsoby i zespoły, ze statusem.
- ProjektyRaportOkruszkiPokazują, gdzie jest użytkownik.
- NoweNoweEtykietyStatus, priorytet albo kategoria.
- 123…12PaginacjaNawigacja po długich listach.
- WybórCheckboxy, radia i przełączniki.
- PodpowiedźPodpowiedziKontekst bez przerywania pracy.
- …i ponad 20 kolejnych
Etykiety statusu
Status, priorytet czy kategoria zawsze pojawiają się w tych samych kolorach znaczeniowych. Zielony znaczy „gotowe” na każdym ekranie produktu.
Z klocków powstają całe ekrany
Tabela poniżej nie jest osobnym projektem. To pola, przyciski, awatary, etykiety i paginacja z tej samej biblioteki, złożone w nowy widok w godziny, a nie w dni.
| Osoba | Status | Zespół | Tagi | |||
|---|---|---|---|---|---|---|
| ANAnna NowakProduct Designer | Aktywny | Produkt | anna@example.com | BadaniaFigma+2 | ||
| PKPiotr KowalskiFrontend Developer | Aktywny | Technologia | piotr@example.com | ReactUI | ||
| MLMarta LisProduct Manager | Urlop | Produkt | marta@example.com | Strategia+1 | ||
| TMTomasz MazurMarketing | Wdrożenie | Marketing | tomasz@example.com | SEOBadania | ||
| EKEwa KaczmarekBackend Developer | Aktywny | Technologia | ewa@example.com | APIReact+3 | ||
| JWJan WronaObsługa klienta | Nieaktywny | Wsparcie | jan@example.com | Wsparcie |
Ten sam komponent, różne miejsca
Widżet dopasowuje się do szerokości. W panelu, w aplikacji i na telefonie trzyma te same zasady.
Przychody
1–30 września
Największe kanały
- Sklep online21 400 zł
- Aplikacja14 900 zł
- Marketplace8 150 zł
- Sprzedaż B2B3 800 zł
Przychody
1–30 września
Największe kanały
- Sklep online21 400 zł
- Aplikacja14 900 zł
- Marketplace8 150 zł
- Sprzedaż B2B3 800 zł
Zmieniasz jedną wartość, zmienia się cały produkt
Kolory, zaokrąglenia i kroje są zapisane jako tokeny, czyli nazwane wartości, z których korzystają wszystkie komponenty. Zmiana tokenu przechodzi przez cały produkt naraz, bez przeglądania setek ekranów. Tak samo działa tryb ciemny, rebranding albo wersja produktu dla innej marki: zmieniają się tokeny, a ekrany zostają.
Przychody
1–30 września
Największe kanały
- Sklep online21 400 zł
- Aplikacja14 900 zł
- Marketplace8 150 zł
- Sprzedaż B2B3 800 zł
Mniej decyzji przy każdym ekranie, więcej czasu na to, co nowe
Szybsze wdrażanie
Nowy ekran składa się z gotowych elementów. Zespół projektuje i koduje to, co nowe, a nie po raz piąty ten sam formularz.
Spójna marka
Użytkownik widzi jeden produkt, a nie zbiór ekranów robionych przez różne osoby w różnych miesiącach.
Tańsze zmiany
Zmiana koloru, kroju czy zaokrąglenia to jedna poprawka w systemie, a nie przegląd całej aplikacji.
Mniej poprawek między projektem a kodem
Projektant i programista mówią o tych samych elementach tymi samymi nazwami. Mniej „miało być inaczej”.
Dostępność od początku
Kontrasty, wielkość pól dotyku i stany fokusu sprawdza się raz, w systemie. Każdy nowy ekran dziedziczy je automatycznie.
Łatwiejszy start nowych osób
Nowy programista, agencja czy freelancer dostaje gotowe zasady, zamiast zgadywać na podstawie istniejących ekranów.
Nie każdy projekt potrzebuje design systemu
Warto, gdy…
- produkt będzie rozwijany przez miesiące i lata, a nie oddany raz
- pracuje nad nim kilka osób albo kilka zespołów
- masz więcej niż jedną platformę, np. stronę, aplikację i panel
- sprzedajesz produkt pod różnymi markami albo planujesz rebranding
- programiści coraz częściej pytają: „który to właściwie przycisk?”
Jeszcze nie, gdy…
- potrzebujesz jednej strony albo landing page’a
- budujesz MVP, żeby sprawdzić pomysł, a wtedy wystarczą solidne podstawy: kolory, typografia i kilka komponentów, które rozbudujemy, kiedy produkt się obroni
Od audytu do biblioteki, z której korzysta cały zespół
- 01
Audyt
Zbieram wszystko, co już istnieje: ekrany, style, komponenty w kodzie. Liczę warianty i pokazuję, gdzie produkt się rozjeżdża.
- 02
Fundamenty
Ustalam tokeny: paletę kolorów z rolami, skalę typografii, odstępy, zaokrąglenia i cienie.
- 03
Komponenty
Projektuję bibliotekę w Figmie: każdy element ze wszystkimi wariantami i stanami, gotowy do użycia w nowych ekranach.
- 04
Dokumentacja i przekazanie
Opisuję zasady użycia i przekazuję system programistom tak, żeby nazwy i tokeny w Figmie odpowiadały tym w kodzie.
Co dostajesz
- Bibliotekę komponentów w Figmie
- Tokeny gotowe do przeniesienia do kodu
- Dokumentację zasad użycia
- Wsparcie zespołu przy wdrożeniu