---
title: "Design System"
url: "https://wzor.biz/uslugi/design-system/"
description: "Tworzenie design systemów: biblioteki Figma + React/Vue, design tokens, dokumentacja Storybook, governance. Skalowalna baza pod produkty cyfrowe."
lang: "pl"
---
# Design System

[Bezpłatna konsultacja](https://wzor.biz/bezplatna-konsultacja/) [Projekty](https://wzor.biz/projekty/)

Design system jako kompletny pakiet - biblioteka Figma + komponenty React/Vue z testami + Storybook + design tokens W3C. Greenfield albo migracja istniejącego systemu.

Pracowaliśmy dla najlepszych firm i startupów

Wyzwania

## Trzy momenty, w których design system zwraca koszt najszybciej

Nie masz pewności czy DS to teraz dobry krok? [Umów konsultację](https://wzor.biz/bezplatna-konsultacja/) - wskażemy uczciwie czy potrzebujecie pełnego DS, czy wystarczy uporządkowany style guide.

-   „Enterprise z 5+ produktami cyfrowymi”
    
    Strona główna, eBOK, aplikacja mobilna, panel B2B, marketplace - każdy wygląda jakby projektowała go inna firma. DS unifikuje wszystko + skraca czas projektowania nowych funkcji o 80% (typowo).
    
-   „Scaleup SaaS z 5+ developerami”
    
    Zespół projektowy rośnie, produkt traci spójność. Każdy nowy feature wygląda inaczej, decyzje designerskie nie są kodyfikowane. DS przyspiesza zespół i eliminuje „a jak to ma wyglądać" debate per ticket.
    
-   „Software house / agencja - white-label dla projektów”
    
    Wasze agencja realizuje projekty dla klientów, każdy ma własny brand ale chcecie standardowy proces. Robimy white-label DS pod Waszym brandem - adoptujecie go w każdym projekcie, redukując overhead per klient.
    

Dla kogo

## Dla kogo budujemy design system

-   ### Zespoły po nieudanej pierwszej bibliotece
    
    Biblioteka powstała, została przekazana i po kilku miesiącach nikt do niej nie zagląda, bo szybciej było skopiować komponent niż go poprawić. Zaczynamy od tego, dlaczego zespół z niej zrezygnował, i odbudowujemy ją tak, żeby sięgnięcie po komponent było krótszą drogą niż zrobienie kopii.
    
-   ### Firmy po przejęciu albo rebrandingu
    
    Dwa produkty, dwa zestawy stylów i jedna marka, która ma je objąć, zwykle w terminie ustalonym poza zespołem produktowym. Składamy wspólną warstwę tokenów i komponentów, a różnice, których nie da się ujednolicić od razu, wpisujemy w plan wydań zamiast zostawiać je jako dług bez daty.
    
-   ### Producenci oprogramowania wdrażanego pod marką klienta
    
    Jeden produkt jedzie do kilkunastu instancji, a każdy klient chce własnych kolorów, logotypu, czasem innej gęstości interfejsu. Biblioteka dostaje warstwę motywów opartą na tokenach, więc nowa instancja jest zmianą wartości, a nie osobnym forkiem komponentów.
    
-   ### Zespoły utrzymujące systemy wewnętrzne i panele operacyjne
    
    Aplikacja obsługuje codzienną pracę kilkuset osób, frontend rósł latami przez kopiowanie ekranów, a na przepisanie całości nikt nie da budżetu. Biblioteka wchodzi tam ekran po ekranie, zaczynając od formularzy i tabel, czyli od miejsc, w których niespójność kosztuje operatorów najwięcej czasu.
    

![Wydruki czterech układów interfejsu na stole: pulpit, ekran telefonu, formularz i tabela, jeden blok zakreślony markerem](https://wzor.biz/_astro/dla-kogo-wydruki-ekranow.GsgQefUA_1bzGfa.webp)

Nasza różnica

## Czym różni się nasze podejście

-   ### Pierwsze komponenty powstają na Waszych realnych ekranach
    
    Zanim katalog urośnie, odtwarzamy z biblioteki trzy widoki, które faktycznie są w produkcie - najczęściej formularz, listę z filtrami i widok szczegółu. Komponent, który nie składa prawdziwego ekranu, wraca do poprawki, zanim ktokolwiek zdąży go użyć.
    
-   ### Ostatnie komponenty pisze Wasz zespół
    
    Druga część biblioteki powstaje w parach - Wasi developerzy i projektanci prowadzą komponent, my robimy review i pilnujemy konwencji. Po hand-offie zespół nie poznaje systemu z dokumentacji, tylko zna go z własnej pracy nad nim.
    
-   ### Migracja bez zamrażania roadmapy
    
    Stare i nowe komponenty działają obok siebie za przełącznikiem, a ekrany przechodzą na bibliotekę partiami wpisanymi w Wasze sprinty. Nie ma momentu, w którym zespół wstrzymuje prace nad produktem, żeby poczekać na design system.
    
-   ### Adopcję pokazujemy liczbą
    
    Po wdrożeniu raportujemy pokrycie - jaka część ekranów i importów w repozytorium korzysta z biblioteki, a gdzie wciąż żyją lokalne kopie komponentów. Pomiar powtarzamy po trzydziestu i po dziewięćdziesięciu dniach, więc widać, czy system się przyjął, czy tylko został oddany.
    

Proces

## 8-12 tygodni od audytu do hand-off. Plus governance na zawsze

1.  Tydzień 1–2
    
    ### Audyt + inventory
    
    Inwentaryzacja istniejących produktów: jakie wzorce już są, gdzie są niespójności, co można zachować, co przeprojektować. Plus wywiady z designerami i developerami klienta.
    
2.  Tydzień 2–3
    
    ### Design tokens
    
    Definicja tokenów: colors (light/dark mode), typography (skale, leading), spacing (4/8px grid), motion (easing, duration), breakpoints, elevation. Format W3C design tokens - multi-platform ready.
    
3.  Tydzień 3–6
    
    ### Komponenty Figma
    
    Biblioteka komponentów Figma - atoms → molecules → organisms (Atomic Design). Variants, auto-layout, dokumentacja użycia per komponent. 2-3 rundy feedbacku z zespołem klienta.
    
4.  Tydzień 5–10
    
    ### Komponenty kod
    
    Implementacja w React lub Vue. TypeScript, Tailwind/Stitches, testy jednostkowe, accessibility audit (axe), Storybook 8+ z interactive examples. Token Studio dla automatycznej synchronizacji z Figmą.
    
5.  Tydzień 10–12
    
    ### Hand-off + szkolenia
    
    Dokumentacja użycia, governance playbook, 2-3 sesje szkoleniowe dla zespołu klienta (designerzy, developerzy, PM-owie), 30-dniowy support, roadmap rozwoju na 12 mies.
    

Zakres

## Trzy pakiety. Nie luźna biblioteka kolorów w Figmie

-   ### Figma Library - komponenty + variants
    
    Pełna biblioteka komponentów Figma z variantami, design tokens (kolory, typografia, spacing, motion, breakpoints), auto-layout, opublikowana w organizacji. Plus dokumentacja użycia per komponent.
    
-   ### Code Library - React/Vue + Storybook
    
    Kod komponentów w TypeScript + Tailwind/Stitches. Testy jednostkowe (Vitest/Jest), accessibility (axe), Storybook 8+ z interactive examples. Token Studio / Style Dictionary do synchronizacji z Figmą.
    
-   ### Governance Kit - dokumentacja + szkolenia
    
    Pełna dokumentacja (Notion / Markdown), governance playbook (kto, kiedy, jak zmienia DS), szkolenia dla zespołu klienta (2-3 sesje), roadmap rozwoju na 12 mies., versioning + release notes.
    

Warsztat

## Co stosujemy

Standardy branżowe od dekady - plus własna metodologia synchronizacji Figma ↔ kod sprawdzona w 30+ projektach.

![Blat warsztatowy z góry: dwa wydruki układu interfejsu, lupa powiększająca jeden blok, stalowa linijka i wzornik szarości od bieli do czerni, jedna linia podkreślona pomarańczowym markerem](https://wzor.biz/_astro/warsztat-lupa-linijka-skala-szarosci.C5DINzRJ_Z2n7L7C.webp)

-   Atomic Design (Brad Frost)
-   Design Tokens W3C standard
-   WCAG 2.2 AA accessibility
-   Storybook 8+ z interactive examples
-   React/Vue + TypeScript + Tailwind
-   Token Studio / Style Dictionary

Następny krok

## Porozmawiajmy o Waszym projekcie

Powiedzcie, co macie do zrobienia. Wracamy z zakresem i wyceną.

[Bezpłatna konsultacja](https://wzor.biz/bezplatna-konsultacja/) [Projekty](https://wzor.biz/projekty/)

Realizacje

## Realizacje z produktów, dla których stawiamy biblioteki

Wybór projektów z tych typów produktów, przy których design system powstaje u nas najczęściej - aplikacji webowych, paneli i serwisów firmowych. Same biblioteki żyją w repozytoriach klientów, więc pokazujemy je na konsultacji.

-   [
    
    ![WygodnaDieta - telefon z ekranem głównym aplikacji: ocena „Doskonała" na Trustpilocie i karta diety „Dieta z Wyborem Menu" z ceną od 80,90 zł/dzień, na tle czerwonego gradientu z warzywami.](https://wzor.biz/_astro/cover.BfmwIntu_1CFKMk.webp)
    
    WygodnaDieta - Aplikacja i sklep internetowy diety pudełkowej
    
    ](https://wzor.biz/projekty/wygodna-dieta/)
-   [
    
    ![Lestore - sklep internetowy na makietach laptopa i telefonu: karta produktu „Roleta Rzymska Luna 42" z galerią zdjęć i ceną 49,99 zł.](https://wzor.biz/_astro/cover.ryV4Hb0o_dAA0z.webp)
    
    Lestore - Sklep internetowy z roletami i żaluzjami
    
    ](https://wzor.biz/projekty/le-store/)
-   [
    
    ![NeoBank - trzy telefony na zielonym tle z logotypem marki w tle: karty płatnicze, pulpit z dostępnymi środkami 27 568,89 zł i skrótami do przelewu oraz cel oszczędnościowy wypełniony w 61%.](https://wzor.biz/_astro/cover.cTNj7kPE_Z2t5E6w.webp)
    
    NeoBank - Koncepcja aplikacji bankowej dla młodych klientów
    
    ](https://wzor.biz/projekty/neobank/)
-   [
    
    ![myAzymut - monitor z mapą Europy i trasami przesyłek między miastami, panel „Sygnał floty" z listą pojazdów bez sygnału i z opóźnionym sygnałem oraz oś czasu na dole; w tle nocny węzeł autostradowy i duży napis myAzymut.](https://wzor.biz/_astro/cover.CMSoXGtF_Kvont.webp)
    
    myAzymut - Koncepcja portalu klienta dla firmy transportowej
    
    ](https://wzor.biz/projekty/myazymut/)
-   [
    
    ![Puls CRM - logotyp z niebieską linią pulsu nad monitorem z ekranem „Deale": boczne menu, kanban lejka sprzedaży z kolumnami Nowe, W rozmowach, Propozycja i Wygrane oraz karty deali z firmą, wartością i liczbą dni w etapie; w tle jasne, błękitne fale.](https://wzor.biz/_astro/cover.B_Q_VQbe_1ERf64.webp)
    
    Puls CRM - Koncepcja aplikacji CRM dla zespołu sprzedaży
    
    ](https://wzor.biz/projekty/puls-crm/)
-   [
    
    ![Flotino - kalkulator pożyczki i ekran „Dla kogo jest nasza pożyczka online?" na makietach telefonu, na tle rozmytych barwnych plam.](https://wzor.biz/_astro/cover.BIgugYRo_ZeHyg7.webp)
    
    Flotino - Serwis internetowy z pożyczkami gotówkowymi
    
    ](https://wzor.biz/projekty/flotino/)
-   [
    
    ![PWS Konstanta - strona główna na makiecie laptopa: hero „Najwyższa jakość ubezpieczeń poparta doświadczeniem" ze zdjęciem kapitelu kolumny i plakietką „30 lat".](https://wzor.biz/_astro/cover.CtYGmRYj_Z2gVAJr.webp)
    
    PWS Konstanta - Strona brokera ubezpieczeniowego
    
    ](https://wzor.biz/projekty/pw-konstanta/)
-   [
    
    ![SPEC Food - dwa telefony z otwartym sklepem Delikatesy SPEC: strona główna z promocjami oraz koszyk z produktami, na granatowym tle.](https://wzor.biz/_astro/cover.CbodJcEt_ZIHzVj.webp)
    
    SPEC Food - Sklep internetowy delikatesów spożywczych
    
    ](https://wzor.biz/projekty/spec-food/)
-   [
    
    ![Kafezzo - strona główna sklepu na laptopie: hero „Rzemieślnicza palarnia kawy Roastains" i pasek wyjątkowych okazji, obok ceramiczny kubek na kamiennym blacie.](https://wzor.biz/_astro/cover.CCfgxWVu_Z1myuka.webp)
    
    Kafezzo - Sklep internetowy z kawą i herbatą
    
    ](https://wzor.biz/projekty/kafezzo/)
-   [
    
    ![Fonia - dwa telefony na turkusowym tle: ekran główny aplikacji cashback z saldem 325,53 zł i listą sklepów partnerskich, obok wyszukiwarka sklepów z podpowiedziami Empik, Booking, AliExpress i Play.](https://wzor.biz/_astro/cover.DdIowm6o_Z12riqx.webp)
    
    Fonia - Aplikacja cashback dla osób kupujących online
    
    ](https://wzor.biz/projekty/fonia/)
-   [
    
    ![EzzyGuide - trzy telefony na ciemnym tle: potwierdzenie rejestracji, profil przewodniczki Małgorzaty Iwańskiej z oceną gwiazdkową i szczegóły wycieczki „Śladami Wrocławskich Krasnali" z ceną i danymi kontaktowymi.](https://wzor.biz/_astro/cover.DW1rNgrl_ca7w6.webp)
    
    EzzyGuide - Aplikacja z wycieczkami łącząca przewodników i turystów
    
    ](https://wzor.biz/projekty/ezzyguide/)
-   [
    
    ![VERSA - panel B2B dystrybutora części samochodowych otwarty na tablecie trzymanym w dłoniach: podsumowanie konta, mapa śledzenia przesyłki, program partnerski z rabatem 30%, historia zamówień i lista popularnych produktów.](https://wzor.biz/_astro/cover.DWv2CO5n_Z27qwnC.webp)
    
    VERSA - Koncepcja Panelu B2B dla dystrybutora części
    
    ](https://wzor.biz/projekty/panel-b2b-versa/)
-   [
    
    ![Tip Card - dwa telefony: panel klienta („Cześć Barbara", przychody 350 PLN, wypłata) oraz landing „Zwiększ swoje napiwki dzięki Tip Card!" ze spersonalizowanymi kartami QR, na kolorowym gradientowym tle.](https://wzor.biz/_astro/cover.DTw-Pu6y_4lOMF.webp)
    
    Tip Card - Platforma napiwków bezgotówkowych
    
    ](https://wzor.biz/projekty/tip-card/)
-   [
    
    ![Jawny Lublin - laptop z otwartą stroną główną portalu: artykuł wiodący „Wyjdź z domu - nie tylko do przychodni", menu kategorii miejskich i kolumna z popularnymi tekstami.](https://wzor.biz/_astro/cover.DReNwwRw_1JC914.webp)
    
    Jawny Lublin - Portal obywatelski o jawności miasta
    
    ](https://wzor.biz/projekty/jawny-lublin/)
-   [
    
    ![NXC Liquid Cooling - ekran startowy serwisu na laptopie, obok telefon w ujęciu pod kątem z etapem procesu i kulą marki, na fioletowym tle.](https://wzor.biz/_astro/cover.D5gcxP4g_Z1zSAqQ.webp)
    
    NXC Liquid Cooling - Serwis systemów chłodzenia cieczą
    
    ](https://wzor.biz/projekty/nxc-liquid-cooling/)
-   [
    
    ![Bosfor BALI Dealer - monitor i telefon z otwartą stroną dealera katamaranów: hero „BALI is about comfort" ze zdjęciem katamaranu i hasłem „Marzenia są po to, żeby je spełniać".](https://wzor.biz/_astro/cover.DGxZT243_Z1A6GRy.webp)
    
    Bosfor BALI Dealer - Strona dealera katamaranów BALI
    
    ](https://wzor.biz/projekty/bosfor-bali/)
-   [
    
    ![Bosfor Charter - tablet z otwartą platformą czarteru jachtów: zdjęcie pary na jachcie i wyszukiwarka (liczba tygodni, daty, typ jachtu, „Szukaj"), na tle morza.](https://wzor.biz/_astro/cover.DHPu_e5c_Zgsk30.webp)
    
    Bosfor Charter - Platforma wynajmu i czarteru jachtów
    
    ](https://wzor.biz/projekty/bosfor-charter/)
-   [
    
    ![ZhongZhou - krem ZZ na makiecie laptopa na tle liści eukaliptusa i czarnych kamieni: karta produktu „Zhong Zhou (ZZ) Cream" z ceną 35 GBP i przyciskiem „Buy Now".](https://wzor.biz/_astro/cover.hrxdbzXI_ApPxK.webp)
    
    ZhongZhou - Sklep internetowy kremu na trądzik, demodekozę i różowiec
    
    ](https://wzor.biz/projekty/zhongzhou/)
-   [
    
    ![SPEC Food Service - monitor i telefon z otwartym serwisem: hero „Twój zaufany partner w świecie gastronomii" ze zdjęciami z kuchni i renderem budynku firmy, na jasnym tle.](https://wzor.biz/_astro/cover.DdJ4QOy5_22gHR2.webp)
    
    SPEC Food - Serwis dla gastronomii - SPEC Food Service
    
    ](https://wzor.biz/projekty/spec-food-service/)
-   [
    
    ![Thaliana Space - tablet z otwartą stroną firmy kosmicznej: hero „Propelling new era of space” ze zdjęciem planety i gwiazd, na czarnym tle.](https://wzor.biz/_astro/cover.CULgsv9m_1E9sVv.webp)
    
    Thaliana Space - Strona firmy z sektora kosmicznego
    
    ](https://wzor.biz/projekty/thaliana-space/)
-   [
    
    ![Wolumen - krok „Oferta" w porównywarce cen energii: trzy warianty taryfy ze stawkami za kWh, wybór okresu umowy i pole kodu rabatowego, obok karta statystyk konta z oszczędnością 34 225 zł oraz cenami prądu i gazu; na niebieskim tle.](https://wzor.biz/_astro/cover.CpuQAJvX_ZyCKhF.webp)
    
    Wolumen - Porównywarka cen energii i gazu dla firm
    
    ](https://wzor.biz/projekty/wolumen/)
-   [
    
    ![Econverse - dwa telefony z widokami strony wydarzenia: nagłówek „Bilet do świata start-upów" oraz sekcja „Jak zapisać się na Econverse", na fioletowym tle.](https://wzor.biz/_astro/cover.B94izcES_7kHPe.webp)
    
    Econverse - Strona internetowa wydarzenia dla start-upów
    
    ](https://wzor.biz/projekty/econverse-strona/)
-   [
    
    ![DentAg - telefon i tablet z otwartą stroną gabinetu stomatologicznego: hero „Życzliwość i profesjonalizm" ze zdjęciem stomatolożki, na niebieskim tle.](https://wzor.biz/_astro/cover.-U2qFI7e_1odNAb.webp)
    
    DentAg - Strona internetowa gabinetu stomatologicznego
    
    ](https://wzor.biz/projekty/dentag/)
-   [
    
    ![AIESEC - tablet i laptop z otwartą stroną główną: hero „Wyjedź na praktykę z AIESEC", mozaika zdjęć uczestników i przyciski „Wyjedź na praktykę lub wolontariat" oraz „Zostań naszym partnerem".](https://wzor.biz/_astro/cover.Bju2-F43_Z1bbDVk.webp)
    
    AIESEC - Strona praktyk i wolontariatu za granicą
    
    ](https://wzor.biz/projekty/aiesec/)

[Projekty](https://wzor.biz/projekty/)

Efekty

## Co dostajecie, w jakim terminie i po czym to sprawdzicie

-   8–12 tygodni
    
    Od audytu do hand-offu przy jednym produkcie na jednej platformie - portfolio kilku produktów dzielimy wtedy na wydania
    
-   3 pakiety
    
    Biblioteka Figma, komponenty w kodzie i governance - komplet zostaje po hand-offie w Waszym repozytorium i Waszej organizacji Figma
    
-   WCAG 2.2 AA
    
    Publiczny standard dostępności W3C, wobec którego audytujemy komponenty (axe), zanim wejdą do biblioteki
    
-   30 i 90 dni
    
    Momenty, w których raportujemy pokrycie ekranów biblioteką, więc adopcję widzicie jako liczbę, a nie deklarację
    

Termin i zakres pakietów pochodzą z harmonogramu opisanego wyżej na tej stronie, WCAG 2.2 AA to publiczny standard W3C. Nie uśredniamy wyników wdrożeń u klientów - gotowe biblioteki i raporty pokrycia żyją w repozytoriach klientów, więc pokazujemy je imiennie na konsultacji.

Opinie klientów

## Co mówią nasi klienci

-   > „Praca z zespołem Wzór była naprawdę świetnym doświadczeniem! Zawsze szybko odpowiadali na nasze pytania i elastycznie podchodzili do naszych uwag. Mają mnóstwo kreatywnych pomysłów, a jednocześnie są bardzo rzetelni i terminowi. Efekt końcowy w pełni spełnił nasze oczekiwania, zdecydowanie polecamy każdemu, kto szuka profesjonalistów z pasją.”
    
     ![](https://wzor.biz/_astro/opinia.BrbzyDCf_1rSYiY.webp)Maja Wieloch-Silecka Dyrektor operacyjny, Bosfor Group
    
-   > „Nasi Klienci oczekują od nas szybkiego, skutecznego działania w bardzo szerokim zakresie. Od stworzenia brandu, przez budowę strony internetowej wraz ze sklepem po przeprowadzenie skutecznej kampanii sprzedażowej. Temat niełatwy, ale do zrobienia jeśli ma się zgrany zespół i firmy, z którymi wyzwania bierze się z marszu. Dla nas jakość, odpowiedzialność i zaangażowanie są kluczowe, a współpraca z Agencją UX Wzór zapewnia nam to w 100%.”
    
     ![](https://wzor.biz/_astro/piotr-alberski.B09Ae7iY_Z19yEFs.webp)Piotr Alberski Chief Operating Officer, Agencja XO Media
    
-   > „Współpraca z Agencją UX Wzór rozpoczęła się od naszej strony internetowej. Bardzo spodobał się nam sposób ich pracy. Dlatego podjęliśmy decyzję o podzlecaniu projektów realizowanych dla naszych Klientów w formie White Label. Bardzo spodobał nam się ich flow pracy, przekazywanie projektów naszemu zespołowi, ich dokumentacja czy praca na design systemie. Teraz możemy podejmować większe ryzyko.”
    
     ![](https://wzor.biz/_astro/mateusz-swol.DkFG1xeC_1fOqLw.webp)Mateusz Swół Chief Operating Officer, Sellace
    

Zespół

## Kto buduje bibliotekę

System prowadzi para - projektant odpowiedzialny za tokeny i komponenty oraz frontend developer, który implementuje je w Waszym stacku; ta sama para zostaje przy projekcie do szkoleń i hand-offu.

-   ![Aleksandra Bondar](https://wzor.biz/_astro/aleksandra-bondar.Bn8yt1m6_14BXcM.webp)
    
    ### Aleksandra Bondar
    
    Senior UX/UI Designer
    
-   ![Katarzyna Adamczuk](https://wzor.biz/_astro/katarzyna-adamczuk.BgcDb3aF_15a0Nk.webp)
    
    ### Katarzyna Adamczuk
    
    Prezes, Analityk Biznesowy
    
-   ![Tadeusz Wadas](https://wzor.biz/_astro/tadeusz-wadas.W_mr3ido_Z20GQjB.webp)
    
    ### Tadeusz Wadas
    
    Senior UX/UI Designer
    

Czas i zakres

## Ile trwa wdrożenie i od czego zależy wycena

8–12 tygodni

Osiem tygodni to zakres, w którym biblioteka powstaje dla jednego produktu na jednej platformie. Portfolio kilku produktów, motywy brandowe albo migracja istniejących ekranów przesuwają termin w stronę dwunastu tygodni i dalej - wtedy dzielimy prace na wydania, żeby zespół dostał pierwszą użyteczną wersję wcześniej.

-   Liczba produktów i platform, które biblioteka ma obsłużyć
    
-   Zakres pakietu - sama biblioteka Figma czy Figma razem z kodem
    
-   Liczba komponentów i wariantów wychodząca z inwentaryzacji
    
-   Stack frontendowy i sposób stylowania po Waszej stronie
    
-   To, czy razem z biblioteką idzie migracja istniejących ekranów
    

Pytania

## Pytania, które padają najczęściej

Greenfield czy migracja istniejącego DS?

Oba scenariusze. Greenfield (od zera): tańsze gdy obecny system jest chaotyczny i nikt go nie używa. Migracja: tańsze gdy istnieje fundament wymagający tylko aktualizacji (np. tokens W3C, Storybook upgrade, accessibility audit). Zaczynamy zawsze od inventory - wskazuje który scenariusz pasuje.

Figma + kod czy tylko Figma?

Zależy. Tylko Figma (DS Foundation): gdy macie zespół dev który implementuje samodzielnie. Figma + kod (Full DS): gdy chcecie pełen pakiet end-to-end, oszczędność czasu na implementacji, automatyczna synchronizacja Figma ↔ kod przez Token Studio. Większość enterprise wybiera Full DS.

Jakie frameworki kodu?

React (najczęściej), Vue, Angular, Svelte. TypeScript jest standardem - dodaje type-safety dla props komponentów. Stylowanie: Tailwind (najpopularniejsze) albo Stitches/Emotion gdy klient preferuje CSS-in-JS. Storybook 8+ jako standard dokumentacji.

Co z governance po hand-off?

Governance playbook (kto, kiedy, jak zmienia DS) + 2-3 sesje szkoleniowe dla zespołu klienta + 30-dniowy support + roadmap rozwoju na 12 mies. Opcjonalnie retainer „DS maintenance" - 1-2 dni/mies. od naszej strony, regular audity i upgrade'y.

Ile kosztuje design system?

Wyceniamy indywidualnie - cena zależy od zakresu (DS Foundation w Figmie, Full Design System z kodem, Storybookiem i governance, czy DS Audit + Migration) oraz skali: liczby komponentów i platform. Konkretną propozycję dostajesz po audycie wstępnym - w 48 godzin od briefu.

Czy oferujecie white-label dla agencji?

Tak - to jeden z naszych głównych modeli. Tworzymy DS pod Waszą marką, na Waszych szablonach. Wasza agencja używa go w każdym projekcie klienta jako podstawę. Klient nie wie o naszym istnieniu, Wy redukujecie overhead per projekt i przyspieszacie pracę o 30-50%.

Powiązane usługi

## Powiązane usługi

-   [Konsultacje UX](https://wzor.biz/uslugi/konsultacje-ux/)
-   [Product discovery](https://wzor.biz/uslugi/warsztaty-ux/)
-   [Audyt UX](https://wzor.biz/uslugi/audyty-ux/)
-   [Badania UX](https://wzor.biz/uslugi/badania-uzytkownikow/)
-   [Strategia Produktu](https://wzor.biz/uslugi/strategia-produktu/)
-   [Audyt techniczny](https://wzor.biz/uslugi/audyt-techniczny/)
