Existuje milión spôsobov, ako urobiť prezentáciu, ale Figma je na to podceňovaný nástroj. Funkcia prototypu vo Figme umožňuje množstvo prispôsobiteľných možností prechodu. Nielenže vaše prechody ohromia vaše publikum, ale môžete do nich začleniť aj doplnky, ktoré vám pomôžu udržať pozornosť publika, vďaka čomu budete mať istotu vo svojich schopnostiach.
Ukážeme vám, ako urobiť vražednú prezentáciu pomocou Figma; postupujte podľa tohto návodu.
1. Nastavte si svoj prvý prezentačný rám
OTVORENÉ Figma a kliknite Nový dizajnový súbor. Kliknite na Nástroj Rám (F) na kreslenie rámčeka alebo na výber prednastaveného rámčeka vpravo pomocou Prezentácia > Snímka 16:9. Môžeš vytvorte hlavnú šablónu aby ste ušetrili čas.
Premenujte svoj rám dvojitým kliknutím na modrý názov vľavo hore. Nastavte farbu pozadia; vždy to však môžete neskôr zmeniť zvýraznením všetkých rámov a zmenou farby výplne.
2. Pridajte text nadpisu
Použi Textový nástroj (T) a napíšte svoj názov. Pre samostatné riadky použite samostatné textové polia, v každom riadku stačí jedno alebo dve slová. Nastavte si predvoľby textu v
Text menu vpravo. Figma používa písma Google, takže možno budete chcieť vedieť najlepšie páry písiem Google.3. Pridať obrázok
Môžeš použite fotografiu alebo si urobte vlastnú relevantnú fotografiu. Ak chcete pridať obrázok, nakreslite obdĺžnik pomocou Nástroj Obdĺžnik (R). Váš obrázok bude sedieť v tomto tvare.
Kliknite na obdĺžnik a prejdite na Vyplňte a kliknite na farebný štvorec. Potom kliknite Plná > Obrázok > Vybrať obrázok. Nájdite svoj obrázok a kliknite OTVORENÉ. Umiestnite kurzor myši na obrázok a odkryte 4 biele kruhy. Kliknutím a potiahnutím jedného kruhu smerom dovnútra zaokrúhlite rohy obrázka.
Usporiadajte vrstvy tak, aby bol obrázok vzadu a text v hornej vrstve. Vrstvy môžete pretiahnuť na paneli vrstiev alebo pomocou Cmd/Ctrl + [ poslať vrstvu späť resp Cmd/Ctrl + ] priniesť vrstvu dopredu.
4. Vytvorte prvý prechod
Prvý prechod otvorí obrázok a umožní, aby sa text nadpisu zasunul do rámčeka. Najprv duplikujte prvú snímku tak, že ju vyberiete a stlačíte Cmd/Ctrl + D duplikovať to.
Na ľavom ráme zmeňte mierku obrázka zmenšením atribútov výšky v H rámčeka na približne 150, pričom zostane horizontálna štrbina obrazu. Zarovnajte ho na stred výberom oboch obrázkov v rámčekoch a kliknutím Omožnosť + V (Mac) alebo Alt + V (Windows).
Na dokončenie prechodu obrázka vyberte obrázok na ľavej strane. Potom zmeňte nepriehľadnosť na 0 % v pravej ponuke v poli vedľa položky Pass Through pod vrstvou. Vďaka tomu bude obrázok neviditeľný pred prechodom a otvorením.
Kliknite na prvé textové pole a podržte ho Shift. Začnite ťahať a potom tiež podržte Medzerník a pokračujte v ťahaní textu mimo rámčeka. Zdá sa, že raz zmizne z rámu. Bez pridania medzerníka tento prechod nebude fungovať, ale ak medzerník pred ťahaním podržíte, posunie sa iba váš rám.
Urobte to znova pre druhé alebo nasledujúce textové polia, ale potiahnite ich trochu ďalej doľava, aby ste pridali do prechodu nejakú rozmanitosť. Keď je text stále vybratý, znížte nepriehľadnosť vrstvy na 0 % rovnakým spôsobom, akým ste to predtým urobili pre obrázok.
Ak chcete nastaviť prechod, prejdite na Prototyp. Vyberte ľavý rám a kliknite na modrý kruh ktorý sa zobrazí v strede pravej strany rámu. Potiahnite ho tak, aby čiara prešla na druhý snímok.
V rozbaľovacej ponuke, ktorá hovorí Okamžité, vyberte Inteligentná animácia. Potom zmeňte krabicu pomocou stopky do 1000 ms. Týmto nastavíte, aby prechod trval jednu sekundu od kliknutia myšou. Ostatné nastavenia by mali byť predvolené. Uistite sa, že po nastavení prechodu nepremenujete názvy snímok, inak sa súbory nespoja.
Kliknite na hrať tlačidlo na otestovanie prechodu. Vráťte sa do Dizajn pokračovať v návrhu prezentácie.
5. Pridať ďalšie snímky
Ak chcete prejsť zo snímky 1 na snímku 2, duplikujte snímku úplne vpravo (Cmd/Ctrl + D). V novom rámci – snímka 2 – presuňte textové polia z rámčeka pomocou predchádzajúcej techniky (Shift + Potiahnite potom Medzerník potom, čo ste začali ťahať). Presuňte jedno textové pole doľava a druhé doprava od rámčeka. Nastavte nepriehľadnosť na 0 % pre obe.
V prípade obrázka ho zmenšite a posuňte mierne mimo stredu, potom nastavte nepriehľadnosť na 0 %. To vám efektívne poskytne prázdne plátno pre druhú snímku. Obsah môžete pridať nad neviditeľné aktíva z predchádzajúcej snímky.
Pridajte veľký obrázok do stredu rámu. Ak chcete na obrázok pridať nejaké ozdoby, použite a Plugin Figma pre GIF alebo stiahnite si nálepku GIF z Giphy a potiahnite ho na vrch obrázka. Vyberte svoj hlavný obrázok a všetky obrázky GIF a zoskupte ich (Cmd/Ctrl + G), tým sa zabezpečí, že funkcia Smart Animate bude fungovať správne.
Vyberte skupinu a skopírujte ju (Cmd/Ctrl + C). Potom ho prilepte na rám snímky 1 (Cmd/Ctrl + V). Zmenšite ho a nastavte nepriehľadnosť na 0 %. Potom presuňte túto vrstvu dozadu (Cmd/Ctrl + [). To zaisťuje hladký prechod na ďalšiu snímku.
Ísť do Prototyp. Vyberte snímku 2 a kliknutím na modrý kruh ju presuňte na snímku 3. Predvolené nastavenie Figma v ponuke prototypu je použiť predchádzajúce nastavenia, takže by mali byť všetky nastavené podľa predchádzajúceho prechodu. Vráťte sa do Dizajn.
Duplikovať poslednú snímku (Cmd/Ctrl + D). Táto snímka bude používať rovnaký obrázok ako predchádzajúca, ale zmeníme jej mierku na jednu stranu rámu. Presuňte obrázok doľava od rámčeka jeho ťahaním a držaním Shift. Umiestnite kurzor myši na pravý okraj obrázka, kým sa nezobrazia protiľahlé šípky, kliknite a potiahnite pravý okraj obrázka smerom doľava, kým nebudete spokojní.
Ísť do Prototyp a spojte dva rámy dohromady. Potom sa vráťte do Dizajn.
Pridajte názov a hlavný text napravo od zmenšeného obrázka a zoskupte ich. Skopírujte textovú skupinu a vložte ju na predchádzajúcu snímku. Kliknite a potiahnite textovú skupinu napravo od rámca ako predtým.
6. Pridajte maketu
Vytvorte maketu; pozrite si naše sprievodca vytváraním makiet pomocou doplnkov vo Figme. Pridajte nový rám a potom naň prilepte svoju maketu. Zmeňte veľkosť makety tak, aby sa zmestila do rámu.
Skopírujte maketu a vložte ju do predchádzajúceho rámu. Zmeňte jeho veľkosť, aby sa zmestila do časti obrázka, potom ho presuňte na zadnú stranu vrstiev a nastavte nepriehľadnosť na 0 %. Prepojte rámy Prototyp.
7. Pridať štítky
Duplikujte rám makety. Pridajte názov a popis na vysvetlenie častí vašej makety. Zoskupte text a pomenujte ho. Potom môžete vytvorte indikátor z matného skla pre vaše odrážky a čiary. Zoskupte jeden riadok s jedným kruhom. Zarovnajte svoj indikátor s tým, čo popisuje, a pridajte svoj popis vedľa neho. Prepojte rámy Prototyp.
Duplikujte rám a pridajte ďalší indikátor odrážky s tým, čo popisuje. Znova prototyp. Duplikujte každý snímok na odrážku, takže každá odrážka prechádza samostatne.
8. Ukončite svoju prezentáciu
Duplikujte poslednú snímku. Napíšte posledné alebo dve slová a vycentrujte ich. Skopírujte text a vložte ho na predchádzajúcu snímku.
Zmenšite text podržaním K pri zmenšovaní — to zachová váš text naformátovaný pri jeho zmenšení. Umiestnite text niekde v hornej časti makety a odošlite vrstvu dozadu pod obrázok. Nastavte nepriehľadnosť na 0 %. Vráťte sa na poslednú snímku.
Presuňte všetky ostatné objekty z rámu pomocou metódy ťahania. Prechod vysunie všetko smerom do strán a nahor, keď sa text posunie zhora nadol a roztiahne sa. Odkaz sa zasunie Prototyp.
9. Zdieľajte svoju prezentáciu Figma
K svojej prezentácii môžete pristupovať kdekoľvek, kde sa môžete prihlásiť do svojho účtu Figma alebo zdieľať adresu URL s ostatnými, aby ich mohli sledovať odkiaľkoľvek. Ak chcete prezentovať svoju konečnú prezentáciu s jej prechodmi, kliknite na hrať a zobrazí sa v režime celej obrazovky.
Snímky môžete uložiť aj ako súbory PDF, aj keď tým stratíte animované prechody.
Zvýšte úroveň svojich prezentácií s Figma
Nielenže je táto prezentácia minimalistická, čím nezahltí vaše publikum, ale prechody sú profesionálne a čisté. Nepotrebujete odborníka na UI/UX, aby ste Figmu používali spôsobom, ktorý je prínosom pre vaše prezentácie, bez ohľadu na vašu pracovnú pozíciu. Prezentujte s istotou a budete zaplavení otázkami o tom, ako bola vaša prezentácia vytvorená.
