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

0:00Chciałbym, abyśmy porozmawiali teraz trochę o design token'ach.

0:04Design Token to atom reprezentujący

0:06wartość wizualną w naszym projekcie, taką jak kolor, rozmiar czcionki czy odstęp

0:12między elementami, a nawet styl cienia czy rozmycia.

0:17Wykorzystujemy je do definiowania i

0:19zarządzania wyglądem elementów naszego projektu.

0:22Design token'y pomagają w zachowaniu

0:24spójności i skonsolidowanym podejściu do projektowania, pozwalając projektantom i

0:28developerom komunikować się w sposób bardziej precyzyjny i efektywny.

0:33Wyobraź sobie sytuację, w której

0:35przychodzi do Ciebie klient, który brend book'u swojej marki ma

0:40zaprojektowaną paletę kolorów i jest w tej palecie kolor czerwony i prosi Cię o

0:45zaprojektowanie interfejsu i abyś użył koloru czerwonego.

0:50Jako dla designera ta informacja, że ma to być kolor czerwony

0:55będzie niewystarczająca, więc pewnie poprosisz go o ten brand book'u i odszukasz

0:59w nim wartość hexadecymalną albo RGB tego koloru i to tą wartością

1:05hex będziesz się posługiwać w swoich projektach na dalszym etapie prac.

1:11Kiedy projekt trafi do developerów,

1:13oni z kolei zapiszą ten kolor w formie zmiennej w swoim kodzie.

1:19W zależności od języka programowania te

1:20zmienne mogą mieć różną formę, ale na potrzeby tego ćwiczenia uznajmy, że

1:25jest to kolor red z prefiksem w formie dolara na początku.

1:32W trakcie całej pracy nad produktem każdy

1:34z Was będzie miał przed oczami ten sam czerwony kolor, ale każdy z Was klient,

1:41Ty designer czy developer będziecie nazywać ten kolor w zupełnie inny sposób.

1:47Token'y możemy organizować w design systemy'y albo style guide'y,

1:53czyli większe biblioteki, które pomagają nam w ustrukturyzowany sposób zarządzać

2:00token'ami w taki sposób, abyśmy mieli jedno

2:04źródło wiedzy o wartościach wykorzystywanym w projekcie.

2:09My, developerzy i wszyscy inni interesariusze. Do tworzenia token'ów

2:16możemy wykorzystać wbudowane funkcje Figm'y, takie jak lokalne style.

2:22Za pomocą tej funkcji stworzyliśmy

2:25style typograficzne czy funkcje lokalnych zmiennych local wearables.

2:31Za pomocą tej funkcji zdefiniowaliśmy sobie kolory padding i spaceing'i.

2:37Tak że w design token'ach możemy przechowywać kolory, np. przycisków typografii.

2:45Możemy przechowywać wartości czcionek

2:46takie jak style, interlinię czy czcionka jest gruba, czy jest pochylona.

2:52Rozmiary określające wielkość box'ów

2:55czy innych elementów oraz odstępy między tymi elementami, czyli

2:59marginesy, padding czy interlinie w tekście.

3:04A zatem możemy w Figm'ie za pomocą color

3:07styles stworzyć token z kolorem czerwonym i nazwiemy go sobie red.

3:13Ten token możemy przypisać do koloru

3:16nagłówka, koloru tła w przycisku czy koloru kontrolki w formularzu.

3:23Teraz, jeżeli np. nasz klient

3:25przejdzie rebranding i okaże się, że w nowym style guide'dzie kolor został delikatnie

3:31zmieniony, teraz jest bardziej nasycony i trochę ciemniejszy.

3:36Wystarczy, że wyedytujemy zmienną red.

3:38I teraz wszystkie elementy, w których ta

3:41zmienna, ten token zostały przypisane automatycznie zmienią swój kolor.

3:47Nasz heading, przycisk czy kontrolka radio button w formularzu zmieniły kolor.

3:54Ale co w przypadku, kiedy nasz klient zdecyduje się na dużo bardziej drastyczną

3:59zmianę swojego wizerunku i kolor czerwony zastąpi kolorem niebieskim?

4:04Oczywiście możemy wyedytować nasz token i

4:07przypisać nową wartość hex niebieskiego do tego token'a.

4:11Wtedy heading i przycisk oczywiście zmienią kolor.

4:15Natomiast w samej stylach to będzie dosyć dziwnie, wręcz

4:20głupio wyglądało, kiedy token red tak naprawdę będzie niebieski.

4:25I tak, wiem, możemy bardzo szybko w Figm'ie

4:28zmienić nazwę tokena z red na blue i wszystko będzie w porządku.

4:32Nie do końca.

4:34Taki stworzony na początku pracy token

4:37bardzo szybko zacznie funkcjonować w obrębie nie tylko naszego projektu, ale

4:41całego zespołu, a nawet wielu zespołów i całej organizacji.

4:46Przesłanie informacji o takiej zmianie, że

4:48zmieniła się w ogóle nazwa token'a może być uciążliwa i bardzo wymagająca.

4:53I możemy również pójść taką drogą, że stworzymy nowy token.

4:56Nazwiemy go Blue, przypiszemy mu odpowiednią wartość

4:59koloru niebieskiego.

5:01Natomiast wtedy znowu musimy wykonać całą pracę polegającą na tym, że połączymy ten

5:06token z elementami, w których on będzie wykorzystany.

5:11I tu z pomocą przychodzą bardziej

5:13zaawansowane techniki używania design tokens.

5:17Ponieważ token'y mogą przechowywać nie

5:19tylko suche wartości, takie jak wartość hex koloru czy stopień pisma,

5:27ale możemy je również wykorzystać do tworzenia pewnego rodzaju mostów między

5:32wartością a elementem, w którym ta wartość ma być zastosowana.

5:37Popatrzmy na czerwony przycisk na naszym slajdzie.

5:41Ma on wypełnienie w kolorze czerwonym.

5:44Jak widzimy, w dolnej części ekranu został zdefiniowany token Eduweb color red 500.

5:50Natomiast ten token nie został przypisany bezpośrednio do przycisku.

5:55Po drodze znajduje się pewien most.

5:57Tym mostem jest Eduweb button secondary background.

6:01Jest to token, który łączy nam

6:05element naszego przycisku z pewną wartością, w tym przypadku z kolorem.

6:12Teraz, gdybym chciał zarządzić zmianą i

6:14zmienić kolor mojego przycisku, mogę to zrobić na dwa sposoby.

6:19Mogę albo zmienić token Eduweb button secondary background na Eduweb button primary

6:27background widoczny po lewej stronie w kolorze zielonym.

6:30I w tym momencie nasz przycisk staje się zielony albo mogę zmienić wartość koloru

6:36przypisanego do tokenu Eduweb button secondary background na Eduweb color blue.

6:42Efekt będzie taki jak widoczne po prawej stronie przycisk stanie się niebieski.

6:48W ten sposób mogę sprawniej zarządzać tym,

6:51jakie wartości atrybutów mają poszczególne elementy mojego interfejsu.