Blogi

05.03.2020

Figma verkkopalveluiden suunnittelutyökaluna

Jaa

Siirryimme viime vuonna käyttämään Figmaa verkkopalveluiden muotoiluun. Figma on selaimessa toimiva suunnittelutyökalu, joka on parantanut prosessejamme ja helpottanut monella tapaa työntekijöidemme elämää.

Suunnittelijan näkökulmasta Figman käyttöönotto oli yksi viime vuoden parhaista päätöksistämme. Olemme jo pitkään seuranneet kyseisen ohjelmiston kasvua ja kehitystä, mutta emme ole aikaisemmin pitäneet sitä täysin riittävänä tarpeisiimme. Vuosi sitten tilanne kuitenkin muuttui, ja nykyään olemme keskittäneet koko suunnitteluprosessimme Figmaan.

Aikaisemmin käytössämme oli neljän eri valmistajan ohjelmistoista muodostuva kokonaisuus, joka hienostuneessa monimutkaisuudessaan toimi yllättävänkin hyvin. Systeemin muodostivat Sketch, Abstract, InVision sekä Zeplin.

Muotoilimme käyttöliittymiä ja visuaalisia näkymiä Sketchillä ja hoidimme versionhallintaa Abstractilla, joka pyrkii olemaan suunnittelijoille vastaava palvelu kuin Git-versionhallinta on kehittäjille. Sketch-tiedostojen tallennus ja avaus kulki siis täysin Abstractin pilvipalvelujen kautta, ja suunnittelijoiden työnkuvaan kuului paljon leiskojen muutosten vertailua sekä eri versioiden hallintaa.

Kun ensimmäinen versio verkkosivuston käyttöliittymästä oli saatu valmiiksi, teimme siitä prototyypin InVisionin selainpohjaisella työkalulla. Prototyypit olivat välillä työläitä tehdä, sillä sivujen linkityksiä piti tehdä manuaalisesti jokaiselle sivulle. Koodausvaiheessa siirsimme sivut Zepliniin, jonka avulla kehittäjät pääsivät suunnittelijoiden työhön käsiksi.

Figma verkkopalvelun suunnittelutyökaluna

Prosessi kulki Sketchistä Abstractiin ja takaisin, välissä palloteltiin Invisionin ja Sketchin välillä, ja lopulta soppaan lisättiin Zeplin. Lisämausteita toivat ohjelmistojen keskenäisen keskustelun mahdollistavat Sketch-lisäosat. Kokonaisuudessa oli paljon liikkuvia osia, ja jos yhdessäkin ohjelmistossa ilmeni jotain vikaa, systeemi ei enää toiminut kunnolla. Tämä työtapa oli käytössämme pitkään, ja kehitimme sitä jatkuvasti vastaamaan paremmin tarpeitamme, mutta se ei koskaan oikein tuntunut täydelliseltä ratkaisulta.

Sitten tuli Figma

Figma tekee käytännössä kaiken sen, mitä Sketch, Abstract, InVision ja Zeplin toivat meille, ja vielä nopeammin ja paremmin. Figma on selainpohjainen suunnitteluohjelma, joka ei nirsoile liikaa käyttöjärjestelmien tai laitteiden kanssa. Figma toimii niin Windowsilla kuin Applenkin käyttöjärjestelmillä sekä tarvittaessa myös mobiililaitteilla. Olen itse käyttänyt sitä paljon iPadillani. Figma-tiedostoihin pääsee käsiksi melkeinpä millä tahansa laitteella, jossa on nykyaikainen selain.

 

Repullinen suunnittelutyökaluja, kuten Figma

Viisi hyvää syytä kiinnostua Figmasta

1. Figma on todella nopea. Tiedostot latautuvat nopeasti selaimessa ja elementtien liikuttelu on sulavaa. Työtilassa navigointi on vaivatonta.

2. Figma toimii selaimen kautta, mikä tarkoittaa, ettei käyttäjän tarvitse ladata erillisiä ohjelmistoja tai huolehtia päivittämisestä. Ja kuten aikaisemmin mainittu, Figmaa voi käyttää melkeinpä millä tahansa laitteella, jossa on selain. Kunnollista työskentelyä varten tarvitsee tosin myös näppäimistön. Figmalla on lisäksi erilliset ohjelmistot macOS:lle ja Windowsille, mutta ne eivät eroa olennaisesti selainversiosta.

