Figma Autolayout i Atomic Design: Organizacja design systemu

0:00Cześć.

0:01Stworzyliśmy już mnóstwo atomów, molekuł i organizmów do naszego projektu.

0:07Skorzystaliśmy do ich stworzenia z local wearables i lokalnych stylów.

0:12Natomiast jeżeli Twoja przestrzeń robocza

0:15wygląda w tym momencie mniej więcej tak jak moja, to najwyższa pora, żeby ten

0:21bałagan uporządkować w logiczny design system.

0:26Natomiast zanim to zrobimy, sprawdźmy jak swoje design systemy

0:30organizują największe firmy technologiczne.

0:34Zacznijmy od design systemu Carbon stworzonego przez firmy IBM, która tworzy

0:40mnóstwo rozwiązań technologicznych, głównie dla biznesu.

0:44Prawdopodobnie z tego powodu ten design

0:47system nie jest zbyt popularny i rozpoznawalny.

0:52Natomiast jest naprawdę przepięknie

0:53zaprojektowany i bardzo dobrze zdokumentowany.

0:57design system Carbon jest na tyle duży, że został podzielony na kilka plików Figm'y.

1:04Pierwszy z nich to paleta kolorystyczna.

1:07Została wydzielona do oddzielnego pliku, a

1:10wszystkie kolory zostały dokładnie opisane.

1:15Nie tylko ponazywane.

1:17Została przedstawiona nie tylko wartość hexadecymalna, ale jeżeli to było wymagane,

1:25została również przedstawiona informacja na temat blend mode.

1:29Jak widzicie wszystkie kolory są dokładnie opisane.

1:32Natomiast poza tym, że zostały

1:34zaprezentowane w formie palet, IBM wykorzystał zarówno local wearables

1:40do dokumentowania wszystkich palet, jak również style lokalne.

1:46Wszystkie kolory,

1:48łącznie z tymi transparentami zostały stworzone jako style.

1:56W podobny sposób zostały uporządkowane style typograficzne.

2:01Natomiast zanim sobie je przejrzymy, chcę

2:04Ci zwrócić uwagę, jak pięknie zaprojektowane są okładki

2:08wszystkich plików Figm'y w design systemie Carbon.

2:12Po pierwsze widzimy, że mamy do czynienia z plikiem poświęconym typografii, ponieważ

2:17sama ta część wizualna jest moim zdaniem przepiękna.

2:20Ktoś powyciągał bardzo fajne, charakterystyczne

2:23znaki z używanego kroju pisma i to niebieskie T jako akcent też robi

2:29robotę i mamy przedstawioną informację czego dany plik dotyczy, czyli text styles,

2:34że jest to IBM Design Language i że jest to jedenasta wersja tego pliku.

2:42Przyjrzyjmy się teraz jak zostały przedstawione style typograficzne.

2:46Podobnie jak w przypadku palet, zostały one pogrupowane na różne style typografii.

2:53Mamy kategoryzację

2:55na podstawie break point'ów, czyli dla małych ekranów, dla średnich, dla dużych.

3:01Oczywiście wszystko w standardzie tshirt.

3:05Każdy styl typograficzny został nazwany

3:09odpowiednio, został opisany i mamy informację jaki krój

3:14pisma, jaki rozmiar, jaka wysokość linii, odstępy między znakami.

3:19Ale co kluczowe, każdy styl typograficzny ma nadany token.

3:24I oczywiście wszystkie style typograficzne

3:28zostały dodane do styli lokalnych za pomocą text styles.

3:33W zasadzie możemy je stąd skopiować i używać podobnie jak kolory.

3:39Natomiast na jeszcze jedną rzecz chciałbym Ci zwrócić uwagę.

3:42Popatrz teraz na lewą stronę, na strukturę warstw.

3:47Że nawet takie proste slajdy z dokumentacji są stworzone za pomocą

3:53autolayout'ów, w autolayout'ach i kolejnych autolayout'ach.

4:00I pewnie tu też nie znajdziemy zwykłego

4:01frame'a. Skoczę na chwilę do pliku z kolorystyką,

4:05ponieważ ten był przygotowany dokładnie w ten sam sposób.

4:13Kolejnym plikiem jest plik z ikonami.

4:17I tu wygląda to w identyczny sposób.

4:20Tzn. mamy pokategoryzowane ikony.

4:26Wszystkie są ładnie ułożone w slajdach stworzonych za pomocą autolayout'ów.

4:32Oczywiście z wykorzystaniem różnych wersji autolayout direction.

4:39W design systemie Carbon znajdują się też dużo bardziej rozbudowane pliki, np.

4:44plik zawierający bazę komponentów.

4:48W tym pliku zawarto dodatkowe informacje, takie jak np.

4:51sama misja i wizja stworzenia, design systemu.

4:56Krótki pliku read me mówiący o tym, jakie

4:59aktualizacje zostały wprowadzone w danym pliku, a wszystkie poszczególne komponenty

5:07zostały zaprezentowane na oddzielnych page'ach.

5:12Oczywiście, aby poprawnie korzystać z kolorów, informacji na temat kolorów,

5:17które znamy z poprzedniego pliku zostały zaprezentowane również tutaj.

5:21Podobnie efekty i wszystkie

5:26elementy takie jak kolory, efekty czy spacing'i poza tym, że zostały nam

5:32opisane, każdy z nich ma przypisany odpowiedni token.

5:37Na kolejnych page'ach znajdziemy już

5:39komponenty, harmonijkę, okruszki, przyciski itd.

5:45Ten plik jest naprawdę rozbudowany.

5:47Po prawej stronie widzimy, że wszystkie

5:49kolory, nawet te transparentne, zostały zapisane w odpowiednich stylach lokalnych.

