Figma Autolayout i Atomic Design: Wdrożenie design systemu - część I

0:00Jak wdrożyć Atomic Design

0:03w swoich projektach albo w swojej organizacji.

0:07Oczywiście najlepszą okazją jest nowy projekt albo redesign.

0:14Wtedy mamy czystą kartkę,

0:16mnóstwo energii, nowy zespół chce się działać i tą całą zdobytą wiedzę

0:22właśnie teraz chcemy wdrożyć i zbudować coś wielkiego.

0:29Natomiast na pytanie kiedy zacząć?

0:32Odpowiedź brzmi: Teraz. Nie czekaj na nowy projekt.

0:37Nie czekaj, aż się coś wielkiego wydarzy.

0:39Lepiej małymi krokami.

0:41Zacznij od dzisiaj wdrażać całą wiedzę, którą ode mnie uzyskałeś.

0:48Możesz wydzielić jakąś część Twojego czasu

0:51pracy na to, aby powoli budować design system, aby powoli wdrażać zdobytą wiedzę.

1:00Nie musisz od razu rzucać się na głęboką wodę.

1:03Zacznij od małych kroków.

1:05Możesz np.

1:07rozpocząć od tego, aby z inwentaryzować projekt, nad którym pracujesz.

1:13Możesz go przejrzeć samodzielnie, ale myślę, że jeszcze lepsze efekty

1:16osiągniesz, kiedy zaprosisz do takiej inwentaryzacji

1:21swój zespół i wylistujecie sobie wszystkie elementy interfejsu.

1:27I podczas takiej inwentaryzacji dużego projektu zobaczycie np.

1:32jak dużo macie różnych przycisków, styli

1:34typograficznych, jakie macie rozbieżności w kolorach.

1:39A co ciekawe

1:40możesz zobaczyć jak różne zespoły w różny sposób nazywają te same elementy.

1:46Dla jednych jakiś element będzie box'em,

1:49dla kogoś innego będzie modułem, a dla kogoś innego będzie banerem.

1:57Każdy będzie w inny sposób nazywał te same elementy.

2:02Taka inwentaryzacja, ale przeprowadzona naprawdę bardzo głęboko.

2:07To nie chodzi o to, żeby powierzchownie

2:08przewertować strony najwyższego poziomu czy główny ekran aplikacji.

2:14Cała zabawa polega na tym, żeby naprawdę głęboko przekopać się przez cały system,

2:19przez wszystkie ekrany i skatalogować sobie wszystkie elementy.

2:23Nic nie pomijamy, każdy element jest ważny.

2:25Robimy print screeny

2:27wszystkiego, co znajdziemy, a następnie w jakimś szablonie prezentacji

2:32dowolnie staramy się te elementy pokategoryzować.

2:36Zamiast tłumaczyć czym jest design system

2:39albo tłumaczyć jak to strasznie wygląda teraz nasz projekt, po prostu to pokaż.

2:46Pokaż, co może wnieść uporządkowanie Waszego projektu.

2:51Pokaż, jak wiele rozbieżności macie w elementach.

2:55Wytłumacz, że tworzenie za każdym razem

2:58nowego przycisku, nawet jak to jest prosty przycisk, to jest wciąż jakiś czas, a w

3:02tym momencie już macie 30 styli przycisków i tak z każdym modułem. Pokaż, że

3:06uporządkowanie i wystandaryzowanie będzie wartością.

3:11I nawet jeżeli interesariusze Twój

3:14przełożony, klient powiedzą: ale to jest niepotrzebne, to nie ma sensu.

3:20Nie teraz.

3:22Rób to mimo wszystko.

3:23Nie zniechęcaj się, pracuj dalej.

3:26Zawsze się znajdzie jakaś wolna chwila tak zarządzać swoim czasem, żeby mieć ten czas,

3:32nie wiem, pół godziny, godzinę na koniec tygodnia, na początku tygodnia i porządkuj.

3:37I twórz atomy, molekuły.

3:39Zamieniaj to, co już istnieje, na formy zgodne z metodologią Atomic Design i buduj

3:45swój design system, a najlepiej jak w miarę szybko znajdziesz

3:50innych, którzy będą cię w tym wspierać. Developerów czy project managera, który

3:55podobnie jak Ty widzi wszystkie niedoskonałości Waszego produktu i

3:59jednocześnie widzi korzyści jakie są na horyzoncie.

4:03W momencie kiedy uporządkujecie Wasz produkt, stworzycie design system,

4:08stworzycie całą strukturę w metodologii Atomic Design.

4:14Kiedy już zbierzecie się pewną grupą i

4:16będziecie mieli podwaliny, warto spróbować jeszcze raz, ale już teraz bardziej na

4:21grubo zainteresować wszystkich tą koncepcją.

4:24Porządne wdrożenie, design systemu i metodologii Atomic Design uda

4:30się tylko kiedy zrobicie to oficjalnie i kiedy wszyscy będą wiedzieli,

4:34że taki proces się odbywa i że są do niego zaproszeni.

4:39Możesz stworzyć, nie wiem, dodatkowy projekt poboczny

