Lataa Figma tiedosto itsellesi tästä: https://www.figma.com/file/K1pihSVqPTnDcGFt84xYnE/Figman-alkeet

Kun valitsemme tiedoston, Figma avautuu editorinäkymään

• Yläpalkissa on työkalut ja tiedoston tärkeimmät tiedot
• Vasemmalla on meidän layerit, assetit ja sivut
• Oikealla on Properties -paneeli joka kertoo meille valitun asian ominaisuuksista

Yläpalkki

• Hampurilaisikonista vasemmalla avataan päävalikko
• Täältä voit palata ohjauspaneeliin (Back to Files)
• Haulla löytää tietty toiminto valikosta
• File:ssa voidaan luoda uusia tiedostoja, tuoda sisään Sketch tiedostoja ja kuvia, tallentaa .fig tiedostona, kaapata nykyinen tila versiohallintaan, nähdä versiohallinta tai viedä editorista asioita kuvina tai PDF:inä ulos. 
• Edit valikosta voit kumoa tai tehdä uudestaan toimintoja, kopioida ja liittä asioita, kuin myös valita muita esineitä joilla on samankaltaisia ominaisuuksia kuin valitun esineen kanssa.
• View näkymästä voit määrittää näetkö mm. pikseleitä kun zoomaat lähelle, muiden kursoreita, kuten monta muuta ominaisuutta.
• Object antaa sinulle erilaisia tapoja manipuloida valittuja esineitä, esim. käätämällä sen tai tuomalla sen tasojärjestyksessä eteen tai taakse. Saat melkein kaikki valinnat editorissa myös oikeaklikkaamalla hiirtä kun sinulla on jotain valittuna.
• Valikosta löytyy monia muita valintoja joilla voit määrittää mm. esineiden ja tekstien ominaisuuksia, sommitella valittuja asioita sekä avata lisäosia. Näitä voi tehdä myös muualta, joita avarran lisää kurssin aikana. Jos kuitenkin mietityttää mistä jokin asia löytyy, se todennäköisesti voi löytyä valikon haun avulla.
• Yksi tärkeimmistä asioista on muuttaa Preferences → Nudge Amount Big Nudge arvon 10:stä 8:aan. 
• UI työssä käytämme 8 pikselin ruudukon mallia. Vaikka 10 ei ole mitenkään kiellettyä, 8 on tasalukuinen arvo joka jakautuu melkein kaikkiin ruutu- ja esinekokoihin (1024, 640, 256, 32, 16, jne.) kuin taas 10 ei sovellu arkeen yhtä tasaisesti. 
• Työkalupalkki
• Move Tools (valintatyökalut)
• Move (V) työkalu on oletuksena päällä kun avaat tiedoston. Sillä voimme helposti valita, siirtää ja muuttaa objektin tai tekstialueen kokoa vapaasti. 
• Pienestä nuolesta avautuu valikko josta voimme valita Scale (K) työkalun jolla voimme myös valita ja siirtää esineitä, mutta voimme myös suhteudetusti skaalata esineiden ja tekstin kokoa. 
• Region Tools (aluetyökalut)
• Frame (A ja F) on erittäin tärkeä työkalu: Framella luodaan kehyksiä jotka määrittävät meidän työskentelyalueita. Kun valitset työkalun, oikealla puolella oleva Properties -paneeli näyttää erilaisia sabluunoja joilla voimme helposti luoda näkymiä mm. mobiili- ja työpöytälaitteille, sosiaaliseen mediaan tai vaikka paperille.
• Slice (S) työkalu antaa meille mahdollisuuden määrittää alueita joita voi tallentaa kuvina ilman mitään säätöä. Kun määrität Framen tai esineen Export asetuksia, kuvaksi tallentuu vain mitä sen sisältä löytyy. Slice työkalu ohittaa tämän - jos sen alta löytyy jotain, se tallentuu osaksi kuvaa.
• Shape Tools (muototyökalut)
• Rectangle (R) piirtää suorakulmioita. Kun työkalu on valittu, voit luoda uuden suorakulmion raahaamalla alueen tai painamalla hiirtä luodakseen 100x100 pikselin kokoisen neliön.
• Kun luot muotoja raahaamalla, voit pitää Shift (⇧) näppäintä alla lukittaakseen suhdanteen. Jos painat Shiftiä (⇧) ennen kun alat raahaamaan, varmistat että suorakulmio on neliö. 
• Jos pidät Alt/Option (⌥) näppäintä alhalla, alueen koko ei määrity nurkasta vaan keskipisteestä. Voit yhdistää tämän Shift (⇧) näppäimen kanssa.
• Huomioi että kun piirät alueita tai muotoja, valittu objekti näkyy sinisillä ääriviivoilla (bounding box). Sen nurkissa olevat valkoiset neliöt antavat mahdollisuuden muuttaa objektin kokoa. Objektin pikselikoko näkyy ilmaistuna laatikon alla. Katkoviivat kertovat valinnan rajoitteista (Constraints) joista kerron alla lisää. Kun sinulla on jokin esine valittu ja pidät Alt/Option (⌥) näppäintä alhalla
• Oval (O) luot ympyröitä.
• Star työkalulla voit piirtää monipisteisiä muotoja ja määrittää montako pistettä muodossa on, sekä muodon piikikkyyden.
• Drawing Tools (piirtotyökalut)
• Pen Tool (P) kynällä voit piirtää linjoja ja muotoja määrittämällä vektoripisteitä. Painamalla hiirtä saat luotua pisteitä jotka muodostavat katkeamattoman jatkumon. Kun luot pisteen ja hiiri on alaspainettu, voit raahata hiirellä käyrän pisteelle. Tämän voit muuttaa myöhemmin. 
• Oletuksena Pen työkalulla luotuihin muotoihin sinulla on Properties -sarakkeessa määritettävä Fill (täyttövärin) sijan Stroke (reunusväri). Voit nopeasti vaihtaa näiden välillä Shift+X (⇧+X) pikanäppäimellä. 
• Huomioi että kun piirät Pen työkalulla, olet vektorieditointitilassa. Tämän huomaat siitä että sinisen valintaneliön sijan näet vektoriesineen pisteet valkoisina palloina ja työkalurivi on muuttunut. Voit helposti lähteä vektorieditointitilasta painamalla Enter (⏎) näppäintä tai painamalla Done nappia työkalurivissä. 
• Bend Tool aktivoituu vektorieditointitilassa pitämällä Ctrl/Cmd (⌘) näppäintä pohjassa. Tämä tekee käyrien määrittämisestä erittäin helppoa - klikkaa ja raahaa!
• Pencil Tool (⇧+P) vapaakynällä voit piirtää vapaasti ja Figma tekee parhaansa luodakseen viivastasi sulavan. Näitä viivoja voi editoida samalla tavalla kuin Pen kynällä tehtyjä.
• Text Tool (T) on Figman tekstityökalu. Voit joko alkaa kirjoittamaan vapaasti klikkaamalla mihin haluat sijoittaa tekstin, tai raahata tekstilaatikkoalueen johon kirjoitat tekstiä. Teksti tällöin ei täytä leveyssuunnassa enempää tilaa kuin mitä määrität, mutta teksti ei katkea kesken jos se on pidempi kuin määrittämäsi tekstilaatikko. 
• Teksti Figmassa katkeaa aina useammalle riville jos se on tekstilaatikossa ja on pidempi kuin laatikon leveys.
• Huomioi että Move (V) työkalulla et voi kasvattaa tekstin kokoa raahaamalla. Voit suurentaa tekstiä joko Properties -sarakkseesta tai käyttämällä Scale (K) työkalua. 
• Keskustelemme tekstityökalusta laajemmin myöhemmin. 
• Hand Tool (H) antaa sinulle mahdollisuden liikkua ympäri työtilaa klikkaamalla ja raahaamalla. Voit myös tilapäisesti aktivoida käsityökalun välilyönnillä (Space ␣ )
• Add/Show Comments (C) on Figman kommentointityökalu. Aktivoimalla työkalun näet työtilan kaikki kommentit ja voit luoda uusia kommentteja painamalla mihin haluat sen luoda. 
• HUOM: Kommentit eivät liiku muotojen tai alueiden kanssa.
• Kun mitään ei ole valittuna, yläpalkin keskellä näemme tiedoston projektin ja tiedostonimen. Voimme helposti muuttaa kumpaakin painamalla tekstistä jompaa kumpaa. 
• Nimen vieressä olevasta alanuolesta voimme nähdä tiedoston versiohistorian, viedä kuvana tai PDF:nä koko työtilan sisällön, monistaa tiedosto, poistaa sen tai siirtää toiseen projektiin.
• Oikeassa laidassa näemme pari tärkeää ominaisuutta:
• Näet palloina kaikki editorit ketkä ovat tiedostossa samanaikaisesti kanssasi
• Share napista voit lisätä ihmisiä tiedostoon kutsumalla heitä sähköpostiviestillä, määrittää katsomisoikeudet ja nähdä ketkä ovat lisätty tiedostoon ja heidän roolin. Näkymän pohassa voit myös ottaa embed-koodin jolla voit upottaa Figma tiedoston esim. nettisivuille.
• Tiimijäsenet näkevät projektit ja niiden tiedostot automaattisesti
• Jos Frame on valittu, voit määrittää että linkki avaa tiedoston valittuun kehykseen
• Present napista avaat uuden ikkunan jossa voit navigoida tiedoston kehyksiä (hieman kuten Prototyyppi katselutila).
• 100% tai muu % avaa asetuksia editorinäkymän esitykseen. Täältä voit mm. määrittää näkymäsi suurennusasteen, pikseliesikatselun (näetkö miltä esineet näyttää kun olet tallentanut ne yksittäisinä kuvina), näetkö muiden ihmisten kursorit, yms.