3. Figma on luotettava. Kaikki muutokset tiedostoihin tallentuvat jatkuvasti Figman palvelimille, josta vanhatkin versiot ovat tarvittaessa saatavilla helposti, kunhan laite on yhdistettynä internettiin. Figmaa voi käyttää työpöytäsovellustensa kautta myös ilman nettiä, jolloin muutokset tallentuvat paikallisesti. Kun laitteen yhdistää taas verkkoon muutokset siirtyvät palvelimille.

4. Figma on helppokäyttöinen. Jos on aikaisemmin käyttänyt mitä tahansa vastaavaa suunnitteluohjelmaa, oppimiskäyrä on todella loiva. Tarvittavat työkalut löytyvät juuri sieltä, mistä niitä todennäköisesti etsii, ja lisäksi useat niistä toimivat loogisemmin kuin monessa muussa ohjelmistossa. Tuntuu, että Figma on todella kehitetty käyttäjien tarpeet mielessä.

5. Figma on hyvin hinnoiteltu. Ohjelmalla työskentely on tällä hetkellä hyvin pitkälti ilmaista. Luottokortti täytyy kaivaa esiin vasta siinä vaiheessa, kun tulee tarve suurempien tiimien muodostamiseen tai alkaa kaivata monipuolisia työkaluja laaja-alaisten systeemien luomiseen ja ylläpitoon.

Figmassa käyttöliittymien tekeminen on nopeaa ja prototyyppien rakentaminen sujuu suunnittelun ohella. Versionhallintaa ei tarvitse miettiä, sillä kaikki muutokset tallentuvat automaattisesti ja vanhat versiot ovat aina saatavilla. Ohjelmisto pysyy sopivasti taustalla ja antaa tilaa suunnittelutyölle. Figma mahdollistaa lisäksi myös usean suunnittelijan samanaikaisen työskentelyn.

Yhteistä työtä

Verkkopalvelun suunnittelua Figmassa (kuvituskuva)

Yksi Figman hienoimmista ominaisuuksista on mahdollisuus muokata samaa tiedostoa usean käyttäjän voimin. Suunnittelija voi kutsua kollegansa apuun deadlinejen lähestyessä tai pyytää asiakasta syöttämään oikeaa sisältöä leiskoihin samalla kun itse tekee rakenteisiin tarvittavia muutoksia. Koska Figma toimii selaimessa, tiedoston jakaminen muille on helppoa: riittää, että jakaa linkin tiedostoon toiselle käyttäjälle. Sisäänkirjauduttuaan jokainen näkee toistensa osoittimet, joten ei tarvitse huolehtia siitä, että useampi ihminen muokkaisi vahingossa samaa elementtiä.

Koska kaikki työstävät yhtä ja samaa tiedostoa, versionhallinta helpottuu, sillä suunnittelijoiden ei tarvitse huolehtia siitä, että onhan heillä varmasti viimeisin versio tiedostosta hallussaan. Kaikkien tekemät muutokset näkyvät kaikille saman tien. Tämä toisaalta myös vaatii suunnittelijoilta kompromisseja ja työskentelytapojen muuttamista, sillä heidän pitää ottaa huomioon muiden käyttäjien läsnäolo. Yhteisissä projekteissa tiedostoja ei voi sotkea täysin vapaasti, ja muutosten tekemisessä täytyy olla systemaattisuutta.

Tiedoston voi jakaa toiselle myös ilman muokkausoikeuksia, jos haluaa itse pitää kaikki langat käsissään. Käyttäjä, jolla ei ole oikeutta muokata tiedostoa, pystyy edelleen näkemään kaiken, pääsee tutkimaan tasoja ja elementtejä, voi päästä käsiksi väreihin ja tekstityyleihin sekä halutessaan irrottaa kuvia ja elementtejä muuhun käyttöön. Hän ei kuitenkaan voi suoraan muokata mitään. Tällaiset oikeudet sopivat hyvin esimerkiksi kehittäjille, jotka voivat vapaasti perehtyä leiskoihin ilman huolta siitä, että joku voisi mennä vahingossa rikki. Useiden elementtien tyylitietoja voi tarkastella myös esimerkiksi CSS-koodin muodossa.

