Valitse kieli
Työnäyte
Animaatio
Tein kokeiluina pienen animaation ikonista, joka esittää taloa. Siinä talon katto painuu alas painaen seiniä kasaan, kunnes pomppaa takaisin ylös. Nyt jälkeenpäin miettien, kyseinen ikoni olisi varmaan niin pieni, ettei sitä ehkä voisi hyödyntää esimerkiksi navigaatiossa.
Animaation toteutus
Figma Motion-työkalu alkaa tyhjästä näkymästä, johon lisätään keyframet. Jos kokoa, paikkaa tai kiertoa säädetään, sille tulee oma aikajan alas, johon voidaan lisätä keyframeja.
Säädöt
Erilaisia säätöjä voidaan tehdä joko kohdetta itseään muokkaamalla tai sitten oikeasta paneelita, jossa voi määritellä numeroarvoin tarkat säädöt.
Animaation toteutus
Kun animaatio oli valmis, oli aikajanalla useampia keyframeja. Hienosäätöä joutui tekemään paljon, mutta se oli helppoa, kun jokaiselle säädölle oli omat aikajanat. Loppujen lopuksi animaation valmistamiseen ei mennyt kovin paljoa aikaa, kun aikajanan hallinta oli helppoa ja selkeää.
Yhteenveto
Figma Motionilla on helppo tehdä lyhyitä animaatioita, ja sen käyttö on hyvin selkeää. Erilaisten elementtien säädöt pystyi tekemään joko kohdetta liikuttamalla tai sivupaneelista, Kohteet näyttivät etäisyyden toisistaan hyvin, jolloin mitään suuria heittoja ei tullut, ja katot ja seinät pysyivät kasassa.
Mitä opin?
Pienetkin muutokset vaikuttavat todella paljon siihen, miltä animaatio näyttää, jos vain yksi kohde liikkuu ja muut ovat paikallaan, voi animaatio vaikuttaa tönköltä. Figma Motion on tähänastisista helpoin ohjelma, mitä olen animointiin käyttänyt.
Miten hyödyntäisin animaatiota?
Animaatioita voisi hyödyntää tietynlaisissa painikkeissa tai ikoneissa. Ne herättävät helposti huomion ja kiinnostuksen, joten niillä on helppo ohjata käyttäjän huomiota haluttuun kohteeseen.