Design systém
Aktualizováno 22. 9. 2026
Design systém je sdílená sada pravidel, design tokenů, komponent a dokumentace, ze které designéři i vývojáři skládají rozhraní. E-shopu přináší konzistentní vzhled a rychlejší vývoj nových stránek.
Rychlá fakta
- Typ
- metodika a sada podkladů (ne konkrétní software)
- Cena
- samotný pojem nic nestojí — náklad tvoří práce na návrhu a údržbě; placené jsou nástroje jako Figma (aktuální ceník ověřte u poskytovatele)
- Časová náročnost zavedení
- řádově týdny (základ nad existujícím webem) až měsíce (kompletní systém pro více kanálů)
- Náročnost zavedení
- střední až vysoká — vyžaduje spolupráci designu a vývoje a průběžnou údržbu
- Vhodné pro
- e-shopy s vlastním frontendem, více weby nebo značkami a častými úpravami UI
Co to je
Design systém je jeden zdroj pravdy pro to, jak vypadá a jak se chová rozhraní e-shopu. Neobsahuje jen barvy a logo. Popisuje, jak vypadá tlačítko „Do košíku", jak se chová chybová hláška ve formuláři, jaké jsou odstupy v produktové kartě a proč.
Rozdíl proti běžnému manuálu značky je v tom, že design systém žije i v kódu. Designér ve Figmě a vývojář ve frontendu používají stejné stavební kameny se stejnými názvy. Když se změní primární barva, změní se na jednom místě a propíše se všude.
Co obsahuje
Typický design systém pro e-shop má tyto vrstvy:
| Vrstva | Co v ní je | Příklad z e-shopu |
|---|---|---|
| Principy | pravidla, podle kterých se rozhoduje | „cena musí být vždy čitelná bez zoomu" |
| Design tokeny | pojmenované hodnoty barev, typografie, odstupů, stínů | color.action.primary, space.4 |
| Základní prvky | typografie, mřížka, ikony, barevná paleta | sada ikon pro dopravu a platby |
| Komponenty | tlačítka, formulářová pole, karty, modální okna | produktová karta, výběr varianty |
| Vzory | opakovaná řešení celých úloh | košík, checkout, filtrace kategorie |
| Dokumentace | kdy co použít, stavy, zákazy | „akční cenu nezobrazujte bez původní ceny" |
Součástí by měla být i pravidla přístupnosti (kontrasty, stavy fokusu, velikost klikacích ploch) a pravidla pro pohyb a mikrointerakce. Když jsou zapsaná v systému, nemusí je každý nový návrh vymýšlet znovu.
Pro jaký e-shop se vyplatí
Design systém není povinná výbava každého e-shopu. Rozhoduje hlavně to, kolik se na frontendu mění a kolik lidí na něm pracuje.
- Vyplatí se, když máte vlastní nebo headless frontend, více e-shopů či jazykových mutací, více značek, vlastní designérský tým nebo externího dodavatele, který se může měnit, a pravidelně přidáváte nové stránky a funkce.
- Stačí jednodušší styleguide, když běžíte na krabicové šabloně (Shoptet, Upgates) s drobnými úpravami. Tam udělá většinu práce šablona a plný systém by se nevrátil.
- Mezistupeň: sada tokenů a pár klíčových komponent (tlačítka, formuláře, produktová karta). Často nejlepší poměr nákladů a užitku pro střední e-shop.
Nástroje
Nejčastější kombinace je Figma pro návrh a Storybook pro dokumentaci komponent v kódu. Ve Figmě se komponenty, styly a proměnné sdílejí přes knihovny. Publikovat knihovnu do dalších souborů jde podle nápovědy Figmy jen v placených tarifech, na bezplatném Starter plánu komponenty vytvoříte, ale nesdílíte (stav k 9/2026, aktuální ceník ověřte u poskytovatele). Tokeny se převádějí do kódu nástroji jako Style Dictionary.
Výhody a limity
Výhody
- Konzistence: stejné tlačítko vypadá stejně na homepage, v kategorii i v checkoutu.
- Rychlost: nové stránky se skládají z hotových dílů místo kreslení od nuly.
- Méně chyb v přístupnosti, protože se řeší jednou v komponentě.
- Snadnější předávka mezi designem, vývojem a dalším dodavatelem.
Limity
- Vstupní investice. První měsíce systém víc stojí, než šetří.
- Bez údržby zastará. Když se v kódu začnou objevovat výjimky mimo systém, ztrácí smysl.
- Na uzavřené šabloně krabicové platformy ho nevyužijete naplno.
Jak to řešíme v Převeďshopu
Design systémy máme v týmu Design a frontend, s nímž pracuje AI spolupracovník Pixi zaměřený právě na design systémy. Postup je obvykle takový:
- Inventura existujícího webu: kolik variant tlačítek, barev a velikostí písma reálně používáte.
- Tokeny a základní komponenty ve Figmě, navázané na kód.
- Dokumentace klíčových vzorů e-shopu: produktová karta, košík, checkout, formuláře.
- Předávka vývoji a pravidla, jak systém rozšiřovat.
Často to spojujeme s redesignem, kdy se systém staví rovnou pro nový vzhled. Detail služby najdete na stránce Design systém. Cenu připravíme po konzultaci podle rozsahu.