Sovelluksia suunniteltaessa joudumme tekemään paljon visuaalista ajattelutyötä. Haluamme luoda nopeasti objekteja ja tekstiä. Haluamme muunnella luotuja osia vapaasti, ryhmitellä ja muuttaa niitä tarpeidemme mukaan. 

Ennen Figmaa tämä oli haastavaa. Aluksi jouduimme käyttämään Adoben Photoshop ja Illustrator ohjelmia. Ohjelmat olivat kohtuullisia, mutta soveltuivat enemmän printtimaailmaan kuin digitaalisten käyttöliittymien piirtämiseen. Mm. pikselitarkkuus, yksinkertaisten elementtien toistaminen ja välistyksien hallinta olivat erittäin hankalia em. työkaluilla.

Uusi aikakausi alkoi Sketch -työkalun tulon myötä. Sketch oli ensimmäinen laajasti omaksuttu sovellus, jolla voitiin tehdä käyttöliittymäsuunnittelua sulavasti ja intuitiivisesti. 

Vaikka sovellus on kasvanut ominaisuuksiltaan läpi vuosien, se on edelleen pääsääntöisesti tiedostopohjainen Mac -sovellus, joka rajaa sen käyttäjkuntaa vahvasti. Sketch on nyt tuonut markkinoille Sketch Web version, mutta se ei korjaa ohjelman monia rajoitteita verrattuna Figmaaan. Tästä huolimatta monet käyttävät Sketchiä, ja se on tietenkin myös pätevä sovellus nykyaikaiseen suunnittelutyöhön. Itse koen sen vain turhan hankalaksi verrattuna Figmaan.

Figma verrattuna muihin työkaluihin

Figma eroaa Sketchistä merkittävillä tavoilla. Figma toimii täysin netissä ja on reaaliaikainen. Voit muokata samaa luonnosta millä tahansa käyttöjärjestelmällä yhdessä muiden tiimin jäsenten kanssa. 

Figmassa on myös laajat työkalut prototyypin rakentamiseen ja testaamiseen. Palvelu tarjoaa myös erinomaisen tuen rakentamaan kirjastoja väri-, fontti- ja elementtikirjastoja jotka synkronisoituvat eri tiedostoihin projeksteissasi.

Figmassa on merkittäviä eroja Sketchiin. Erot saattavat hieman mietityttää, jos olet tottunut Sketchin maailmaan. Älä huoli. Kurssin suoritettuasi uskon, että näet kuinka arvokas palvelu Figma on suunnittelutyön kannalta. 

Nykyjään Adobelta löytyy maksuton Adobe XD -ohjelma, joka toimii Windows ja Mac tietokoneilla. Vaikka Adobe XD:ssä on monia edistyksellisiä ominaisuuksia, koen että edelleen Figma on kokonaisuutena parempi valinta. 

Jos kaipaat entistä enemmän toiminnallisuutta, suosittelen tutustumaan Framer Web ja Webflow -työkaluihin. Tärkeintä on valita työkalu, jolla saat nopeasti tuloksia aikaan sekä mahdollistaa työn nopeuttamista mm. vaivattomalla jakamisella ja yhteistyöllä. 

Minusta Figma on paras kokonaisvaltainen ratkaisu näistä kaikista. Riippumatta palvelusta, jota käytät, kurssini opettaa sinulle tärkeitä taitoja, jotka soveltuvat helposti myös muihin ohjelmiin. 

Tilin avaaminen

Aloitetaan menemällä figma.com osoitteeseen selaimessamme ja luodaan uusi tili. Voit käyttää Google-tiliäsi tai luoda tilin sähköpostiosoitteen ja salasanan avulla. Kun olet vahvistanut tilisi ja kertonut itsestäsi perusasioita, pääset käyttämään Figmaa.

Vaikka Figma toimii selaimessa, sillä myös löytyy oma sovellus Windowsille ja Macille. Tämä tekee työskentelystä hieman helpompaa, sillä kaikki avatut tiedostot ovat ryhmittyneitä yhteen ikkunaan ja et tarvitse erillistä lisäosaa käyttääkseen tietokoneellasi asennettuja fontteja. Tämä ei ole mitenkään pakollinen, mutta itse käytän melkein aina sovellusta arjessani. 

Kun kirjaudut sisään ensimmäistä kertaa, Figma tarjoaa omia orientaatioviestejä joilla voit oppia palvelun toiminnallisuudesta. Jos kaipaat apua, haluat tutustua lisää ohjeisiin tai uudestaan nähdä nämä orientaatioviestit, paina alaoikeassa kulmassa olevaa (?) palloa ja valitse haluamasi toiminnallisuus valikosta. Figmalla on kattavat video-ohjeet ja dokumentaatio englanniksi, suosittelen tutustumaan näihin oppiakseen lisää Figman hyödyntämisestä.

Kotinäkymän toiminnot

Yläpalkki

Figman ohjauspaneelin yläosassa meillä on seuraavat toiminnallisuudet:

Account switcher (Tilin vaihtaja)

Tämän valikon kautta voit vaihdella eri tilien välillä jotka olet liittänyt Figmaasi.

Search (Haku)

Haun avulla voit etsiä joko sinun ja sinun tiimisi sisältä tiedostoja, projekteja tai ihmisiä (Drafts and Teams, luonnokset ja tiimit). Voit myös hakea tiedostoja ja lisäosia, joita voit kopioida/asentaa Figmaasi yhteisöstä (Community, yhteisö). 

