Kiedy po raz pierwszy dowiedziałam się, czym jest design system, moja głowa, lubująca się w tabelkach i procesach, nie chciała słyszeć już o niczym innym. No bo jak można żyć bez design systemu? Gdy zaczęłam pogłębiać swoją wiedzę na ten temat, zrozumiałam lepiej skalę tego przedsięwzięcia. Choć design system zaopatrzony jest w niewątpliwą listę zalet, nie jest projektem małym, a tym bardziej kończącym się na jednej iteracji. Zatem zanim rzucisz się entuzjastycznie na ten projekt, sprawdź porcję porad od Figmy. PS We wpisie pomagali mi Google Bard i ChatGPT ?

Wstęp napisałam ja. Teraz też czytasz tekst tworzony przeze mnie. Sztuczna inteligencja stanowi w tym artykule uzupełnienie do porad, którymi dzieli się Figma. Spokojnie, za każdym razem, gdy zaproszę do udziału Google Bard i ChatGPT, będziesz o tym wiedzieć ?

? Spis treści:

1. Krótko o kursie od Figmy
2. Wprowadzenie do design systemu
3. Czy potrzebujesz design systemu?
4. Audyt produktu
5. Proces tworzenia design systemu
6. To warto wziąć pod uwagę
7. Jeśli nie design system, to co innego?
8. Kontynuacja nauki

Krótko o kursie od Figmy

Jakiś czas temu szukałam możliwie sensownych i bezpłatnych materiałów na temat design systemu. Potrzebowałam ustrukturyzowanej wiedzy, różnorodnych materiałów i wiarygodnego nauczyciela. Wszystkie te kryteria spełnił kurs od Figmy → Introduction to design system.

1.  Z czego się składa?
   • 4 pisemne lekcje (+ 7 filmów, 1 plik)
   • +/- 2 godziny nauki
   • Tematyka: Design system, style, komponenty, biblioteki
2. Dla kogo?
   • Projektanci, którzy znają style i komponenty w Figmie, ale chcą poprawić swoje workflow i poszerzyć swoje umiejętności do poziomu systemowego.
   • Menadżerowie i liderzy, którzy chcą nauczyć się, jak systemy projektowe mogą zwiększyć produktywność i wspierać projektowanie na większą skalę.
3. Przydatne materiały:
   • Kompletny design system dla fikcyjnej marki Habitz.

Wprowadzenie do design systemu

Pierwsza lekcja jest ogólnym wprowadzeniem do design systemu. To jednocześnie porcja przydatnych wskazówek dla osób, które zastanawiają się, czy stworzenie design systemu jest właściwą i jedyną drogą dla danej firmy. Cały mój dzisiejszy tekst będzie formą podsumowania wiedzy z pierwszego modułu kursu.

Design system to coś więcej niż przewodnik po stylach

Choć design system bywa kojarzony z tym, co wizualne (style, komponenty), to zdecydowanie jest czymś więcej. Perspektywa jest szersza – patrzy się na cały ekosystem produktów. Design system musi odpowiadać nie tylko na pytanie „co”, ale również „jak” i „dlaczego”. Dostarcza narzędzi i zasobów niezbędnych do budowy spójnych i konsekwentnych produktów.

? Definicja od Google Bard:

Design system, czyli system projektowy, jest zbiorem komponentów, zasad i procesów, które służą do projektowania i tworzenia produktów cyfrowych. Jego celem jest zapewnienie spójnego i intuicyjnego doświadczenia użytkownika, a także ułatwienie i przyspieszenie procesu projektowania.

? Definicja od ChatGPT:

Design system to kompletny zestaw zasad i komponentów projektowych, standaryzujący elementy interfejsu w celu stworzenia spójnego środowiska projektowego. Ułatwia pracę projektantom, zapewniając jednolity wygląd i zachowanie produktu, oraz wspomaga skalowalność projektów. W jego skład wchodzą m.in. style, komponenty interfejsu, ikony i zasady interakcji.

Przewodniki po stylach oraz komponenty

Powyższe rzeczy są oczywiście istotnymi składowymi design systemów. Przewodnik po stylach to zestaw standardów, który definiuje, jak wyglądają elementy interfejsu. Znajdziesz tutaj wytyczne m.in. dla kolorystyki lub typografii. Biblioteka komponentów składa się z bloków, z których można zbudować produkt. W tym wypadku koncentracja przeniesiona jest na to, jak dane elementy mają się zachowywać.