4:42design system, który na razie nie będzie wykorzystywany w głównym produkcie, ale

4:47będziecie tworzyć projekt, na którym będziecie się uczyć.

4:51Możecie to zrobić w formie hackathon'u, czy jakiś warsztatów.

4:55Na pewno Twoja organizacja też ma przeznaczony jakiś budżet albo czas na edukację.

5:00Wykorzystajcie to na pracę nad Waszym design systemem, ale niech to będzie oficjalne.

5:06Niech to nie będzie tak, że mamy jakiś warsztat, tylko mamy warsztat Atomic

5:09Design i będziemy tworzyć design system do naszego produktu.

5:13Kiedy uda się zainteresować pewną grupę, a może nawet właśnie klienta

5:19i uzyskać zgodę na to, aby oficjalnie wprowadzić design system,

5:23postaraj się, aby był naprawdę elastyczny i żeby był zrozumiały.

5:27Zadbaj o to, aby wszyscy wiedzieli, w jaki sposób ten design system działa.

5:35Musicie zaprojektować zasadę, w jaki sposób używamy komponentów.

5:39Do kogo się zgłosić, kiedy takiego komponentu nie ma w design systemie, a potrzebny

5:44jest nowy albo kiedy jakiś komponent nie działa prawidłowo i potrzebne są zmiany.

5:50Za takie decyzje powinien odpowiadać interdyscyplinarny zespół, który podejmie

5:57decyzję o stworzeniu nowego komponentu albo zmianie jakiegoś komponentu.

6:01Nie tylko na zasadzie o my potrzebujemy, tylko ktoś odpowiedzialny za biznes

6:06sprawdzi, czy jest uzasadnienie biznesowe dla takiej zmiany.

6:10Development sprawdzi, czy jest technologiczna możliwość wprowadzenia

6:13oczekiwanej zmiany. UX sprawdzi jaki ta zmiana będzie miała impakt na cały

6:19ekosystem i funkcjonalność naszego produktu.

6:22Także musimy zadbać o to, aby wszyscy

6:24wiedzieli jak pracować nad naszym produktem.

6:28A stałe utrzymywanie musi być powierzone osobom, które właśnie

6:32posiadają kompetencje w różnych dziedzinach i dobrze znają produkt.

6:37Spraw, aby ten projekt tworzenia design systemu był widoczny, aby wszyscy

6:42wiedzieli, że to jest i że to działa, że to nie jest coś, co zostało ogłoszone

6:46kiedyś, w przeszłości i nikt nie wie o tym, czy wciąż nad tym pracujemy.

6:50Możesz organizować webinary, na których

6:53opowiesz o tym, jak aktualnie wyglądają postępy prac.

6:58Możesz wysyłać mailingi z informacją o aktualizacjach.

7:02Dzięki temu osoby nie tylko będą

7:04wiedziały, że projekt wciąż jest kontynuowany i powinny pracować

7:09na produkcie z wykorzystaniem design systemu, ale również będą wiedziały o tym,

7:13że ten design system się rozwija, że powstały nowe

7:17molekuły, nowe organizmy, które mogą wykorzystać, albo np.

7:22że za chwilę jakiś element zostanie wycofany z design systemu, bo jest on już

7:26nie wykorzystywany, albo pojawiły się jakieś ograniczenia technologiczne.

7:31To wszystko będzie z czasem nabierało

7:34skali, więc wykorzystaj ten moment, że ten projekt, ten design system i cała ta

7:40metodologia została w organizacji zauważona.

7:44I zadbaj o to, aby to rosło, aby to było jeszcze większe, aby z tego design systemu

7:49korzystały firmy, które współpracują z Twoim klientem.

7:52Bo jeżeli Ty tworzysz tylko jedną aplikację, no to fajnie.

7:55W swojej organizacji macie porządek,

7:57macie ostylowane przyciski, kolorystyka, wszystko wygląda pięknie.

8:01Ale może na rynku są jeszcze inne

8:03aplikacje tworzone przez inne podmioty, które nie trzymają już standardów.

8:08Wtedy możesz rozszerzyć skalę swojego działania ze

8:11swoim design systemem i wpłynąć na te organizacje powiedzieć dobrze, to my teraz

8:15ogarniemy to wszystko i wasze wszystkie produkty będą identyczne.

8:20Zapewnimy spójne doświadczenie Twoich użytkowników.

8:24Czyli tak naprawdę możesz z design systemu

8:27zrobić produkt, produkt, który będzie elementem Twojej oferty, który będziesz

8:32mógł sprzedawać klientowi jako dodatkowy element i zarabiać na nim pieniądze.

8:38Będziesz mógł mieć realny wpływ

8:40na to, jak wyglądają inne aplikacje klienta tworzone przez inne zespoły.

8:47Bo jeżeli pokażesz klientowi, że ogromną

8:49wartością będzie uspółnienie i zarządzanie stylami, komponentami,

8:53funkcjonalnościami z jednego miejsca, to może się okazać, że to właśnie inne

8:58organizacje, inne zespoły, inne firmy będą tworzyły swoje aplikacje

9:04korzystając z Twoich atomów, z twoich molekuł, z Twoich organizmów.