Kolmantena vaihtoehtona on jakaa tiedostosta pelkästään prototyyppi. Silloin henkilö ei pääse käsiksi työskentelynäkymään, vaan sen sijaan näkee tiedostosta rakennetun prototyypin ja pystyy navigoimaan sivulta toiselle. Tällainen tiedoston jakaminen on sopiva asiakkaille, joille olennaista on nähdä tuote mahdollisimman lähellä sen valmista olemusta. Prototyypin sivuille voi jättää kommentteja minne vain, ja samat kommentit ilmestyvät suunnittelijalle tiedoston työskentelynäkymään. Kun suunnittelija tekee muutoksia leiskaan, prototyyppi päivittyy taustalla automaattisesti.

Tulevaisuudennäkymät

Suurin ero Figman ja edellisen systeemimme välillä on ohjelmistojen määrä. Saamme tehtyä Figmalla saman, mihin aikaisemmin käytimme neljää eri ohjelmaa. Tämä suoraviivaistaa prosessejamme, mutta myös keskittää kaikki potentiaaliset riskit yhteen paikkaan. Jos Figma vaikka päättää lopettaa toimimasta jonain päivänä, menetämme koko systeemimme. Pystyisimme edelleen tarvittaessa käyttämään Figman Mac-ohjelmistoa ja tallentamaan tiedostoja paikallisesti, mutta tarvitsisimme vähintäänkin prototyyppeihin jonkun toisen ohjelman.

Toisaalta Figmaan keskittäminen myös vähentää huolta kokonaisuuden kestävyydestä. Aikaisemmassa järjestelmässämme yhdenkin yksittäisen ohjelmiston toimimattomuus haittasi koko systeemiä, ja neljän eri valmistajan ohjelmistojen päivitysten yhteensopivuuksissa oli omat säännölliset ongelmansa, varsinkin kun ottaa huomioon vielä tarvittavien lisäosien ja käyttöjärjestelmien päivitykset. Figmassa kaikki tulee yhtenä pakettina, joten yhteensopivuuksista ei tarvitse murehtia.

Figma on huimaa vauhtia kasvava yritys, joka on viime vuosina kirinyt kiinni kilpailijoitansa. Monella tavalla se on siirtynyt johtoon ja näyttää tietä muille vastaaville ohjelmistokehittäjille. Suuntana on tulevaisuus, jossa reaaliaikainen yhteistyö pilvipalveluiden kautta on suunnittelijoille arkipäivää. Figma on tässä erittäin vahvoilla, sillä sen koko olemus ja ideologia rakentuu saumattoman ja avoimen yhteistyön päälle.

Paljon on kuitenkin parannettavaakin. Prototyyppiä rakentaessa animaatiotyökalut ovat moneen Figman kilpailijaan nähden vielä jäljessä, ja suunnittelutyön luovuttaminen edelleen kehittäjille voisi olla vielä entistä sujuvampaa. Hienostuneet animaatiot veisivät prototyyppejä lähemmäs todellista lopputuotetta, ja monipuolisemmat työkalut kehittäjille vähentäisivät turhaa työtä. Joissain tapauksissa voisi olla myös hyödyllistä saada luotua prototyyppiin toimivia tekstikenttiä, joihin testikäyttäjä voisi kirjoittaa vapaavalintaista sisältöä. Tämä ominaisuus tosin puuttuu vielä monilta Figman kilpailijoiltakin. Henkilökohtaisesti kaipaisin lisäksi työtilan käyttöliittymän optimointia kosketusnäytöille, sillä vaikka tabletilla työskentely on mahdollista tällä hetkellä, se ei ole yhtä sujuvaa kuin perinteisellä tietokoneella.

Asennemuutos työtapoihin

Usean suunnittelijan samanaikainen työskentely yhden tiedoston parissa on erinomainen ominaisuus, mutta loppupeleissä se on vain työkalu. Vielä tärkeämpää on se, minkälaista ajatusta sillä pyritään viestimään. Figman työkalujen toimintaperiaate kannustaa suunnittelijoita työskentelemään entistä läheisemmin asiakkaiden kanssa aivan projektin alusta saakka. Myös kehittäjien ja suunnittelijoiden välinen kuilu kapenee, kun eri osapuolet näkevät reaaliajassa leiskoissa tapahtuvat muutokset ja pystyvät helposti vaikuttamaan niihin. Jatkuva kommunikaatio eri osapuolten välillä on pohjimmiltaan se tavoite, johon Figma pyrkii kaikille avoimilla työtiedostoillaan. Tällainen avoimuus on erittäin tervetullutta, vaikka jaetut tiedostot vaativatkin jonkin verran totuttelua ja asenteenmuutosta ainakin suunnittelijoiden keskuudessa. Toimiva yhteistyö kuitenkin tarvitsee läpinäkyvyyttä koko prosessin ajan.

