Ciele
- Použiť Figma Make na rýchle vytvorenie funkčného prototypu.
- Preniesť výsledok do Figma Design a upraviť jeho vrstvy a komponenty.
- Exportovať React projekt, uložiť ho do Git repozitára a pokračovať v jeho úprave.
- Upraviť finálny prototyp tak, aby bol responzívny.
- Skontrolovať a upraviť prístupnosť prototypu.
- Nahrať finálnu verziu projektu do Git repozitára.
Úvod
Figma Make použijete na rýchle vytvorenie hlavnej štruktúry projektu a základných komponentov. Vygenerovaný výsledok následne prenesiete do dizajnového súbora nástroja Figma a do výsledného projektu v softvérovom rámci React. Autoritatívnou finálnou verziou bude upravený React projekt uložený v Gite.
Postup
Krok 1: Výber dizajnového jazyka
Úloha 1.1
Vyberte dizajnový jazyk finálneho prototypu. Môžete použiť napríklad:
- Material Design,
- Apple Human Interface Guidelines,
- Bootstrap,
- iný vhodný existujúci dizajnový jazyk.
Tvorbu vlastného dizajnového jazyka neodporúčame. Je to zložitá úloha, ktorá je mimo rozsahu tohto predmetu.
Úloha 1.2
Vo FigJam uveďte názov a zdroj vybraného dizajnového jazyka. Pri vlastnom riešení uveďte aspoň typografiu, farby, rozostupy, usporiadanie obrazoviek (layout), tvary a základné stavy komponentov.
Upozornenie
Vo finálnom prototype používajte jeden dizajnový jazyk konzistentne. Nekombinujte nesúvisiace knižnice bez zdôvodnenia.
Krok 2: Existujúci prototyp ako vstup pre Figma Make
Úloha 2.1
Vo dizajnovom súbore Figma (Figma Design) označte a skopírujte obrazovky otestovaného prototypu v1.1 do zadania pre Figma Make. Ak túto možnosť nemáte dostupnú, pripojte odkaz na dizajn alebo vložte jeho rámce a komponenty priamo do chatu.
Upozornenie
Projekt negenerujte od nuly iba z textového opisu. Existujúci a používateľsky otestovaný prototyp je povinným vizuálnym a funkčným vstupom.
Úloha 2.2
V príkazoch pre Figma Make uveďte:
- hlavný aj neštandardný scenár z cvičenia 4,
- obrazovky, prvky a prechody, ktoré sa majú zachovať,
- zmeny vyplývajúce z používateľského testovania,
- vybraný dizajnový jazyk,
- cieľové zariadenia a požiadavky na responzívnosť,
- požadované chybové a neštandardné stavy.
Upozornenie
Do Figma Make nevkladajte osobné údaje účastníkov ani neverejné videozáznamy.
Krok 3: Rýchle prototypovanie vo Figma Make
Úloha 3.1
Pomocou Figma Make vytvorte hlavnú štruktúru projektu a základné komponenty potrebné na vykonanie hlavného aj neštandardného scenára.
Úloha 3.2
Prejdite oba scenáre a skontrolujte, či vygenerovaný prototyp:
- zodpovedá existujúcemu prototypu v1.1,
- zapracúva poznatky z používateľského testovania,
- používa vybraný dizajnový jazyk,
- obsahuje potrebné stavy a spätnú väzbu,
- nebol nahradený všeobecným CRUD rozhraním.
Výsledok môžete upravovať ďalšími príkazmi alebo úpravou vybraných častí náhľadu.
Krok 4: Prenesenie prototypu do Figma Design
Úloha 4.1
Vo Figma Make nastavte náhľad do stavu, ktorý chcete preniesť. Použite možnosť Copy design alebo Copy preview as design layers a vložte výsledok do svojho dizajnového súboru.
Prenesený náhľad tvorí upraviteľná kolekcia vrstiev. Nejde iba o snímku obrazovky.
Úloha 4.2
Skontrolujte štruktúru vrstiev, pomenovanie, rozostupy, typografiu a väzbu na premenné. Opakujúce sa alebo samostatne zmysluplné prvky premeňte na Figma komponenty.
Komponent vytvoríte označením vrstiev a použitím možnosti Create component. Jeho ďalšie použitia vytvárajte ako inštancie. Rôzne stavy toho istého komponentu kombinujte do variánt.
Poznámka
Prenos náhľadu do Figma Design opakujte pre ďalšie potrebné stavy obrazoviek. Interakcie a dynamické správanie skontrolujete vo funkčnom prototype a v React projekte.
Krok 5: Export projektu do React
Úloha 5.1
Vo Figma Make otvorte zobrazenie Code a prezrite si štruktúru súborov a komponentov.
Úloha 5.2
Pomocou možnosti Code → Download code stiahnite celý projekt ako ZIP, rozbaľte ho a otvorte vo vývojovom prostredí.
V koreňovom adresári projektu spustite:
npm install
npm run dev
Poznámka
Ak projekt používa iné príkazy, postupujte podľa súboru package.json alebo dokumentácie vytvorenej vo Figma Make.
Krok 6: Východisková verzia v Git-e
Úloha 6.1
Na katedrovom Git serveri vytvorte repozitár s názvom začínajúcim na UX- a nahrajte doň stiahnutý projekt.
Vygenerovaný základ uložte samostatným commitom, napríklad:
Figma Make: východisková verzia
Upozornenie
Od tohto momentu je autoritatívnou verziou projektu kód v katedrovom Git repozitári.
Krok 7: Úprava React komponentov
Úloha 7.1
Prezrite si súbor package.json, adresár src, hlavný komponent aplikácie, globálne štýly a komponenty zodpovedajúce obom scenárom.
Úloha 7.2
Opakujúce sa alebo samostatne zmysluplné časti rozhrania rozdeľte do komponentov v adresári src/components. Hlavné obrazovky alebo pohľady umiestnite do src/pages.
Príklad komponentu:
import "./Menu.css";
const Menu = () => {
return (
<nav className="Menu">
{/* obsah navigácie */}
</nav>
);
};
export default Menu;
Úloha 7.3
Odstráňte nepoužité súbory, duplicitné komponenty a náhodné štýly vytvorené pri generovaní. Zachovajte konzistentné doménové názvoslovie.
Krok 8: Responzívnosť
Úloha 8.1
Použite flexibilné usporiadanie flexbox alebo grid a overte prototyp pri šírkach cieľových zariadení.
.card-list {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
@media (max-width: 680px) {
.card-list {
flex-direction: column;
}
}
Skontrolujte navigáciu, zalamovanie a poradie obsahu, čitateľnosť textov, veľkosť ovládacích prvkov a stratu alebo prekrytie obsahu.
Krok 9: Prístupnosť
Úloha 9.1
Upravte prototyp tak, aby:
- používal sémantické HTML elementy,
- bol ovládateľný klávesnicou,
- mal viditeľný fokus,
- používal textové označenia formulárov a ovládacích prvkov,
- poskytoval alternatívne texty významovým obrázkom,
- mal dostatočný kontrast,
- poskytoval zrozumiteľnú spätnú väzbu a chybové hlásenia.
Úloha 9.2
Overte hlavný aj neštandardný scenár bez použitia myši.
Krok 10: Opätovné použitie Figma Make
Úloha 10.1
Ak vo Figma Make pregenerujete komponent alebo inú časť projektu:
- preneste iba potrebné súbory alebo zmeny,
- porovnajte ich s existujúcim React projektom,
- skontrolujte oba scenáre, responzívnosť a prístupnosť,
- uložte zmenu v samostatnom commite,
- v správe commitu uveďte použitie Figma Make.
Príklad:
Figma Make: pregenerovanie komponentu vyhľadávania