Jeden kod, 5 marek. Jak wdrożyliśmy Multi Design System i automatyzację Design Tokens

Jak ujednoliciliśmy UI dla 5 marek bez utraty ich tożsamości? Stworzyliśmy wspólny foundation layer — komponenty, zasady i tokeny projektowe — który zapewnił spójność doświadczenia, jednocześnie pozostawiając przestrzeń na indywidualny charakter każdej marki.

Wraz ze skalowaniem produktu i rozwojem brandów pojawiła się potrzeba ujednolicenia sposobu budowania interfejsów przy jednoczesnym zachowaniu indywidualnego wyglądu każdej marki. Odpowiedzią na to wyzwanie było wdrożenie architektury Multi Design System, opartej o współdzielone komponenty UI oraz dynamicznie sterowane zmienne designowe.

Celem rozwiązania było osiągnięcie:

jednego wspólnego kodu komponentów,
wsparcia dla wielu brandów,
centralnego zarządzania designem,
automatyzacji synchronizacji designu z kodem,
szybszego developmentu i utrzymania aplikacji.

Architektura Multi Brand

System został zaprojektowany w taki sposób, aby logika komponentów była współdzielona, natomiast warstwa wizualna zależna od konfiguracji konkretnego brandu. To właśnie Figma stała się pojedynczym źródłem prawdy dla parametrów przechowywanych w aplikacji. Zmiana dokonana przez designera w Figma może zostać automatycznie zsynchronizowana z kodem aplikacji.

Aktualnie rozwiązanie obsługuje 5 niezależnych brandów, gdzie każdy może posiadać własne:

kolory,
typografia,
zaokrąglenia,
rozmiar
przezroczystość
odstępy
obramowanie
grafiki (lottie/obrazki),
motywy light/dark.

Kluczowym założeniem było oddzielenie logiki UI od warstwy wizualnej.

Komponenty sterowane zmiennymi

Każdy komponent w systemie został zbudowany w oparciu o zestaw zmiennych (Design Tokens), które definiują jego wygląd.

Przykładowo komponent Button nie posiada na sztywno zdefiniowanych wartości kolorów czy paddingów. Zamiast tego korzysta z tokenów:

Button(
    backgroundColor = BrandTheme.designTokens.backgroundInteractiveRest,
    textColor = BrandTheme.designTokens.textInteractiveRest,
    cornerRadius = BrandTheme.radius.interactiveLarge,
)

Dzięki temu:

komponent pozostaje współdzielony,
zmienia się wyłącznie konfiguracja brandu,
nowy wygląd nie wymaga modyfikacji logiki komponentu.

Każdy brand dostarcza własny zestaw wartości dla tych samych tokenów.

Architektura motywów — Light/Dark i gotowość na kolejne warianty

Obecnie system wspiera dwa główne motywy:

Light Theme

Dark Theme

Architektura została jednak zaprojektowana w sposób całkowicie rozszerzalny, dzięki czemu dodanie kolejnych wariantów motywów nie wymaga przebudowy komponentów ani zmian w logice aplikacji.

Każdy komponent korzysta wyłącznie z abstrakcyjnej warstwy tokenów:

interface DesignTokens {
    val backgroundInteractiveRest: Color
    val textInteractiveRest: Color
}

Ostateczne wartości są dostarczane przez aktywny motyw oraz konfigurację konkretnego brandu.

val brandDarkDesignTokens = object : DesignTokens {
    override val backgroundInteractiveRest = brandDarkColors.neutralBlack
    override val textInteractiveRest = brandDarkColors.neutralWhite
}
val brandLightDesignTokens = object : DesignTokens {
    override val backgroundInteractiveRest = brandLightColors.neutralBlack
    override val textInteractiveRest = brandLightColors.neutralWhite
}

Dzięki temu możliwe jest bezproblemowe rozszerzenie systemu o dodatkowe warianty, takie jak:

High Contrast Theme,
Seasonal Theme,
Accessibility Theme,
White Label Theme,
Event / Campaign Theme,
AMOLED Theme.

Przykładowa struktura:

val brandHighContrastDesignTokens = object : DesignTokens { }
val brandWinterDesignTokens = object : DesignTokens { }
val brandHalloweenDesignTokens = object : DesignTokens { }

Warstwa UI Components

Istotnym elementem rozwiązania jest moduł ui-components, który pełni rolę katalogu komponentów oraz środowiska preview.

Pozwala on:

renderować komponenty dla wszystkich brandów jednocześnie,
testować różnice wizualne,
walidować zgodność Design Systemu,
przyspieszać development oraz QA.

Przykładowo jeden komponent może zostać wyświetlony w 5 wariantach:

Sinsay
Reserved
Mohito
House
Cropp

bez konieczności uruchamiania osobnych aplikacji.

Takie podejście znacząco uprościło:

development nowych funkcjonalności,
utrzymanie spójności UI,
onboarding developerów,
współpracę z designerami.

Plugin do synchronizacji Design Tokens

Aby wyeliminować ręczne przepisywanie wartości z Figmy do kodu, stworzyliśmy dedykowany plugin odpowiedzialny za pobieranie Design Tokens oraz generowanie kodu źródłowego.

Plugin:

Pobiera zmienne z Figmy za pomocą API,
Mapuje je do struktury aplikacji,
Konwertuje tokeny do kodu Kotlin / Swift,
Generuje gotowe klasy i obiekty konfiguracyjne. Zmienne, w nawiązaniu do poprzedniego stanu są aktualizowane/dodawane/usuwane.

Cały proces odbywa się automatycznie za pomocą jednej komendy.

Aplikacja do porównywania komponentów między brandami

Dodatkowo w ramach rozwoju Multi Design System powstała dedykowana aplikacja developerska służąca do porównywania komponentów pomiędzy wszystkimi brandami.

Narzędzie umożliwia renderowanie komponentów w różnych konfiguracjach brandowych oraz motywach w czasie rzeczywistym.

Dzięki temu możliwe jest szybkie sprawdzenie:

jak komponent wygląda dla każdego brandu,
różnic wizualnych między motywami,
poprawności mapowania Design Tokens,
zgodności implementacji z projektem z Figmy,
regresji wizualnych po zmianach w systemie.

Korzyści wdrożenia

Wdrożenie Multi Design System przyniosło szereg korzyści technicznych i organizacyjnych.

Skalowalność

Dodanie nowej funkcjonalności do kolejnych brandów nie wymaga budowania nowego UI od podstaw, a przynajmniej od strony komponentów. W większości przypadków wystarczy dostarczenie nowego zestawu tokenów.

Spójność

Wszystkie aplikacje korzystają z tych samych komponentów i zasad projektowych.

Automatyzacja

Eliminacja ręcznego przepisywania wartości z Figmy znacząco ograniczyła ryzyko błędów i przyspieszyła development.

Krótszy Time-To-Market

Zmiany wizualne mogą być wdrażane dużo szybciej, ponieważ nie wymagają ingerencji w logikę komponentów.

Lepsza współpraca Design ↔ Development

Design i kod są ze sobą bezpośrednio zsynchronizowane dzięki Design Tokens.

Podsumowanie

Wdrożenie architektury Multi Design System pozwoliło nam zbudować skalowalne środowisko wspierające wiele brandów przy zachowaniu jednego, współdzielonego kodu komponentów.

Połączenie: