Yra milijonas būdų, kaip sukurti pristatymą, tačiau „Figma“ yra nepakankamai įvertinta priemonė. „Figma“ prototipo funkcija suteikia daugybę pritaikomų perėjimo parinkčių. Jūsų perėjimai ne tik sužavės jūsų auditoriją, bet ir galite įtraukti papildinius, kad sukurtumėte papildomą picą ir sudomintumėte auditoriją, todėl pasitikėsite savo įgūdžiais.
Parodysime, kaip sukurti žudikišką pristatymą naudojant „Figma“; tiesiog vadovaukitės šiuo vadovu.
1. Sukurkite savo pirmąjį pristatymo rėmelį
Atviras Figma ir spustelėkite Naujas dizaino failas. Spustelėkite Rėmo įrankis (F), norėdami nupiešti rėmelį arba pasirinkti iš anksto nustatytą rėmelį dešinėje Pristatymas > Skaidrė 16:9. Tu gali sukurti pagrindinį šabloną taupyti laiką.
Pervardykite rėmelį dukart spustelėdami mėlyną pavadinimą viršutiniame kairiajame kampe. Nustatyti fono spalvą; nors vėliau visada galėsite jį pakeisti paryškindami visus rėmelius ir pakeisdami užpildymo spalvą.
2. Pridėkite pavadinimo tekstą
Naudoti Teksto įrankis (T) ir parašykite savo pavadinimą. Atskiroms eilutėms naudokite atskirus teksto laukelius, kurių eilutėje yra tik vienas arba du žodžiai. Nustatykite savo teksto nuostatas
Tekstas meniu dešinėje. „Figma“ naudoja „Google“ šriftus, todėl galbūt norėsite sužinoti geriausios „Google“ šriftų poros.3. Pridėti paveikslėlį
Tu gali naudokite atsarginę nuotrauką arba pasidarykite atitinkamą nuotrauką. Norėdami pridėti vaizdą, nubrėžkite stačiakampį naudodami Stačiakampio įrankis (R). Jūsų vaizdas bus tokios formos.
Spustelėkite stačiakampį ir eikite į Užpildykite ir spustelėkite spalvotas kvadratas. Tada spustelėkite Solid > Vaizdas > Pasirinkti vaizdą. Raskite savo paveikslėlį ir spustelėkite Atviras. Užveskite pelės žymeklį virš vaizdo, kad atsiskleistumėte 4 baltus apskritimus. Spustelėkite ir vilkite vieną apskritimą į vidų, kad suapvalintumėte vaizdo kampus.
Išdėstykite sluoksnius taip, kad vaizdas būtų gale, o tekstas – viršutiniame sluoksnyje. Sluoksnius galite vilkti sluoksnių skydelyje arba naudodami Cmd/Ctrl + [ siųsti sluoksnį atgal arba Cmd/Ctrl + ] kad sluoksnis būtų į priekį.
4. Sukurkite pirmąjį perėjimą
Pirmasis perėjimas atvers vaizdą ir leis pavadinimo tekstui įslysti į rėmelį. Pirmiausia nukopijuokite pirmąjį kadrą jį pasirinkdami ir paspausdami Cmd/Ctrl + D kad jį dubliuotų.
Kairiajame rėmelyje sumažinkite vaizdo mastelį sumažindami aukščio atributus H langelį iki maždaug 150, paliekant horizontalų vaizdo plyšį. Sulygiuokite jį centre, pasirinkdami abu vaizdus per rėmus ir spustelėdami Option + V („Mac“) arba Alt + V („Windows“).
Norėdami užbaigti vaizdo perkėlimą, pasirinkite kairįjį vaizdą. Tada pakeiskite neskaidrumas iki 0 % dešiniajame meniu esančiame laukelyje, esančiame šalia skilties Praėjimas po Sluoksniu. Tai padarys vaizdą nematomą prieš jam pereinant ir atidarant.
Spustelėkite pirmąjį teksto laukelį ir laikykite nuspaudę Shift. Pradėkite vilkti, tada taip pat laikykite nuspaudę Tarpo klavišas ir toliau vilkite tekstą iš rėmelio. Atrodo, kad jis dingsta iš kadro. Be tarpo klavišo šis perėjimas neveiks, bet jei laikysite tarpo klavišą prieš vilkdami, jis perkels tik jūsų rėmelį.
Dar kartą padarykite tai antrajam ar paskesniam teksto laukeliui, bet vilkite juos šiek tiek toliau į kairę, kad perėjimas būtų įvairesnis. Kai tekstas vis dar pasirinktas, sumažinkite sluoksnio neskaidrumą iki 0%, kaip anksčiau darėte vaizdui.
Norėdami nustatyti perėjimą, eikite į Prototipas. Pasirinkite kairįjį rėmelį ir spustelėkite mėlynas ratas kuri rodoma dešiniosios kadro pusės centre. Vilkite jį, kad linija eitų į antrąjį kadrą.
Išskleidžiamajame meniu, kuriame rašoma Momentinis, pasirinkite Smart Animate. Tada pakeiskite dėžutę su chronometras iki 1000ms. Tai nustatys, kad perėjimas užtruks vieną sekundę nuo pelės paspaudimo. Kiti nustatymai turėtų būti nustatyti pagal numatytuosius nustatymus. Įsitikinkite, kad nustatę perėjimą nepervardijote rėmelių pavadinimų, kitaip failai neprisijungs.
Spustelėkite žaisti mygtuką, kad patikrintumėte perėjimą. Grįžti į Dizainas tęsti pristatymo dizainą.
5. Pridėti daugiau skaidrių
Norėdami pereiti iš 1 skaidrės į 2 skaidrę, kopijuokite dešinėje esančią skaidrę (Cmd/Ctrl + D). Naujame rėmelyje – 2 skaidrėje – perkelkite teksto laukelius iš rėmelio naudodami ankstesnę techniką (Shift + Vilkite tada Tarpo klavišas pradėjus vilkti). Perkelkite vieną teksto laukelį į kairę, o kitą į dešinę rėmelio pusę. Abiejų tipų neskaidrumą nustatykite į 0%.
Sumažinkite vaizdo mastelį ir šiek tiek nustumkite nuo centro, tada nustatykite neskaidrumą į 0%. Tai iš esmės suteikia tuščią drobę antrajai skaidrei. Galite pridėti turinį prie nematomų ankstesnės skaidrės išteklių.
Pridėkite didelį vaizdą rėmelio centre. Norėdami pridėti dekoracijų ant vaizdo, naudokite a Figma įskiepis, skirtas GIF arba atsisiųskite GIF lipduką iš Giphy ir vilkite jį ant vaizdo viršaus. Pasirinkite pagrindinį vaizdą ir visus GIF ir sugrupuokite juos kartu (Cmd/Ctrl + G), tai užtikrina, kad „Smart Animate“ veiks tinkamai.
Pasirinkite grupę ir nukopijuokite ją (Cmd/Ctrl + C). Tada įklijuokite jį ant 1 skaidrės rėmelio (Cmd/Ctrl + V). Sumažinkite jo mastelį ir nustatykite neskaidrumą iki 0%. Tada perkelkite šį sluoksnį į galą (Cmd/Ctrl + [). Tai užtikrina sklandų perėjimą į kitą skaidrę.
Eiti į Prototipas. Pasirinkite 2 skaidrę ir spustelėkite mėlyną apskritimą, kad nutemptumėte ją į 3 skaidrę. Numatytasis Figma prototipo meniu yra naudoti ankstesnius nustatymus, todėl jie visi turėtų būti nustatyti pagal ankstesnį perėjimą. Grįžti į Dizainas.
Kopijuoti paskutinę skaidrę (Cmd/Ctrl + D). Šioje skaidrėje bus naudojamas tas pats vaizdas, kaip ir ankstesnėje, bet mes pakeisime jo mastelį vienoje rėmelio pusėje. Perkelkite vaizdą į kairę nuo rėmelio, vilkdami jį laikydami Shift. Užveskite pelės žymeklį ant dešiniojo vaizdo krašto, kol pasirodys priešingos rodyklės, spustelėkite ir vilkite dešinįjį vaizdo kraštą į kairę, kol būsite patenkinti.
Eiti į Prototipas ir sujunkite du rėmelius. Tada grįžkite į Dizainas.
Pridėkite pavadinimą ir pagrindinį tekstą pakeisto vaizdo dešinėje ir sugrupuokite juos. Nukopijuokite teksto grupę ir įklijuokite ją į ankstesnę skaidrę. Spustelėkite ir vilkite teksto grupę į dešinę nuo rėmelio, kaip ir anksčiau.
6. Pridėti maketą
Sukurti maketą; patikrinkite mūsų vadovas, kaip sukurti maketus naudojant Figma įskiepius. Pridėkite naują rėmelį, tada įklijuokite maketą ant jo. Pakeiskite maketo dydį, kad jis tilptų į rėmelį.
Nukopijuokite maketą ir įklijuokite jį į ankstesnį kadrą. Pakeiskite jo dydį, kad tilptų į vaizdo dalį, tada perkelkite į sluoksnių užpakalinę dalį ir nustatykite neskaidrumą iki 0%. Prijunkite rėmelius Prototipas.
7. Pridėti etiketes
Kopijuokite maketo rėmelį. Pridėkite pavadinimą ir aprašą, kad paaiškintumėte savo maketo dalis. Sugrupuokite tekstą ir pavadinkite jį. Tada tu gali sukurti matinio stiklo indikatorių už jūsų ženklelius ir linijas. Sugrupuokite vieną eilutę su vienu apskritimu. Suderinkite rodiklį su tuo, ką jis apibūdina, ir šalia jo pridėkite aprašą. Prijunkite rėmelius Prototipas.
Kopijuokite kadrą ir pridėkite kitą ženklinimo taško indikatorių su tuo, ką jis apibūdina. Tai dar kartą prototipas. Dubliuokite kiekvieną kadrą vienam ženkleliui, kad kiekvienas ženklelis pereintų atskirai.
8. Užbaikite pristatymą
Dubliuokite paskutinę skaidrę. Parašykite paskutinį žodį ar du ir centre jį. Nukopijuokite tekstą ir įklijuokite jį į ankstesnę skaidrę.
Sumažinkite teksto mastelį laikydami K keičiant jo mastelį – taip išlaikomas teksto formatavimas ir sumažinamas jo dydis. Padėkite tekstą kur nors šalia maketo viršaus ir nusiųskite sluoksnį į galą, po vaizdu. Nepermatomumą nustatykite į 0%. Grįžkite į paskutinę skaidrę.
Perkelkite visus kitus objektus iš kadro naudodami vilkimo metodą. Perėjimas išstums viską į šonus ir viršų, kai tekstas judės žemyn iš viršaus ir plečiasi. Nuoroda pasislenka Prototipas.
9. Pasidalykite savo „Figma“ pristatymu
Savo pristatymą galite pasiekti bet kur, kur galite prisijungti prie „Figma“ paskyros arba bendrinti URL su kitais, kad jie galėtų žiūrėti bet kur. Norėdami pateikti galutinį pristatymą su perėjimais, spustelėkite žaisti mygtuką ir rodomas viso ekrano režimu.
Taip pat galite išsaugoti kadrus kaip PDF, nors tai darydami prarasite animuotus perėjimus.
Padidinkite savo pristatymus naudodami „Figma“.
Šis pristatymas yra ne tik minimalistinis, kuris neapkraus jūsų auditorijos, bet ir perėjimai yra profesionalūs ir švarūs. Nereikia vartotojo sąsajos / UX eksperto, kad „Figma“ naudotų taip, kad būtų naudinga jūsų pristatymams, neatsižvelgiant į jūsų darbo vaidmenį. Pristatykite drąsiai ir būsite užplūdę klausimų apie tai, kaip buvo sukurtas jūsų pristatymas.