Nie ma jednego design systemu, który będzie pasował tak samo do każdej marki. Różne potrzeby firm wymagają różnych rozwiązań.

Czy potrzebujesz design systemu?

To zależy, parafrazując słowa Figmy. Utworzenie i utrzymywanie design systemu to wiele zalet, ale z pewnością także dodatkowy wysiłek. Każda firma musi dokonać samodzielnych kalkulacji odnośnie tego, ile zasobów wymaga stworzenie design systemu i w jaki sposób będzie się zwracać ta inwestycja.

? Co doradza Google Bard?

Nie, nie każda firma potrzebuje design systemu. Design systemy są szczególnie przydatne dla firm, które:

• Tworzą wiele produktów cyfrowych.
• Chcą zapewnić spójne i intuicyjne doświadczenie użytkownika.
• Chcą ułatwić i przyspieszyć proces projektowania.
• Chcą zwiększyć efektywność pracy zespołów projektowych.

? Co doradza ChatGPT?

Nie, nie każda firma potrzebuje design systemu, ale może być to szczególnie korzystne dla firm, które chcą utrzymać spójność projektową, zwiększyć efektywność procesów projektowych i skalować swoje projekty.

Zalety posiadania design systemu

Dla Figmy jedno jest pewne – design system, nawet stworzony na mniejszą skalę, pozwala projektantom robić więcej z mniejszym wysiłkiem. Poniżej najważniejsze obszary, w których oszczędza się czas i zasoby ⤵️

• Projektanci spędzają mniej czasu na poprawianiu komponentów oraz drobiazgów.
• Łatwiej rozbudowywać zespół i wprowadzać nowych członków zespołu.
• Gdy komponenty są dopasowane do kodu i tokenów, developerzy są w stanie szybciej przełożyć projekty na funkcjonalny kod.
• Design system stanowi jedno źródło prawdy w organizacji i pomaga w lepszym rozumieniu produktów.
• Powyższe zalety wpływają też korzystanie na doświadczenia użytkowników z produktem.

? Zalety design systemu wg. Google Bard?

• Spójne i intuicyjne doświadczenie użytkownika
• Ułatwienie i przyspieszenie procesu projektowania
• Zwiększenie efektywności pracy zespołów projektowych
• Obniżenie kosztów związanych z projektowaniem i wdrażaniem produktów cyfrowych
• Ułatwienie komunikacji i współpracy między zespołami

? Zalety design systemu wg. ChatGPT?

• Spójność projektowa: Design system zapewnia jednolity wygląd i zachowanie.
• Efektywność projektowa: Oszczędność czasu dla projektantów, eliminacja powtórzeń prac nad komponentami, zwiększona ogólna wydajność projektowa.
• Szybkie wdrożenia: Design system ułatwia integrację nowych członków zespołu, umożliwiając im szybszy udział w procesach projektowych.
• Efektywna translacja projektu na kod: Dzięki dostosowaniu komponentów projektowych do kodu, system umożliwia programistom szybkie przekształcanie projektów w funkcjonalny kod.
• Źródło prawdy w organizacji: System projektowy to centralne źródło prawdy, dostarczające wspólnej wizji i języka dla zespołów, co przekłada się na lepsze zrozumienie i konsekwencję w tworzeniu produktów.

Wyzwania

Podobnie, jak w przypadku produktów, design system wymaga nie tylko czasu na stworzenie. Musi być również utrzymywany i aktualizowany. Co więcej, możliwe, że dopiero po dłuższym czasie zacznie się zauważać zwrot z tej inwestycji.

? Wyzwania wg. Google Bard

1. Ocena potrzeb – Przed rozpoczęciem pracy nad design systemem należy dokładnie ocenić potrzeby firmy. Należy określić, jakie są cele firmy, jakie produkty cyfrowe tworzy, jakie są potrzeby użytkowników i jakie są potrzeby zespołów projektowych.
2. Zaangażowanie zespołu – Stworzenie design systemu wymaga zaangażowania całego zespołu projektowego. Ważne jest, aby wszyscy członkowie zespołu zrozumieli cel design systemu i byli gotowi do jego wdrażania.
3. Wsparcie kierownictwa – Stworzenie design systemu wymaga czasu i zasobów. Ważne jest, aby kierownictwo firmy rozumiało korzyści płynące z design systemu i było gotowe do jego finansowania.
4. Utrzymanie – Design system to nie jednorazowy projekt. Należy go stale aktualizować i rozwijać, aby odpowiadał zmieniającym się potrzebom firmy.