Vasen sivupaneeli: Layers and Assets

Editorinäkymän vasemmassa sarakkeessa näkyy meidän tiedoston tasonäkymät. Layers näyttää nykyisen sivun sisällön kuin taas Assets näyttää meidän paikalliset ja muista kirjastoista tuotuja komponentteja. Pages näyttää ja piiloittaa tiedoston sivuosion. Oletuksena tiedostossa on yksi sivu, Page 1.

Kun Layers on valittu, vasen paneeli näyttää meille tiedoston nykyisen sivun sisällön. Voimme täyttää sivumme melkein rajattomasti työkaluilla tuotettuja asioita. Tasojen näkyvyys määritytyy niiden järjestyksestä: mitä korkeammalla hierarkiassa esine on, sitä näkyvämpi se on. Yleisesti sijoitamme asiat kehyksiin (Frame työkalu, A tai F pikanäppäin). Esimerkissämme voimme nähdä yksinkertaisen näkymän jossa meillä on kaksi pääkehystä joissa on eri sisältöä. Päätason kehyksien nimet näkyy niiden ylävasemmassa kulmassa, vaikka ne olisi visuaalisesti toisen kehyksen päällä. Näemme että Teksti 2 on ympyrän takana ja tämän vuoksi hieman vaikealukuisempi. Teksti 1 on suorakulmion päällä ja täten ei peity muodolla.

