Dizayn sistemlərində Tokenlər 🫧
Dizayn sistemləri haqqında olan bloqlar seriyamın 3-cü hissəsi ilə sizi yenidən Salamlayıram. Bu bloqda dizayn sistemlərində tokenlər haqqında danışacağıq.
Bu seriyaya aid olan digər bloqların linkləri:
Atomic Dizayn ⚛
.base componentlər 💠
Dizayn sistemlərində rənglər 🌈
Dizayn tokenləri nədir?
Dizayn tokenləri, bütün dizayn sistemi boyunca kiçik və təkrarlana bilən elementlər üçün adlandırma və uyğunlaşdırmadır. Bu elementlərə rənglər, şriftlər, ara məsafələri, ölçüləndirmə və s. aiddir. Sadə misal üzərindən getsək, dizaynda tokenlər hex kodlar ilə ifadə olunan rəngləri, özünü izah edən adlarla əvəz edir. (Şəkil 1)
Şəkil 1-dən də göründüyü kimi tokenlər koda bənzər adlandırma ilə yazılırlar. Bu isə öz növbəsində dizayner və developerin bu tokenləri rahatlıqla oxumasına və müxtəlif yerlərdə uyğun elementlərin daha dəqiq istifadəsinə şərait yaradır.
Bəs bu tokenlər niyə vacibdir?
Tokenlər dizayn sistemlərində hərkəsin etibar edə biləcəyi, istifadə edərkən güvənə biləcəyi bir yer yaradır. Yəni developerlərdə, dizaynerlərdə rahatlıqla buradan istifadə edə bilərlər. Bundan əlavə tokenlər sistemdə elementlərin yenilənməsi və bütün sistem boyu bir nöqtədən dəyişdirilməsinə imkan yaradır. Bir növ .base componentlər -in stillər üçün olan variantı kimi düşünə bilərik. 🌝
Dizaynda token tipləri
Müxtəlif sistemlərdə müxtəlif növ tokenlərdən istifadə oluna bilər. Bunlar əsasən dizaynerin özündən və dizayn sisteminin istifadə olunacağı sahələrdən aslıdır. Bunun əsasında tokenlər 2 əsas tipə bölünür:
1 — Global tokens (Choice tokens)
2— Component-specific tokens (Decision tokens)
Global tokens (Choice tokens) —bunlara ümumi istifadə üçün hazırlanmış tokenlər aiddir və əsasən rənglər, şrift ölçüsü, paddinglər və s. aid olur.
Global tokenlərə misal (Şəkil 2)
Component-specific tokens (Decision tokens) — bu tokenlər xüsusi məqsədlər üçün istifadə olunan tokenlərdir. Misal üçün:
color.button.accent.default
Burada:
color - rəng olmasını
button - hansı komponentə aid olmasını
accent - hansı rəng olmasını
default - hansı state'də olmasını göstərirAşağıdakı nümunədə (Şəkil 3) Global token (neutral-700) və Component-specific token-lərinin istifadəsi göstərilmişdir
Tokenlərdən istifadə
Əgər tokenlərdən istifadə ediriksə onları kontentə uyğun olaraq istifadə etməliyik. Əks halda gələcəkdə yeniləmələr zamanı və ya öngörülə bilməyən digər hallarda bizə problem yarada bilər.
Bir misal ✨
Fərz edək ki, komandanızda development işini outsoruce developerlər görürlər, bütün iş bu yolla aparılır. Bir müddət sonra isə qərar alınır və yeni bir development komandası yığılmasına qərar verilir. Bu təqdirdə daxilə yeni gələn developerlər dizayn sistemindən necə istifadə edəcək?
Variant 1: Dizayn tokenləri yoxdur 🥹
Bu halda yeni gələn developerlərə köhnə developerlər təlimlər keçməli, dizaynerlər onlara dizayn sistemini izah etməli və bundan sonra layihə üzərində işlənməyə başlanmalıdır. Və əgər bir dizayn sistemindən bir neçə layihədə istifadə olunursa, bu da özlüyündə əlavə bir problem və iş yükü çıxarır.
Variant 2: Tokenlərimiz var 🫦
Bu zaman sadəcə yeni developerlərə tokenlərin izahı (adlandırmanın strukturu) edilir və developerlər rahatlıqla yeni işlərinə başlaya bilirlər.
Son olaraq…
Məlumatları ümumiləşdirsək, dizayn tokenləri dizayn sistemlərinin bütün komandada (istər developer, istər dizayner) rahatlıqla istifadə olunması, yeniləmələrin sürətli və rahat olması, dizayn sisteminin birdən çox layihəyə rahatlıqla inteqrasiyası və s. üçün ideal vasitədir. Təbii ki, hər kəs tokenlərdən istifadə etməli deyil, bunu komandanızla danışaraq ortaq razılığa gəldiyiniz təqdirdə edə bilərsiz. 🏄🏻♀️
Gününüzün xoş keçməsi diləyi ilə, növbəti bloqlarda görüşənədək 💜
Bütün visuallar tərəfimdən hazırlanmışdır və istifadə zamanı bildirilməsi mütləqdir.
Və bura qədər gəldinizsə, bu musiqidə məndən sizə hədiyyə ❤️🔥
https://open.spotify.com/track/6b0GBFyOJ7V15bzdUnoxiC?si=b53822b6b3fd42e7