Tämän tekstin kirjoitushetkellä Figma viimeistelee uutta tuotettaan, suunnittelijoille kohdennettua alustaa, jonka tarkoituksena on luoda maailmanlaajuinen avoin yhteisö, joka jakaa tietojaan ja taitojaan keskenään. Kehittäjillä on ollu vastaava palvelu jo vuosia, nimeltään GitHub, jossa jokainen voi jakaa luomuksiaan ja ottaa oppia muilta. Figman kehittämän alustan ideana on, että jokainen suunnittelija voi helposti jakaa omia Figma-tiedostojaan muiden kanssa sekä samalla perehtyä muiden tekijöiden tuotoksiin. Uskoisin, että suunnittelijoiden kollektiiviset tiedot ja taidot kehittyvät huimaa vauhtia tällaisessa avoimessa ympäristössä, kunhan se vain osataan ottaa vastaan.

1+1+1+1=Figma

Käytämme Figmaa nykyään siihen, mihin aikaisemmin tarvitsimme neljä erillistä ohjelmistoa. Ideoimme ja suunnittelemme verkkopalveluita Figmassa sekä luomme ja jaamme prototyypit sen avulla. Figma toimii suoraan selaimessa ja mahdollistaa reaaliaikaisen saumattoman yhteistyön niin suunnittelijoiden, kehittäjien kuin asiakkaidenkin kanssa. Asiakkaat pääsevät käsiksi prototyyppeihin ja voivat kirjoittaa palautetta suoraan niihin, ja toisaalta kehittäjät saavat tiedostosta myös tarvittavia tietoja ja mittoja omaa työtään varten. Suunnittelukentällä suunta on selkeästi kohti avointa maailmaa, jossa prosessit ovat suoraviivaisempia ja työkalut helpommin saavutettavia; Työskentelystä tulee kevyempää, lopputulokset paranevat ja kaikilla on hauskempaa. Meille Figma on tällä hetkellä se oikea työkalu tätä varten.

Jos työskentelet digitaalisten tuotteiden parissa etkä ole vielä kokeillut Figmaa, nyt on hyvä aika sille. Kokeilu ei maksa mitään, ja ainoana riskinä näkisin, että voit jäädä koukkuun. Niin kävi meillekin.

 

Jos pääsit tänne asti artikkelissa ja etsit kumppania projektiisi, laita ihmeessä meille viestiä niin nähdään. Uusia hyviä tyyppejä on aina mukava tavata, niin kasvotusten kuin Figmassakin!

Mitä saisi olla?

Tutustu palveluihimme:

Tutkimus ja palvelumuotoilu

Tutkimus ja palvelumuotoilu

Tutkimuksen avulla ymmärrämme paremmin ihmisten toiveita ja tarpeita. Repertuaariimme kuuluvat palvelumuotoilun keskeisimmät työkalut. Teemme lisäksi käyttäjätutkimusta sekä testausta.

Lue lisää
Verkkopalvelut ja verkkokaupat

Verkkopalvelut ja verkkokaupat

Olemme erikoistuneet räätälöityihin WordPress-ratkaisuihin, sekä WooCommerce-verkkokauppoihin. Tarjoamme palveluita koko verkkopalvelun elinkaarelle suunnittelusta toteutukseen ja ylläpito- ja jatkokehityspalveluihin.

Lue lisää
Brand sprint

Brand sprint

Brand sprint on työkalu, jonka avulla brändin ytimen kirkastaminen ja ydinviestien muotoilu tehdään johdetusti ja napakasti. Sen avulla tuodaan organisaation todellinen luonne esiin, ja viestitään se kiinnostavasti.

Lue lisää
Design Sprint

Design Sprint

Design sprint on Googlen kehittämä työkalupaketti, jolla luodaan uusia käyttäjälähtöisiä konsepteja viikossa. Työpajasarja on erinomainen uusien palveluiden suunnitteluun ja verkkopalveluiden solmukohtien ratkaisemiseen.

Lue lisää

Lisää ajankohtaisia