AuraPura - projekt design systemu
- UI Design
- Design system
- Web
- E-commerce
Podsumowanie projektu
Wstęp
Design system e-commerce zbudowany od fundamentów: tokeny, Figma Variables, komponenty i responsywne layouty.
Najważniejsze
Projekt w skrócie
Problem
Brief marki i assety wymagały przełożenia na spójny system, który działa na różnych wielkościach ekranu.
Cel
Przejść przez pełny proces budowy design systemu: od tokenów i komponentów po finalne layouty.
Efekt
Powstał system oparty o core i alias tokeny, Figma variables, komponenty oraz widoki mobile, tablet i desktop.
Proces
Z briefu i assetów marki wyciągnęłam paletę, typografię i kierunek wizualny, a potem przełożyłam je na strukturę tokenów. System oparłam na podziale na core tokeny i alias tokeny, żeby zmiany wartości nie psuły logiki komponentów.
Figma variables wykorzystałam w dwóch rolach:
- Do obsługi themingu (np. warianty kolorystyczne),
- Do dostosowania komponentów do różnych breakpointów.
Dzięki temu komponenty mogły adaptować się do mobile, tablet i desktop bez tworzenia osobnych wersji każdego wariantu.
Czego się nauczyłam?
Najważniejszą lekcją było to, że design system zaczyna się długo przed komponentami. Decyzje o tokenach, nazewnictwie i strukturze wpływają później na każdy widok.
Drugą lekcją było użycie Figma variables nie tylko do kolorów, ale też do responsywności. To podejście pozwala skalować system bez mnożenia wariantów.
Co zrobiłabym dalej?
Gdybym rozwijała Aurapurę jako realny system, potraktowałabym go jak produkt, nie tylko bibliotekę komponentów. Najważniejsze byłyby procesy, dokumentacja i mierzenie użycia.
Zasady współpracy z systemem
Ustaliłabym, kto dodaje komponenty, kto zatwierdza zmiany i jak zespoły zgłaszają potrzeby. Bez takich zasad system szybko traci spójność.
Dokumentacja komponentów
Opisałabym zastosowanie, warianty, dostępność i przykłady użycia komponentów, osobno z perspektywy designu i developmentu.
Uzupełnienie brakujących komponentów
Zaczęłabym od audytu braków i powtarzających się wzorców, a potem priorytetyzowała komponenty według realnego użycia, nie ambicji zbudowania wszystkiego naraz.
Wersjonowanie i informowanie o zmianach
Dodałabym wersjonowanie, changelog i synchronizację zmian między Figmą a kodem, żeby zespoły wiedziały, co zmienia aktualizacja.
Mierzenie czy system działa
Sprawdzałabym pokrycie UI systemem, odłączanie komponentów w Figmie i czas wdrażania nowych osób. To pokazuje, czy system naprawdę pomaga.
Spójność między designem a kodem
Nazwy tokenów w Figmie powinny odpowiadać zmiennym w kodzie 1:1. Dzięki temu designer i developer pracują na tym samym języku systemu.