Esityksen tekemiseen on miljoonia tapoja, mutta Figma on aliarvostettu työkalu siihen. Figman prototyyppiominaisuus mahdollistaa lukuisia mukautettavia siirtymävaihtoehtoja. Siirtymisesi eivät vain ilahduta yleisöäsi, vaan voit sisällyttää lisäosia lisäpisauksiin ja pitää yleisösi sitoutuneena, jolloin voit tuntea olosi varmaksi taitoistasi.
Näytämme sinulle kuinka tehdä tappava esitys Figman avulla; seuraa vain tätä ohjetta.
1. Aseta ensimmäinen esityskehys
Avata Figma ja napsauta Uusi suunnittelutiedosto. Klikkaa Kehystyökalu (F) piirtääksesi kehyksesi tai valitaksesi esiasetetun kehyksen oikealta käyttämällä Esittely > Dia 16:9. Sinä pystyt luo perusmalli ajan säästämiseksi.
Nimeä kehys uudelleen kaksoisnapsauttamalla sinistä otsikkoa vasemmassa yläkulmassa. Aseta taustaväri; Voit kuitenkin aina muuttaa sitä myöhemmin korostamalla kaikki kehykset ja muuttamalla täyttöväriä.
2. Lisää otsikkoteksti
Käytä Tekstityökalu (T) ja kirjoita otsikkosi. Käytä erillisiä tekstiruutuja eri riveille, joissa on vain yksi tai kaksi sanaa rivillä. Aseta tekstiasetukset kohdassa
Teksti valikko oikealla. Figma käyttää Googlen kirjasimia, joten saatat haluta tietää parhaat Google-fonttiparit.3. Lisää kuva
Sinä pystyt käytä arkistokuvaa tai ota oma asiaankuuluva valokuvasi. Lisää kuva piirtämällä suorakulmio käyttämällä Suorakaide työkalu (R). Kuvasi istuu tässä muodossa.
Napsauta suorakulmiota ja siirry kohtaan Täyttää ja napsauta värillinen neliö. Napsauta sitten Kiinteä > Kuva > Valitse kuva. Etsi kuvasi ja napsauta Avata. Vie hiiri kuvan päälle paljastaaksesi 4 valkoista ympyrää. Napsauta ja vedä yksi ympyrä sisäänpäin pyöristääksesi kuvan kulmat.
Järjestä kerroksesi niin, että kuva on takana ja teksti ylimmällä kerroksessa. Voit vetää tasoja Tasot-paneelissa tai käyttämällä Cmd/Ctrl + [ lähettääksesi kerroksen takaisin tai Cmd/Ctrl + ] tuoda kerroksen eteenpäin.
4. Luo ensimmäinen siirto
Ensimmäinen siirtymä avaa kuvan ja antaa otsikkotekstin liukua kehykseen. Kopioi ensin ensimmäinen kehys valitsemalla se ja painamalla Cmd/Ctrl + D kopioida se.
Pienennä kuvaa vasemmassa kehyksessä pienentämällä korkeusmääritteitä H laatikko noin 150:een, jolloin kuvaan jää vaakasuora viilto. Keskitä se valitsemalla molemmat kuvat kehyksistä ja napsauttamalla Ooptio + V (Mac) tai Alt + V (Windows).
Viimeistele kuvan siirto valitsemalla vasemmanpuoleinen kuva. Vaihda sitten opasiteetti 0 %:iin oikeanpuoleisessa valikossa Taso-kohdan Pass Through -ruudussa. Tämä tekee kuvasta näkymätön ennen kuin se siirtyy ja avautuu.
Napsauta ensimmäistä tekstiruutua ja pidä painettuna Siirtää. Aloita vetäminen ja pidä sitten myös painettuna Välilyönti ja jatka tekstin vetämistä pois kehyksestä. Näyttää siltä, että se katoaa kerran ulos kehyksestä. Tämä siirtymä ei toimi ilman välilyöntiä, mutta jos pidät välilyöntiä painettuna ennen vetämistä, se vain siirtää kehystäsi.
Tee tämä uudelleen toiselle tai myöhemmälle tekstiruudulle, mutta vedä niitä hieman kauemmas vasemmalle lisätäksesi vaihtelua siirtymään. Kun teksti on edelleen valittuna, vähennä kerroksen peittävyyttä 0 prosenttiin samalla tavalla kuin teit aiemmin kuvan kohdalla.
Aseta siirtymä siirtymällä kohtaan Prototyyppi. Valitse vasemmanpuoleinen kehys ja napsauta sininen ympyrä joka näkyy kehyksen oikean reunan keskellä. Vedä sitä, jotta viiva siirtyy toiseen ruutuun.
Avattavassa valikossa, jossa lukee Välitön, valitse Älykäs animaatio. Vaihda sitten laatikko painikkeella sekuntikello 1000 ms asti. Tämä asettaa siirtymäsi kestämään yhden sekunnin hiiren napsautuksesta. Muut asetukset tulee asettaa oletusarvoisesti. Varmista, että et nimeä uudelleen kehysten otsikoita siirtymän asettamisen jälkeen, muuten tiedostot eivät muodosta yhteyttä.
Klikkaa pelata -painiketta testataksesi siirtymääsi. Palata takaisin Design jatkaaksesi esityksen suunnittelua.
5. Lisää lisää dioja
Jos haluat siirtyä diasta 1 diaan 2, kopioi oikeanpuoleisin dia (Cmd/Ctrl + D). Uudessa kehyksessä – diassa 2 – siirrä tekstilaatikot pois kehyksestä aiemmalla tekniikalla (Siirtää + Raahata sitten Välilyönti kun olet alkanut vetää). Siirrä yksi tekstiruutu kehyksen vasemmalle ja toinen oikealle. Aseta opasiteetiksi 0 % molemmille.
Kuvaa varten pienennä sitä ja siirrä sitä hieman pois keskustasta ja aseta sitten peittävyydeksi 0 %. Tämä antaa sinulle tehokkaasti tyhjän kankaan toiselle diallesi. Voit lisätä sisällön edellisen dian näkymättömien sisältöjen päälle.
Lisää suuri kuva kehyksen keskelle. Jos haluat lisätä koristeita kuvan päälle, käytä a Figma-laajennus GIF-tiedostoille tai lataa GIF-tarra Giphystä ja vedä se kuvan päälle. Valitse pääkuvasi ja mahdolliset GIF-tiedostot ja ryhmittele ne yhteen (Cmd/Ctrl + G), tämä varmistaa, että Smart Animate toimii oikein.
Valitse ryhmä ja kopioi se (Cmd/Ctrl + C). Liitä se sitten dian 1 kehykseen (Cmd/Ctrl + V). Pienennä sitä ja aseta opasiteetiksi 0 %. Siirrä sitten tämä kerros taakse (Cmd/Ctrl + [). Tämä varmistaa sujuvan siirtymisen seuraavaan diaan.
Mene Prototyyppi. Valitse dia 2 ja napsauta sinistä ympyrää vetääksesi sen diaan 3. Figman oletuksena prototyyppivalikossa on käyttää aikaisempia asetuksia, joten ne tulee kaikki asettaa edellisen siirtymän mukaan. Palata takaisin Design.
Kopioi viimeinen dia (Cmd/Ctrl + D). Tämä dia käyttää samaa kuvaa kuin edellinen, mutta skaalaamme sen kehyksen toiselle puolelle. Siirrä kuvaa kehyksen vasemmalle puolelle vetämällä sitä samalla, kun pidät sitä painettuna Siirtää. Vie hiiri kuvan oikeaan reunaan, kunnes vastakkaiset nuolet tulevat näkyviin, napsauta ja vedä kuvan oikeaa reunaa vasempaan, kunnes olet tyytyväinen.
Mene Prototyyppi ja yhdistä nämä kaksi kehystä yhteen. Palaa sitten asiaan Design.
Lisää otsikko ja leipäteksti skaalatun kuvan oikealle puolelle ja ryhmittele ne yhteen. Kopioi tekstiryhmä ja liitä se edelliseen diaan. Napsauta ja vedä tekstiryhmää kehyksen oikealle puolelle kuten aiemmin.
6. Lisää malli
Luo malli; tutustu meidän opas mallien luomiseen Figman lisäosien avulla. Lisää uusi kehys ja liitä sitten mallisi siihen. Muuta mallin kokoa kehykseen sopivaksi.
Kopioi malli ja liitä se edelliseen kehykseen. Muuta sen kokoa niin, että se mahtuu kuvaosaan, siirrä se sitten tasojen takaosaan ja aseta peittävyydeksi 0 %. Yhdistä kehykset Prototyyppi.
7. Lisää tunnisteita
Kopioi mallikehys. Lisää otsikko ja kuvaus selittääksesi mallisi osia. Ryhmittele teksti yhteen ja nimeä se. Sitten voit luoda himmeän lasin ilmaisimen luetelmakohtia ja viivoja varten. Ryhmittele yhteen rivi yhdellä ympyrällä. Kohdista indikaattorisi sen kuvaamiseen ja lisää kuvaus sen viereen. Yhdistä kehykset Prototyyppi.
Kopioi kehys ja lisää toinen luettelomerkkiosoitin sen kuvauksen kanssa. Prototyyppi tämä taas. Kopioi jokainen kehys luettelomerkkikohtaa kohti, jotta jokainen luettelomerkki siirtyy yksinään.
8. Lopeta esityksesi
Kopioi viimeinen dia. Kirjoita viimeinen sana tai kaksi ja keskitä se. Kopioi teksti ja liitä se edelliseen diaan.
Pienennä tekstiä pitämällä sitä painettuna K skaalattaessa sitä – tämä pitää tekstisi muotoiltuna ja pienentää sen kokoa. Sijoita tekstisi jonnekin lähelle mallin yläosaa ja lähetä kerros taakse, kuvan alle. Aseta peittävyydeksi 0 %. Palaa viimeiseen diaasi.
Siirrä kaikki muut objektit pois kehyksestä vetämällä. Siirtymä liu'uttaa kaiken ulos sivuille ja yläpuolelle, kun teksti liikkuu ylhäältä alas ja laajenee. Linkki liukuu sisään Prototyyppi.
9. Jaa Figma-esittelysi
Voit käyttää esitystäsi missä tahansa, missä voit kirjautua sisään Figma-tilillesi tai jakaa URL-osoitteen muiden kanssa, jotta he voivat katsella sitä mistä tahansa. Esittele lopullinen esityksesi ja sen siirtymät napsauttamalla pelata -painiketta ja näytä koko näytön tilassa.
Voit myös tallentaa kehykset PDF-tiedostoina, vaikka menetätkin animoidut siirtymät.
Nosta esityksesi tasolle Figman avulla
Tämä esitys ei ole pelkästään minimalistinen, mikä ei kuormita yleisöäsi, vaan myös siirtymät ovat ammattimaisia ja siistejä. Ei tarvita UI/UX-asiantuntijaa käyttämään Figmaa tavalla, joka hyödyttää esityksiäsi työtehtävästäsi riippumatta. Esitä luottavaisin mielin, niin saat kysymyksiä siitä, miten esityksesi on tehty.
