Theming

V rámci Design systému udržujeme sedm témat, která pokrývají všechny potřeby našich klientů i interní procesy. Díky dostupným nástrojům jako jsou Figma variables a tokenizaci na úrovní jednotlivých komponent tvoříme i upravujeme témata efektivně a s ohledem na rychlost i dlouhodobou udržitelnost.

Video tutorialy pro FE Dev & Design

Jak to celé funguje

Témata spravujeme přes plugin Tokens Studio a Figma variables. Použití Figma variables UX designerům umožňuje téměř instantní přepínání témat v návrzích jedním kliknutím.
Všechny vizuální styly, barevné schéma i typografii držíme pod kontrolou na jednom místě. Díky kontrole které jsme dosáhli tokenizací jednotlivých komponent můžeme změnit vzhled celé aplikace během pár vteřin.

Proč témata a tokenizace?

Protože máme zavedené design tokeny na úrovni každé jednotlivé komponenty, můžeme všechna témata Design systemu spravovat a ovládat z jednoho místa, a to výrazně zrychluje a zefektivňuje celý proces tvorby a údržby vizuální identity aplikací.

Vzhled aplikace vždy vychází z vizuální identity klienta – přenášíme barvy, typografii, ale například i charakteristické vizuální prvky ze stávajících aplikací. Tím že je zaneseme v rámci tématu do nového prostředí můžeme pro uživatele zajistit plynulý přechod ze staré aplikace do nové.

Témata nám umožňují dodávat UX i finální implementaci přímo v klientském tématu včetně odpovídající darkmode verze, a to výrazně usnadňuje komunikaci mezi UX a Businessem ať už při akceptaci návrhu tak při testování.

Pro případy, kdy jeden návrh využívá více klientů, nabízíme rychlou a bezproblémovou možnost přepnout ve Figmě pomocí variables na aktuální téma a tím prezentovat návrhy vždy ve správném kontextu a stylu. Díky tomuto přístupu nejen zrychlujeme interní workflow, ale také výrazně usnadňujeme předávání a komunikaci hotových návrhů klientům, vždy s jistotou, že design odpovídá jejich brand guidelines a požadavkům.

Naše témata

VIGo

Interní výchozí téma používané design týmem pro správu komponent, wireframy a systémové účely; není určeno pro klienty ani produkci. Nikdy se nedostává ke koncovým uživatelům a slouží pouze design týmu.

KOOP light

Světlé téma a výchozí vzhled aplikací Neuronu pro Kooperativu, vycházející z vizuální identity Kooperativy.

KOOP dark

Tmavé téma pro aplikace Kooperativy, optimalizované pro práci v tmavém prostředí.

CPP light

Výchozí světlé téma pro ČPP, laděné podle její firemní identity.

CPP dark

Tmavé téma pro ČPP, optimalizované pro práci v tmavém prostředí.

KNZ light

Specifické světlé téma pro aplikaci KNZ, navrženo podle potřeb a stylu této aplikace a tak aby bylo blízké stávajícím uživatelům.

SUS light

Světlé téma pro aplikaci SUS+ navržené tak aby bylo blízké stávajícím uživatelům.