připomenutí předchozí hodiny a uvedení problému „Figma: frame, komponenta a jednoduchý prototyp“. 5–12 min: stručná teorie – frame, komponenta, instance, mřížka, prototyp, interakce. 12–18 min: společná ukázka prvního kroku a kontrolních kritérií. 18–36 min: samostatná práce nebo práce ve dvojici – Navrhnout tři obrazovky interaktivní prezentace a propojit je tlačítky vpřed a zpět. 36–41 min: vzájemná kontrola podle zadání a oprava zjištěné chyby. 41–45 min: uložení výstupu (Odkaz na klikací prototyp a export obrazovek), krátký exit ticket a pojmenování dalšího kroku.
Prezentování a vizuální komunikace · 45 minut
Figma: frame, komponenta a jednoduchý prototyp
Žák vytvoří opakovatelný vizuální prvek a propojí několik obrazovek.
00
ČASOVÁ OSA
Struktura 45minutové hodiny
01
VIDEO LEKCE
Ukázka a vysvětlení postupu
▶
Video je připravené k doplnění
Video ukáže princip, první kroky, kontrolu a typickou chybu. Nebude obsahovat celý hotový upravitelný úkol.
provider: youtube · youtubeId: ""02
STUDIJNÍ MATERIÁL
Výklad: z čeho se učíš
Prezentace není dokument rozdělený na snímky. Snímek podporuje mluvené sdělení, vede pozornost a používá text, obraz nebo graf jen tehdy, když pomáhají publiku porozumět.
Nejdříve se plánuje hlavní sdělení a pořadí částí. Teprve potom se vybírá nástroj, rozvržení, písmo, obraz a způsob exportu.
Frame je v Figmě kontejner pro jednu obrazovku nebo část návrhu. Komponenta je znovupoužitelný hlavní prvek a instance je jeho použití v konkrétním místě. Prototyp propojuje objekty s cílovými frames a simuluje průchod návrhem.
Praktická část vede k výstupu „Odkaz na klikací prototyp a export obrazovek“. Práci kontroluj podle kritérií: Funkční navigace, konzistence komponent, čitelnost. Každý krok musí být možné doložit otevřeným souborem, správným nastavením nebo krátkým vysvětlením.
Nejčastější rizika této hodiny jsou: Tři skupiny vrstev místo skutečných frames. Kopírování tlačítek bez komponenty. Proto je důležitá závěrečná kontrola před odevzdáním.
Slovníček pojmů
frame
Kontejner ve Figmě, který organizuje vrstvy a často představuje jednu obrazovku návrhu.
komponenta
Znovupoužitelný hlavní prvek, jehož změny se mohou promítat do jeho instancí.
instance
Konkrétní použití komponenty v návrhu, které si zachovává vazbu na hlavní komponentu.
mřížka
Pomocná soustava linií nebo sloupců pro pravidelné zarovnání prvků.
prototyp
Interaktivní simulace návrhu umožňující otestovat průchod mezi obrazovkami.
interakce
Akce uživatele a reakce systému, například kliknutí na tlačítko a přechod na další obrazovku.
03
ŘÍZENÁ PRÁCE
Postup krok za krokem
- 01
Otevři nový soubor Figma Design a na jedné stránce vytvoř tři frames pomocí nástroje Frame. Pojmenuj je `01_Uvod`, `02_Obsah`, `03_Zaver`.
- 02
V prvním frame vytvoř tlačítko z tvaru a textu, označ oba prvky a vytvoř komponentu. Pojmenuj ji `Button/Primary`.
- 03
Z panelu Assets vlož instance tlačítka do dalších frames; text instance můžeš změnit bez zrušení vazby na komponentu.
- 04
Přepni na Prototype. Z modrého uzlu tlačítka táhni spojení na cílový frame a nastav akci Navigate to.
- 05
Propoj cestu vpřed i zpět. Urči úvodní frame pro flow.
- 06
Spusť Present, projdi všechny cesty a oprav slepá tlačítka. Nakonec sdílej odkaz s oprávněním pouze pro zobrazení a exportuj náhledy obrazovek.
04
PRACOVNÍ PODKLADY
Stáhni si soubory, se kterými budeš pracovat
Náhled ukazuje pouze strukturu a typ výsledku. Hotové upravitelné řešení ve studentské části není.
.TXT
PODKLADY README
↓Pokyny k použití pracovních podkladů.
20_PODKLADY_README.txt · 1 kB
.SVG
Jednoduche ikony
↓Obrazový pracovní podklad k vložení, popisu nebo úpravě.
20_jednoduche_ikony.svg · 2 kB.TXT
Obsah tri obrazovek
↓Pracovní podklad určený k samostatnému zpracování.
20_obsah_tri_obrazovek.txt · 1 kBDůležité: Podklady jsou vstupy k práci, nikoli kompletní řešení. Vlastní výsledek musí vzniknout podle zadání, testu a reflexe.
05
OTEVŘENÉ ODPOVĚDI
Pracovní list
1. Startovací otázkaStačí 2–3 věty. Nehodnotí se předchozí znalost, ale schopnost pojmenovat výchozí představu.
Co už o tématu „Figma: frame, komponenta a jednoduchý prototyp“ víš? Napiš jeden příklad z běžného života nebo ze školy.
2. Práce s pojmyNepřepisuj pouze definici. Ukaž, jak se pojem projeví v konkrétní situaci.
Vysvětli vlastními slovy alespoň tři pojmy: frame, komponenta, instance, mřížka, prototyp, interakce. Ke každému přidej krátký příklad.
3. Modelová situaceUveď, podle jakého pravidla nebo kritéria ses rozhodoval/a.
Interaktivní prezentace má úvodní obrazovku, obsah a závěr. Popiš své rozhodnutí a zdůvodni ho.
4. Plán praktické prácePostup má mít jasný začátek, jednotlivé kroky a očekávaný výsledek.
Rozepiš vlastní postup k zadání: Navrhnout tři obrazovky interaktivní prezentace a propojit je tlačítky vpřed a zpět.
5. SebekontrolaPřeveď hodnoticí kritéria na konkrétní kontrolní otázky.
Podle čeho poznáš, že je práce hotová správně? Vycházej z kritérií: Funkční navigace, konzistence komponent, čitelnost.
6. Exit ticketOdpověď má být konkrétní a vztahovat se k dnešnímu tématu.
Napiš jednu věc, kterou už umíš, jednu chybu, které se chceš vyhnout, a jeden další krok.
06
PRAKTICKÁ PRÁCE
Figma: frame, komponenta a jednoduchý prototyp
Interaktivní prezentace má úvodní obrazovku, obsah a závěr. 1. Vytvoř tři frames. 2. Navrhni opakující se tlačítko jako komponentu. 3. Vlož instance komponenty do obrazovek. 4. Propoj tlačítka vpřed a zpět. 5. Spusť prototyp a otestuj všechny cesty.
Očekávaný výstup
Funkční odkaz na prototyp a export tří obrazovek.
07
DŮKAZ O UČENÍ
Odevzdání praktického úkolu
Odkaz a exportované soubory
Odkaz na klikací prototyp a export obrazovek
Dokonči praktickou práci a odevzdej důkaz: Odkaz na klikací prototyp a export obrazovek. Stáhni pouze pracovní podklady, zpracuj je samostatně a před odevzdáním projdi kontrolní kritéria. Hotové řešení je dostupné jen v učitelské části.
Zatím nebyl vybrán žádný soubor.
V samostatném HTML se ukládají odpovědi a názvy vybraných souborů pouze do tohoto prohlížeče. Skutečný upload provede aplikace Kurzy/Studio.
08
ZÁVĚREČNÁ KONTROLA
Test
09
REFLEXE
Co si z lekce odnášíš
Dokončeno neznamená pouze vytvořeno. Po dokončení lekce žák prokáže cíl odevzdáním výstupu: Odkaz na klikací prototyp a export obrazovek. Výsledek porovná se vzorem a zkontroluje podle uvedených kritérií.