Assets on projektiemme alussa tyhjillään, mutta voimme sen avulla liittää tiimimme komponentteja eri kirjastoista osaksi meidän tiedostoa (⌥ tai Alt + 3). Täältä voimme myös julkaista oman tiedoston komponetit ja tyylit omana kirjastona käytettäväksi muissa tiedostoissa. Kun kytkemme eri ulkopuolisia kirjastoja päälle tai määritämme tiedostossa komponentteja, ne ilmestyvät tähän meidän käyttöä varten.

Oikea sivupaneeli: Properties

Figman oikeassa sarakkeessa näemme asioiden ominaisuuksia. Ylälaidassa voimme valita Design, Figman oletustila jossa suunnittelemme tiedostoon asioita. Prototype tilassa voimme määritellä mm. laitekehyksen prototyyppiäsi varten (Device), Present tilan taustavärin (oletuksena musta, 000000) ja Present tilan ensin näkyvän kehyksen (Starting frame). Inspect tilassa näemme valittujen asioiden ominaisuuksia koodipohjaisesti joko CSS, Android tai iOS muodossa.

Kun meillä ei ole mitään valittuna ja olemme Design tilassa, näemme tiedostossa määritetyt paikalliset tyylit (värit, efektit, kirjaisinvalinnat). Kun valitsemme jotakin, näemme kaikki määritteet jotka muodostavat sen piirteet. 