• Löydät valinnan näille yläoikeasta nurkasta, oletuksena tästä näkymästä haet asioita omasta Figmasta (Drafts and Teams).

Notifications (Notifikaatiot)

Käyttäjätilin vieressä on pieni kelloikoni, jota klikkaamalla voit nähdä sinulle saapuneet viestit (kuten kutsut tiimeihin tai tiedostoihisi jätetyt kommentit). Jos ikonin nurkassa on punainen pallo, se tarkoittaa, että sinulla on lukemattomia notifikaatioita.

Account (Käyttäjätili)

Täällä näet tilisi perustietoja. Osio jakautuu kolmeen osaan: Teams, Plugins ja Settings.

• Settings (asetukset) osiossa voit määrittää tilin perusasetuksia: nimesi, sähköpostiosoitteesi, julkinen profiili, notifikaatiot, ynnä muuta. 
• Jos haluat poistaa tilisi, löydät tämän sivun lopussa.
• Täältä voit nopeasti ladata fontti lisäosan jos haluat käyttää Figmaa selaimessa mutta hyödyntää tietokoneella olevia fontteja.
• Plugins (lisäosat) antaa sinulle selkeän näkymän kaikista lisäosista jotka olet asentanut Figmaan. Jos kehität ja julkaiset omia lisäosia, ne myös näkyvät tässä. Kohta näytän mistä lisäosia voi asentaa.
• Teams (tiimit) osiossa näet kaikki tiimit johon kuulut. Kun luot uuden tilin, oletuksena sinulla on vain yksi oma tiimi. Tiimeissä voi ilmaiseksi olla kaksi käyttäjää. Enemmän käyttäjiä vaatii maksullisen Pro lisenssin jokaiselle käyttäjälle tiimissä.
• Log out (uloskirjaudu) toiminto löytyy tämän näkymän yläoikeasta nurkasta.

Sivupalkki

Recents (Viimeksi avatut)

Tässä näkymässä näet tiedostot, jotka olet viimeksi avannut riippumatta siitä sijaitsevatko tiedostot eri tiimeissä vai sinun omissa vedoksissasi. Oikeassa ylänurkassa näet napit, joilla voit tuoda Sketch-tiedostoja Figmaan tai luoda uuden tiedoston.

Drafts (Luonnokset)

Täältä näet kaikki tiedostot, jotka eivät ole tiimissä. Jos raahaat tiedoston täältä johonkin Tiimiin, se ei näy enää Drafts-osiossa. Voit nähdä tiedoston edelleen Recents-osiossa, jos olet avannut tiedoston lähiaikoina. 

Oletuksena täältä löytyy pari esimerkkitiedostoa, joita katsomalla voit oppia Figman alkeista Figman kautta. Ne ovat käännettynä suomeksi tämän kurssin Figma-tiedostossa, jonka pystyt lataamaan edellisestä kurssin esittelyosion lopusta.  

Community (Yhteisö)

Yhteisö osiosta voit löytää suuren määrän tiedostoja ja lisäosia joilla voit laajentaa Figman toiminnallisuutta sekä oppia mihin kaikkeen Figmaan voi käyttää. Suosittelen tutustumaan varsinkin Figman omiin tiedostoihin (https://www.figma.com/@figma) oppiakseen lisää kuinka Figman tiedostoja voi hyödyntää.

Lisäosilla voit laajentaa Figman toimintoja, esimerkiksi tuomalla dataa Figman ulkopuolelta tai piirtämään yhteyksiä eri kehysten välille.

Suosittelen lataamaan ainakin:

• Stark-lisäosan, jolla voit varmistaa, että värit ovat riittävän luettavia. 
• Material Design Icons -lisäosan, jolla saat helposti tuotua ikoneita näkymiisi. 

Suosittelen kokeilemaan lisäosia, mutta pitämään vain ne, joita aidosti käytät arjessasi. Tilisi Plugins -osiosta voit poistaa lisäosia.

Teams (Tiimit)

Näiden osioden alla löydät tiimit jossa olet mukana sekä niiden alla projektit joille olet antanut tähden (favorite).

Lopussa on + Create new team nappi josta voi luoda uusia tiimejä.

Luodaan ensimmäinen tiimi, projekti ja tiedosto

Luodaan meidän ensimmäinen tiimi. 

• Valitse + Create New Team
• Voit lisätä tiimiin jäseniä. Kaksi voi olla ilmaiseksi editoreita, katsojia voi olla rajattomasti
• Jos haluat enemmän kuin kaksi editoria tai hyödyntää Figman kirjasto ominaisuuksia, tarvitset Professional tilin ($15/kk)
• Tiimin luotua voit editoida tiimin kuvauksen, lisätä tiimijäseniä, poistua tiimiistä ja hallita asetuksia. Admin Dashboardista voi hallita tilin maksuja ja jäseniä.
• Ennen kun voimme luoda tiedostoja tiimiin, meidän täytyy lisätä projekti. Luo projekti yläoikeasta kulmasta “New Project” napista
• Anna projektille nimi ja määritä kenellä on oikeus nähdä tai editoida projektia tiimin sisällä.
• Projektiin voidaan lisätä tiedostoja. 
• Paina “+ New File” luodakseen projektiin ensimmäinen tiedosto.

Seuraavaksi opitaan orientoitumaan Figman editorinäkymään.