Převod e-shopu · Redesign · 2025 · na Shoptet
Převod e-shopu 2025
„Byl jsem naprosto spokojený. Převod, ze kterého jsem měl několik měsíců obavy, proběhl tak, že jsem si ho skoro nevšiml.“
Design · Design systém
Design systém, díky kterému e-shop roste konzistentně
Barvy, typografie, komponenty a pravidla na jednom místě — ve Figmě i v kódu. Nové stránky a funkce pak skládáte z hotových dílů místo kreslení od nuly.
Pro koho je služba
- E-shopy, kde každý nový banner nebo stránka vypadá trochu jinak
- Firmy s více e-shopy, doménami nebo značkami, které sdílejí jeden základ
- Týmy s interními vývojáři nebo více dodavateli, kteří potřebují společný jazyk
- Headless a vlastní řešení, kde se frontend vyvíjí průběžně
- E-shopy před redesignem, které nechtějí za dva roky znovu začínat od nuly
Co design systém řeší
Design tokeny
Barvy, typografie, mezery a zaoblení jako pojmenované hodnoty sdílené mezi Figmou a kódem.
Knihovna komponent
Tlačítka, formuláře, produktové karty, filtry či košík se všemi stavy a variantami.
Více značek a témat
Jeden základ pro více e-shopů nebo světlý a tmavý režim díky režimům tokenů.
Přístupnost v základu
Kontrast, fokus a velikost klikacích ploch se ohlídají jednou v komponentě, ne na každé stránce.
Dokumentace
Kdy kterou komponentu použít, jak se chová a co nedělat — pro designéry, vývojáře i marketing.
Rychlejší vývoj
Nové šablony a kampaňové stránky se skládají z ověřených dílů, takže je méně předělávek.
Z čeho se design systém skládá
Design systém má tři vrstvy. Design tokeny jsou pojmenované hodnoty — například barva color/primary, velikost písma nadpisu nebo mezera mezi prvky. Komponenty jsou z tokenů složené díly rozhraní: tlačítko, pole formuláře, produktová karta, filtr, mini košík. Dokumentace popisuje, kdy a jak komponenty používat. Výsledkem je jediný zdroj pravdy pro design i vývoj. Podrobněji v hesle design tokeny a komponentová knihovna.
Tokeny ve Figmě i v kódu
Ve Figmě stavíme tokeny na proměnných (variables) s režimy — jeden soubor tak pokryje třeba světlý a tmavý vzhled nebo více značek. V Dev Mode pak vývojář u každé hodnoty vidí název tokenu, ne jen hexadecimální kód barvy. Pro přenos do kódu je od 28. 10. 2025 k dispozici první stabilní verze specifikace formátu design tokenů (Design Tokens Community Group při W3C, verze 2025.10). Podporují ji nebo zavádějí nástroje jako Figma, Penpot, Sketch, Tokens Studio či Style Dictionary. Díky tomu se tokeny dají exportovat do CSS proměnných nebo konfigurace frontendového frameworku bez ručního přepisování.
Na jaké platformě to dává smysl
Plný design systém s knihovnou komponent v kódu se nejvíc vyplatí u headless a vlastních řešení, u Shopify témat a u větších WooCommerce nebo Magento projektů, kde se frontend průběžně vyvíjí. Na SaaS platformách typu Shoptet je prostor pro vlastní komponenty menší — i tam ale pomůže sjednotit tokeny, bannery, ikony, typografii a vzhled obsahových bloků, aby každá úprava šablony a každá kampaň držela stejný styl.
Na co si dát pozor
Nejčastější chyba je stavět systém do šuplíku: velká knihovna, kterou nikdo nepoužívá. Začínáme proto auditem existujícího rozhraní — sepíšeme, kolik máte odstínů hlavní barvy, variant tlačítek a typů karet — a systém stavíme z komponent, které e-shop skutečně používá. Druhá chyba je chybějící vlastník. Design systém potřebuje pravidla pro změny a verze, jinak se během pár měsíců rozpadne.
Jak design systém vzniká
1
Inventura rozhraní
Sepíšeme všechny barvy, písma, tlačítka, karty a formuláře, které dnes e-shop používá, a najdeme duplicity.
2
Tokeny a základy
Navrhneme paletu, typografickou škálu, mezery a pravidla pro přístupnost jako design tokeny ve Figmě.
3
Komponenty
Postavíme knihovnu komponent se všemi stavy a variantami, od tlačítka po checkout.
4
Převod do kódu
Export tokenů do kódu a implementace komponent ve frontendu nebo úprava šablony platformy.
5
Dokumentace a předání
Pravidla použití, proces změn a zaškolení týmu. Systém můžeme dál spravovat v rámci průběžné spolupráce.
Reference
Naše práce za nás mluví
Rozsah a cena
Rozsah se výrazně liší mezi sjednocením vizuálu na SaaS platformě a plnou komponentovou knihovnou pro headless frontend. Cenu připravíme po konzultaci podle počtu komponent, značek a platforem.
Často kladené dotazy
Plný systém s knihovnou v kódu obvykle ne. Menšímu e-shopu stačí základ: paleta, typografie, pravidla pro bannery a několik opakovaných komponent. I to ušetří čas při každé kampani.
Z blogu
Design a UX
Design systém pro e-shop: proč jej mít a kdy se vyplatí
Číst článek Design a UXTypografie v ecommerce: čitelnost, čeština a rychlost
Číst článek Design a UXIkony a vizuální jazyk e-shopu: konzistence, přístupnost a licence
Číst článek Design a UXMikrointerakce a animace v ecommerce UX: kdy pomáhají a kdy škodí
Číst článek Vývoj a integraceHeadless commerce: kdy dává smysl (a kdy ne)
Číst článekPojmy z knowledge base
Design a UX
Design systém
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.
Otevřít heslo Design a UXDesign tokeny
Design tokeny jsou pojmenované designové hodnoty (barvy, písmo, odstupy, stíny) uložené v jednom zdroji, ze kterého se generují styly pro web, aplikace i designové nástroje.
Otevřít heslo Design a UXKomponentová knihovna
Komponentová knihovna je sada znovupoužitelných prvků rozhraní (tlačítka, formuláře, produktové karty) připravených ve Figmě nebo v kódu. Je praktickou, „stavební" částí design systému.
Otevřít heslo Design a UXPřístupnost (WCAG)
Přístupnost znamená, že e-shop zvládne použít i člověk se zrakovým, sluchovým, motorickým nebo kognitivním omezením. Měří se podle WCAG a pro většinu B2C e-shopů ji od 28. 6. 2025 vyžaduje zákon.
Otevřít hesloSouvisející služby
Služby
Design
UX audit, redesign, nový e-shop a design systém.
Detail služby DesignRedesign e-shopu
Redesign e-shopu postavený na datech: UX audit, prototyp, postupné nasazení, hlídání SEO a Core Web Vitals. Kompletní redesign obvykle 6–10 týdnů.
Detail služby DesignDesign nového e-shopu
Design nového e-shopu od informační architektury přes klikací prototyp ve Figmě po komponenty pro vývoj. Navrhujeme s ohledem na platformu, SEO a rychlost.
Detail služby SlužbyVývoj a integrace
API, middleware, automatizace, importy a exporty.
Detail službyChcete, aby e-shop vypadal jednotně i za dva roky?
Ukažte nám e-shop a plány rozvoje. Navrhneme, jak velký design systém dává smysl.