Aluksi näemme sommittelutyökalut joilla voimme sijoittaa valitun asian sen emokehykseen suhtaudettuna vasemmalle, keskelle tai oikealle sekä ylä-, keski- tai alaosaan. Tämän jälkeen näemme valitun asian sijainti- ja kokotiedot, sekä mahdolliset etäisyydet toiseen/toisiin elementteihin jos meillä on useampi asia valittuna jotka ovat tasavälein toisistaan. Kuvassa minulla on valittuna kaksi elementtiä jotka ovat eri sijoitettu samalle korkeudelle (Y: 24), ne ovat samankorkusia (H:38) ja ovat 12 pikseliä toisistaan. 

Voit myös määrittää kierron ja reunojen pyöristyksen elementeille. Kehys elementeille näet myös asetuksen jolla voit rajata pois sisällä olevien elementtien sisältöä jos ne menevät kehyksen reunusten yli (Clip content).

Constraints (kiinnitteet) määrittää elementin käyttäytymisen jos pääkehyksen koko muuttuu. Kun sinulla on yksi elementti valittuna, näet sinisin katkoviivoin elementin kiinnitykset. Oletuksena kaikki elementit ovat kiinnitetty kehysten vasempaan ylänurkkaan, tarkoittaen että elementti säilyttää saman etäisyyden kehyksen vasen- ja yläsivuihin. 

Layer osiosta voit määrittää tason värisekoitusasetuksen (oletukena Pass Through), nämä ovat identtiset Photoshopin sekoitustilojen kanssa. 100% edustaa tason läpinäkyvyysarvoa, oletuksena taso on täysin näkyvä. Silmä ikonista voit piiloittaa tason näkymästä lainkaan. Jos kyseessä on kehys tai ryhmä niin piiloitat myös niiden sisällöt.

Fill määrittää elementin täyttövärin, joka on oletuksena muodoille harmaa (C4C4C4), kehyksillä valkoinen (FFFFFFF) ja tekstillä musta (000000). Voit uudelleenmäärittää oletusvärit valitsemalla elementin jossa on haluamasi väriarvo ja valitsemalla valikosta Edit → Set default properties. Painamalla neliötä numeroarvon vieressä tuot esiin värivalitsimen jossa voit muuttaa täyttövärin oletuksesta (Solid) eri liukuväreihin (Linear, Radial, yms.) tai kuvaksi (Image). Täyttöasetuksen vieressä näet oletuksena 100% arvon jota muuttamalla määrität täyttövärin läpinäkyvyysasetuksen.

Suosittelen muuttamaan värivalitsimen oletus Hex tilasta HSL tilaan, jossa voit helpommin muuttaa väriarvoja eriteltynä sävyn (Hue), värikylläisyyden (Saturation) ja kirkkauden (Luminosity) mukaan. Voit lisätä useampia Fill asetuksia yhdelle elementille + merkistä, kuten esimerkissämme olevan kuvan ja sen päällä olevan puoliksi läpinäkyvän liukuvärin.

