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

0:00Do tej pory pokazałem Ci 2 rodzaje token'ów te najniższego poziomu trzymające

0:04podstawowe dane i te określające jakiś atrybut naszego komponentu.

0:13Ale tych poziomów jest tak naprawdę 3.

0:17Ten najniższy, który już znasz, to foundation tokens.

0:20W zależności od design systemu,

0:23na którym będziesz pracował, bądź organizacji, w której będziesz.

0:26Ta nazwa może się trochę różnić.

0:28Niektórzy używają nazwę core tokens, base tokens, basic tokens.

0:33Te wszystkie inne przykładowe nazwy, jakie są najczęściej używane w organizacjach

0:38widzisz na slajdzie pod nazwą foundation tokens.

0:42Więc foundation tokens są atomy.

0:44Te najniższe, najbardziej prymitywne formy

0:47naszych token'ów oraz naszych, najmniejsze atomy naszego design systemu.

0:53I w przykładzie, który widzisz na slajdzie na dole one są oznaczone na czarno.

0:59Przykładowo jest to właśnie Eduweb colors Red 500.

1:03Na samej górze najwyżej

1:05mamy ten drugi poziom token'ów, który również przed chwilą Ci pokazałem.

1:10Je nazywamy component tokens.

1:12To są już konkretne atrybuty naszych

1:14komponentów, na które chcemy wpłynąć, takie jak kolor tła,

1:19zaokrąglenie rogu, grubość obrysu, stopień pisma, padding.

1:25To są te konkretne wartości, na które chcemy wpływać component tokens.

1:29I tu również zależności od organizacji

1:32mogą one przyjmować inne nazwy, overlay

1:35tokens czy scoped tokens, ale między nimi możemy stworzyć kolejny most.

1:42To są token'y, semantic tokens.

1:45Te również mają pewne dodatkowe nazwy alias tokens,

1:49myślę, że ta nazwa jest też taka bardzo w punkt mówiąca o tym, jak one działają.

1:57I te token'y pomagają nam w ten sposób, że

2:01łączą nam wartość foundation tokens z konkretnym komponentem, ale w taki sposób,

2:07że budują czytelną strukturę naszego design systemu.

2:12Popatrzmy jeszcze raz na nasz heading,

2:14przycisk i przykładową kontrolkę radio button formularza.

2:19Teraz każdy z tych elementów opisany jest za pomocą pewnej struktury token'ów.

2:24I tak heading ma kolor, za który odpowiada

2:29token component Eduweb typografii heading color.

2:33To jest wystarczająca informacja dla front developera, żeby zakodować kolor heading'u.

2:40Natomiast dalej w strukturze do tego token'a

2:44component przypisany jest symantic token i jest to Eduweb color secondary.

2:50Czyli wiemy, że nasz heading color

2:53ma kolor secondary, natomiast za to jaki ten kolor jest odpowiada

2:58foundation token, czyli nasz Edueb color black 500.

3:03Podobną strukturę ma nasz przycisk i nasz radio button.

3:08Jak widzisz, za pomocą określonej struktury token'a możemy bardzo szybko

3:13zidentyfikować, o jakim elemencie jest mowa.

3:17Struktura nazwy token'a składa się z

3:19czterech poziomów namespace, type, category i state.

3:25Przeanalizujmy przykładowy token w górnej

3:28części ekranu Eduweb background color default.

3:32Zwróć uwagę, że poszczególne elementy nazwy token'a oddzielone są myślnikiem.

3:38Jest to pewne zapożyczenie z programowania z DW. Gdzie dokładnie

3:43w ten sposób za pomocą myślników tworzone są nazwy zmiennych, ponieważ nie

3:49można używać spacji ani innych znaków specjalnych.

3:52Pierwszym członem nazwy naszego token'a jest eduweb,

3:57skrót eduweb to namespace.

4:00Ten prefiks pozwala nam odróżnić

4:04nasze token'y z naszego systemu od token'ów z innych design systemów.

4:10Np. w momencie, kiedy pracujemy

4:12nad integracją, wdrażamy jakiś moduł z innego systemu, np.

4:17płatności i tam również musimy korzystać z

4:21gotowych komponentów z gotowych token'ów i prawdopodobnie te token'y będą miały

4:27jakiś inny początek, inny prefiks to jest właśnie namespace.

4:32Kolejnym elementem jest typ.

4:35Typ elementu, na który chcemy wpłynąć, np.

4:39tło czy styl pisma.

4:43W naszym przypadku jest to background.

4:45Kolejny element category. Nasze tło ma,

4:50będzie miało przypisany jakiś kolor, natomiast to tło może mieć również

4:54przypisany gradient albo obraz, a w przypadku obrazu

5:00może to być styl skalowania tego obrazu

5:03bądź jego położenia, więc tych kategorii może być wiele.

5:07I ostatni element

5:09stan, default jest to domyślny kolor tła, a

5:13przecież mamy kolor po wskazaniu myszą, kolor dla elementu nieaktywnego itd itd.

5:21W podobny sposób zbudowany jest token w dolnej części ekranu.

5:26Spróbuj go przeanalizować samodzielnie.

5:30Typów, kategorii, stanów może być bardzo

5:33wiele i w ten sposób możemy opisywać naprawdę bardzo różne atrybuty naszych

5:39elementów, takich jak ważność, primary, secondary itd.

5:44Intensywność, none, low, normal, medium, high, max.

5:50Jakiś stan default, hover, active, selected, visitted, disabled, enable, focus itd itd.

6:00I to jest tylko kilka przykładów.

6:01W rozbudowanych design systemach tych

6:04elementów, które będziemy za pomocą token'ów

6:07opisywać może być naprawdę, naprawdę, naprawdę wiele.

6:12W trakcie naszych ćwiczeń zawsze miałem dla Ciebie przygotowaną

6:15ściągawkę, aby łatwiej i szybciej odtworzyć niektóre elementy.

6:21Teraz popatrzmy sobie na podobną

6:23ściągawkę, ale dużo bardziej dokładną niż tą, z której korzystaliśmy dotychczas.

6:29Wypisałem kilka token'ów opisujących przycisk, ale to nie są wszystkie token'y.

6:34Ich będzie wiele więcej.

6:36Np. mamy opisany kolor, mamy token.

6:41W prawej górnej części ekranu Eduweb button primary background.

6:45Ten token już znasz,

6:47rozmawialiśmy o nim przed chwilą, ale

6:49zobacz, że w podobny sposób zostało zdefiniowane zaokrąglenie tego przycisku.

6:54Został zdefiniowany tekst, natomiast to

6:57jest pojedynczy token w dolnej części ekranu.

7:00Eduweb button primary text size.

7:02Do samego tekstu powstanie na pewno jeszcze wiele token'ów.

7:07Jeden będzie mówił o stylu pisma, czyli

7:10będziemy mieli token Eduweb button primary text style,

7:15będziemy mieli token Eduweb primary text font family itd itd.

7:21Czyli wiele parametrów będzie opisywał nam sam tekst.

7:24W ten sam sposób mamy opisaną ikonę,

7:27ale jest to token mówiący tylko o tym, że ta ikona jest strzałką.

7:31A przecież na pewno,

7:34będą jeszcze kolejne token'y mówiące o tym jakiego rozmiaru jest ta ikona itd itd.

7:40Więc do samego opisania przycisku może powstać wiele, wiele token'ów.

7:46I w ten sposób opisujemy każdy pojedynczy element naszego interfejsu.

7:52Jak widzisz design system może być naprawdę

7:57rozbudowanym dokumentem na poziomie ogromnego detalu, atomu.

8:02Opisuje konstrukcję naszego produktu.