Figma on kätevä suunnitteluohjelma, jolla pystyy suunnitelemaan helposti verkkosivustoja tai vaikka mobiilisovelluksien käyttöliittymiä ilman koodaamista. Figmalla voidaan luoda alustavien määrittelyiden pohjalta sovelluksista interaktiivisia prototyyppejä ja saada tuntumaa miten sovellus tulisi toimimaan. Sovellusprototyypin kehittäminen on monesti järkevää ohjelmistokehitysprojektissa, sillä se takaa laadukkaan käyttökokemuksen ja toisaalta selkeyttää kaikille osapuolille mitä projektissa ollaan tekemässä. Webguru on käyttänyt Figmaa jo pitkään ja meidän mielestämme se on loistava työkalu kaikenlaisten sovellusten suunnitteluun.
Mikä on Figma?
Figma on pilvipohjainen suunnittelusovellus ja vektoripiirto-ohjelma. Figman avulla voidaan tehdä kaikenlaisia graafisia suunnittelutöitä, kuten luoda verkko- tai mobiilisovelluksista malleja/pohjia, suunnitella sosiaalisen median viestejä, tehdä esitteitä ja kaikkea siltä väliltä.
Sovelluksessa piirtäminen tapahtuu näkymissä (sivuja), joihin voidaan raahata valmiita ui-komponentteja (esim. nappeja, pudotusvalikoita ym.). Näkymiä voidaan linkittää keskenään ja niihin voidaan lisätä efektejä. Sovelluksessa on erillinen esitystila, jota käytetään suunnitelman esittelyyn ja joka toimii varsinaisena interaktiivisena prototyyppinä.
Sovellus toimii suoraan selaimessa. Figmaa varten ei tarvitse asentaa ohjelmistoja (vaikkakin siitä on myös työpöytäversio) tai ostaa useita lisenssejä. Parasta Figmassa on, että sen perusversio on täysin ilmainen ja se on aivan käyttökelpoinen pieniin projekteihin tai opetteluun. Monipuolisempi tiimiversio Figmasta maksaa n. $12 kuussa.
Figmassa on monipuoliset yhteistyötoiminnot ja sitä voi käyttää kokonainen suunnittelutiimi samanaikaisesti uuden sovelluksen suunnittelussa. Myös asiakas voi osallistua Figmassa helposti suunnitteluprosessiin ja lisätä siinä kommentteja näkymiin.
Yleisesti ottaen Figman käyttäminen on melko samanlaista kuin monien piirto-ohjelmien (esim. Photoshop tai Illustrator) ja sen käyttäminen on melko helppoa. Valmiiden mallien ja ui-komponenttien ansiosta Figmalla voi tehdä nopeasti ja pienellä vaivalla varsin näyttäviä esityksiä.
Tärkeimmät toiminnot
Tässä joitakin Figman tärkeimpiä ominaisuuksia ja mitä sillä voi tehdä:
Interaktiiviset prototyypit – Figmalla voidaan luoda sovelluksista malleja, joita pystyy käyttämään aivan kuten oikeaa sovellustakin. Tämä tapahtuu niin, että suunnitelmassa eri näkymien välille luodaan linkkejä. Linkit voidaan liittää esim. nappeihin ja kun siirrytään esitystilaan, käyttäjä voi klikata nappeja ja tällöin näkymä sovelluksessa vaihtuu. Prototyyppi tuntuu kuin oikealta sovellukselta. Suunnitelmia voi testata myös mobiilinäkymässä.
Kehittyneet suunnittelutyökalut – Figmaan suunnittelutyökaluihin kuuluu laaja valikoima erilaisia työkaluja, kuten kynä- ja vektorityökaluja, valintatyökaluja, kehyksiä, automaattista asettelua ja monia muita. Työkalut ovat samanlaisia kuin monissa muissa vektoripiirto-ohjelmissa kuten vaikka Illustratorissa.
Mallikokoelma – Figmassa on paljon valmiit malleja ja sivupohjia, joita voi käyttää suunnittelussa. Esim. verkkosivuston suunnittelun voi aloittaa valitsemalla jostain valmiista pohjista se sijaan että aloittaisi kokonaan tyhjästä näkymästä. Malleja on sekä sisäänrakennettuja sekä niitä voi hakea myös Figman yhteisöportaalista, johon muut käyttäjät ovat jakaneet niitä.
UI-komponenttikirjastot – Mallikokoelman lisäksi Figmassa on myös saatavilla iso määrä valmiita komponenttikirjastoja, jotka sisältää erilaisia valmiita ui-elementtejä. Näihin kuuluu mm. valmiiksi suunniteltuja nappeja, valikoita, ikoneita, joita voi helposti suoraan raahata suoraan sivulle ja luoda nopeasti näyttäviä näkymiä. Monet saatavilla olevat kirjastoton tehty suunnittelujärjestelmiksi (design system), joka tarkoittaa että ne sisältävät kaikki yleisimmin käytetytelementitvaikkapa verkkosivujen suunnitteluun ja ne on tehty käyttäen samaa yhtenäistä tyyliä.
Reaaliaikainen yhteistyö – Kehittyneiden yhteistyötoimintojen ansiosta useat tiimin jäsenet voivat työskennellä saman tiedoston parissa reaaliajassa ja myös seurata esittäjän näkymää ilman lisäohjelmistoja. Yhteistyö toimii samaan tapaan ja yhtä sujuvasti kuin esim. Google Docsissa.
Versiohistoria – Figma osaa tallentaa työsi automaattisesti ja se ylläpitää versiohistoriaa, jolloin on mahdollista helposti palata suunnitelman aiempiin versioihin.
Lisäosat – Figmassa on käytössä lisäosa-järjestelmä (pluginit) ja lisäosien avulla ohjelmaa pystyy mukauttaa erilaisiin tarpeisiin. Lisäosia löytyy moniin tarpeisiin kuten kaavioihin, kuvakkeisiin, värien hallintaan, vuokaavioihin, kuviin ym.
Tältä Figma näyttää
Miksi prototyypin kehittäminen sovelluksesta on kannattavaa?
Prototyypin tekeminen sovelluksesta on useimmiten varsin järkevää, koska:
Sovelluksesta saadaan lähes varmasti paremmin toimiva ja käyttökelpoisempi, kun prototyypin avulla on hiottu sen käyttöliittymä ja käyttäjäkokemus kuntoon sen sijaan että olisi alettu vaan suoraan koodaamaan.
Projektin osapuolet tietää paremmin mitä ollaan tekemässä. Prototyyppi on kätevä kommunikaation väline, jonka avulla projektin kaikki osapuolet ymmärtävät miten tuleva sovellus tulisi toimimaan.
Tarvitaan vähemmän muutoksia toteutusvaiheessa. Tämä säästää usein paljon aikaa ja rahaa, kun tulee eteen vähemmän tilanteita jossa huomataan että jokin asia ei toimi ja se pitää tehdä toisella tavalla.
Eräs iso etu prototyypin tekemisellä on myös, että sen avulla voidaan kilpailuttaa itse toteutusvaihe, koska sen avulla on helppo pyytää tarjouksia useilta toimijoilta.
Kokeile tästä esimerkki prototyyppiä (prototyyppi WhatsApp sovelluksesta).
Webguru auttaa tekemään käyttökelpoisen prototyypin tulevasta sovelluksestasi
Meillä on kokemusta Figman käytöstä ja osaamme suunnitella teille hienon ja toimivan prototyypin tulevasta sovelluksestanne.
Prototyypin kehitystä varten tarvitsemme teiltä oikeastaan vain alustavan määrittelyn, joka voi tapahtua vaikka vain suullisesti. Tämän jälkeen voimme tehdä prototyypistä ensimmäinen version, jota voidaan sitten muutella niin kauan kuin tarpeellista. Prototyypin muuttelu on huomattavan helppoa verrattuna siihen, että jos ensimmäinen versio tehtäisiin koodaamalla.
Kun prototyyppi on valmis ja siinä on huomioitu kaikki tarvittavat asiat, sen perusteella voidaan aloittaa sovelluksen toteutus. Prototyypin ansiosta myös toteuttaminen on helpompaa, koska sen perusteella on helpompaa huomioon kaikki koodaamiseen ja tekniseen toteutukseen liittyvät asiat.
Ota yhteyttä, jos sinua kiinnostaa sovellusprototyypin tekeminen Figmalla!
