Tuntitehtävät 3 & 4
Työnäytteet Figman osaamisesta.
Työkalut: Figma
Tuntitehtävät 3 & 4
Työnäytteet Figman osaamisesta.
Työkalut: Figma
Figman ensimmäisessä syventävässä osiossa käyntiin läpi mm. yksinkertaisia tekstianimaatioita, sekä rakennettiin pyyhkäistävä slider-tyyppinen tuotekortti erilaisille kelloille. Mukana oli myös aukeava haitarityyppinen kysymyslaatikko.
Tekstianimaatio
Suurin osa ominaisuuksista perustuu prototypoinnissa asetettuihin ominaisuuksiin, kuten esimerkiksi variantin vaihtumiseen "after delay"-tyyppisesti.
Vaikka animaatio on yksinkertainen, se on tehokas ja näyttävä, sekä helppo toteuttaa. Eri sanat ovat komponentin eri variaatioita, jotka vaihtuvat toiseen pienen viiveen jälkeen.
Vaikka animaatio on yksinkertainen, se on tehokas ja näyttävä, sekä helppo toteuttaa. Eri sanat ovat komponentin eri variaatioita, jotka vaihtuvat toiseen pienen viiveen jälkeen.
Kysymyslaatikot
Kysymyslaatikot saatiin toimimaan niin, että komponentista rakennettiin kaksi variaatiota: "open" ja "closed". Nuolta klikkaamalla nämä vaihtuivat, ja toinen tuli näkyviin.
Tällä kaavalla voidaan toteuttaa "Usein kysytyt kysymykset"-tyyppinen osio, esimerkiksi verkkosivustolle.
Tällä kaavalla voidaan toteuttaa "Usein kysytyt kysymykset"-tyyppinen osio, esimerkiksi verkkosivustolle.
Sivut 1-3.
https://www.figma.com/proto/7TIRqUhNTTdRKY4it3tfHM/Ohjelmisto-osaaminen-2026?node-id=1-2&p=f&t=vHTgG3aemlUPM6ms-1&scaling=scale-down&content-scaling=fixed&page-id=0%3A1&starting-point-node-id=1%3A2.
Figman toisessa syventävässä osiossa rakennettiin animaatio, joka koostuu kolmesta erillisestä liikkuvasta osasta:
Animaatio saatiin rakennettua niin, että komponentin kolme varianttia asetettiin eri asentoihin, ja ne laitettiin vaihtumaan seuraavaan asentoon hyvin lyhyen (1ms) viiveen jälkeen.
Näin saadaan luotua liikkuva animaatio. Tämä toistettiin kaikille kolmelle eri komponentille, jotka myöhemmin asetettiin prototyyppiin päällekkäin.
Näin saadaan luotua liikkuva animaatio. Tämä toistettiin kaikille kolmelle eri komponentille, jotka myöhemmin asetettiin prototyyppiin päällekkäin.
Sivu 4.
https://www.figma.com/proto/7TIRqUhNTTdRKY4it3tfHM/Ohjelmisto-osaaminen-2026?node-id=54-184&p=f&t=f2DfYebv5wnlehxI-1&scaling=scale-down&content-scaling=fixed&page-id=0%3A1&starting-point-node-id=1%3A2