Obstaja milijon načinov za izdelavo predstavitve, vendar je Figma za to podcenjeno orodje. Funkcija prototipa v Figmi omogoča številne prilagodljive možnosti prehoda. Ne samo, da bodo vaši prehodi navdušili vaše občinstvo, ampak lahko vključite vtičnike za dodaten popestritev in poskrbite, da bo vaše občinstvo vključeno, tako da boste prepričani v svoje sposobnosti.
Pokazali vam bomo, kako narediti morilsko predstavitev s pomočjo Figme; samo sledite tem navodilom.
1. Nastavite svoj prvi predstavitveni okvir
Odprto Figma in kliknite Nova projektna datoteka. Kliknite na Orodje za okvir (F), da narišete svoj okvir ali izberete prednastavljeni okvir na desni s pomočjo Predstavitev > Diapozitiv 16:9. Ti lahko ustvarite glavno predlogo prihraniti čas.
Preimenujte svoj okvir tako, da dvokliknete modri naslov v zgornjem levem kotu. Nastavite barvo ozadja; čeprav ga lahko vedno spremenite pozneje, tako da označite vse okvirje in spremenite barvo polnila.
2. Dodajte besedilo naslova
Uporabi Orodje za besedilo
(T) in napišite svoj naslov. Uporabite ločena besedilna polja za ločene vrstice, z eno ali dvema besedama na vrstico. Nastavite svoje besedilne nastavitve v Besedilo meni na desni. Figma uporablja Googlove pisave, zato boste morda želeli vedeti najboljši pari Googlovih pisav.3. Dodajte sliko
Ti lahko uporabite fotografijo ali posnamete svojo ustrezno fotografijo. Če želite dodati sliko, narišite pravokotnik z Orodje za pravokotnik (R). Vaša slika bo sedela v tej obliki.
Kliknite pravokotnik in pojdite na Napolnite in kliknite na barvni kvadrat. Nato kliknite Trdno > Slika > Izberi sliko. Poiščite svojo sliko in kliknite Odprto. Premaknite miškin kazalec nad sliko, da razkrijete 4 bele kroge. Kliknite in povlecite en krog navznoter, da zaokrožite vogale slike.
Razporedite svoje plasti tako, da je slika zadaj, besedilo pa na zgornjem sloju. Plasti lahko povlečete na plošči plasti ali z uporabo Cmd/Ctrl + [ poslati plast nazaj oz Cmd/Ctrl + ] da bi plast prinesla naprej.
4. Ustvarite prvi prehod
Prvi prehod bo odprl sliko in omogočil, da besedilo naslova zdrsne v okvir. Najprej podvojite prvi okvir tako, da ga izberete in pritisnete Cmd/Ctrl + D da ga podvojim.
Na levem okvirju zmanjšajte sliko tako, da zmanjšate atribute višine v H polje na približno 150, tako da ostane vodoravna reža slike. Poravnajte ga na sredino tako, da izberete obe sliki čez okvirje in kliknete Option + V (Mac) oz Alt + V (Windows).
Če želite dokončati prehod slike, izberite levo sliko. Nato spremenite motnost na 0% v desnem meniju v polju poleg Pass Through pod Layer. Tako bo slika nevidna, preden se preklopi in odpre.
Kliknite prvo besedilno polje in pridržite Shift. Začnite vleči, nato tudi držite pritisnjeno Preslednica in nadaljujte z vlečenjem besedila iz okvirja. Videti je, kot da enkrat izgine iz okvirja. Brez dodajanja preslednice ta prehod ne bo deloval, če pa držite preslednico, preden povlečete, bo le premaknil vaš okvir.
To storite še enkrat za druga ali naslednja besedilna polja, vendar jih povlecite še nekoliko levo, da dodate nekaj raznolikosti v prehodu. Ko je besedilo še vedno izbrano, zmanjšajte motnost plasti na 0 %, kot ste to storili prej za sliko.
Če želite nastaviti prehod, pojdite na Prototip. Izberite levi okvir in kliknite modri krog ki se prikaže na sredini desne strani okvirja. Povlecite ga, tako da gre črta na vaš drugi okvir.
V spustnem meniju piše Takoj, izberite Pametna animacija. Nato zamenjajte škatlo z štoparica do 1000 ms. S tem bo vaš prehod trajal eno sekundo s klikom miške. Ostale nastavitve je treba nastaviti privzeto. Prepričajte se, da ne preimenujete naslovov okvirjev po nastavitvi prehoda, sicer se datoteke ne bodo povezali.
Kliknite na Igraj gumb, da preizkusite svoj prehod. Pojdi nazaj k Oblikovanje za nadaljevanje oblikovanja predstavitve.
5. Dodaj več diapozitivov
Če želite preiti z diapozitiva 1 na diapozitiv 2, podvojite svoj skrajni desni diapozitiv (Cmd/Ctrl + D). V novem okvirju – diapozitivu 2 – premaknite besedilna polja iz okvirja s prejšnjo tehniko (Shift + Povlecite potem Preslednica ko ste začeli vleči). Premaknite eno besedilno polje na levo, drugo pa na desno stran okvirja. Za oba nastavite motnost na 0%.
Za sliko jo pomanjšajte in premaknite nekoliko izven središča, nato nastavite motnost na 0%. To vam dejansko daje prazno platno za vaš drugi diapozitiv. Vsebino lahko dodate na vrh nevidnih sredstev s prejšnjega diapozitiva.
Dodajte veliko sliko na sredino okvirja. Če želite na svojo sliko dodati nekaj okraskov, uporabite a Vtičnik Figma za GIF oz prenesite nalepko GIF iz Giphyja in ga povlecite na vrh slike. Izberite svojo glavno sliko in poljubne GIF-e ter jih združite (Cmd/Ctrl + G), to zagotavlja, da bo Smart Animate pravilno deloval.
Izberite skupino in jo kopirajte (Cmd/Ctrl + C). Nato ga prilepite na okvir diapozitiva 1 (Cmd/Ctrl + V). Zmanjšajte ga in nastavite motnost na 0%. Nato premaknite to plast na zadnjo stran (Cmd/Ctrl + [). To zagotavlja gladek prehod na naslednji diapozitiv.
Pojdi do Prototip. Izberite diapozitiv 2 in kliknite modri krog, da ga povlečete na diapozitiv 3. Privzeta nastavitev Figme v meniju prototipa je uporaba prejšnjih nastavitev, zato morajo biti vse nastavljene v skladu s prejšnjim prehodom. Pojdi nazaj k Oblikovanje.
Podvoji zadnji diapozitiv (Cmd/Ctrl + D). Ta diapozitiv bo uporabil isto sliko kot prejšnji, vendar jo bomo povečali na eno stran okvirja. Premaknite sliko na levo stran okvirja tako, da jo povlečete, medtem ko držite Shift. Premaknite kazalec miške na desni rob slike, dokler se ne prikažejo nasprotno obrnjene puščice, kliknite in povlecite desni rob slike proti levi, dokler ni zadovoljen.
Pojdi do Prototip in povežite oba okvirja skupaj. Nato se vrnite na Oblikovanje.
Desno od pomanjšane slike dodajte naslov in telo besedila ter ju združite. Kopirajte skupino besedil in jo prilepite na prejšnji diapozitiv. Kliknite in povlecite skupino besedil na desno od okvirja kot prej.
6. Dodajte maketo
Ustvarite maketo; preverite naše vodnik za ustvarjanje modelov z uporabo vtičnikov v Figmi. Dodajte nov okvir in nanj prilepite svoj model. Spremenite velikost makete, da se prilega okvirju.
Kopirajte maketo in jo prilepite na prejšnji okvir. Spremenite velikost, da se prilega delu slike, nato jo premaknite na zadnjo stran plasti in nastavite motnost na 0%. Povežite okvirje Prototip.
7. Dodaj oznake
Podvojite okvir makete. Dodajte naslov in opis, da razložite dele svoje makete. Združite besedilo in ga poimenujte. Potem lahko ustvarite indikator motnega stekla za vaše oznake in črte. Združite eno vrstico z enim krogom. Svoj indikator poravnajte s tem, kar opisuje, in zraven dodajte svoj opis. Povežite okvirje Prototip.
Podvojite okvir in dodajte še en indikator točke s tem, kar opisuje. Prototip tega še enkrat. Podvojite vsak okvir na zaporedno točko, tako da bo vsaka označna točka prešla sama.
8. Končajte svojo predstavitev
Podvojite zadnji diapozitiv. Napišite zadnjo besedo ali dve in jo sredite. Kopirajte besedilo in ga prilepite na prejšnji diapozitiv.
Pomanjšajte besedilo z držanjem K medtem ko ga spreminjate – to ohranja vaše besedilo oblikovano, medtem ko ga zmanjšate. Postavite besedilo nekje blizu vrha makete in pošljite plast na zadnjo stran, pod sliko. Nastavite motnost na 0%. Vrnite se na zadnji diapozitiv.
Z vlečenjem premaknite vse druge predmete iz okvirja. Prehod bo vse zdrsnil navzven proti stranem in vrhu, ko se besedilo premakne navzdol od vrha in razširi. Povezava se vstavi Prototip.
9. Delite svojo predstavitev Figma
Do svoje predstavitve lahko dostopate kjer koli, kjer se lahko prijavite v svoj račun Figma ali delite URL z drugimi, tako da jih lahko gledajo od koder koli. Če želite predstaviti svojo končno predstavitev z njenimi prehodi, kliknite na Igraj gumb in prisoten v celozaslonskem načinu.
Okvirje lahko shranite tudi kot datoteke PDF, čeprav boste s tem izgubili animirane prehode.
Izboljšajte svoje predstavitve s Figmo
Ne samo, da je ta predstavitev minimalistična, ki ne bo preobremenila vaše občinstva, ampak so prehodi profesionalni in čisti. Za uporabo Figme na način, ki koristi vašim predstavitvam, ni potreben strokovnjak za uporabniški vmesnik/UX, ne glede na vašo delovno vlogo. Predstavite se samozavestno in preplavili vas bodo vprašanja o tem, kako je bila vaša predstavitev narejena.
