Design systém pro e-shop: proč jej mít a kdy se vyplatí

Většina e-shopů, které přebíráme, má podobný problém. Tlačítko „Do košíku“ vypadá na detailu produktu jinak než ve výpisu kategorie. Na webu je pět odstínů hlavní barvy, protože každý grafik a kodér trefil jiný. Každá nová landing page se kreslí od nuly a vývoj stojí víc, než by musel.

Design systém je odpověď na tuhle entropii. Není to projekt pro velké korporace, ale způsob, jak mít pravidla vzhledu a chování e-shopu na jednom místě. V článku vysvětlujeme, co obsahuje, kdy se vyplatí a jak ho zavést postupně.

Co je design systém a co není

Nielsen Norman Group definuje design systém jako ucelený soubor standardů pro řízení designu ve velkém pomocí znovupoužitelných komponent a vzorů. Pro e-shop to prakticky znamená čtyři vrstvy:

Design systém není jen grafický manuál v PDF. Style guide popisuje, jak věci mají vypadat. Design systém k tomu přidává hotové stavební kameny, které designér i vývojář používají přímo, a proces, jak se udržují.

Tokeny: jedno rozhodnutí na jednom místě

Design tokeny jsou pojmenované hodnoty. Místo „#1A7F37“ rozeseté po stovce souborů máte color-action-primary. Když se rozhodnete barvu upravit, změníte ji na jednom místě.

Tokeny se typicky skládají do dvou úrovní. Základní paleta (např. green-600) a sémantické tokeny, které říkají, k čemu barva slouží (color-price-sale, color-stock-available). Díky sémantické vrstvě jde snadno udělat tmavý režim nebo druhou značku na stejném základu.

V říjnu 2025 vydala W3C Design Tokens Community Group první stabilní verzi specifikace formátu tokenů (2025.10). Jde o společný formát JSON, který čtou nástroje pro design i vývoj. Nejde o oficiální standard W3C, ale o zprávu komunitní skupiny, za kterou stojí mimo jiné Adobe, Figma, Google, Microsoft a Shopify. Figma umí tokeny v tomto formátu importovat do proměnných (variables) a pomocí režimů (modes) přepínat třeba světlé a tmavé téma. Pro vás to znamená menší závislost na konkrétním nástroji.

Komponenty: postavit jednou, používat všude

Komponentová knihovna je sada hotových prvků. V e-shopu jich je překvapivě málo, ale opakují se všude:

• tlačítka (primární, sekundární, textové) a jejich stavy: výchozí, najetí, stisknuté, načítání, neaktivní,
• formulářová pole, výběry, zaškrtávátka a chybové hlášky,
• produktová karta pro výpis, našeptávač i doporučené produkty,
• cena (běžná, akční, s DPH a bez DPH pro B2B), štítky a dostupnost,
• notifikace, modální okna, drobečková navigace, stránkování.

Každá komponenta má definované stavy a pravidla přístupnosti, třeba kontrast a ovládání klávesnicí. Když to jednou vyřešíte správně, máte to správně na celém webu.

Komponenty se dokumentují ve Figmě a v kódu. Pro kód se často používá Storybook, open-source nástroj pro vývoj a dokumentaci komponent v izolaci. Nejde o povinnost, u menších projektů stačí přehledná stránka se všemi komponentami přímo v e-shopu.

Proč se to vyplatí: rychlost, konzistence, méně chyb

Konkrétní přínos je nejlépe změřený u vývoje. Sparkbox v kontrolované studii s design systémem Carbon od IBM změřil, že vývojáři postavili jednoduchý formulář o 47 % rychleji než od nuly (medián 2 hodiny proti 4,2 hodiny), a to včetně času na seznámení se systémem. Výsledek byl navíc vizuálně konzistentnější. Studie je malá a jde o jeden typ úkolu, ale směr odpovídá naší zkušenosti.

V e-shopu se přínosy projevují takto:

• Rychlejší změny. Nová landing page, sezónní kampaň nebo nová kategorie se skládá z hotových dílů.
• Konzistence, která buduje důvěru. Zákazník se učí, jak web funguje. Když se tlačítka chovají pokaždé jinak, zdržuje ho to.
• Méně chyb a regresí. Oprava komponenty se propíše všude, kde se používá.
• Snazší A/B testování. Varianta se připraví úpravou komponenty, ne přepisováním stránky.
• Snazší předávání práce. Nový designér nebo externí vývojář nemusí hádat, jak má co vypadat.

Kdy design systém dává smysl a kdy ne

Neplatí, že každý e-shop potřebuje vlastní dokumentovaný systém. Rozhodujeme podle několika otázek:

Na SaaS platformách, jako je Shoptet, jsou možnosti omezené šablonou. Barvy, písma a vzhled prvků ale jde sjednotit přes Návrhář šablon a vlastní CSS. I tady pomůže mít tokeny sepsané, aby se úpravy nerozjížděly. Na co si u šablon dát pozor, řešíme ve službě Shoptet šablony.

Jak design systém zavést postupně

Design systém nemusí vzniknout jako velký samostatný projekt. Osvědčil se nám postup po krocích:

1. Inventura. Posbírejte všechny varianty tlačítek, barev, písem a karet, které na webu jsou. Obvykle vás překvapí, kolik jich je.
2. Tokeny. Z inventury vyberte a pojmenujte základní hodnoty: barvy podle účelu, typografickou škálu a rozestupy.
3. Pět klíčových komponent. Tlačítko, formulářové pole, produktová karta, cena a notifikace. Pokrývají většinu e-shopu.
4. Nasazení na nejdůležitější stránky. Detail produktu, kategorie a pokladna. Změřte dopad na rychlost vývoje i konverze.
5. Pravidla údržby. Kdo smí přidat novou komponentu, jak se schvaluje a kde je aktuální verze. Bez vlastníka systém rychle zastará.

Nový systém je dobré ověřit na prototypu dřív, než se programuje. Proč tenhle krok nevynechávat, popisujeme v článku Figma prototypy před vývojem.

Jak na to prakticky: checklist

• Máte na webu jednu primární barvu a jasně definované barvy pro slevu, chybu a dostupnost?
• Je typografie omezená na pár velikostí a řezů?
• Vypadá a chová se tlačítko „Do košíku“ všude stejně?
• Mají komponenty definované stavy, včetně načítání a chyby?
• Splňují komponenty kontrast a ovládání klávesnicí?
• Najde designér i vývojář aktuální verzi komponent na jednom místě?
• Ví někdo ve firmě, kdo systém spravuje?

Design systém navrhujeme od inventury po hotovou knihovnu ve Figmě i v kódu, viz služba Design systém. Nejvíc se vyplatí zavést ho spolu s redesignem, který u kompletní přestavby obvykle trvá 6–10 týdnů. Pokud nevíte, jestli vám stačí tokeny, nebo potřebujete celou knihovnu, probereme to na konzultaci.