? Wyzwania wg. ChatGPT

1. Zaangażowanie zespołu: Wymaga pełnego wsparcia i zaangażowania całego zespołu projektowego.
2. Dostosowanie do firmy: System musi być dostosowany do specyfiki firmy, unikając zbyt ogólnej lub skomplikowanej struktury.
3. Kontrola nad zmianami: Istotne jest wprowadzenie skutecznych procesów zarządzania zmianami.
4. Dostępność zasobów: Tworzenie i utrzymanie systemu wymaga odpowiednich zasobów, zarówno ludzkich, jak i finansowych.
5. Akceptacja użytkowników: Uwzględnienie opinii użytkowników podczas tworzenia systemu jest kluczowe.
6. Proces adaptacji: Firmy muszą być gotowe na adaptację do zmian wynikających z wdrożenia design systemu.
7. Długoterminowe utrzymanie: Wymaga stałego wsparcia i zaangażowania zespołu projektowego dla utrzymania spójności i aktualności systemu.

Audyt produktu

Figma rekomenduje przeprowadzenie audytu produktu, jeżeli nie ma się pewności, czy wdrożenie design systemu będzie narzędziem, które rozwiąże problemy projektowe w organizacji.

Audyt krok po kroku

1. Zbierz w jednym miejscu wszystko, co dotyczy produktu.
2. Posortuj materiały i przypisz je do konkretnych kategorii.
3. Zidentyfikuj szanse na poprawę działania procesu projektowego.
   • Czy zauważasz nadmiar kroków w ścieżkach przepływu użytkowników i czy możesz je zredukować?
   • Które obszary nie są dobrze zaprojektowane pod kątem dostępności?
   • Czy wszystkie zasoby są zaprojektowane w sposób spójny?
   • Jakie zauważasz niespójności w obrębie stylów i obiektów?

Proces tworzenia design systemu

Gdy po wykonaniu audytu widzisz dużo dziur, które wymagają załatania, a design system jawi się jako doskonała forma „plastra”, możesz przystąpić do pracy nad jego stworzeniem. Od czego zacząć?

Przede wszystkim pamiętaj, że podobnie jak w przypadku projektowania produktów, tworzenie design systemu nie jest linearnym procesem i może się różnić w zależności od firmy.

Figma wyszczególnia następujące kroki związane z projektowaniem design systemu:

• Zezwolenie: dbanie o to, żeby uzyskać wszystkie niezbędne zasoby do stworzenia design systemu.
• Odkrywanie: realizacja badań, audytów, identyfikowanie grup odbiorców, problemów i poszukiwanie rozwiązań.
• Definiowanie: podejmowanie decyzji na temat rozwiązań do wdrożenia.
• Budowanie: tworzenie design systemu.
• Dokumentacja: opisanie w szczegółowy i przystępny sposób zasad korzystania z design systemu.
• Utrzymywanie: weryfikacja, czy system jest na bieżąco aktualizowany i czy projekt oraz kod są zgodne.
• Promowanie: rozwijanie w organizacji świadomości na temat design systemu i tworzenie ambasadorów tego projektu.

Traktuj design system w taki sam sposób, w jaki podchodzisz do tworzenia oprogramowania: to stale rozwijający się produkt, który wymaga regularnego testowania.

To warto wziąć pod uwagę

Im lepiej się przygotujesz do pracy nad design systemem, tym… no cóż… uzyskasz lepsze efekty. Figma sugeruje, żeby wziąć po uwagę następujące aspekty tego procesu ⤵️

? Współautorzy: ludzie, którzy będą pomagać budować i rozwijać design system.
– To mogą być osoby z różnych zespołów lub ludzie, którzy poświęcają się tylko temu zadaniu.
– Współautorami są również osoby, które zatwierdzają projekt design systemu lub pomagają w jego projektowaniu.

