Millióféle módon lehet prezentációt készíteni, de a Figma alulértékelt eszköz ehhez. A Figma prototípus funkciója számos testreszabható átmeneti lehetőséget tesz lehetővé. Az átállások nemcsak elkápráztatják a közönséget, hanem beépíthetsz beépülő modulokat is, amelyek extra pizzázást tesznek lehetővé, és leköti a közönséget, így biztos lehetsz a képességeidben.
Megmutatjuk, hogyan készíthetsz gyilkos prezentációt a Figma segítségével; csak kövesse ezt az útmutatót.
1. Állítsa be első prezentációs keretét
Nyisd ki Figma és kattintson Új tervfájl. Kattints a Keret eszköz (F) segítségével megrajzolhatja a keretet, vagy kiválaszthat egy előre beállított keretet a jobb oldalon Bemutatás > 16:9 dia. tudsz mestersablon létrehozása időt spórolni.
Nevezze át a keretet a bal felső sarokban található kék címre duplán kattintva. Állítson be egy háttérszínt; bár később bármikor módosíthatja az összes keret kiemelésével és a kitöltési szín megváltoztatásával.
2. Adja hozzá a cím szövegét
Használja a Szöveg eszköz
(T), és írja be a címét. Használjon külön szövegdobozokat külön sorokhoz, soronként csak egy vagy két szóval. Állítsa be szöveges beállításait a Szöveg menü a jobb oldalon. A Figma Google betűtípusokat használ, ezért érdemes tudni a legjobb Google betűtípus-párosítások.3. Kép hozzáadása
tudsz használjon stock fotót vagy készítsen saját megfelelő fényképet. Kép hozzáadásához rajzoljon egy téglalapot a gombbal Téglalap eszköz (R). A képed ebben a formában fog ülni.
Kattintson a téglalapra, és lépjen a következőre Tölt és kattintson a színes négyzet. Ezután kattintson Szilárd > Kép > Kép kiválasztása. Keresse meg a képet, és kattintson Nyisd ki. Vigye az egérmutatót a kép fölé, hogy 4 fehér kört jelenítsen meg. Kattintson és húzzon egy kört befelé a kép sarkainak lekerekítéséhez.
Rendezd el a rétegeket úgy, hogy a kép hátul, a szöveg pedig a felső rétegen legyen. A rétegeket a rétegek panelen vagy a használatával húzhatja át Cmd/Ctrl + [ réteget visszaküldeni ill Cmd/Ctrl + ] egy réteget előre vinni.
4. Hozza létre az első átmenetet
Az első átmenet megnyitja a képet, és lehetővé teszi, hogy a cím szövege becsússzon a keretbe. Először is másolja meg az első képkockát úgy, hogy kijelöli és leüti Cmd/Ctrl + D megkettőzni.
A bal oldali keretben méretezze le a képet a magasság attribútumok csökkentésével H 150 körülire, így vízszintes rés marad a képen. Igazítsa középre úgy, hogy mindkét képet kijelöli a keretben, és kattintson rá Option + V (Mac) vagy Alt + V (Ablakok).
A képátmenet befejezéséhez válassza ki a bal oldali képet. Ezután változtassa meg a átlátszatlanság 0%-ra a jobb oldali menüben a Réteg alatti Áthaladás melletti mezőben. Ez láthatatlanná teszi a képet, mielőtt átmenet és megnyílik.
Kattintson az első szövegmezőre, és tartsa lenyomva Váltás. Kezdje el húzni, majd tartsa lenyomva Szóköz és folytassa a szöveg kihúzását a keretből. Úgy tűnik, egyszer csak eltűnik a keretből. A szóköz hozzáadása nélkül ez az átmenet nem működik, de ha húzás előtt lenyomva tartja a szóköz billentyűt, akkor csak a keretet mozgatja.
Ismételje meg ezt a második vagy az azt követő szövegdobozoknál, de húzza őket egy kicsit balra, hogy változatosabbá tegye az átmenetet. Ha a szöveg továbbra is ki van jelölve, csökkentse a réteg átlátszatlanságát 0%-ra, ugyanúgy, ahogy korábban a képnél tette.
Az átmenet beállításához lépjen a következőre: Prototípus. Válassza ki a bal oldali keretet, és kattintson a gombra kék kör amely a keret jobb oldalának közepén jelenik meg. Húzza el, hogy a vonal a második képkockához kerüljön.
A legördülő menüben, amely azt mondja Azonnali, válassza ki Intelligens animáció. Ezután cserélje ki a dobozt a stopperóra 1000 ms-ig. Ez beállítja, hogy az átállás egy másodpercig tartson az egérkattintástól számítva. A többi beállítást alapértelmezés szerint kell beállítani. Ügyeljen arra, hogy ne nevezze át a keretcímeket az átmenet beállítása után, ellenkező esetben a fájlok nem fognak kapcsolódni.
Kattints a Játék gombot az átmenet teszteléséhez. Menj vissza Tervezés hogy folytassa a prezentáció tervezését.
5. További diák hozzáadása
Az 1. diáról a 2. diára váltáshoz duplikálja meg a jobb szélső diát (Cmd/Ctrl + D). Az új keretben – a 2. diában – mozgassa ki a szövegdobozokat a keretből az előző technikával (Váltás + Húzza akkor Szóköz miután elkezdte húzni). Helyezze az egyik szövegdobozt a keret bal oldalára, a másikat pedig jobbra. Állítsa az átlátszatlanságot 0%-ra mindkettőnél.
A képhez méretezze le, és mozdítsa el kissé a középponttól, majd állítsa az átlátszatlanságot 0%-ra. Ez gyakorlatilag egy üres vásznat ad a második diához. A tartalmat az előző diából származó láthatatlan elemek fölé helyezheti.
Adjon hozzá egy nagy képet a keret közepéhez. Ha díszítést szeretne hozzáadni a kép tetejére, használja a Figma plugin GIF-ekhez vagy tölts le egy matrica GIF-et a Giphy-ről és húzza a kép tetejére. Válassza ki a fő képet és az esetleges GIF-eket, majd csoportosítsa őket (Cmd/Ctrl + G), ez biztosítja a Smart Animate megfelelő működését.
Válassza ki a csoportot és másolja ki (Cmd/Ctrl + C). Ezután illessze be az 1. dia keretére (Cmd/Ctrl + V). Méretezze le, és állítsa az átlátszatlanságot 0%-ra. Ezután mozgassa ezt a réteget hátulra (Cmd/Ctrl + [). Ez biztosítja a zökkenőmentes átmenetet a következő diára.
Menj Prototípus. Válassza ki a 2. diát, és kattintson a kék körre, hogy a 3. diára húzza. A Figma alapértelmezett beállítása a prototípus menüben a korábbi beállítások használata, tehát mindegyiket az előző átmenetnek megfelelően kell beállítani. Menj vissza Tervezés.
Az utolsó dia megkettőzése (Cmd/Ctrl + D). Ez a dia ugyanazt a képet fogja használni, mint az előző, de a keret egyik oldalára méretezzük. Mozgassa a képet a keret bal oldalára úgy, hogy közben húzza Váltás. Vigye az egérmutatót a kép jobb szélére, amíg az ellentétes nyilak meg nem jelennek, kattintson rá, és húzza a kép jobb szélét balra, amíg elégedett nem lesz.
Menj Prototípus és kösd össze a két keretet. Ezután térjen vissza a Tervezés.
Adjon hozzá egy címet és törzsszöveget a méretezett kép jobb oldalán, és csoportosítsa őket. Másolja ki a szövegcsoportot, és illessze be az előző diára. Kattintson és húzza a szövegcsoportot a keret jobb oldalán, mint korábban.
6. Makett hozzáadása
Készítsen makett; nézd meg nálunk útmutató a makettek létrehozásához a Figma pluginjaival. Adjon hozzá egy új keretet, majd illessze be a makettjét. Méretezze át a makett, hogy illeszkedjen a kerethez.
Másolja ki a makett, és illessze be az előző keretbe. Méretezze át úgy, hogy beleférjen a képrészbe, majd mozgassa a rétegek hátuljára, és állítsa az átlátszatlanságot 0%-ra. Kapcsolja össze a kereteket Prototípus.
7. Címkék hozzáadása
Másolja le a makett keretet. Adjon hozzá címet és leírást a makett egyes részei magyarázatához. Csoportosítsd a szöveget és nevezd el. Akkor lehet hozzon létre egy mattüveg jelzőt pontjaihoz és vonalaihoz. Csoportosítson egy sort egy körrel. Állítsa össze a mutatót a leírással, és adja hozzá a leírást. Kapcsolja össze a kereteket Prototípus.
Másolja le a keretet, és adjon hozzá egy másik felsoroláspont-jelzőt azzal, amit leír. Újra prototípus. Felsoroláspontonként duplikáljon minden képkockát, így az egyes felsoroláspontok egyedül váltanak át.
8. Befejezése
Az utolsó dia megkettőzése. Írjon egy-két utolsó szót, és középre helyezze. Másolja ki a szöveget, és illessze be az előző diára.
Tartsa lenyomva a szöveget K méretezése közben – így a szöveg formázva marad, miközben kisebb méretben. Helyezze el a szöveget valahol a makett tetejéhez, és küldje el a réteget a kép alá, hátulra. Állítsa az átlátszatlanságot 0%-ra. Menjen vissza az utolsó diához.
Az összes többi objektumot mozgassa ki a keretből a húzási módszerrel. Az átmenet mindent kicsúsztat az oldalak és a teteje felé, ahogy a szöveg felülről lefelé halad és kitágul. A link becsúszik Prototípus.
9. Ossza meg Figma-bemutatóját
Bárhol elérheti prezentációját, ahol be tud jelentkezni Figma-fiókjába, vagy meg tudja osztani az URL-t másokkal, így bárhonnan megtekinthetik. A végső bemutató bemutatásához az átmenetekkel együtt kattintson a gombra Játék gombot, és teljes képernyős módban jelenjen meg.
A kereteket PDF-ként is elmentheti, bár ezzel elveszti az animált átmeneteket.
Emelje fel prezentációit a Figmával
Ez a prezentáció nem csak minimalista, ami nem fogja elárasztani a közönséget, de az átmenetek professzionálisak és letisztultak. Nincs szükség UI/UX szakértőre ahhoz, hogy a Figmát olyan módon használja, amely a prezentációinak előnyére válik, függetlenül a beosztásától. Prezentáljon magabiztosan, és elárasztják a prezentáció elkészítésének mikéntjével kapcsolatos kérdések.
