Од Figma до frontend: поедноставете ја вашата B2B веб-продавница со Design Tokens

Во вашата дефиниција на токен користите голем број нивоа за да ги доловите тие бои. Токените често се класифицираат во три категории:

1. Глобални токени
   Ова се најосновните вредности, обично базирани на универзална скала. Тие не се специфични за контекстот и можат да се користат насекаде во дизајнот. (blue-700)

2. Алијас токени
   Токените за алијас се однесуваат на специфичен контекст или функција во рамките на интерфејсот. Тие ги мапираат глобалните вредности на значајна улога. (cta-bg-color)

3. Токени специфични за компонентите
   Овие токени се уште поспецифични и се применуваат само во рамките на одредена компонента. Тие јасно ставаат до знаење дека токенот се користи само за таа компонента и честопати даваат име што ја означува неговата функција во рамките на таа компонента.копче-cta-боја-на-позадина)

   Совет: Следејќи ја оваа хиерархија, лесно можете да менувате токени на едно место (на пример, глобално или алијас ниво) и тоа автоматски ќе се прошири надолу кон сите компоненти што зависат од него.

Атомски дизајн и токени за дизајн

Дизајнерските токени совршено се вклопуваат во принципот на Атомски дизајн, каде што интерфејсот е изграден од мали, повеќекратно употребливи компоненти. Оваа комбинација го прави дизајнирањето и развојот на конзистентни интерфејси многу потранспарентно.

Атоми
Ова се најмалите градежни блокови, како што се HTML елементи, бои или фонтови. Тие имаат ограничено значење сами по себе, но ја формираат основата за посложени компоненти.
Примери: , , , сино-700, големина-на-фонт-14.

Молекули
Молекулите се создаваат со комбинирање на атоми во мала функционална единица. Тие се позначајни бидејќи комбинацијата исполнува одредена задача.
Пример: формулар кој се состои од етикета, поле за внесување и копче.

Организми
Организмите се поголеми компоненти составени од повеќе молекули и формираат посебен дел од интерфејсот.
Примери: заглавие со лого, навигација и поле за пребарување; или мрежа на производи што го повторува истиот молекул на производ-ставка.

Шаблони / Страници
Шаблоните ги комбинираат организмите и другите компоненти во една целосна страница, дејствувајќи како план. Тие демонстрираат како компонентите работат заедно во контекст на реалниот свет и го олеснуваат додавањето динамична содржина без менување на структурата.

Дизајн токени поврзани со Atomic Design

• Глобални токени често се атоми: бои, фонтови, растојание меѓу нив.

• Алијас токени се молекули: тие ѝ даваат на глобалната вредност значајна улога во контекст (на пр. cta-bg-боја).

• Токени специфични за компонентите се организми: тие дефинираат стил специфичен за компонента, како на пример боја-на-позадината-на-копчето-cta.

Дизајнерските токени ја формираат „атомската“ основа на овој систем. Да претпоставиме дека користите компонента на копче што се повикува на токени за боја, типографија и растојание. Ако измените токен, стилот на сите копчиња базирани на тој токен автоматски ќе се промени, без да мора да ги уредувате поединечните компоненти. Секако, веројатно ќе користите различни токени за вашите примарни и секундарни стилови на копчиња. 

 

Практичен пример: Magento и Shopware

Во Ecomwise, го применуваме овој принцип секојдневно во нашите основни средини за Magento и Shopware. Градиме флексибилен систем за дизајн во Figma, кој служи како почетна точка за проекти специфични за клиентите. Ги дефинираме сите стилски елементи како токени во него: од бои и фонтови до копчиња и компоненти за навигација.

Откако дизајнот ќе биде одобрен, ги експортираме токените како променливи што се користат директно во front-end кодот. Ова го прави преминот од дизајн кон развој неверојатно брз и без грешки.

 

Што дава тоа?

Користењето на дизајнерски токени нуди јасни предности, особено за поголеми или сложени B2B веб-продавници. Но, исто така, бара структуриран пристап во рамките на вашиот тим. Подолу, ги сумиравме најважните придобивки и размислувања.

• Доследен стил и изглед: Дизајнерските токени гарантираат дека боите, типографијата и компонентите се применуваат на потполно ист начин на секоја страница, без оглед на тоа кој работи на неа.
  
• Побрз развој и помалку грешки: Бидејќи токените автоматски работат низ сите делови од дизајнот и кодот, на крајот заштедувате време на прилагодувања и спречувате рачни грешки.
  
• Подобра соработка помеѓу дизајнот и развојот: Дизајнерските токени ја формираат врската помеѓу дизајнот и кодот. Тие спречуваат недоразбирања и го претвораат дизајнот во директно употреблив излез за програмерите.
  
• Скалабилни за раст и понатамошен развој: Нови функции, дизајни или барања од клиенти? Благодарение на повеќекратната употреба на токените, лесно можете да ги зголемите без повторно да го менувате целиот дизајн.

 

Што бара од вашиот тим работењето со дизајнерски токени?

Дизајнерските токени нудат многу предности, но исто така постојат и неколку важни фактори што треба да се имаат предвид при работа:

• Добро осмислена структураДобро дизајниран систем на токени бара јасно именување и логичка хиерархија. Ова бара почетно размислување.
  
• Инвестиција на почетокотПотребно е време за поставување и интегрирање на вашите дизајнерски токени во вашиот работен процес за дизајн и развој. Но, таа инвестиција ќе се исплати многукратно.
  
• Координација на тимотСекој, од дизајнери до програмери, треба да знае како да работи со токени. Јасни договори и документација помагаат во ова.

Со правилен пристап, дизајнерските токени всушност можат да ги намалат грешките, да ја забрзаат испораката и да ја зголемат флексибилноста за време на промените. Тие прават забележлива разлика, особено за поголеми или тековни B2B проекти.

 

Сакате да дознаете повеќе?

Сакате подлабоко да навлезете во светот на дизајнерските токени? Тогаш проверете овој практичен вовед во designtokencourse.comИли контактирајте не доколку имате какви било прашања во врска со ова.