? Odbiorcy: czyli osoby, które będą korzystać z design systemu.
– Myśl o tej grupie szerzej, niż tylko o projektantach.
– Przemyśl, kto będzie korzystał z design systemu i jak często.
– Zastanów się, w jaki sposób będziesz pozyskiwać feedback na temat design systemu.

? Implementacja: czyli jak będziecie wdrażać design system?
– Można stworzyć design system od zera, co będzie bardziej dopasowane do danej organizacji, ale będzie wymagało też większego zaangażowania.
– W ramach oszczędności zasobów można zainspirować się gotowymi design systemami i skorzystać z pasujących do danej organizacji elementów.

Jeśli nie design system, to co innego?

Posiadanie własnego design systemu z pewnością jest nęcącą perspektywą, ale jeśli akurat w tym momencie twoja organizacja nie może pozwolić sobie na taką inwestycję, możesz spróbować wdrożyć małe usprawnienia.

? Rekomendacja od Google Bard:

• Stwórz wspólny zestaw zasad projektowych. Zasady projektowe to zbiór wytycznych, które określają, jak powinny wyglądać i zachowywać się produkty cyfrowe. Stworzenie wspólnych zasad projektowych pomoże ujednolicić wygląd i zachowanie produktów cyfrowych, co może poprawić doświadczenie użytkownika.
• Opublikuj dokumentację projektową. Dokumentacja projektowa to zbiór informacji o produktach cyfrowych, takich jak ich struktura, funkcje i wygląd. Publikacja dokumentacji projektowej pomoże zespołom projektowym i rozwojowym zrozumieć produkty cyfrowe i współpracować ze sobą efektywniej.
• Utwórz bibliotekę komponentów. Biblioteka komponentów to zbiór gotowych komponentów, które można wykorzystać do tworzenia nowych produktów cyfrowych. Utworzenie biblioteki komponentów może pomóc zaoszczędzić czas i wysiłek zespołom projektowym.

? Rekomendacja od ChatGPT:

1. Standaryzacja elementów interfejsu: Ustal podstawowe zasady dotyczące używania kolorów, czcionek, przestrzeni i innych elementów interfejsu. To może nie być pełny design system, ale stanowi pierwszy krok w kierunku spójności projektowej.
2. Utworzenie biblioteki zasobów: Zorganizuj i udostępnij bibliotekę zawierającą często używane elementy projektowe, takie jak ikony, przyciski czy komponenty interfejsu. To ułatwi projektantom korzystanie z gotowych rozwiązań.
3. Dokumentacja projektowa: Stwórz czytelne i dostępne dla zespołu dokumenty projektowe, opisujące standardy projektowe, cele użytkownika i zasady interakcji. To pomoże w zachowaniu spójności w podejściu do projektowania.
4. Regularne przeglądy projektów: Organizuj regularne przeglądy projektów, na których zespół może dzielić się opiniami i pomysłami. To sprzyja wzajemnej komunikacji i poprawie jakości projektów.
5. Szkolenia i rozwój umiejętności: Zapewnij zespołowi szkolenia w zakresie projektowania interakcji, UX/UI, czy korzystania z narzędzi projektowych. Wzrost umiejętności przekłada się na jakość projektów.
6. Badania użytkowników: Wprowadź regularne badania użytkowników, aby lepiej zrozumieć ich potrzeby i oczekiwania. To może prowadzić do bardziej dostosowanych i skutecznych projektów.
7. Iteracyjne podejście: Wprowadź iteracyjne podejście do projektowania, zaznaczając etapy, w których można dokonywać poprawek na podstawie feedbacku i doświadczeń użytkowników.

Na koniec jeszcze lista przydatnych źródeł polecana przez Figmę ⤵️

• Sparkbox: Design Systems Survey 2022
• Knapsak’s Design System ROI Calculator
• Design Systems Repo
• Sparkbox: Anatomy of a Design System
• Spectrum of maturity for design systems

---

Kontynuacja nauki

Możesz kontynuować swój rozwój w obrębie tworzenia design systemu. Figma przygotowała kilka dodatkowych lekcji:

• Definiowanie design systemu: lekcja w formie tekstowej i w formie wideo.
• Tworzenie design systemu: lekcja w formie tekstowej i w formie wideo.
• Dokumentacja i zarządzanie systemem: lekcja w formie tekstowej i w formie wideo.
• O design systemie przeczytasz też w moich notatkach z kursu Google UX Design Certificate.