Figma

Prototypování souhrnně představuje proces tvorby neúplných webových stránek ve formě základních návrhů, mezi nimiž je možné interaktivně přecházet. Jedná se tedy o návrh struktury webu, jeho designu, vkládání zástupného obsahu a zobrazování základních funkcionalit, které budou k dispozici.

Pod pojmeme prototyp můžeme ale chápat z grafického pohledu hotový prvek, který disponuje určitou funkcí. Přiřazování událostí prvkům je realizováno v záložce Prototyp, která je k dispozici v záhlaví pravého panelu.

Změna režimu je doprovázena drobnými grafickými odlišnostmi oproti režimu Designu. Jedná se o zobrazení akčního bodu, pomocí kterého lze jednodušší formou vytvářet funkce vybraného prvku. Ty je možné spravovat a "naklikávat" v pravém panelu. Jeden prvek může mít více různých událostí.

Základní možné druhy událostí: 

• On click - při kliku myši,
• On drag - při uchopení a tažení myší,
• On hovering - při přejetí kurzorem myši,
• On pressing - při kliku (on click kontroluje, jestli bylo levé tlačítko myši i uvolněno),
• Key/gamepad - při zmáčknutí určité klávesy.

Ukázky možných událostí 

Odkaz

Jedna základních událostí, které pro v prototypování využívá, protože návrháři chtějí ukazovat webové stránky s různým grafickým rozvržením obsahu. Zjednodušenou cestou ho vytvoříme chycením zvýrazněného bodu na boční straně elementu a objevivší šipku vytáhneme k požadovanému rámci, na který chceme přejít po kliknutí na prvek. Event můžeme případně i naklikat manuálním přidání interakce (ikona +). 

Hover efekt

Efekty zobrazující se při přejetí kurzoru myši jsou o trochu komplikovanější, protože vyžadují vytvoření počátečního a koncového vzhledu daného prvku. Protože rámce vykreslují veškerý obsah, který je na nich umístěn, musíme koncový stav prvku umístit mimo ně. 

Znázornění vytvořené interakce	Znázornění překrytí počátečního stavu stavem koncovým.

Pro jednoduché vytvoření je vhodné si zkontrolovat, aby oba dva stavy měly stejné rozměry. Cílem interakce, resp. eventu, mohou být pouze rámce. Z toho důvodu je potřeba koncový prvek "zabalit" do rámce klávesovou zkratkou CTR + ALT + G, případně volbou Frame selection přes kontextové menu. Níže na výstřižku můžete vidět nastavení hover efektu. 

 

Open overlay s nastavením překrytí Manual zajistí automatické překrytí zvoleným koncovým prvek. V případě potřeby je možné s ním pohybovat.