Stroke antaa elementille rajauksen. Värin lisäksi voit määrittää rajauksen paksuuden, sijoittuuko se elementin sisälle (oletus, Inside), keskelle tai ulkopuolelle. Ellipsi (…) valikosta voit määrittää myös rajaukselle katkoviivoja, kulmamuotoilun sekä viivoille päätteitä (kuten nuolet tai pyöristyksen). Nämä toimii samalla tavalla kuin esimerkiksi Adobe Illustrator tai muissa vektoriohjelmissa.

Effects määrittää elementin varjostukset ja hämärrykset. Oletuksena Figma luo aina laatikkovarjostuksen. Voit vaihtaa efektin painamalla Drop Shadow nimeä ja aurinko ikonista määrittää sen arvot.

Export osiossa määritämme elementtien asetukset viedäkseen niitä ulos Figmasta tiedostoina. Voit määrittää useamman eri asetuksen, joten voit esimerkiksi luoda samalla JPEG, PNG sekä SVG versiot yhdellä kerralla. Preview osiosta näet mitä tiedosto tulee sisältämään, huomioi että Frame export sisältää vain elementit jotka löytyvät kehyksen sisältä mutta Slice työkalulla luodut exportit sisältävät kaiken mitä ruudulla näkyy, riippumatta niiden tasosijainneista. 

Eri elementtien yhdistäminen

Kun luomme eri muotoja, voimme antaa niille eri ominaisuuksia, kuten eri värit tai koot. Voimme myös luoda uusia muotoja eri elementtejä yhdistelemällä. Union Selection työkalut ilmestyvät yläpalkkiin kun meillä on kaksi muotoa valittuna. Voimme luoda uuden muodon yhdistelemällä tai poistamalla niiden alueita. Voit myös käyttää yhtä muotoa toisten muotojen maskina, peittäen kaiken 

Luodaan Figman logo

Tuodaan kaikki tässä osiossa opitut asiat yhteen luomalla Figman logon editorin sisällä. 

Aloitetaan luomalla neliön (R + raahaa Shift pohjassa ⇧), esimerkiksi 32x32 kokoisena. Voit monistaa sen ja määrittää jokaisen neliön pyöristykset erikseen, tai sitten voit tehdä nopeamman kaavan kautta:

Kun sinulla on vain yksi piiretty neliö ja sinulla on se valittuna, paina Enter (⏎) kirjainta ja valitse neliön vasemmat ylä- ja alapisteet. Määritä niiden kaarevuuden maksimiasetuksella, 999, ja paina Enter poistuakseen vektorieditoritilasta. Monista tämä puoliympyrä valittuna raahaamalla sitä alas kun samalla kun pidät Alt/Option (⌥) näppäintä pohjassa. Varmista että neliösi on samassa tilassa kun vieressä olevassa esimerkissä. 

Paina Ctrl/⌘+D monistaakseen kolmannen neliön. Monista ylimmän neliön raahaamalla sen sivuttain oikealle. Paina ⇧H peilaamaan neliön leveyssuunnassa. Valitse alin neliö ja pyöristä puuttuva kulma jotta se vastaa Figman logoa. 

Piirrä ympyrän (O) luodakseen lopullisen F kirjaimen siluetin. Tämän jälkeen valitse jokainen elementti erikseen ja paina I näppäintä jotta voit valita nopeasti alkuperäisestä logokuvasta niille kuuluvan värin. Lopuksi sinulla pitäisi olla identtinen kopio Figman logosta, näin helppoa se on!

Jos valitset kaikki elementit, voit luoda niistä ryhmän (Ctrl/⌘+G) tai kehyksen (Ctrl+Alt+G/⌘+⌥+G). Leiki työkaluilla, tutustu eri ominaisuuksien määrittelyyn ja siirry seuraavaan osioon kun olet valmis.