Existuje milion způsobů, jak udělat prezentaci, ale Figma je pro ni nedoceněný nástroj. Funkce prototypu ve Figmě umožňuje velké množství přizpůsobitelných možností přechodu. Nejen, že vaše přechody ohromí vaše publikum, ale můžete začlenit pluginy pro extra pizazz a udržet vaše publikum v zapojení, takže budete mít jistotu ve své dovednosti.
Ukážeme vám, jak vytvořit zabijáckou prezentaci pomocí Figma; postupujte podle tohoto návodu.
1. Nastavte si svůj první prezentační rámeček
OTEVŘENO Figma a klikněte Nový soubor návrhu. Klikněte na Nástroj Rám (F) pro nakreslení rámečku nebo pro výběr přednastaveného rámečku vpravo pomocí Prezentace > Snímek 16:9. Můžeš vytvořit hlavní šablonu ušetřit čas.
Přejmenujte rámeček dvojitým kliknutím na modrý název vlevo nahoře. Nastavte barvu pozadí; vždy to však můžete později změnit zvýrazněním všech rámečků a změnou barvy výplně.
2. Přidejte text nadpisu
Použijte Textový nástroj (T) a napište svůj název. Pro samostatné řádky použijte samostatná textová pole s pouze jedním nebo dvěma slovy na řádek. Nastavte předvolby textu v
Text menu vpravo. Figma používá písma Google, takže možná budete chtít vědět nejlepší párování písem Google.3. Přidat obrázek
Můžeš použijte fotografii nebo pořiďte vlastní relevantní fotografii. Chcete-li přidat obrázek, nakreslete obdélník pomocí Nástroj obdélník (R). Váš obrázek bude sedět v tomto tvaru.
Klikněte na obdélník a přejděte na Vyplnit a klikněte na barevný čtverec. Pak klikněte Těleso > Obrázek > Vybrat obrázek. Najděte svůj obrázek a klikněte OTEVŘENO. Umístěním ukazatele myši na obrázek zobrazíte 4 bílé kruhy. Kliknutím a přetažením jednoho kruhu dovnitř zakulatíte rohy obrázku.
Uspořádejte vrstvy tak, aby byl obrázek vzadu a text v horní vrstvě. Vrstvy můžete přetáhnout v panelu vrstev nebo pomocí Cmd/Ctrl + [ poslat vrstvu zpět popř Cmd/Ctrl + ] přivést vrstvu dopředu.
4. Vytvořte první přechod
První přechod otevře obrázek a umožní, aby text titulku vklouzl do rámečku. Nejprve duplikujte první snímek tak, že jej vyberete a stisknete Cmd/Ctrl + D duplikovat to.
V levém rámu změňte měřítko obrázku zmenšením atributů výšky v H box na přibližně 150, přičemž v obrázku zůstane vodorovný výřez. Zarovnejte jej na střed výběrem obou obrázků přes rámečky a kliknutím Ómožnost + V (Mac) nebo Alt + V (Okna).
Chcete-li přechod obrázku dokončit, vyberte obrázek na levé straně. Poté změňte neprůhlednost na 0 % v pravé nabídce v poli vedle položky Pass Through pod vrstvou. Tím se obrázek stane neviditelným před přechodem a otevřením.
Klepněte na první textové pole a podržte jej Posun. Začněte táhnout a poté také podržte mezerník a pokračujte v přetahování textu z rámečku. Vypadá to, že jednou zmizí z rámu. Bez přidání mezerníku tento přechod nebude fungovat, ale pokud mezerník před přetažením podržíte, posune se pouze váš rámeček.
Udělejte to znovu pro vaše druhé nebo následující textová pole, ale přetáhněte je o něco dále doleva, abyste přechodu trochu zpestřili. Se stále vybraným textem snižte krytí vrstvy na 0 % stejným způsobem, jakým jste to dříve dělali pro obrázek.
Chcete-li nastavit přechod, přejděte na Prototyp. Vyberte levý rámeček a klikněte na modrý kruh který se objeví ve středu pravé strany rámu. Přetáhněte ji, aby čára přešla do druhého snímku.
V rozbalovací nabídce, která říká Okamžitý, vyberte Chytrá animace. Poté vyměňte krabici pomocí stopky do 1000 ms. Tím nastavíte, aby přechod trval jednu sekundu od kliknutí myší. Ostatní nastavení by měla být nastavena jako výchozí. Ujistěte se, že po nastavení přechodu nepřejmenujete názvy snímků, jinak se soubory nespojí.
Klikněte na Hrát si pro otestování přechodu. Jít zpět k Design pokračovat v návrhu prezentace.
5. Přidat další snímky
Chcete-li přejít ze snímku 1 na snímek 2, zkopírujte snímek zcela vpravo (Cmd/Ctrl + D). V novém rámci – snímek 2 – přesuňte textová pole z rámečku pomocí předchozí techniky (Posun + Táhnout pak mezerník poté, co začnete přetahovat). Přesuňte jedno textové pole doleva a druhé doprava od rámečku. U obou nastavte krytí na 0 %.
U obrázku jej zmenšete a posuňte mírně mimo střed a poté nastavte krytí na 0 %. To vám efektivně poskytne prázdné plátno pro druhý snímek. Obsah můžete přidat na neviditelné položky z předchozího snímku.
Přidejte velký obrázek do středu rámu. Chcete-li na obrázek přidat nějaké dekorace, použijte a Plugin Figma pro GIFy nebo stáhněte si nálepku GIF z Giphy a přetáhněte jej na horní část obrázku. Vyberte svůj hlavní obrázek a všechny obrázky GIF a seskupte je (Cmd/Ctrl + G), to zajistí, že Smart Animate bude fungovat správně.
Vyberte skupinu a zkopírujte ji (Cmd/Ctrl + C). Poté jej nalepte na rámeček snímku 1 (Cmd/Ctrl + PROTI). Zmenšete jej a nastavte krytí na 0 %. Poté přesuňte tuto vrstvu dozadu (Cmd/Ctrl + [). To zajišťuje hladký přechod do dalšího snímku.
Jít do Prototyp. Vyberte snímek 2 a kliknutím na modrý kruh jej přetáhněte na snímek 3. Výchozí nastavení Figmy v nabídce prototypu je použít předchozí nastavení, takže by měla být všechna nastavena podle předchozího přechodu. Jít zpět k Design.
Duplikujte poslední snímek (Cmd/Ctrl + D). Tento snímek bude používat stejný obrázek jako předchozí, ale změníme jeho měřítko na jednu stranu rámečku. Přesuňte obrázek doleva od rámečku přetažením a přidržením Posun. Najeďte myší na pravý okraj obrázku, dokud se neobjeví protilehlé šipky, klikněte a přetáhněte pravý okraj obrázku směrem doleva, dokud nebudete spokojeni.
Jít do Prototyp a spojte oba rámy dohromady. Pak se vraťte do Design.
Přidejte nadpis a hlavní text napravo od zmenšeného obrázku a seskupte je dohromady. Zkopírujte textovou skupinu a vložte ji na předchozí snímek. Klikněte a přetáhněte textovou skupinu napravo od rámečku jako předtím.
6. Přidejte maketu
Vytvořte maketu; podívejte se na naše průvodce vytvářením maket pomocí zásuvných modulů ve Figmě. Přidejte nový rámeček a vložte na něj maketu. Změňte velikost makety tak, aby odpovídala rámu.
Zkopírujte maketu a vložte ji do předchozího rámečku. Změňte jeho velikost tak, aby se vešel do obrazové části, poté jej přesuňte na zadní stranu vrstev a nastavte krytí na 0 %. Propojte rámečky Prototyp.
7. Přidat štítky
Duplikujte rám makety. Přidejte název a popis pro vysvětlení částí vaší makety. Seskupte text a pojmenujte jej. Potom můžeš vytvořte indikátor z matného skla pro vaše odrážky a čáry. Seskupte jeden řádek s jedním kruhem. Zarovnejte indikátor s tím, co popisuje, a přidejte svůj popis vedle něj. Propojte rámečky Prototyp.
Duplikujte snímek a přidejte další indikátor odrážky s tím, co popisuje. Prototypujte to znovu. Duplikujte každý snímek na odrážku, takže každá odrážka přechází samostatně.
8. Ukončete svou prezentaci
Duplikujte poslední snímek. Napište poslední slovo nebo dvě a vycentrujte je. Zkopírujte text a vložte jej na předchozí snímek.
Zmenšete text přidržením K při jeho zmenšování – to zachová váš text formátovaný při jeho zmenšení. Umístěte text někde blízko horní části makety a odešlete vrstvu dozadu pod obrázek. Nastavte neprůhlednost na 0 %. Vraťte se k poslednímu snímku.
Přesuňte všechny ostatní objekty z rámečku pomocí metody tažení. Přechod bude vysouvat vše směrem do stran a nahoru, jak se text pohybuje dolů a roztahuje se. Odkaz se zasune Prototyp.
9. Sdílejte svou prezentaci Figma
Ke své prezentaci můžete přistupovat odkudkoli, kde se můžete přihlásit ke svému účtu Figma nebo sdílet adresu URL s ostatními, aby je mohli sledovat odkudkoli. Chcete-li prezentovat svou finální prezentaci s jejími přechody, klikněte na Hrát si a zobrazí se v režimu celé obrazovky.
Snímky můžete také uložit jako PDF, i když tím ztratíte animované přechody.
Zvyšte úroveň svých prezentací pomocí Figma
Nejen, že je tato prezentace minimalistická, která vaše publikum nezahltí, ale přechody jsou profesionální a čisté. Není potřeba experta na UI/UX, aby používal Figmu způsobem, který je přínosem pro vaše prezentace, bez ohledu na vaši pracovní roli. Prezentujte sebevědomě a budete zaplaveni otázkami o tom, jak byla vaše prezentace vytvořena.
