Pokr\u00f3tce przedstawi\u0119 ich histori\u0119, wyja\u015bni\u0119 koncepcj\u0119 oraz jej zastosowanie w projektowaniu i kodzie, rol\u0119, jak\u0105 odgrywaj\u0105 w usprawnianiu wsp\u00f3\u0142pracy projektowo-programistycznej, a tak\u017ce w jaki spos\u00f3b przek\u0142ada si\u0119 to na organizacje zarz\u0105dzaj\u0105ce swoim brandingiem (identyfikacj\u0105 wizualn\u0105) na du\u017c\u0105 skal\u0119.<\/p>\n\n\n\n
Je\u015bli nadal nie masz poj\u0119cia, o czym m\u00f3wi\u0119, nie martw si\u0119, ten artyku\u0142 da Ci podstawy, aby zacz\u0105\u0107. Gotowy\/a? Zaczynajmy.<\/p>\n\n\n\n
Ale po co w og\u00f3le tokeny projektowe?<\/strong><\/h2>\n\n\n\nJako projektanci staramy si\u0119 odpowiada\u0107 na potrzeby u\u017cytkownik\u00f3w, a tak\u017ce realizowa\u0107 okre\u015blone cele biznesowe. Dlatego, zanim przejdziemy do wyja\u015bnienia tematu artyku\u0142u, chcia\u0142abym najpierw skupi\u0107 si\u0119 na problemie biznesowym<\/strong>, kt\u00f3ry<\/strong> adresuj\u0105 tokeny projektowe.<\/strong><\/p>\n\n\n\nPatrz\u0105c na \u015bwiatowe organizacje, mo\u017cemy okre\u015bli\u0107 jedn\u0105 wsp\u00f3ln\u0105 cech\u0119 \u2013 branding. Rozwini\u0119ty na wy\u017cszym lub ni\u017cszym poziomie, jest to j\u0119zyk wizualny, kt\u00f3ry odr\u00f3\u017cnia jedn\u0105 firm\u0119 od drugiej, umo\u017cliwiaj\u0105cy komunikowanie si\u0119 z docelowymi odbiorcami w okre\u015blony spos\u00f3b.<\/p>\n\n\n\n
W dzisiejszych czasach, gdy bran\u017ce opieraj\u0105 si\u0119 na znacznie bardziej zr\u00f3\u017cnicowanych kana\u0142ach ni\u017c w przesz\u0142o\u015bci, bior\u0105c pod uwag\u0119 nie tylko media drukowane, ale tak\u017ce niezliczone urz\u0105dzenia wy\u015bwietlaj\u0105ce tre\u015bci na ekranach, systemy projektowe<\/strong>, czyli skodyfikowane j\u0119zyki marek, wspieraj\u0105 <\/strong>wszystkich zaanga\u017cowanych w proces tworzenia komunikacji<\/strong>, pomagaj\u0105c utrzyma\u0107 sp\u00f3jno\u015b\u0107 korzystania z identyfikacji wizualnej.<\/p>\n\n\n\nMo\u017cna \u015bmia\u0142o powiedzie\u0107, \u017ce j\u0119zyk wizualny organizacji jest filarem jej komunikacji i kluczowym czynnikiem w budowaniu zaufania odbiorc\u00f3w.<\/p>\n\n\n\n
Przyjrzyjmy si\u0119 tokenom na przyk\u0142adzie<\/strong><\/h3>\n\n\n\nJak zareagowa\u0142by kto\u015b na mailing lub stron\u0119 internetow\u0105 instytucji, kt\u00f3rej powierza swoje \u015brodki, gdyby zobaczy\u0142 przestarza\u0142e logo lub kolory interfejsu niepasuj\u0105ce do wizualnego j\u0119zyka marki. Czy nie wydawa\u0142oby si\u0119 to dziwne i raczej podejrzane?<\/p>\n\n\n\n
Aby zilustrowa\u0107 znaczenie mo\u017cliwo\u015bci zastosowania decyzji projektowych na du\u017c\u0105 skal\u0119, pos\u0142u\u017c\u0119 si\u0119 histori\u0105, kt\u00f3rej u\u017cy\u0142 Louis Chenais<\/a>.<\/p>\n\n\n\nWyobra\u017amy sobie, \u017ce jeste\u015b projektantem\/-k\u0105 w du\u017cej korporacji. Jako szef\/-owa dzia\u0142u projektowego, masz proste zadanie od\u015bwie\u017cenia wizerunku marki<\/strong> \u2013 zaktualizowa\u0107 jej g\u0142\u00f3wny kolor, zmieniaj\u0105c go na nowy.<\/p>\n\n\n\nRebranding zosta\u0142 sfinalizowany, a Ty musisz go \u201etylko\u201d zaimplementowa\u0107 w interfejsach wszystkich produkt\u00f3w korporacji, kt\u00f3re obejmuj\u0105:<\/p>\n\n\n\n
\n- stron\u0119 internetow\u0105 firmy,<\/li>\n\n\n\n
- aplikacj\u0119 internetow\u0105<\/li>\n\n\n\n
- aplikacj\u0119 na Androida,<\/li>\n\n\n\n
- aplikacj\u0119 na iOS.<\/li>\n<\/ul>\n\n\n\n
\u201eNic wielkiego\u201d, my\u015blisz, podekscytowany\/-a osi\u0105gni\u0119ciem celu i prosisz kierownik\u00f3w odpowiednich zespo\u0142\u00f3w in\u017cynieryjnych, odpowiedzialnych za ka\u017cdy produkt, aby zaktualizowali kolor z X (stary) na Y (nowy), dostarczaj\u0105c im warto\u015bci RGB (przestrze\u0144 kolor\u00f3w).<\/p>\n\n\n\n
W tym momencie zaczynaj\u0105 si\u0119 schody<\/strong>. Nap\u0142ywaj\u0105 pytania o inne formaty kolor\u00f3w, dzia\u0142aj\u0105ce na r\u00f3\u017cnych platformach, ludzie pr\u00f3buj\u0105 ustali\u0107, czy aktualizacja powinna mie\u0107 wp\u0142yw na wszystkie komponenty interfejsu u\u017cytkownika. Niekt\u00f3rzy mened\u017cerowie s\u0105 nieresponsywni, co sprawia, \u017ce wdro\u017cenie aktualizacji w ich obszarach jest w\u0105tpliwe.<\/p>\n\n\n\nZapewnienie prawid\u0142owego zastosowania tej jednej zmiany okazuje si\u0119 trudnym wyzwaniem bez wsp\u00f3lnego \u201ej\u0119zyka projektowania\u201d, kt\u00f3rego mogliby u\u017cywa\u0107 zar\u00f3wno projektanci, jak i programi\u015bci.<\/p>\n\n\n\n
Jaki problem biznesowy rozwi\u0105zuj\u0105 zatem tokeny?<\/strong><\/h3>\n\n\n\nKiedy\u015b du\u017ce organizacje marnowa\u0142y miesi\u0105ce na wdra\u017canie zmian w identyfikacji wizualnej<\/strong> swoich produkt\u00f3w cyfrowych, co teraz, pod warunkiem, \u017ce produkty s\u0105 oparte na tokenach projektowych, zajmuje kilka minut.<\/strong><\/p>\n\n\n\nJaki jest zatem problem biznesowy, kt\u00f3ry rozwi\u0105zuj\u0105 tokeny projektowe? Kr\u00f3tko m\u00f3wi\u0105c: wdro\u017cenie token\u00f3w projektowych oszcz\u0119dza pieni\u0105dze Twojej organizacji<\/strong>, poniewa\u017c nie potrzebujesz ju\u017c miesi\u0119cy i cz\u0119sto setek ludzi, aby wdra\u017ca\u0107 proste decyzje projektowe do kodu na r\u00f3\u017cnych platformach. Nie ryzykujesz niesp\u00f3jno\u015bci negatywnie wp\u0142ywaj\u0105ce na wizerunek Twojej marki.<\/p>\n\n\n\nOkej, tokeny projektowe\u2026 czyli?<\/strong><\/h2>\n\n\n\nCofnijmy si\u0119 o krok do narodzin koncepcji token\u00f3w projektowych w Salesforce oko\u0142o 2015 roku. Jina Anne w zespole ds. system\u00f3w projektowych, w towarzystwie Jona Levine’a po stronie in\u017cynieryjnej, koordynowa\u0142a koncepcyjne, agnostyczne rozwi\u0105zanie \u2013 definicj\u0119 projektow\u0105 zlokalizowan\u0105 w jednym miejscu (\u201eJedno \u017ar\u00f3d\u0142o prawdy\u201d) propagowan\u0105 na wszystkie platformy \u2013 tworz\u0105c termin \u201etokeny projektowe\u201d.<\/p>\n\n\n\n
Tokeny projektowe<\/strong> s\u0105 nazwami u\u017cywanymi w charakterze no\u015bnik\u00f3w decyzji projektowych, takich jak:<\/p>\n\n\n\n\n- kolor,<\/li>\n\n\n\n
- ikonografia,<\/li>\n\n\n\n
- kr\u00f3j lub rozmiar pisma,<\/li>\n<\/ul>\n\n\n\n
w j\u0119zyku projektowym organizacji. Aby by\u0142y u\u017cywane i rozumiane przez wszystkich, nazwy te powinny by\u0107 wynikiem wsp\u00f3lnych decyzji podejmowanych przez projektant\u00f3w i programist\u00f3w<\/strong> z uwzgl\u0119dnieniem przebiegu pracy zespo\u0142\u00f3w.<\/p>\n\n\n\nTokeny projektowe mo\u017cemy opisa\u0107 jako:<\/p>\n\n\n\n
\n(…) wizualne atomy systemu projektowego \u2013 w szczeg\u00f3lno\u015bci s\u0105 to nazwane jednostki, kt\u00f3re przechowuj\u0105 atrybuty projektu wizualnego<\/em><\/p>\nSalesforce Lightning Design System<\/cite><\/blockquote>\n\n\n\nJe\u015bli nie jeste\u015b zaznajomiony\/-a z Metodologi\u0105 Atomic Design, poni\u017csza ilustracja przedstawia koncepcj\u0119 na przyk\u0142adzie fragmentu interfejsu Instagrama, rozbitego z ca\u0142ej strony na rzeczywiste atomy, umieszczaj\u0105c tokeny projektowe jako cz\u0105stki subatomowe, czyli warto\u015bci, z kt\u00f3rych sk\u0142adaj\u0105 si\u0119 atomy.<\/p>\n\n\n\n![\"Metodologia](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2024\/07\/image1-3.png\")
<\/a>Ryc. 1 Metodologia Atomic Design<\/a><\/figcaption><\/figure>\n\n\n\n\nTokeny projektowe s\u0105 j\u0119zykiem s\u0142u\u017c\u0105cym do przekazywania intencji mi\u0119dzy r\u00f3\u017cnymi cz\u0119\u015bciami systemu<\/em>.<\/p>\nEthan Marcotte, „Design-ish systems<\/a>„<\/cite><\/blockquote>\n\n\n\nA ja\u015bniej?<\/strong><\/h3>\n\n\n\nAby lepiej zilustrowa\u0107 t\u0119 koncepcj\u0119, pos\u0142u\u017c\u0119 si\u0119 metafor\u0105. Wyobra\u017a sobie, \u017ce masz psa. Tw\u00f3j pies ma na imi\u0119 \u201eCharlie\u201d, ale w zale\u017cno\u015bci od okoliczno\u015bci nazywasz go r\u00f3wnie\u017c \u201eMa\u0142ym \u0141obuzem\u201d (ang. Little Rascal) i \u201eMuffink\u0105\u201d (ang. Muffin).<\/p>\n\n\n\n![\"Metafora](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2024\/07\/image2-2.png\")
<\/a>Ryc. 2 Metafora koncepcji tokena projektowego<\/figcaption><\/figure>\n\n\n\nNiezale\u017cnie od tego, jak nazwiesz swojego psa, to wci\u0105\u017c ten sam zwierzak (wbrew temu, co mo\u017cesz my\u015ble\u0107, gdy w\u0142a\u015bnie zniszczy\u0142 tw\u00f3j ulubiony mebel). Tokeny projektowe dzia\u0142aj\u0105 tak samo. Zamiast u\u017cywa\u0107 na sta\u0142e zakodowanych warto\u015bci \u2013 takich jak hex dla koloru, piksele dla odst\u0119pu itp. \u2013 warto\u015bci te mo\u017cesz nazwa\u0107<\/strong>. To jak nadawanie pseudonim\u00f3w decyzjom projektowym. Sp\u00f3jrzmy na poni\u017csz\u0105 analogi\u0119 na przyk\u0142adzie kolor\u00f3w.<\/p>\n\n\n\n![\"Analogia](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2024\/07\/image3-1.png\")
<\/a>Ryc. 3 Analogia koncepcji tokena projektowego na przyk\u0142adzie koloru<\/a><\/figcaption><\/figure>\n\n\n\nTokeny projektowe s\u0105 przeznaczone do wykorzystania w systemie projektowym oraz w przekroju Twoich produkt\u00f3w. Aby to umo\u017cliwi\u0107, musisz przekszta\u0142ci\u0107 je do u\u017cytku na r\u00f3\u017cnych platformach (Web, iOS lub Android) przez r\u00f3\u017cne zespo\u0142y.<\/p>\n\n\n\n![\"Spos\u00f3b,](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2024\/07\/image4-1.png\")
<\/a>Ryc. 4 Spos\u00f3b, w jaki decyzje projektowe s\u0105 przekszta\u0142cane w tokeny projektowe do wykorzystania na okre\u015blonych platformach<\/a><\/figcaption><\/figure>\n\n\n\nW3C Design Tokens Standard<\/strong><\/h3>\n\n\n\nJe\u015bli chcemy zapewni\u0107 pomy\u015bln\u0105 adaptacj\u0119 token\u00f3w projektowych w wielu aplikacjach, potrzebujemy standardu zapewniaj\u0105cego sp\u00f3jno\u015b\u0107. Konsorcjum World Wide Web (W3C), kierowane przez Tima Bernersa-Lee i Jeffreya Jaffe, we wsp\u00f3\u0142pracy z wieloma organizacjami i pojedynczymi osobami, pracuje nad zapewnieniem standardu \u201eW3C Design Tokens Standard\u201d.<\/p>\n\n\n\n
Pozwoli\u0142oby to r\u00f3\u017cnym narz\u0119dziom komunikowa\u0107 si\u0119 w tym samym \u201ej\u0119zyku\u201d, na przyk\u0142ad umo\u017cliwiaj\u0105c pobieranie token\u00f3w z Figmy i u\u017cywanie ich w Adobe Illustrator. Wyobra\u017a sobie, jak przyspieszy\u0142oby to przep\u0142yw pracy mi\u0119dzy dzia\u0142ami marketingu i projektowania produktu!<\/p>\n\n\n\n
Aby dowiedzie\u0107 si\u0119 wi\u0119cej na temat standardu, zapoznaj si\u0119 z oficjaln\u0105 grup\u0105 Spo\u0142eczno\u015bci Design Tokens Community Group<\/a> oraz W3C Design Tokens Community Group<\/a>.<\/p>\n\n\n\nJak budujemy za pomoc\u0105 token\u00f3w projektowych?<\/strong><\/h2>\n\n\n\nTeraz, gdy om\u00f3wi\u0142am absolutne podstawy koncepcji token\u00f3w projektowych, p\u00f3jd\u017amy dalej i zag\u0142\u0119bmy si\u0119 nieco bardziej w r\u00f3\u017cne rodzaje token\u00f3w i spos\u00f3b, w jaki s\u0142u\u017c\u0105 nam one do tworzenia projekt\u00f3w.<\/p>\n\n\n\n
Ka\u017cdy produkt cyfrowy jest struktur\u0105 funkcji, kt\u00f3re sk\u0142adaj\u0105 si\u0119 z interfejs\u00f3w. Ka\u017cdy interfejs jest zbudowany z komponent\u00f3w, skomponowanych z token\u00f3w projektowych.<\/p>\n\n\n\n![\"Schemat](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2024\/07\/image5.png\")
<\/a>Ryc. 5 Schemat struktury produktu<\/figcaption><\/figure>\n\n\n\nRoz\u0142\u00f3\u017cmy na cz\u0119\u015bci komponent przycisku. Mo\u017cesz zobaczy\u0107 wszystkie elementy, kt\u00f3re przet\u0142umaczyliby\u015bmy na tokeny projektowe.<\/p>\n\n\n\n![\"Anatomia](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2024\/07\/image6.png\")
<\/a>Ryc. 6 Anatomia komponentu przycisku pokazuj\u0105ca definiuj\u0105ce go tokeny projektowe<\/figcaption><\/figure>\n\n\n\nPrzyk\u0142ady token\u00f3w<\/strong><\/h2>\n\n\n\nOto kilka przyk\u0142ad\u00f3w typowych token\u00f3w projektowych u\u017cywanych w standardowych systemach projektowych, z kt\u00f3rymi mo\u017cna si\u0119 spotka\u0107:<\/p>\n\n\n\n
\n- Tokeny kolor\u00f3w<\/strong>
- Kolor wiod\u0105cy \u2013 u\u017cywany do g\u0142\u00f3wnych element\u00f3w marki i wezwa\u0144 do dzia\u0142ania.<\/li><\/ul>
- Kolor dodatkowy \u2013 kolor uzupe\u0142niaj\u0105cy dla akcent\u00f3w i element\u00f3w drugorz\u0119dnych.<\/li><\/ul>
- Kolory neutralne \u2013 odcienie szaro\u015bci u\u017cywane do t\u0142a, obramowania element\u00f3w i tekstu.<\/li><\/ul>\n
\n- Kolory b\u0142\u0119d\u00f3w\/ostrze\u017ce\u0144 \u2013 wyra\u017ane kolory wskazuj\u0105ce b\u0142\u0119dy lub ostrze\u017cenia w interfejsie u\u017cytkownika.<\/li>\n<\/ul>\n<\/li>\n\n\n\n
- Tokeny typografii<\/strong>\n
\n- Kr\u00f3j pisma \u2013 podstawowe i drugorz\u0119dne kroje pisma u\u017cywane w nag\u0142\u00f3wkach i tek\u015bcie g\u0142\u00f3wnym.<\/li>\n\n\n\n
- Rozmiar tekstu \u2013 r\u00f3\u017cne rozmiary dla nag\u0142\u00f3wk\u00f3w, podtytu\u0142\u00f3w, tekstu g\u0142\u00f3wnego itp.<\/li>\n\n\n\n
- Grubo\u015b\u0107 tekstu \u2013 r\u00f3\u017cne grubo\u015bci tekstu dla wyr\u00f3\u017cnienia i zbudowania hierarchii.<\/li>\n\n\n\n
- Wysoko\u015b\u0107 linii \u2013 sp\u00f3jne odst\u0119py mi\u0119dzy wierszami tekstu dla czytelno\u015bci.<\/li>\n<\/ul>\n<\/li>\n\n\n\n
- Tokeny odst\u0119p\u00f3w<\/strong>\n
\n- Padding \u2013 standardowe warto\u015bci odst\u0119pu mi\u0119dzy zawarto\u015bci\u0105 elementu a jego obramowaniem dla element\u00f3w takich jak przyciski, karty i kontenery.<\/li>\n\n\n\n
- Margines \u2013 standardowe warto\u015bci margines\u00f3w dla odst\u0119p\u00f3w mi\u0119dzy elementami.<\/li>\n\n\n\n
- Grid Spacing \u2013 odst\u0119py mi\u0119dzy kolumnami i wierszami w uk\u0142adzie siatki.<\/li>\n<\/ul>\n<\/li>\n\n\n\n
- Tokeny obramowania<\/strong>\n
\n- Promie\u0144 obramowania \u2013 standardowe warto\u015bci promienia obramowania dla zaokr\u0105glonych naro\u017cnik\u00f3w element\u00f3w.<\/li>\n\n\n\n
- Szeroko\u015b\u0107 obramowania \u2013 grubo\u015b\u0107 obramowania wok\u00f3\u0142 element\u00f3w.<\/li>\n\n\n\n
- Kolor obramowania \u2013 standardowe kolory obramowa\u0144 wok\u00f3\u0142 element\u00f3w.<\/li>\n<\/ul>\n<\/li>\n\n\n\n
- Tokeny cienia<\/strong>\n
\n- Cie\u0144 ramki \u2013 standardowe warto\u015bci cienia dodaj\u0105ce g\u0142\u0119bi i przestrzenno\u015bci elementom.<\/li>\n\n\n\n
- Cie\u0144 tekstu \u2013 warto\u015bci cienia zwi\u0119kszaj\u0105ce czytelno\u015b\u0107 i kontrast tekstu.<\/li>\n<\/ul>\n<\/li>\n\n\n\n
- Tokeny ikon<\/strong>\n
\n- Rozmiar ikony \u2013 standardowe rozmiary ikon u\u017cywanych w interfejsie u\u017cytkownika.<\/li>\n\n\n\n
- Kolor ikony \u2013 domy\u015blny kolor ikony lub odmiany dla r\u00f3\u017cnych stan\u00f3w (aktywny, nieaktywny itp.).<\/li>\n<\/ul>\n<\/li>\n\n\n\n
- Tokeny animacji<\/strong>\n
\n- Czas trwania przej\u015bcia \u2013 czas trwania przej\u015b\u0107 mi\u0119dzy r\u00f3\u017cnymi stanami lub interakcjami.<\/li>\n\n\n\n
- Funkcja czasu animacji \u2013 funkcje rozp\u0119dzenia i zwolnienia dla p\u0142ynnych efekt\u00f3w animacji.<\/li>\n\n\n\n
- Klatki kluczowe animacji \u2013 klatki kluczowe dla bardziej z\u0142o\u017conych sekwencji animacji.<\/li>\n<\/ul>\n<\/li>\n\n\n\n
- Tokeny dost\u0119pno\u015bci<\/strong>\n
\n- Wsp\u00f3\u0142czynnik kontrastu \u2013 minimalny wsp\u00f3\u0142czynnik kontrastu mi\u0119dzy tekstem a kolorami t\u0142a zapewniaj\u0105cy czytelno\u015b\u0107.<\/li>\n\n\n\n
- Wska\u017anik fokusu \u2013 style wskazuj\u0105ce fokus na interaktywnych elementach do nawigacji za pomoc\u0105 klawiatury.<\/li>\n\n\n\n
- Tekst dla czytnik\u00f3w ekranu \u2013 ukryty tekst dla czytnik\u00f3w ekranu w celu przekazania informacji u\u017cytkownikom z zaburzeniami narz\u0105du wzroku.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n
Kategorie token\u00f3w<\/strong><\/h2>\n\n\n\nTokeny dzielimy na trzy kategorie (typy). Ka\u017cdy typ tokena oznacza poziom przypisanego kontekstu.<\/p>\n\n\n\n![\"Typy](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2024\/07\/image7.png\")
<\/a>Ryc. 7 Typy token\u00f3w na przyk\u0142adach<\/figcaption><\/figure>\n\n\n\nTokeny globalne<\/strong><\/h3>\n\n\n\nTokeny poziomu 1 (globalne) <\/strong>\u2013 <\/strong>warto\u015bci prymitywne <\/strong>\u2013 s\u0105 podstawowymi, bezkontekstowymi jednostkami systemu token\u00f3w projektowych.<\/p>\n\n\n\nNiezale\u017cnie od tego, czy zajmujesz si\u0119 projektowaniem, programowaniem, czy kierujesz projektem, prawdopodobnie pracujesz z kolorami marki swojej organizacji. Istnieje du\u017ce prawdopodobie\u0144stwo, \u017ce w komunikacji pos\u0142ugujesz si\u0119 warto\u015bciami hex (szesnastkowymi) lub innymi, odpowiadaj\u0105cymi tym kolorom.<\/p>\n\n\n\n![\"Warto\u015b\u0107](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2024\/07\/image8.png\")
<\/a>Ryc. 8 Warto\u015b\u0107 hex zastosowana bezpo\u015brednio w elementach interfejsu u\u017cytkownika<\/figcaption><\/figure>\n\n\n\nDlaczego nie jest to najwygodniejsze rozwi\u0105zanie<\/strong>? Zobaczmy:<\/p>\n\n\n\n\n- Dop\u00f3ki nie znasz hex\u00f3w na pami\u0119\u0107 (i b\u0105d\u017amy szczerzy \u2013 mo\u017cesz by\u0107 jedyn\u0105 osob\u0105 w organizacji z tak\u0105 wiedz\u0105), kod hex nie odzwierciedla dla Ciebie rzeczywistego koloru, czyni\u0105c go trudno rozpoznawalnym.<\/strong><\/li>\n\n\n\n
- Nie daje \u017cadnych informacji o decyzji projektowej stoj\u0105cej za tym kolorem<\/strong> (gdzie ma by\u0107 u\u017cyty itp.)<\/li>\n\n\n\n
- \u0141atwo jest b\u0142\u0119dnie wpisa\u0107 kod hex<\/strong>, co prowadzi do niesp\u00f3jno\u015bci wizualnych w produkcie.<\/li>\n<\/ul>\n\n\n\n
Globalne tokeny <\/strong>to nazwy nadawane na przyk\u0142ad warto\u015bciom hex, aby zapewni\u0107 bazowy, sp\u00f3jny i pozbawiony kontekstu opis tych warto\u015bci, kt\u00f3ry by\u0142by zrozumia\u0142y dla ka\u017cdego, kto z nimi pracuje. Pozwala to na unikni\u0119cie sytuacji \u201epi\u0119\u0107dziesi\u0119ciu odcieni szaro\u015bci\u201d \u2013 przypadkowego u\u017cywania kilku odcieni danego koloru Twojej marki, wyst\u0119puj\u0105cego w produkcie.<\/p>\n\n\n\n![\"Przyk\u0142ad](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2024\/07\/image9.png\")
<\/a>Ryc. 9 Przyk\u0142ad tokena globalnego<\/figcaption><\/figure>\n\n\n\nZgodnie z powy\u017cszym schematem, nazwanie warto\u015bci hex „color.blue.600” zamiast u\u017cycia warto\u015bci hex, przynosi korzy\u015bci na kilka sposob\u00f3w:<\/p>\n\n\n\n
\n- Kolor jest teraz \u0142atwo rozpoznawalny.<\/li>\n\n\n\n
- Warto\u015b\u0107 przet\u0142umaczona na token jest teraz zdefiniowana w kodzie jako zmienna, wi\u0119c ka\u017cda pomy\u0142ka w pisowni b\u0119dzie sygnalizowana jako b\u0142\u0105d kodu.<\/li>\n<\/ul>\n\n\n\n
![\"Przyk\u0142ad](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2024\/07\/image10.png\")
<\/a>Ryc. 10 Przyk\u0142ad token\u00f3w globalnych (Lightning Design System<\/a>)<\/figcaption><\/figure>\n\n\n\nPomimo oczywistych zalet<\/strong> korzystania z token\u00f3w globalnych, nadal nie jest to idealne rozwi\u0105zanie<\/strong> i poleganie tylko na tego typu tokenach nie przekazuje informacji o zamierzonych wariantach u\u017cycia koloru, ani nie pozwala na zautomatyzowane, wybi\u00f3rcze zmiany kolor\u00f3w, wp\u0142ywaj\u0105ce tylko na okre\u015blone grupy komponent\u00f3w. Celem tego zesp\u00f3\u0142 programist\u00f3w musia\u0142by szuka\u0107 odpowiednich przypadk\u00f3w u\u017cycia i r\u0119cznie zmienia\u0107 kolor. Co za strata czasu, prawda?<\/p>\n\n\n\nTokeny aliasowe<\/strong><\/h3>\n\n\n\nOto zatem kolejny typ tokena projektowego. Tokeny typu drugiego (aliasowe lub systemowe) <\/strong>\u2013 nazwy specyficzne dla kontekstu, odnosz\u0105ce si\u0119 do decyzji projektowych stoj\u0105cych za warto\u015bciami (co one \u201erobi\u0105\u201d).<\/p>\n\n\n\n#0E6EE0, teraz okre\u015blany jako „color.blue.600”, b\u0119dzie r\u00f3wnie\u017c istnia\u0142 w systemie pod r\u00f3\u017cnymi aliasami, przedstawiaj\u0105cymi przypadki u\u017cycia. Na przyk\u0142ad jako \u201ecolor.interactive.primary.background\u201d, co oznacza\u0142oby, \u017ce ten kolor ma by\u0107 u\u017cywany jako t\u0142o pierwszorz\u0119dnych, interaktywnych element\u00f3w interfejsu u\u017cytkownika.<\/p>\n\n\n\n![\"Przyk\u0142ad](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2024\/07\/image11.png\")
<\/a>Ryc. 11 Przyk\u0142ad tokena systemowego (aliasu)<\/figcaption><\/figure>\n\n\n\nJak wida\u0107 na powy\u017cszym przyk\u0142adzie, w przypadku jakiejkolwiek zmiany koloru, operacja ta pozwoli\u0142aby wp\u0142yn\u0105\u0107 tylko na t\u0142a g\u0142\u00f3wnych interaktywnych element\u00f3w interfejsu, wykluczaj\u0105c te bez niebieskiego t\u0142a.<\/p>\n\n\n\n
Wprowadzenie token\u00f3w systemowych do kodu wp\u0142ywa pozytywnie na<\/strong>:<\/p>\n\n\n\n\n- Eliminacj\u0119 ewentualnych b\u0142\u0119d\u00f3w podczas kopiowania warto\u015bci do kodu (podobnie jak tokeny globalne, tokeny aliasowe r\u00f3wnie\u017c s\u0105 zmiennymi w kodzie).<\/li>\n\n\n\n
- Uczynienie przeznaczenia tokena jasnym zar\u00f3wno dla zespo\u0142\u00f3w projektowych, jak i programistycznych.<\/li>\n\n\n\n
- Znaczne przyspieszenie procesu aktualizacji, umo\u017cliwiaj\u0105c programistom \u0142atw\u0105 korekt\u0119 w\u0142a\u015bciwo\u015bci komponent\u00f3w na du\u017c\u0105 skal\u0119.<\/li>\n\n\n\n
- Wzmocnienie pozycji programist\u00f3w i projektant\u00f3w, umo\u017cliwiaj\u0105c wykrywanie potencjalnego nieprawid\u0142owego u\u017cycia w\u0142a\u015bciwo\u015bci (takich jak kolor tekstu zastosowany do ikon) oraz korygowanie takich b\u0142\u0119d\u00f3w przez programist\u00f3w samodzielnie lub w porozumieniu z projektantami.<\/li>\n\n\n\n
- Sk\u0142onienie projektant\u00f3w do ponownego przemy\u015blenia faktycznej potrzeby stosowania dodatkowych warto\u015bci, na przyk\u0142ad kolor\u00f3w, w systemie projektowym, ograniczaj\u0105c tym samym potencjalny ba\u0142agan i niepotrzebne skomplikowanie systemu.<\/li>\n<\/ul>\n\n\n\n
![\"Przyk\u0142ad](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2024\/07\/image12.png\")
<\/a>Ryc. 12 Przyk\u0142ad token\u00f3w alias\u00f3w (Lightning Design System<\/a>)<\/figcaption><\/figure>\n\n\n\nKiedy zatem si\u0119gn\u0105\u0107 po tokeny systemowe?<\/strong><\/p>\n\n\n\n\n- Je\u015bli na tokeny zosta\u0142 przet\u0142umaczony ka\u017cdy kolor w systemie projektowym, co zaowocowa\u0142o gigantycznym zestawem globalnych token\u00f3w do utrzymania.<\/li>\n\n\n\n
- Je\u015bli globalne tokeny maj\u0105 zastosowanie do tekstu, ikony, t\u0142a lub obramowania na wielu stronach.<\/li>\n\n\n\n
- Je\u015bli system projektowy obs\u0142uguje wiele r\u00f3\u017cnych marek i produkt\u00f3w, temat\u00f3w i tryb\u00f3w.<\/li>\n<\/ul>\n\n\n\n
Przyk\u0142ad:<\/p>\n\n\n\n![\"Przyk\u0142ad](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2024\/07\/image13.png\")
<\/a>Ryc. 13 Przyk\u0142ad token\u00f3w aliasowych (systemowych) w ramach wielotematycznego designu systemu\/systemu projektowego<\/figcaption><\/figure>\n\n\n\nOczywi\u015bcie, korzystanie z token\u00f3w systemowych wi\u0105\u017ce si\u0119 z odpowiedzialno\u015bci\u0105 za utrzymanie wi\u0119kszego zestawu kolor\u00f3w<\/strong> i wymaga dok\u0142adnego, przemy\u015blanego planowania systemu, jednak w d\u0142u\u017cszej perspektywie korzy\u015bci okazuj\u0105 si\u0119 warte dodatkowego wysi\u0142ku.<\/p>\n\n\n\nZdarzaj\u0105 si\u0119 przypadki<\/strong>, w kt\u00f3rych nie zaleca si\u0119 polegania na tokenach systemowych<\/strong> \u2013 na przyk\u0142ad, je\u015bli istnieje kolor, kt\u00f3rego potrzebujesz u\u017cy\u0107 w swoim produkcie, ale nie jest on cz\u0119\u015bci\u0105 j\u0119zyka wizualnego marki lub zostanie u\u017cyty tylko raz lub dla jednego konkretnego elementu interfejsu u\u017cytkownika, na kt\u00f3ry nie powinny mie\u0107 wp\u0142ywu globalne zmiany decyzji projektowych.<\/p>\n\n\n\nTokeny specyficzne dla komponent\u00f3w<\/strong><\/h3>\n\n\n\nDo unikalnych element\u00f3w interfejsu u\u017cytkownika nale\u017ca\u0142oby u\u017cy\u0107 token\u00f3w trzeciego typu (specyficznych dla komponent\u00f3w) <\/strong>\u2013 dedykowanych odr\u0119bnym komponentom i ich w\u0142a\u015bciwo\u015bciom.<\/p>\n\n\n\n![\"Przyk\u0142ad](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2024\/07\/image14.png\")
<\/a>Ryc.14 Przyk\u0142ad token\u00f3w komponent\u00f3w<\/figcaption><\/figure>\n\n\n\nWszystkie powy\u017csze nazwy (tokeny projektowe) oznaczaj\u0105 t\u0119 sam\u0105 warto\u015b\u0107 szesnastkow\u0105, ale w innym kontek\u015bcie lub w odniesieniu do innego komponentu systemu projektowego \u2013 gdy zastosujesz tokeny specyficzne dla komponentu, wszelkie mo\u017cliwe zmiany decyzji projektowych (np.: aktualizacje kolor\u00f3w) b\u0119d\u0105 mia\u0142y wp\u0142yw tylko na ten komponent<\/strong> i w\u0142a\u015bciwo\u015b\u0107, do kt\u00f3rej odnosi si\u0119 token. W naszym przypadku b\u0119dzie to tylko kolor t\u0142a przycisku g\u0142\u00f3wnego w stanie domy\u015blnym.<\/p>\n\n\n\nPoni\u017cszy diagram, gdzie zamieniam kolor niebieski na r\u00f3\u017cowy, pokazuje, w jaki spos\u00f3b tokeny pozwalaj\u0105 na sprecyzowanie zakresu modyfikacji decyzji projektowych. Mo\u017cesz zastosowa\u0107 konkretn\u0105 zmian\u0119 (np.: koloru) do wybranych token\u00f3w, wp\u0142ywaj\u0105c tylko na okre\u015blone elementy interfejsu u\u017cytkownika.<\/p>\n\n\n\n![\"Przyk\u0142adowa](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2024\/07\/image15.png\")
<\/a>Ryc. 15 Przyk\u0142adowa struktura tokena projektowego \u2013 od tokena podstawowego do komponent\u00f3w<\/figcaption><\/figure>\n\n\n\n![\"Przyk\u0142adowa](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2024\/07\/image16.png\")
<\/a>Ryc. 16 Przyk\u0142adowa struktura token\u00f3w projektowych \u2013 zmiana koloru<\/figcaption><\/figure>\n\n\n\nNo dobrze, ale jak wymy\u015blamy nazwy token\u00f3w?<\/strong><\/h2>\n\n\n\nNie powiem Ci dok\u0142adnie, jaka jest zalecana konwencja nazewnictwa podczas tworzenia systemu token\u00f3w dla Twojego produktu, poniewa\u017c powinna by\u0107 ona dostosowana do specyfiki produktu i preferencji zespo\u0142u. Ustalanie nazewnictwa wymaga czasu, poniewa\u017c zespo\u0142y musz\u0105 zaanga\u017cowa\u0107 si\u0119 w znalezienie idealnej logiki<\/strong>, kt\u00f3ra im odpowiada. Chocia\u017c dobrze jest szuka\u0107 inspiracji w otwartych systemach projektowych, nale\u017cy pami\u0119ta\u0107, \u017ce to, co dzia\u0142a dla jednego produktu, niekoniecznie musi by\u0107 idealnym rozwi\u0105zaniem dla drugiego.<\/p>\n\n\n\nNie zamierzam zbytnio rozwodzi\u0107 si\u0119 nad nazewnictwem token\u00f3w, poniewa\u017c jest to obszerny temat, warty dog\u0142\u0119bnej eksploracji po rozpocz\u0119ciu przygody z budowaniem systemu token\u00f3w projektowych. Pozwol\u0119 sobie jednak podzieli\u0107 si\u0119 kilkoma og\u00f3lnymi dobrymi praktykami do rozwa\u017cenia podczas opracowywania systemu nazewnictwa token\u00f3w projektowych, kt\u00f3ry s\u0142u\u017cy\u0142by organizacji.<\/p>\n\n\n\n
Nazywanie token\u00f3w \u2013 dobre praktyki<\/strong><\/h3>\n\n\n\nNazwy token\u00f3w powinny przede wszystkim by\u0107:<\/p>\n\n\n\n
\n- jak najkr\u00f3tsze \u2013 aby nie komplikowa\u0107 nadmiernie systemu,<\/li>\n\n\n\n
- znacz\u0105ce \u2013 aby jasno komunikowa\u0107 decyzje projektowe,<\/li>\n\n\n\n
- \u0142atwe do zrozumienia \u2013 dla \u0142atwej orientacji i potencjalnego wdro\u017cenia do systemu,<\/li>\n\n\n\n
- modu\u0142owe \u2013 dla uproszczenia budowy systemu,<\/li>\n\n\n\n
- sp\u00f3jne \u2013 w celu w\u0142a\u015bciwego odzwierciedlenia systemu projektowego i u\u0142atwienia zrozumienia konwencji nazewnictwa.<\/li>\n<\/ul>\n\n\n\n
Podczas ustalania konwencji nazewnictwa dla token\u00f3w systemowych dobrym pocz\u0105tkiem b\u0119dzie budowanie nazw w odniesieniu do:<\/p>\n\n\n\n
\n- kategorii \u2013 atrybutu, do kt\u00f3rego odnosi si\u0119 token, np.: kolor, typografia, odst\u0119p, cie\u0144, promie\u0144 obramowania itp.,<\/li>\n\n\n\n
- koncepcji \u2013 sytuacji, kt\u00f3r\u0105 opisuje token, np.: informacja, ostrze\u017cenie, sukces itp.,<\/li>\n\n\n\n
- celu (w\u0142a\u015bciwo\u015bci) \u2013 gdzie w interfejsie u\u017cytkownika zostanie u\u017cyty token, np.: tekst, ikona, t\u0142o, obramowanie, nag\u0142\u00f3wek, tre\u015b\u0107 itp.,<\/li>\n\n\n\n
- wariantu \u2013 potencjalnych wariant\u00f3w tokena, np.: stany (aktywny, nieaktywny, wy\u0142\u0105czony), rozmiary (XL, L, M, S) itp,<\/li>\n\n\n\n
- komponentu (nale\u017cy unika\u0107, chyba \u017ce jest to nieodzowne) \u2013 komponent, na kt\u00f3ry b\u0119dzie mia\u0142 wp\u0142yw token, np. przycisk, pole wyboru, \u0142\u0105cze itp.<\/li>\n<\/ul>\n\n\n\n
Nazywanie token\u00f3w \u2013 przyk\u0142ady<\/strong><\/h3>\n\n\n\nTaka konwencja mog\u0142aby wygl\u0105da\u0107 nast\u0119puj\u0105co:<\/p>\n\n\n\n
kategoria.cel.wariant<\/strong><\/p>\n\n\n\nNa przyk\u0142ad:<\/p>\n\n\n\n
kolor.t\u0142o.aktywny<\/strong><\/p>\n\n\n\n(opisuj\u0105c decyzj\u0119 projektow\u0105 podj\u0119t\u0105 w celu przypisania okre\u015blonego koloru do t\u0142a aktywnych element\u00f3w interfejsu u\u017cytkownika)<\/p>\n\n\n\n
Nast\u0119pnie nale\u017cy skupi\u0107 si\u0119 na dostarczeniu jak najszerszego kontekstu<\/strong>. Mimo, \u017ce dobrze jest utrzymywa\u0107 jak najkr\u00f3tsze nazwy token\u00f3w, je\u015bli nazwa dobrze odzwierciedla decyzj\u0119 projektow\u0105, warto j\u0105 nieco wyd\u0142u\u017cy\u0107.<\/p>\n\n\n\nW ko\u0144cu tokeny projektowe nie s\u0105 elementami interfejsu u\u017cytkownika, kt\u00f3re widzieliby u\u017cytkownicy ko\u0144cowi, ale informacjami tekstowymi przechowywanymi w kodzie, na kt\u00f3rych operuj\u0105 programi\u015bci. Dlatego im wi\u0119cej kontekstu przekazuj\u0105, tym lepiej.<\/strong><\/p>\n\n\n\nKonwencje nazewnictwa token\u00f3w projektowych, szczeg\u00f3lnie w przypadku system\u00f3w projektowych obs\u0142uguj\u0105cych jednocze\u015bnie wiele marek, kt\u00f3re wymagaj\u0105 wielu motyw\u00f3w (wersji j\u0119zyka wizualnego, np.: okre\u015blonych kolor\u00f3w marki, typografii, ikonografii itp.), mog\u0105 zawiera\u0107 wiele poziom\u00f3w nazewnictwa.<\/p>\n\n\n\n
Na przyk\u0142ad, je\u015bli konieczne jest rozr\u00f3\u017cnienie token\u00f3w mi\u0119dzy markami w Twoim systemie projektowym, mo\u017ce by\u0107 konieczne wprowadzenie skr\u00f3t\u00f3w nazw ich produkt\u00f3w, kt\u00f3re mog\u0105 wygl\u0105da\u0107 nast\u0119puj\u0105co:<\/p>\n\n\n\n
marka<\/strong>.produkt.kolor.informacja.t\u0142o<\/strong><\/p>\n\n\n\nSkr\u00f3ty nazw marek lub produkt\u00f3w umo\u017cliwiaj\u0105 programistom rozr\u00f3\u017cnianie token\u00f3w w kodzie i wygodniejsze operowanie na nich.<\/p>\n\n\n\n
Mamy ju\u017c system \u2013 jak nim teraz zarz\u0105dza\u0107?<\/strong><\/h2>\n\n\n\nGdy znasz ju\u017c podstawy koncepcji token\u00f3w projektowych i konwencje nazewnictwa token\u00f3w, nadszed\u0142 czas, aby zaprezentowa\u0107, w jaki spos\u00f3b korzystanie z nich faktycznie usprawnia wsp\u00f3\u0142prac\u0119 projektowo-developersk\u0105.<\/p>\n\n\n\n
Dla por\u00f3wnania przedstawi\u0119 proces oddawania projekt\u00f3w do wdro\u017cenia w jego klasycznej formie, bez u\u017cycia token\u00f3w projektowych.<\/p>\n\n\n\n
Klasyczne wdro\u017cenie projekt\u00f3w<\/strong><\/h3>\n\n\n\nZazwyczaj wykonujemy nast\u0119puj\u0105ce kroki:<\/p>\n\n\n\n
\n- Projektant dostarcza projekt interfejsu u\u017cytkownika w programie Figma<\/a> (najpopularniejszym narz\u0119dziu do kolaboratywnego projektowania interfejs\u00f3w).<\/li>\n\n\n\n
- Projektant przygotowuje specyfikacj\u0119 interfejsu u\u017cytkownika (dokumentacj\u0119 projektow\u0105 z notatkami dla dewelopera).<\/li>\n\n\n\n
- Projektant przekazuje plik projektu i przeprowadza rozmow\u0119 z deweloperem\/zespo\u0142em programistycznym, kt\u00f3ry b\u0119dzie wdra\u017ca\u0142 projekt, aby om\u00f3wi\u0107 szczeg\u00f3\u0142y.<\/li>\n\n\n\n
- Programi\u015bci sprawdzaj\u0105 plik i rozpoczynaj\u0105 kodowanie.<\/li>\n<\/ol>\n\n\n\n
Na tym poziomie wydaje si\u0119 to do\u015b\u0107 proste, bior\u0105c pod uwag\u0119, \u017ce projekt nigdy si\u0119 nie zmieni. Projektowanie produktu polega jednak na jego ewolucji, a zmiany w projekcie s\u0105 nieuniknione. Dlatego powy\u017cszy proces nie ko\u0144czy si\u0119 na czwartym kroku.<\/p>\n\n\n\n
Z czasem, w miar\u0119 rozwoju marki, pojawia si\u0119 wi\u0119cej krok\u00f3w:<\/p>\n\n\n\n
\n- Powiedzmy, \u017ce wiod\u0105cy kolor marki uleg\u0142 zmianie i projektant musi zaktualizowa\u0107 projekt oraz poinformowa\u0107 o tym programist\u00f3w, aby mogli odpowiednio skorygowa\u0107 kod.<\/li>\n\n\n\n
- Zdarzaj\u0105 si\u0119 r\u00f3wnie\u017c sytuacje, w kt\u00f3rych programi\u015bci musz\u0105 zmieni\u0107 co\u015b w kodzie, wi\u0119c musz\u0105 poinformowa\u0107 o tym projektanta, aby zmiany te zosta\u0142y r\u00f3wnie\u017c odzwierciedlone w projekcie.<\/li>\n<\/ul>\n\n\n\n
Im wi\u0119cej krok\u00f3w i iteracji, tym wi\u0119cej miejsca na b\u0142\u0119dy i \u2013 b\u0105d\u017amy szczerzy \u2013 og\u00f3lnie, taka ilo\u015b\u0107 komunikacji tam i z powrotem dla jednej aktualizacji koloru to du\u017co, bior\u0105c pod uwag\u0119 codzienne obci\u0105\u017cenie prac\u0105.<\/p>\n\n\n\n![\"Klasyczny](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2024\/07\/image17.png\")
<\/a>Ryc. 17 Klasyczny proces oddawania projektu (schemat uproszczony)<\/a><\/figcaption><\/figure>\n\n\n\nChcemy, aby ten proces by\u0142 tak prosty i zautomatyzowany, jak to tylko mo\u017cliwe (jak na poni\u017cszym diagramie), aby zaoszcz\u0119dzi\u0107 cenny czas zar\u00f3wno zespo\u0142\u00f3w projektowych, jak i programistycznych.<\/p>\n\n\n\n![\"Ulepszony](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2024\/07\/image18.png\")
<\/a>Ryc. 18 Ulepszony proces oddawania projektu przy u\u017cyciu token\u00f3w (schemat uproszczony)<\/a><\/figcaption><\/figure>\n\n\n\nWprowadzenie token\u00f3w projektowych<\/strong><\/h2>\n\n\n\nW\u0142a\u015bnie dlatego wprowadzenie token\u00f3w projektowych do procesu projektowo-programistycznego jest prze\u0142omem<\/strong>. Pozw\u00f3l, \u017ce przeprowadz\u0119 Ci\u0119 przez zarz\u0105dzanie tokenami i to, jak mo\u017ce wygl\u0105da\u0107 proces przekazania projektu do in\u017cynier\u00f3w z ich wykorzystaniem.<\/p>\n\n\n\nZa\u0142\u00f3\u017cmy, \u017ce przeprowadzili\u015bmy ju\u017c burz\u0119 m\u00f3zg\u00f3w z programistami i wymy\u015blili\u015bmy najlepsz\u0105 konwencj\u0119 nazewnictwa, kt\u00f3ra s\u0142u\u017cy nam wszystkim, a system projektowy zosta\u0142 stokenizowany (decyzje projektowe, takie jak u\u017cycie kolor\u00f3w do okre\u015blonych cel\u00f3w, zosta\u0142y przet\u0142umaczone na tokeny), utrzymujemy teraz tokeny projektowe i zarz\u0105dzamy nimi w jednym miejscu (naszym pojedynczym \u017ar\u00f3dle prawdy).<\/p>\n\n\n\n
Mo\u017cna to zrobi\u0107 za pomoc\u0105 r\u00f3\u017cnych narz\u0119dzi i technologii, jednak wa\u017cne jest, aby wybra\u0107 te najlepiej pasuj\u0105ce do cyklu<\/strong> pracy <\/strong>zespo\u0142u oraz wymaga\u0144 i ogranicze\u0144 platformy docelowej<\/strong>.<\/p>\n\n\n\nPoniewa\u017c Figma jest naszym g\u0142\u00f3wnym narz\u0119dziem pracy, a projekty przekazujemy programistom r\u00f3wnie\u017c w postaci plik\u00f3w w Figmie, kluczowe dla optymalnego procesu pracy jest to, \u017ce dzia\u0142amy na tokenach projektowych w naszym rodzimym \u015brodowisku i \u017ce tokeny u\u017cywane w kodzie znajduj\u0105 r\u00f3wnie\u017c odzwierciedlenie w projektach, kt\u00f3re trafiaj\u0105 do programist\u00f3w.<\/p>\n\n\n\n
Tokeny w Figmie<\/strong><\/h3>\n\n\n\nW kwietniu 2024 w Figmie mo\u017cemy korzysta\u0107 z token\u00f3w na dwa sposoby.<\/p>\n\n\n\n
Patrz\u0105c na \u015bwiatowe organizacje, mo\u017cemy okre\u015bli\u0107 jedn\u0105 wsp\u00f3ln\u0105 cech\u0119 \u2013 branding. Rozwini\u0119ty na wy\u017cszym lub ni\u017cszym poziomie, jest to j\u0119zyk wizualny, kt\u00f3ry odr\u00f3\u017cnia jedn\u0105 firm\u0119 od drugiej, umo\u017cliwiaj\u0105cy komunikowanie si\u0119 z docelowymi odbiorcami w okre\u015blony spos\u00f3b.<\/p>\n\n\n\n
W dzisiejszych czasach, gdy bran\u017ce opieraj\u0105 si\u0119 na znacznie bardziej zr\u00f3\u017cnicowanych kana\u0142ach ni\u017c w przesz\u0142o\u015bci, bior\u0105c pod uwag\u0119 nie tylko media drukowane, ale tak\u017ce niezliczone urz\u0105dzenia wy\u015bwietlaj\u0105ce tre\u015bci na ekranach, systemy projektowe<\/strong>, czyli skodyfikowane j\u0119zyki marek, wspieraj\u0105 <\/strong>wszystkich zaanga\u017cowanych w proces tworzenia komunikacji<\/strong>, pomagaj\u0105c utrzyma\u0107 sp\u00f3jno\u015b\u0107 korzystania z identyfikacji wizualnej.<\/p>\n\n\n\n Mo\u017cna \u015bmia\u0142o powiedzie\u0107, \u017ce j\u0119zyk wizualny organizacji jest filarem jej komunikacji i kluczowym czynnikiem w budowaniu zaufania odbiorc\u00f3w.<\/p>\n\n\n\n Jak zareagowa\u0142by kto\u015b na mailing lub stron\u0119 internetow\u0105 instytucji, kt\u00f3rej powierza swoje \u015brodki, gdyby zobaczy\u0142 przestarza\u0142e logo lub kolory interfejsu niepasuj\u0105ce do wizualnego j\u0119zyka marki. Czy nie wydawa\u0142oby si\u0119 to dziwne i raczej podejrzane?<\/p>\n\n\n\n Aby zilustrowa\u0107 znaczenie mo\u017cliwo\u015bci zastosowania decyzji projektowych na du\u017c\u0105 skal\u0119, pos\u0142u\u017c\u0119 si\u0119 histori\u0105, kt\u00f3rej u\u017cy\u0142 Louis Chenais<\/a>.<\/p>\n\n\n\n Wyobra\u017amy sobie, \u017ce jeste\u015b projektantem\/-k\u0105 w du\u017cej korporacji. Jako szef\/-owa dzia\u0142u projektowego, masz proste zadanie od\u015bwie\u017cenia wizerunku marki<\/strong> \u2013 zaktualizowa\u0107 jej g\u0142\u00f3wny kolor, zmieniaj\u0105c go na nowy.<\/p>\n\n\n\n Rebranding zosta\u0142 sfinalizowany, a Ty musisz go \u201etylko\u201d zaimplementowa\u0107 w interfejsach wszystkich produkt\u00f3w korporacji, kt\u00f3re obejmuj\u0105:<\/p>\n\n\n\n \u201eNic wielkiego\u201d, my\u015blisz, podekscytowany\/-a osi\u0105gni\u0119ciem celu i prosisz kierownik\u00f3w odpowiednich zespo\u0142\u00f3w in\u017cynieryjnych, odpowiedzialnych za ka\u017cdy produkt, aby zaktualizowali kolor z X (stary) na Y (nowy), dostarczaj\u0105c im warto\u015bci RGB (przestrze\u0144 kolor\u00f3w).<\/p>\n\n\n\n W tym momencie zaczynaj\u0105 si\u0119 schody<\/strong>. Nap\u0142ywaj\u0105 pytania o inne formaty kolor\u00f3w, dzia\u0142aj\u0105ce na r\u00f3\u017cnych platformach, ludzie pr\u00f3buj\u0105 ustali\u0107, czy aktualizacja powinna mie\u0107 wp\u0142yw na wszystkie komponenty interfejsu u\u017cytkownika. Niekt\u00f3rzy mened\u017cerowie s\u0105 nieresponsywni, co sprawia, \u017ce wdro\u017cenie aktualizacji w ich obszarach jest w\u0105tpliwe.<\/p>\n\n\n\n Zapewnienie prawid\u0142owego zastosowania tej jednej zmiany okazuje si\u0119 trudnym wyzwaniem bez wsp\u00f3lnego \u201ej\u0119zyka projektowania\u201d, kt\u00f3rego mogliby u\u017cywa\u0107 zar\u00f3wno projektanci, jak i programi\u015bci.<\/p>\n\n\n\n Kiedy\u015b du\u017ce organizacje marnowa\u0142y miesi\u0105ce na wdra\u017canie zmian w identyfikacji wizualnej<\/strong> swoich produkt\u00f3w cyfrowych, co teraz, pod warunkiem, \u017ce produkty s\u0105 oparte na tokenach projektowych, zajmuje kilka minut.<\/strong><\/p>\n\n\n\n Jaki jest zatem problem biznesowy, kt\u00f3ry rozwi\u0105zuj\u0105 tokeny projektowe? Kr\u00f3tko m\u00f3wi\u0105c: wdro\u017cenie token\u00f3w projektowych oszcz\u0119dza pieni\u0105dze Twojej organizacji<\/strong>, poniewa\u017c nie potrzebujesz ju\u017c miesi\u0119cy i cz\u0119sto setek ludzi, aby wdra\u017ca\u0107 proste decyzje projektowe do kodu na r\u00f3\u017cnych platformach. Nie ryzykujesz niesp\u00f3jno\u015bci negatywnie wp\u0142ywaj\u0105ce na wizerunek Twojej marki.<\/p>\n\n\n\n Cofnijmy si\u0119 o krok do narodzin koncepcji token\u00f3w projektowych w Salesforce oko\u0142o 2015 roku. Jina Anne w zespole ds. system\u00f3w projektowych, w towarzystwie Jona Levine’a po stronie in\u017cynieryjnej, koordynowa\u0142a koncepcyjne, agnostyczne rozwi\u0105zanie \u2013 definicj\u0119 projektow\u0105 zlokalizowan\u0105 w jednym miejscu (\u201eJedno \u017ar\u00f3d\u0142o prawdy\u201d) propagowan\u0105 na wszystkie platformy \u2013 tworz\u0105c termin \u201etokeny projektowe\u201d.<\/p>\n\n\n\n Tokeny projektowe<\/strong> s\u0105 nazwami u\u017cywanymi w charakterze no\u015bnik\u00f3w decyzji projektowych, takich jak:<\/p>\n\n\n\n w j\u0119zyku projektowym organizacji. Aby by\u0142y u\u017cywane i rozumiane przez wszystkich, nazwy te powinny by\u0107 wynikiem wsp\u00f3lnych decyzji podejmowanych przez projektant\u00f3w i programist\u00f3w<\/strong> z uwzgl\u0119dnieniem przebiegu pracy zespo\u0142\u00f3w.<\/p>\n\n\n\n Tokeny projektowe mo\u017cemy opisa\u0107 jako:<\/p>\n\n\n\n (…) wizualne atomy systemu projektowego \u2013 w szczeg\u00f3lno\u015bci s\u0105 to nazwane jednostki, kt\u00f3re przechowuj\u0105 atrybuty projektu wizualnego<\/em><\/p>\nSalesforce Lightning Design System<\/cite><\/blockquote>\n\n\n\n Je\u015bli nie jeste\u015b zaznajomiony\/-a z Metodologi\u0105 Atomic Design, poni\u017csza ilustracja przedstawia koncepcj\u0119 na przyk\u0142adzie fragmentu interfejsu Instagrama, rozbitego z ca\u0142ej strony na rzeczywiste atomy, umieszczaj\u0105c tokeny projektowe jako cz\u0105stki subatomowe, czyli warto\u015bci, z kt\u00f3rych sk\u0142adaj\u0105 si\u0119 atomy.<\/p>\n\n\n\n Tokeny projektowe s\u0105 j\u0119zykiem s\u0142u\u017c\u0105cym do przekazywania intencji mi\u0119dzy r\u00f3\u017cnymi cz\u0119\u015bciami systemu<\/em>.<\/p>\nEthan Marcotte, „Design-ish systems<\/a>„<\/cite><\/blockquote>\n\n\n\n Aby lepiej zilustrowa\u0107 t\u0119 koncepcj\u0119, pos\u0142u\u017c\u0119 si\u0119 metafor\u0105. Wyobra\u017a sobie, \u017ce masz psa. Tw\u00f3j pies ma na imi\u0119 \u201eCharlie\u201d, ale w zale\u017cno\u015bci od okoliczno\u015bci nazywasz go r\u00f3wnie\u017c \u201eMa\u0142ym \u0141obuzem\u201d (ang. Little Rascal) i \u201eMuffink\u0105\u201d (ang. Muffin).<\/p>\n\n\n\n Niezale\u017cnie od tego, jak nazwiesz swojego psa, to wci\u0105\u017c ten sam zwierzak (wbrew temu, co mo\u017cesz my\u015ble\u0107, gdy w\u0142a\u015bnie zniszczy\u0142 tw\u00f3j ulubiony mebel). Tokeny projektowe dzia\u0142aj\u0105 tak samo. Zamiast u\u017cywa\u0107 na sta\u0142e zakodowanych warto\u015bci \u2013 takich jak hex dla koloru, piksele dla odst\u0119pu itp. \u2013 warto\u015bci te mo\u017cesz nazwa\u0107<\/strong>. To jak nadawanie pseudonim\u00f3w decyzjom projektowym. Sp\u00f3jrzmy na poni\u017csz\u0105 analogi\u0119 na przyk\u0142adzie kolor\u00f3w.<\/p>\n\n\n\n Tokeny projektowe s\u0105 przeznaczone do wykorzystania w systemie projektowym oraz w przekroju Twoich produkt\u00f3w. Aby to umo\u017cliwi\u0107, musisz przekszta\u0142ci\u0107 je do u\u017cytku na r\u00f3\u017cnych platformach (Web, iOS lub Android) przez r\u00f3\u017cne zespo\u0142y.<\/p>\n\n\n\n Je\u015bli chcemy zapewni\u0107 pomy\u015bln\u0105 adaptacj\u0119 token\u00f3w projektowych w wielu aplikacjach, potrzebujemy standardu zapewniaj\u0105cego sp\u00f3jno\u015b\u0107. Konsorcjum World Wide Web (W3C), kierowane przez Tima Bernersa-Lee i Jeffreya Jaffe, we wsp\u00f3\u0142pracy z wieloma organizacjami i pojedynczymi osobami, pracuje nad zapewnieniem standardu \u201eW3C Design Tokens Standard\u201d.<\/p>\n\n\n\n Pozwoli\u0142oby to r\u00f3\u017cnym narz\u0119dziom komunikowa\u0107 si\u0119 w tym samym \u201ej\u0119zyku\u201d, na przyk\u0142ad umo\u017cliwiaj\u0105c pobieranie token\u00f3w z Figmy i u\u017cywanie ich w Adobe Illustrator. Wyobra\u017a sobie, jak przyspieszy\u0142oby to przep\u0142yw pracy mi\u0119dzy dzia\u0142ami marketingu i projektowania produktu!<\/p>\n\n\n\n Aby dowiedzie\u0107 si\u0119 wi\u0119cej na temat standardu, zapoznaj si\u0119 z oficjaln\u0105 grup\u0105 Spo\u0142eczno\u015bci Design Tokens Community Group<\/a> oraz W3C Design Tokens Community Group<\/a>.<\/p>\n\n\n\n Teraz, gdy om\u00f3wi\u0142am absolutne podstawy koncepcji token\u00f3w projektowych, p\u00f3jd\u017amy dalej i zag\u0142\u0119bmy si\u0119 nieco bardziej w r\u00f3\u017cne rodzaje token\u00f3w i spos\u00f3b, w jaki s\u0142u\u017c\u0105 nam one do tworzenia projekt\u00f3w.<\/p>\n\n\n\n Ka\u017cdy produkt cyfrowy jest struktur\u0105 funkcji, kt\u00f3re sk\u0142adaj\u0105 si\u0119 z interfejs\u00f3w. Ka\u017cdy interfejs jest zbudowany z komponent\u00f3w, skomponowanych z token\u00f3w projektowych.<\/p>\n\n\n\n Roz\u0142\u00f3\u017cmy na cz\u0119\u015bci komponent przycisku. Mo\u017cesz zobaczy\u0107 wszystkie elementy, kt\u00f3re przet\u0142umaczyliby\u015bmy na tokeny projektowe.<\/p>\n\n\n\n Oto kilka przyk\u0142ad\u00f3w typowych token\u00f3w projektowych u\u017cywanych w standardowych systemach projektowych, z kt\u00f3rymi mo\u017cna si\u0119 spotka\u0107:<\/p>\n\n\n\n Tokeny dzielimy na trzy kategorie (typy). Ka\u017cdy typ tokena oznacza poziom przypisanego kontekstu.<\/p>\n\n\n\n Tokeny poziomu 1 (globalne) <\/strong>\u2013 <\/strong>warto\u015bci prymitywne <\/strong>\u2013 s\u0105 podstawowymi, bezkontekstowymi jednostkami systemu token\u00f3w projektowych.<\/p>\n\n\n\n Niezale\u017cnie od tego, czy zajmujesz si\u0119 projektowaniem, programowaniem, czy kierujesz projektem, prawdopodobnie pracujesz z kolorami marki swojej organizacji. Istnieje du\u017ce prawdopodobie\u0144stwo, \u017ce w komunikacji pos\u0142ugujesz si\u0119 warto\u015bciami hex (szesnastkowymi) lub innymi, odpowiadaj\u0105cymi tym kolorom.<\/p>\n\n\n\n Dlaczego nie jest to najwygodniejsze rozwi\u0105zanie<\/strong>? Zobaczmy:<\/p>\n\n\n\n Globalne tokeny <\/strong>to nazwy nadawane na przyk\u0142ad warto\u015bciom hex, aby zapewni\u0107 bazowy, sp\u00f3jny i pozbawiony kontekstu opis tych warto\u015bci, kt\u00f3ry by\u0142by zrozumia\u0142y dla ka\u017cdego, kto z nimi pracuje. Pozwala to na unikni\u0119cie sytuacji \u201epi\u0119\u0107dziesi\u0119ciu odcieni szaro\u015bci\u201d \u2013 przypadkowego u\u017cywania kilku odcieni danego koloru Twojej marki, wyst\u0119puj\u0105cego w produkcie.<\/p>\n\n\n\n Zgodnie z powy\u017cszym schematem, nazwanie warto\u015bci hex „color.blue.600” zamiast u\u017cycia warto\u015bci hex, przynosi korzy\u015bci na kilka sposob\u00f3w:<\/p>\n\n\n\n Pomimo oczywistych zalet<\/strong> korzystania z token\u00f3w globalnych, nadal nie jest to idealne rozwi\u0105zanie<\/strong> i poleganie tylko na tego typu tokenach nie przekazuje informacji o zamierzonych wariantach u\u017cycia koloru, ani nie pozwala na zautomatyzowane, wybi\u00f3rcze zmiany kolor\u00f3w, wp\u0142ywaj\u0105ce tylko na okre\u015blone grupy komponent\u00f3w. Celem tego zesp\u00f3\u0142 programist\u00f3w musia\u0142by szuka\u0107 odpowiednich przypadk\u00f3w u\u017cycia i r\u0119cznie zmienia\u0107 kolor. Co za strata czasu, prawda?<\/p>\n\n\n\n Oto zatem kolejny typ tokena projektowego. Tokeny typu drugiego (aliasowe lub systemowe) <\/strong>\u2013 nazwy specyficzne dla kontekstu, odnosz\u0105ce si\u0119 do decyzji projektowych stoj\u0105cych za warto\u015bciami (co one \u201erobi\u0105\u201d).<\/p>\n\n\n\n #0E6EE0, teraz okre\u015blany jako „color.blue.600”, b\u0119dzie r\u00f3wnie\u017c istnia\u0142 w systemie pod r\u00f3\u017cnymi aliasami, przedstawiaj\u0105cymi przypadki u\u017cycia. Na przyk\u0142ad jako \u201ecolor.interactive.primary.background\u201d, co oznacza\u0142oby, \u017ce ten kolor ma by\u0107 u\u017cywany jako t\u0142o pierwszorz\u0119dnych, interaktywnych element\u00f3w interfejsu u\u017cytkownika.<\/p>\n\n\n\n Jak wida\u0107 na powy\u017cszym przyk\u0142adzie, w przypadku jakiejkolwiek zmiany koloru, operacja ta pozwoli\u0142aby wp\u0142yn\u0105\u0107 tylko na t\u0142a g\u0142\u00f3wnych interaktywnych element\u00f3w interfejsu, wykluczaj\u0105c te bez niebieskiego t\u0142a.<\/p>\n\n\n\n Wprowadzenie token\u00f3w systemowych do kodu wp\u0142ywa pozytywnie na<\/strong>:<\/p>\n\n\n\n Kiedy zatem si\u0119gn\u0105\u0107 po tokeny systemowe?<\/strong><\/p>\n\n\n\n Przyk\u0142ad:<\/p>\n\n\n\n Oczywi\u015bcie, korzystanie z token\u00f3w systemowych wi\u0105\u017ce si\u0119 z odpowiedzialno\u015bci\u0105 za utrzymanie wi\u0119kszego zestawu kolor\u00f3w<\/strong> i wymaga dok\u0142adnego, przemy\u015blanego planowania systemu, jednak w d\u0142u\u017cszej perspektywie korzy\u015bci okazuj\u0105 si\u0119 warte dodatkowego wysi\u0142ku.<\/p>\n\n\n\n Zdarzaj\u0105 si\u0119 przypadki<\/strong>, w kt\u00f3rych nie zaleca si\u0119 polegania na tokenach systemowych<\/strong> \u2013 na przyk\u0142ad, je\u015bli istnieje kolor, kt\u00f3rego potrzebujesz u\u017cy\u0107 w swoim produkcie, ale nie jest on cz\u0119\u015bci\u0105 j\u0119zyka wizualnego marki lub zostanie u\u017cyty tylko raz lub dla jednego konkretnego elementu interfejsu u\u017cytkownika, na kt\u00f3ry nie powinny mie\u0107 wp\u0142ywu globalne zmiany decyzji projektowych.<\/p>\n\n\n\n Do unikalnych element\u00f3w interfejsu u\u017cytkownika nale\u017ca\u0142oby u\u017cy\u0107 token\u00f3w trzeciego typu (specyficznych dla komponent\u00f3w) <\/strong>\u2013 dedykowanych odr\u0119bnym komponentom i ich w\u0142a\u015bciwo\u015bciom.<\/p>\n\n\n\n Wszystkie powy\u017csze nazwy (tokeny projektowe) oznaczaj\u0105 t\u0119 sam\u0105 warto\u015b\u0107 szesnastkow\u0105, ale w innym kontek\u015bcie lub w odniesieniu do innego komponentu systemu projektowego \u2013 gdy zastosujesz tokeny specyficzne dla komponentu, wszelkie mo\u017cliwe zmiany decyzji projektowych (np.: aktualizacje kolor\u00f3w) b\u0119d\u0105 mia\u0142y wp\u0142yw tylko na ten komponent<\/strong> i w\u0142a\u015bciwo\u015b\u0107, do kt\u00f3rej odnosi si\u0119 token. W naszym przypadku b\u0119dzie to tylko kolor t\u0142a przycisku g\u0142\u00f3wnego w stanie domy\u015blnym.<\/p>\n\n\n\n Poni\u017cszy diagram, gdzie zamieniam kolor niebieski na r\u00f3\u017cowy, pokazuje, w jaki spos\u00f3b tokeny pozwalaj\u0105 na sprecyzowanie zakresu modyfikacji decyzji projektowych. Mo\u017cesz zastosowa\u0107 konkretn\u0105 zmian\u0119 (np.: koloru) do wybranych token\u00f3w, wp\u0142ywaj\u0105c tylko na okre\u015blone elementy interfejsu u\u017cytkownika.<\/p>\n\n\n\n Nie powiem Ci dok\u0142adnie, jaka jest zalecana konwencja nazewnictwa podczas tworzenia systemu token\u00f3w dla Twojego produktu, poniewa\u017c powinna by\u0107 ona dostosowana do specyfiki produktu i preferencji zespo\u0142u. Ustalanie nazewnictwa wymaga czasu, poniewa\u017c zespo\u0142y musz\u0105 zaanga\u017cowa\u0107 si\u0119 w znalezienie idealnej logiki<\/strong>, kt\u00f3ra im odpowiada. Chocia\u017c dobrze jest szuka\u0107 inspiracji w otwartych systemach projektowych, nale\u017cy pami\u0119ta\u0107, \u017ce to, co dzia\u0142a dla jednego produktu, niekoniecznie musi by\u0107 idealnym rozwi\u0105zaniem dla drugiego.<\/p>\n\n\n\n Nie zamierzam zbytnio rozwodzi\u0107 si\u0119 nad nazewnictwem token\u00f3w, poniewa\u017c jest to obszerny temat, warty dog\u0142\u0119bnej eksploracji po rozpocz\u0119ciu przygody z budowaniem systemu token\u00f3w projektowych. Pozwol\u0119 sobie jednak podzieli\u0107 si\u0119 kilkoma og\u00f3lnymi dobrymi praktykami do rozwa\u017cenia podczas opracowywania systemu nazewnictwa token\u00f3w projektowych, kt\u00f3ry s\u0142u\u017cy\u0142by organizacji.<\/p>\n\n\n\n Nazwy token\u00f3w powinny przede wszystkim by\u0107:<\/p>\n\n\n\n Podczas ustalania konwencji nazewnictwa dla token\u00f3w systemowych dobrym pocz\u0105tkiem b\u0119dzie budowanie nazw w odniesieniu do:<\/p>\n\n\n\n Taka konwencja mog\u0142aby wygl\u0105da\u0107 nast\u0119puj\u0105co:<\/p>\n\n\n\n kategoria.cel.wariant<\/strong><\/p>\n\n\n\n Na przyk\u0142ad:<\/p>\n\n\n\n kolor.t\u0142o.aktywny<\/strong><\/p>\n\n\n\n (opisuj\u0105c decyzj\u0119 projektow\u0105 podj\u0119t\u0105 w celu przypisania okre\u015blonego koloru do t\u0142a aktywnych element\u00f3w interfejsu u\u017cytkownika)<\/p>\n\n\n\n Nast\u0119pnie nale\u017cy skupi\u0107 si\u0119 na dostarczeniu jak najszerszego kontekstu<\/strong>. Mimo, \u017ce dobrze jest utrzymywa\u0107 jak najkr\u00f3tsze nazwy token\u00f3w, je\u015bli nazwa dobrze odzwierciedla decyzj\u0119 projektow\u0105, warto j\u0105 nieco wyd\u0142u\u017cy\u0107.<\/p>\n\n\n\n W ko\u0144cu tokeny projektowe nie s\u0105 elementami interfejsu u\u017cytkownika, kt\u00f3re widzieliby u\u017cytkownicy ko\u0144cowi, ale informacjami tekstowymi przechowywanymi w kodzie, na kt\u00f3rych operuj\u0105 programi\u015bci. Dlatego im wi\u0119cej kontekstu przekazuj\u0105, tym lepiej.<\/strong><\/p>\n\n\n\n Konwencje nazewnictwa token\u00f3w projektowych, szczeg\u00f3lnie w przypadku system\u00f3w projektowych obs\u0142uguj\u0105cych jednocze\u015bnie wiele marek, kt\u00f3re wymagaj\u0105 wielu motyw\u00f3w (wersji j\u0119zyka wizualnego, np.: okre\u015blonych kolor\u00f3w marki, typografii, ikonografii itp.), mog\u0105 zawiera\u0107 wiele poziom\u00f3w nazewnictwa.<\/p>\n\n\n\n Na przyk\u0142ad, je\u015bli konieczne jest rozr\u00f3\u017cnienie token\u00f3w mi\u0119dzy markami w Twoim systemie projektowym, mo\u017ce by\u0107 konieczne wprowadzenie skr\u00f3t\u00f3w nazw ich produkt\u00f3w, kt\u00f3re mog\u0105 wygl\u0105da\u0107 nast\u0119puj\u0105co:<\/p>\n\n\n\n marka<\/strong>.produkt.kolor.informacja.t\u0142o<\/strong><\/p>\n\n\n\n Skr\u00f3ty nazw marek lub produkt\u00f3w umo\u017cliwiaj\u0105 programistom rozr\u00f3\u017cnianie token\u00f3w w kodzie i wygodniejsze operowanie na nich.<\/p>\n\n\n\n Gdy znasz ju\u017c podstawy koncepcji token\u00f3w projektowych i konwencje nazewnictwa token\u00f3w, nadszed\u0142 czas, aby zaprezentowa\u0107, w jaki spos\u00f3b korzystanie z nich faktycznie usprawnia wsp\u00f3\u0142prac\u0119 projektowo-developersk\u0105.<\/p>\n\n\n\n Dla por\u00f3wnania przedstawi\u0119 proces oddawania projekt\u00f3w do wdro\u017cenia w jego klasycznej formie, bez u\u017cycia token\u00f3w projektowych.<\/p>\n\n\n\n Zazwyczaj wykonujemy nast\u0119puj\u0105ce kroki:<\/p>\n\n\n\n Na tym poziomie wydaje si\u0119 to do\u015b\u0107 proste, bior\u0105c pod uwag\u0119, \u017ce projekt nigdy si\u0119 nie zmieni. Projektowanie produktu polega jednak na jego ewolucji, a zmiany w projekcie s\u0105 nieuniknione. Dlatego powy\u017cszy proces nie ko\u0144czy si\u0119 na czwartym kroku.<\/p>\n\n\n\n Z czasem, w miar\u0119 rozwoju marki, pojawia si\u0119 wi\u0119cej krok\u00f3w:<\/p>\n\n\n\n Im wi\u0119cej krok\u00f3w i iteracji, tym wi\u0119cej miejsca na b\u0142\u0119dy i \u2013 b\u0105d\u017amy szczerzy \u2013 og\u00f3lnie, taka ilo\u015b\u0107 komunikacji tam i z powrotem dla jednej aktualizacji koloru to du\u017co, bior\u0105c pod uwag\u0119 codzienne obci\u0105\u017cenie prac\u0105.<\/p>\n\n\n\n Chcemy, aby ten proces by\u0142 tak prosty i zautomatyzowany, jak to tylko mo\u017cliwe (jak na poni\u017cszym diagramie), aby zaoszcz\u0119dzi\u0107 cenny czas zar\u00f3wno zespo\u0142\u00f3w projektowych, jak i programistycznych.<\/p>\n\n\n\n W\u0142a\u015bnie dlatego wprowadzenie token\u00f3w projektowych do procesu projektowo-programistycznego jest prze\u0142omem<\/strong>. Pozw\u00f3l, \u017ce przeprowadz\u0119 Ci\u0119 przez zarz\u0105dzanie tokenami i to, jak mo\u017ce wygl\u0105da\u0107 proces przekazania projektu do in\u017cynier\u00f3w z ich wykorzystaniem.<\/p>\n\n\n\n Za\u0142\u00f3\u017cmy, \u017ce przeprowadzili\u015bmy ju\u017c burz\u0119 m\u00f3zg\u00f3w z programistami i wymy\u015blili\u015bmy najlepsz\u0105 konwencj\u0119 nazewnictwa, kt\u00f3ra s\u0142u\u017cy nam wszystkim, a system projektowy zosta\u0142 stokenizowany (decyzje projektowe, takie jak u\u017cycie kolor\u00f3w do okre\u015blonych cel\u00f3w, zosta\u0142y przet\u0142umaczone na tokeny), utrzymujemy teraz tokeny projektowe i zarz\u0105dzamy nimi w jednym miejscu (naszym pojedynczym \u017ar\u00f3dle prawdy).<\/p>\n\n\n\n Mo\u017cna to zrobi\u0107 za pomoc\u0105 r\u00f3\u017cnych narz\u0119dzi i technologii, jednak wa\u017cne jest, aby wybra\u0107 te najlepiej pasuj\u0105ce do cyklu<\/strong> pracy <\/strong>zespo\u0142u oraz wymaga\u0144 i ogranicze\u0144 platformy docelowej<\/strong>.<\/p>\n\n\n\n Poniewa\u017c Figma jest naszym g\u0142\u00f3wnym narz\u0119dziem pracy, a projekty przekazujemy programistom r\u00f3wnie\u017c w postaci plik\u00f3w w Figmie, kluczowe dla optymalnego procesu pracy jest to, \u017ce dzia\u0142amy na tokenach projektowych w naszym rodzimym \u015brodowisku i \u017ce tokeny u\u017cywane w kodzie znajduj\u0105 r\u00f3wnie\u017c odzwierciedlenie w projektach, kt\u00f3re trafiaj\u0105 do programist\u00f3w.<\/p>\n\n\n\n W kwietniu 2024 w Figmie mo\u017cemy korzysta\u0107 z token\u00f3w na dwa sposoby.<\/p>\n\n\n\nPrzyjrzyjmy si\u0119 tokenom na przyk\u0142adzie<\/strong><\/h3>\n\n\n\n
\n
Jaki problem biznesowy rozwi\u0105zuj\u0105 zatem tokeny?<\/strong><\/h3>\n\n\n\n
Okej, tokeny projektowe\u2026 czyli?<\/strong><\/h2>\n\n\n\n
\n
\n
<\/a>\n
A ja\u015bniej?<\/strong><\/h3>\n\n\n\n
<\/a><\/a><\/a>W3C Design Tokens Standard<\/strong><\/h3>\n\n\n\n
Jak budujemy za pomoc\u0105 token\u00f3w projektowych?<\/strong><\/h2>\n\n\n\n
<\/a><\/a>Przyk\u0142ady token\u00f3w<\/strong><\/h2>\n\n\n\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
Kategorie token\u00f3w<\/strong><\/h2>\n\n\n\n
<\/a>Tokeny globalne<\/strong><\/h3>\n\n\n\n
<\/a>\n
<\/a>\n
<\/a>Tokeny aliasowe<\/strong><\/h3>\n\n\n\n
<\/a>\n
<\/a>\n
<\/a>Tokeny specyficzne dla komponent\u00f3w<\/strong><\/h3>\n\n\n\n
<\/a><\/a><\/a>No dobrze, ale jak wymy\u015blamy nazwy token\u00f3w?<\/strong><\/h2>\n\n\n\n
Nazywanie token\u00f3w \u2013 dobre praktyki<\/strong><\/h3>\n\n\n\n
\n
\n
Nazywanie token\u00f3w \u2013 przyk\u0142ady<\/strong><\/h3>\n\n\n\n
Mamy ju\u017c system \u2013 jak nim teraz zarz\u0105dza\u0107?<\/strong><\/h2>\n\n\n\n
Klasyczne wdro\u017cenie projekt\u00f3w<\/strong><\/h3>\n\n\n\n
\n
\n
<\/a><\/a>Wprowadzenie token\u00f3w projektowych<\/strong><\/h2>\n\n\n\n
Tokeny w Figmie<\/strong><\/h3>\n\n\n\n