5:56Te style są odpowiednio ponazywane.

5:58Jeżeli sobie rozwiniemy styl obramowania,

6:01widzimy, że poza sekcją border mamy przygotowane odpowiednie token'y.

6:06W bardzo zaawansowany sposób używana jest również opcja local wearables do

6:11ustawienia wszystkich wymiarów spacing'ów

6:15w tym systemie. W dużo bardziej skonsolidowanej formie

6:19został przygotowany material design, czyli design system od Google.

6:24Został on zamknięty w jednym pliku Figm'y, gdzie na głównym ekranie znajdziemy

6:29podstawowe informacje na temat filozofii stworzenia tego systemu oraz tego, jak

6:36należy korzystać z typografii, ikonografii czy kolorów.

6:40Znajdziemy również linki dodatkowych materiałów czy plugin'ów, które mogą być

6:43przydatne w trakcie korzystania z tego systemu.

6:46Wszystkie elementy, takie jak kolorystyka,

6:48typografia w przypadku material design zostały zamknięte na dodatkowym page'u.

6:56Mamy również informacje na temat podstawowych elementów czy break point'ów,

7:00jakie stosowane są w tym design systemie oraz ogromną bazę komponentów.

7:08Cały system został stworzony w metodologii Atomic Design.

7:12Widzicie poszczególne atomy, molekuły

7:16czy organizmy, w których wszystkie elementy są place holder'ami i dopiero na

7:21etapie układania szablonów, templates będziemy tworzyć strukturę

7:26projektu, a potem tworząc strony, pages będziemy wypełniać te wszystkie

7:31poszczególne elementy treścią, wstawiać docelowe teksty czy zdjęcia.

7:37Chcę Ci zwrócić uwagę ponownie na lewą stronę, czyli na panel warstw.

7:41W tym design systemie również Google wszystko zamyka

7:46w autolayout'y i w kolejne autolayout'y.

7:49To jest naprawdę metodologia, z której korzystają wszyscy najlepsi projektanci.

7:56Dlatego tak kluczowe jest, abyśmy nauczyli

7:58się w pełni wykorzystywać możliwości autolayout'u.

8:02Oczywiście nie może zabraknąć w tym

8:03design system'ie stylów tekstowych, kolorystycznych, ale są również opisane

8:08bardzo dokładnie efekty, do których Google przykłada szczególną uwagę.

8:13Widzimy również, że wszystkie te style zostały zgrupowane w katalogi M3.

8:20Jest to informacja, że jest to trzecia wersja design systemu material.

8:24Takie ułożenie struktury wyklucza jakiś

8:27błąd w momencie, kiedy byśmy znowu połączyli jakieś 2 systemy i pracowali

8:31trochę w M3 i mieli jeszcze jakieś elementy z M2.

8:34Dzięki temu będziemy mieli pewność, że

8:36wybierając kolory z palety M3 korzystamy z najnowszych wartości kolorów.

8:41Jedyne czego mi brakuje w tym systemie to wykorzystania wearables.

8:45Mam nadzieję, że wkrótce ten plik doczeka się aktualizacji.

8:49O ile sam design system material design został zamknięty w jednym pliku,

8:53tak w community znajdziemy dużo więcej materiałów, komponentów i elementów z tego

9:00systemu, zarówno z najnowszej wersji, jak i tej starszej.

9:04Teoretycznie w tych wszystkich plikach, które przeglądaliśmy

9:07posiadamy informacje niezbędne do rozpoczęcia pracy projektowej.

9:12Mamy informacje o kolorach, mamy style typograficzne, mamy token'y,

9:16mamy niezbędne elementy graficzne, mamy gotowe molekuły, atomy czy organizmy,

9:24które w zasadzie możemy układać w nasze szablony, a potem strony.

9:29Natomiast zwróć uwagę, że w większości

9:31sekcji poza elementami znajduje się odnośnik do style guide.

9:37Ponieważ pliki Figm'y zawierają tylko bazę

9:40komponentów, natomiast zanim zaczniemy ich używać, warto poznać zasady, jakimi

9:45powinniśmy się posługiwać projektując dla danej marki.

9:50Strona material design posiada naprawdę dużo ciekawych informacji na temat tego,

9:56jak należy używać komponentów, jak należy projektować, na co zwrócić uwagę.

10:01Są gotowe podpowiedzi jak można tworzyć

10:05pewne moduły oraz jakie jest podejście nie tylko do designu, ale funkcjonalności

10:11jeżeli chodzi o Google. Czym jest dla nich design?

10:14W bardzo podobny sposób zbudowana jest strona design systemu Carbon od IBM'a.

10:19Tu również znajdziemy podstawowe informacje na temat tego, jak należy

10:23korzystać z systemu, łącznie z case studies.

10:26Jak ten design system był wdrożony w produktach od IBM'a, znajdziemy

10:32podstawowe guideline'y czy gotowe komponenty.

10:36I to nawet takiej opcji, że możemy sobie

10:39za pomocą live demo sprawdzić jak te komponenty działają.

10:44Należy pamiętać, że tak rozbudowany design

10:46systemy są tworzone przez duże, dedykowane zespoły.

10:52Nie zmienia to jednak faktu, że warto czerpać od nich inspiracje i dobre wzorce.

10:58Dlatego zachęcam Cię

11:00poświęć chwilę i przejrzyj zarówno stronę material design,

11:05czyli material.io oraz stronę carbondesignsystem.com oraz źródła obu

11:10design systemów, które dostępne są w społeczności Figm'y.

11:14Bogatsi o tą wiedzę będziemy się mogli

11:16zabrać za porządkowanie naszego projektu i tworzenie naszego design systemu.