Figma Autolayout i Atomic Design: Tokeny - część III

0:00Figma pozwala nam na budowanie podstawowego systemu token'ów.

0:05Możemy skorzystać z local styles i w ten sposób zdefiniować style typograficzne.

0:11Możemy stworzyć paletę kolorów czy efektów, a nawet parametry siatki.

0:16Możemy skorzystać z local wearables i w ten sposób zdefiniować nie tylko kolory,

0:21ale również rozmiary elementów, spacing'i, gap'y.

0:25Fajną opcją jest linkowanie token'ów między

0:29sobą, czyli tworzenie tej hierarchii, o której rozmawialiśmy np.

0:32zdefiniowałem sobie za pomocą standardu tshirt pewną skalę, pewne rozmiary.

0:38A teraz tworząc token sprint layout gutter nie przypisałem mu ręcznie jakiejś

0:44wartości, tylko wybrałem już istniejący token sprint size m.

0:48Podobnie zrobiłem z tokenem sprint layout margin.

0:51Przypisałem mu już wcześniej zdefiniowany konkretny token.

0:55W ten sposób możemy definiować token'y i

0:59linki między token'ami, które przechowują kolory, wartości

1:02liczbowe, ciągi znaków oraz wartości logiczne.

1:06Natomiast to jest wciąż za mało, żeby zbudować bardziej zaawansowany system

1:12token'ów, w którym te atomy będą naprawdę rozbite i fajnie ze sobą powiązane.

1:19Tu z pomocą przychodzi nam plugin token studio.

1:24Token studio pozwala tworzyć zaawansowane struktury.

1:29Po uruchomieniu token'u klikamy new empty

1:32file i widzimy już strukturę elementów, na które będziemy mogli wpływać.

1:39Strukturę, w której będziemy mogli stworzyć swoje token'y.

1:42Możemy zacząć tworzyć je od podstaw ręcznie, ale jeżeli wcześniej

1:46zdefiniowaliśmy sobie jakieś style lokalne czy wearables, możemy je zaimportować

1:51klikając w lewym dolnym rogu import styles.

1:54Potwierdzam, że chcę zaimporotwać style kolorów, tekstów, cieni.

1:59Zgadza się.

2:01To jest lista tego, jakie style zostały wykryte i jakie token'y powstaną.

2:06Klikam import all.

2:07I jak widzisz pojawiła się już spora paleta.

2:11Zwróć uwagę jak wiele parametrów jest jeżeli chodzi o same style typograficzne.

2:16W przypadku lokalnych styli mieliśmy po prostu zdefiniowanych kilka styli.

2:20Tutaj mamy zdefiniowane style typograficzne, ale również oddzielnie mamy

2:26rodziny fontów, grubości, wysokości, odstępy między literami itd itd.

2:34Oczywiście taki zaimportowany surowo

2:37system wymaga pewnego, pewnego uporządkowania, chociażby w nazewnictwie.

2:43Zrobię to szybko

2:45i tak, żeby nie przywiązywać się, że naszym fontem zawsze będzie heebo

2:49zmienię nazwę tego token'a i nazwę go sobie sprint

2:55font

2:58family.

3:17Nazwę sobie

3:18sprint

3:21font

3:25family

3:29default to będzie domyślny krój pisma.

3:40A ten sobie nazwę

3:44sprint font family

3:53display. Niech będzie on taki właśnie ozdobny.

3:56Niech sobie zostanie nazwa display.

4:03OK. Więc

4:06prześledźmy teraz jak zbudowany jest taki przykładowy token typograficzny.

4:11To najlepiej pokaże nam jak w zaawansowany sposób możemy używać tej

4:16struktury token'ów, o której rozmawialiśmy wcześniej.

4:19A więc nasz styl

4:23typograficzne ma font, który nie jest opisany, font heebo czy font fairplay

4:33display jest to token sprint

4:37font family default.

4:38Wysokość linii jest też opisana za pomocą token'a, światło między literami.

4:43Każdy pojedynczy parametr jest opisany za pomocą token'a.

4:48Teraz, gdybym ja chciał zmienić

4:52to, że wszystkie heading'i mają krój pisma font family display.

5:00W taki sposób, żeby ten font playfair

5:02display zmienić na jakiś inny, wystarczy, że wyedytuje token

5:07sprint family, font family display.

5:13A z kolei gdybym chciał zmienić którymś

5:15przykładowym token'ie wartość tego fontu mogę np.

5:19zmienić

5:19teraz, że font już nie będzie family display, tylko będzie np. family

5:25default.

5:27W ten sposób możemy budować rozbudowane systemy token'ów za pomocą token studio

5:34w Figm'ie. Za pomocą Token Studio możemy

5:37tworzyć również token'y, w których wykorzystujemy pewne obliczenia.

5:43I tak np. jeżeli pracujemy na

5:45siatkach, nie na autolayout'ach, tylko pracujemy na siatkach i chcemy

5:50sobie zdefiniować token'y, które będą odpowiadały za rozmiar elementów

5:54i będzie to token, który powie nam, że OK, ten element ma mieć

6:00szerokość trzech kolumn albo 5 kolumn, to możemy to z łatwością zrobić w Figm'ie.

6:05Klikam plus w sekcji sizing i tworzę nowy token.

6:09Nazwę go sobie sprint size col one.

6:12Ustawię wartość size na 80 pixeli.

6:16Tworzę sobie teraz kolejny token i nazwę go sobie

6:22sprint size gutter i ustawię wartość size na 24.

6:29Teraz stworzę sobie kolejny token i nazwę go sprint size col 2.

6:38Natomiast teraz się już nie muszę

6:39zastanawiać jaki rozmiar będzie przechowywany w tym token'ie.

6:44Mogę skorzystać z alians'ów do token'ów, które już stworzyłem

6:48i wiem, że będzie to jedna kolumna + gutter i do tego druga kolumna 184.

6:56Poniżej mamy wynik naszego obliczenia.

6:59OK. Zapisuję sobie ten token.

7:01W token'ach możemy wykorzystywać nie tylko

7:03dodawanie, ale możemy stworzyć również bardziej zaawansowane obliczenia.

7:07I tak np. tworząc token

7:09przechowujący informacje o rozmiarze 8 kolumn.

7:13Sprint size col

7:178.

7:18Mogę tutaj tak wielokrotnie

7:218 razy wkleić takie sumowanie, ale mogę też stworzyć takie wyrażenie jak

7:298 razy

7:34kolumna plus gutter, ale jeden gutter muszę sobie od tego

7:43odjąć.

7:45Czyli taki box będzie miał 808 pixeli.

7:50No to sprawdźmy jak to działa w rzeczywistości.

7:57Załóżmy, że tutaj mamy wszystko na autolayout'cie,

8:01ale załóżmy, że narysuję sobie teraz jakiś kształt.

8:08To mogę mu przypisać rozmiar jednej kolumny.

8:14Dwóch kolumn

8:16albo ośmiu.

8:18Pod prawym przyciskiem mogę definiować sobie czy to mają być obie wartości

8:23wysokość, szerokość, jedna z nich, czy ustawiam sobie maksimum, minimum.

8:29To tylko kilka podstawowych funkcji plugin'u

8:31token studio, natomiast dają naprawdę

8:34zaawansowane możliwości tworzenia token'ów, czyli najmniejszych atomów.

8:39W naszym projekcie.