Figma prototypy před vývojem — proč nepřeskakovat krok

Nejdražší chyba v projektu e-shopu je ta, kterou najdete až po spuštění. Tlačítko, které nikdo nevidí. Filtr, kterému zákazníci nerozumí. Pokladna, ve které se na mobilu schová pole pro PSČ pod lištu. Když se na to přijde v naprogramované šabloně, oprava znamená nový návrh, úpravu kódu, testování a nasazení. Když se na to přijde v prototypu, designér přesune pár vrstev a za hodinu je hotovo.

Přesto se krok s prototypem často přeskakuje. Klient chce vidět „hotový web“, termín tlačí a statické obrázky v prezentaci vypadají dost přesvědčivě. V článku vysvětlujeme, proč se prototyp ve Figmě vyplatí, co v něm musí být, jak ho levně otestovat a jak ho předat vývoji, aby se z něj stal kód bez dohadování.

Wireframe, mockup a prototyp nejsou totéž

Tři pojmy se v praxi pletou, přitom každý odpovídá na jinou otázku:

Mockup se dá schválit očima. Prototyp se dá vyzkoušet rukama. A právě při zkoušení se ukáže, že krok, který na obrázku dával smysl, v reálném sledu nefunguje. Ve Figmě se prototyp staví ze stejných obrazovek jako design, jen se propojí interakcemi a sdílí se odkazem.

Proč se prototyp vyplatí

Hlavní důvod je jednoduchý: změna v návrhu je levnější než změna v kódu. Čím později chybu najdete, tím víc práce se na ní už udělalo a tím víc lidí ji musí opravit.

Další přínosy, které vidíme na projektech:

• Jedna pravda pro všechny. Majitel, marketing, designér i vývojář se dívají na totéž. Diskuse „já jsem to myslel jinak“ proběhne před vývojem, ne po něm.
• Přesnější odhad vývoje. Vývojář vidí všechny stavy a obrazovky, ne jen hlavní stránku. Odhaduje podle reality, ne podle představy.
• Zachycené okrajové stavy. Prázdný košík, vyprodaná varianta, chyba platby, dlouhý název produktu. Když chybí v návrhu, vývojář je dotváří sám a pokaždé jinak.
• Podklad pro test s uživateli. Bez prototypu se dá testovat jen hotový web, a to už je pozdě.

U redesignu e-shopu je prototyp zároveň pojistka proti propadu konverzí. Nový vzhled, který zákazníkům rozbije zaběhnuté návyky, se dá odhalit dřív, než ho uvidí všichni návštěvníci.

Co má prototyp e-shopu obsahovat

Prototyp nemusí pokrýt každou stránku webu. Musí ale pokrýt cesty, na kterých stojí tržby. Doporučujeme minimálně:

1. Homepage a hlavní navigaci včetně mobilního menu.
2. Výpis kategorie s filtry a řazením.
3. Detail produktu včetně výběru varianty a stavu „není skladem“.
4. Košík, pokladnu a děkovací stránku.
5. Vyhledávání, našeptávač a stránku „nic nenalezeno“.
6. Mobilní verzi všech výše uvedených, ne jen desktop.

Prototyp stavte z komponent. Když má tlačítko, karta produktu nebo formulářové pole jednu předlohu, změna se propíše všude. Na tom stojí komponentová knihovna a později celý design systém, který vývoj převezme jako hotové stavební kameny.

Už v prototypu hlídejte přístupnost: kontrast textu, velikost klikacích ploch, popisky formulářových polí a srozumitelné chybové hlášky. Doplnit je až v kódu je dražší a často se na ně zapomene.

Jak prototyp otestovat s uživateli

Test prototypu nevyžaduje laboratoř ani velký rozpočet. Nielsen Norman Group dlouhodobě doporučuje pro kvalitativní testy použitelnosti zhruba pět účastníků na jedno kolo. Smyslem není statistika, ale najít místa, kde se lidé zasekávají. Lepší jsou tři kola po pěti lidech s opravami mezi nimi než jedno kolo s patnácti.

Postup, který používáme:

1. Definujte úkoly. Konkrétní a realistické: „Najděte zimní bundu do 3 000 Kč ve vaší velikosti a dejte ji do košíku.“ Ne „Jak se vám líbí web?“.
2. Vyberte účastníky z cílové skupiny. Stávající zákazníci, lidé z newsletteru, známí známých. Ne kolegové z projektu.
3. Sdílejte prototyp odkazem. Figma umožňuje sdílet samotný prototyp bez přístupu k celému souboru. Nastavte přístup tak, aby ho účastník otevřel bez účtu.
4. Pozorujte a mlčte. Nechte účastníka přemýšlet nahlas a nenapovídejte. Nejcennější jsou chvíle, kdy váhá.
5. Zapište problémy a seřaďte je. Podle toho, kolik lidí na problém narazilo a jak moc brání nákupu.
6. Opravte a testujte znovu. Další kolo ukáže, jestli oprava pomohla, nebo přesunula problém jinam.

Na nemoderované testy na dálku lze prototyp z Figmy napojit do nástrojů pro uživatelské testování, například Maze nebo UserTesting. Figma na integrace odkazuje přímo ve své nápovědě. Pro menší e-shop ale často stačí videohovor se sdílenou obrazovkou.

Pamatujte, že test prototypu odhalí problémy s porozuměním a orientací. Neodpoví na otázku, o kolik procent vzroste konverzní poměr. Na to je potřeba měření na živém webu, jak popisujeme v článku Redesign e-shopu, který nezabije konverze.

Předání vývoji přes Dev Mode

Prototyp, se kterým vývojář neumí pracovat, je jen hezký obrázek. Ve Figmě slouží pro předání Dev Mode. Podle dokumentace Figmy (k 9/2026) nabízí hlavně:

• Stav „Ready for dev“. Designér označí sekce, které jsou hotové k implementaci. Vývojář tak nestaví z rozpracované verze.
• Poznámky a měření. Designér připíše chování, které z obrázku není vidět, například co se stane po kliknutí nebo jak se komponenta chová při dlouhém textu.
• Porovnání změn. Vývojář vidí, co se od minulé verze změnilo, a nemusí hledat rozdíly okem.
• Code Connect. Tým s vlastní knihovnou komponent může v Dev Mode zobrazit skutečný kód svých komponent místo automaticky generovaného.

Plný Dev Mode je podle Figmy dostupný v placených plánech a vyžaduje Full nebo Dev seat. Základní inspekci, tedy rozměry, vlastnosti a export podkladů, zvládne i uživatel s přístupem pro prohlížení. Aktuální tarify a ceník ověřte u Figmy, podmínky se v posledních letech několikrát měnily.

Figma dnes nabízí i generování interaktivních prototypů z textového zadání pomocí AI (Figma Make). Na rychlé skici a ověření nápadu je to užitečné. Prototyp klíčových nákupních cest ale doporučujeme stavět z vlastních komponent, aby odpovídal tomu, co se skutečně naprogramuje.

Checklist: je prototyp připravený k vývoji?

• Pokrývá celou nákupní cestu od vstupu po děkovací stránku?
• Má mobilní verzi každé klíčové obrazovky?
• Obsahuje okrajové stavy: prázdný košík, vyprodáno, chyba formuláře, chyba platby, žádné výsledky hledání?
• Je postavený z komponent, ne z kopírovaných kusů?
• Prošel aspoň jedním kolem testu s uživateli a opravami?
• Splňuje kontrast a velikosti klikacích ploch?
• Jsou hotové sekce označené jako připravené k vývoji a doplněné poznámkami?
• Viděl ho vývojář dřív, než dal odhad ceny a termínu?

Jak na to prakticky

Pokud chystáte redesign nebo nový e-shop, počítejte s prototypem jako s pevnou fází projektu, ne jako s bonusem. Kompletní redesign u nás obvykle trvá 6–10 týdnů a prototyp je jeho pevnou součástí. Čas strávený v prototypu se vrací při vývoji, protože se méně předělává.

Když nevíte, co v novém návrhu řešit jako první, začněte UX auditem, který máme hotový do 10 dnů. Ukáže, kde současný e-shop ztrácí zákazníky, a prototyp pak řeší konkrétní problémy místo dojmů. Pokud váháte, jestli stačí redesign, nebo potřebujete nový e-shop, pomůže článek Redesign vs. nový e-shop.