Figma-käyttöliittymä – perustiedot | Figma aloittelijoille #2

Tässä artikkelissa käsittelemme Figma-käyttöliittymän elementtejä. Tutustuminen käyttöliittymään alussa helpottaa myöhempää työtäsi huomattavasti. Keskustelemme tiedostoselaimesta ja sovelluksen käyttöliittymästä tiedostoa muokattaessa. Lue lisää saadaksesi lisätietoja.

Figma-käyttöliittymä – sisällysluettelo:

1. Tiedostojen selaimen käyttöliittymä
2. Tiedostoliittymä

Tiedostojen selaimen käyttöliittymä Figma-käyttöliittymässä

Ensimmäinen asia, jonka näet kirjautuessasi Figmaan, on Tiedostojen selaimen, joka mahdollistaa tilisi navigoinnin. Täältä pääset käsiksi projekteihisi, tiimeihisi ja resursseihisi. Tiedostojen selaimen käyttöliittymä koostuu kolmesta osasta: Navigointipalkki, Valikko ja Tiedostot.

1. Navigointipalkki sijaitsee näytön yläosassa ja mahdollistaa tiettyjen toimintojen suorittamisen tilitasolla.

A) Käyttäjänimi – täällä näkyy aktiivisen käyttäjän nimi. Kun siihen klikataan, voit vaihtaa tilien välillä, joihin olet kirjautunut tietyllä laitteella.

B) Hakuikkuna – tässä osiossa voit nopeasti etsiä projekteja, työkavereita ja tiedostoja nimellä.

C) Ilmoitukset – täällä näkyvät ilmoitukset kaikesta, mitä tililläsi tapahtuu.

D) Tilivalikko – täällä voit hallita tilisi asetuksia ja asennettuja liitännäisiä.

Hyödyllinen vinkki: Jos käytät Figma-työpöytäsovellusta, voit helposti vaihtaa projektien ja tiedostojen selaimen välillä. Projektit avautuvat uusina välilehtinä, ja tiedostojen selainta merkitsee Koti-ikoni.

2. Valikko – tämä on käyttöliittymän alue, joka sijaitsee näytön vasemmalla puolella. Se mahdollistaa tiedostojen ja prototyyppien selaamisen.

Äskettäin käytetyt – tässä välilehdessä näkyvät ensin tiedostot ja prototyypit, joita olet äskettäin tarkastellut tai muokannut.

Luonnokset – täällä näet kaikki luomasi luonnosversiot. Lisäksi löydät Poistetut-välilehden, josta voit tarkastella arkistoituja tiedostoja.

Voit palauttaa tai pysyvästi poistaa jo poistettuja tiedostoja – napsauta tiedostoa hiiren oikealla painikkeella nähdäksesi nämä vaihtoehdot.

Yhteisö – tämä on tila, jossa voit selata muiden Figma-käyttäjien jakamia tiedostoja ja liitännäisiä. Palaamme tähän osioon seuraavassa blogikirjoituksessamme.

Tiimit – täällä näet kaikki tiimit, joihin kuulut.

3. Tiedostot – tässä osiossa näkyvät kaikki tiedostosi.

Jokaiselle sivulle tiedostojen selaimessa voit valita, miten tiedostot näytetään: Näytä ruudukossa tai Näytä luettelona. Oletusarvoisesti ruudukko-näyttö on asetettu.

Tiedostoja voidaan suodattaa ja lajitella tarpeidesi mukaan.

Äskettäin käytettyjen ja luonnosvälilehtien tiedostoluettelon yläpuolella on painikkeet tiedostojen lisäämiseen: Uusi suunnittelutiedosto tai Uusi FigJam-tiedosto. Jokaisella tiedostotyypillä on oma ominaisuus- ja työkalusarjansa.

Suunnittelutiedostot antavat sinun luoda käyttöliittymäsuunnitelmasi.

FigJam-tiedostot ovat digitaalisia valkotauluja, joita käytetään muun muassa verkkokokouksissa ja työpajoissa.

Tehtävä 2.1. Tutustu Tiedostojen selaimen käyttöliittymään Figma-sovelluksessa ja avaa ensimmäinen projektisi. Käytä Uusi suunnittelutiedosto -painiketta.

Tiedostoliittymä

Käyttäjäliittymäsi tiedostoa muokattaessa Figma-sovelluksessa koostuu neljästä osasta: Kangas, Työkalupalkki, Tasot-ikkuna, Ominaisuudet-ikkuna.

1. Kangas on pääalue, joka sijaitsee näytön keskellä. Tämä on tila, jossa työskentelet.

2. Työkalupalkki on palkki, joka sijaitsee näytön yläosassa. Täältä löydät tarvittavat työkalut ja toiminnot käyttöliittymien suunnitteluun.

a) Päävalikko – tässä paikassa sinulla on pääsy kaikkien Figma-toimintojen luetteloon. Näppäinoikopolut näkyvät myös luettelossa.

Hyödyllinen vinkki: Voit tarkastella kaikkia Näppäinoikopolkuja erityisessä paneelissa. Jotta voit kytkeä sen päälle, napsauta Päävalikko > Apua ja tili > Näppäinoikopolut.

Päävalikko sisältää seuraavat vaihtoehdot:

• Palaa tiedostoihin – se vie sinut Tiedostojen selaimeen.
• Nopea toiminto – täällä voit etsiä tarvitsemiasi toimintoja nimellä.
• Tiedosto – se antaa sinun tallentaa ja viedä tiedostoja.
• Muokkaa – täältä löydät perustoiminnot tiedostojen muokkaamiseen, kuten Kumoa, Uudelleen, Kopioi, Liitä ja edistyneet toiminnot objektien valitsemiseen.
• Näytä – se mahdollistaa Ruudukko- ja Viivaimet-näyttöasetusten hallinnan, se sisältää myös toiminnot zoomaamiseen ja navigointiin tiedostossa.
• Objekti – täältä löydät kaikki objektien kanssa työskentelyyn tarvittavat toiminnot.
• Teksti – se mahdollistaa tekstin muotoilun (Lihavoitu, Kursivoitu, Tasaa) ja luetteloiden luomisen (Piste- ja Numeroitu).
• Järjestä – se antaa sinun järjestää objekteja monilla eri Tasaa- ja Jaa-toimintovaihtoehdoilla.
• Liitännäiset – täällä voit hallita asennettuja liitännäisiä. Liitännäiset laajentavat Figma-toimintoja ja helpottavat suunnitteluprosessia.
• Integraatiot – tämän toiminnon avulla voit jakaa suunnitelmasi liitetyissä sovelluksissa.
• Preferenssit – täällä voit mukauttaa Figma-asetuksia, kun on kyse objektien vetämisestä ja valittujen elementtien näkyvyydestä.
• Kirjastot – tämä moduuli sisältää komponentteja ja tyylejä, joita voit käyttää tiedostossasi.

b) Siirto- ja skaalaustyökalut

• Siirtotyökalu antaa sinun siirtää objekteja Kangas-alueella ja järjestää tasoja Tasot-ikkunassa.
• Skaalaustyökalu mahdollistaa tasojen koon muuttamisen ilman niiden vääristämistä.

c) Kehys- ja Leikkaustyökalut

• Kehystyökalu antaa sinun valita laitteen näytön koon, jolla aiot suunnitella.
• Leikkaustyökalu mahdollistaa tietyn osan näytöstä vientiä uudelle tasolle.

d) Muototyökalut – täältä löydät perusgeometriset muodot ja Paikanna kuva -toiminnon.

e) Kynä- ja Lyijykynätyökalut

• Kynätyökalu käytetään mukautettujen muotojen luomiseen.
• Lyijykynätyökalu mahdollistaa käsin piirrettyjen kuvien lisäämisen.

f) Tekstityökalu – se luo tekstitasoja.

g) Käsityökalu – se mahdollistaa projektin ympärillä liikkumisen ja tiedostossa klikkaamisen ilman, että valitset ja siirrät objekteja vahingossa.

h) Kommentointityökalu – se mahdollistaa ideoiden nopean vaihtamisen tiimin jäsenten kanssa.

i) Tiedoston nimi – täällä voit nähdä ja muuttaa tiedoston sijaintia tai sen nimeä.

j) Käyttäjät – täällä näet henkilöt, jotka tällä hetkellä tarkastelevat tai muokkaavat tiedostoa.

Hyödyllinen vinkki: Kun työskentelet tiimissä, voit napsauttaa toisen käyttäjän avataria ottaaksesi käyttöön tarkkailutilan ja seurata heidän toimintaansa reaaliajassa. Kangas ja seurattavan käyttäjän avatar merkitään värillisellä kehällä, kun tarkkailutila on päällä.

Voit myös tehdä itsesi näkyvämmäksi, jotta muut tiimin jäsenet voivat helposti seurata toimintaasi. Napsauta avatariasi ja valitse Korosta minut.

k) Jakamisasetukset – täällä voit hallita muiden käyttäjien pääsyä tiedostoon.

l) Esitys – tämä vaihtoehto mahdollistaa tiedoston esikatselun ja vuorovaikutuksen luotujen prototyyppien kanssa.

m) Zoomaus/näyttöasetukset – täällä voit nopeasti säätää tiedoston näyttöasetuksia.

3. Tasot-ikkuna on alue näytön vasemmalla puolella. Täällä näkyvät kaikki tiedoston komponentit ja tasot.

a) Tasot – täällä näet kaikki Kangas-alueelle lisätyt objektit. Jokainen objekti on erillinen taso. Jokaisen tason vieressä näet kuvakkeen, joka osoittaa sen tyypin.

Voit muuttaa tason nimeä kaksoisnapsauttamalla valittua tasoa Tasot-ikkunassa.

Hyödyllinen vinkki: On vaikeaa muistaa muuttaa oletustasojen nimiä, mutta yritä pitää se mielessä. Tämä pitää tiedostosi järjestyksessä ja helpottaa tietyn elementin löytämistä, kun haluat muokata sitä. Jos kuitenkin unohdat sen, mitään ei ole menetetty. On olemassa liitännäisiä, kuten “Siisti asiakirja”, jotka auttavat sinua siivoamaan sotkua.

Uudet objektitasot sijoitetaan vanhemman kehyksen tai ryhmän sisään. Tämä mahdollistaa kehyksen ja ryhmän tasojen näkymän laajentamisen ja supistamisen.

Voit lukita ja avata jokaisen tason. Tämän tekemiseksi napsauta Lukkokuvaketta, joka ilmestyy tason nimen viereen, kun viet hiiren tason päälle. Voit helposti erottaa lukitut tai näkymättömät tasot muista tasoista, sillä ne merkitään sopivalla kuvakkeella.

Hyödyllinen vinkki: Tasojen lukitsemismahdollisuus on erittäin hyödyllinen, erityisesti kun osa niistä on taustalla. Tämä auttaa sinua välttämään elementtien vahingossa siirtämistä.

Täällä voit myös kytkeä valittujen tasojen näkyvyyden päälle ja pois. Tämän tekemiseksi napsauta Silmäkuvaketta. Voit hyvin helposti erottaa lukitut ja pois päältä kytketyt tasot tasoluettelossa – ne on merkitty sopivilla kuvakkeilla.

b) Resurssit – Tässä välilehdessä näet komponentit, joita voit käyttää tiedostossasi. Nämä voivat olla kuvakkeita, painikkeita tai muita monimutkaisempia käyttöliittymäelementtejä. Etsiaksesi tiettyä komponenttia käytä hakukenttää. Komponentteja voidaan etsiä nykyisestä tiedostosta ja kirjastoista, joihin sinulla on pääsy.

c) Sivu – Voit lisätä rajattoman määrän sivuja kuhunkin tiedostoon. Jokaisella sivulla on oma Kangas-taustansa, joten voit luoda erillisiä prototyyppejä yhdessä tiedostossa.

Hyödyllinen vinkki: Voit säätää Tasot-ikkunan leveyttä. Tämän tekemiseksi tartu tämän paneelin oikeaan reunaan – osoittimesi muuttuu valkoiseksi kaksoisnuoleksi. Vedä reunaa, kunnes saat haluamasi leveyden.

4.Ominaisuudet-ikkuna on alue näytön oikealla puolella, joka koostuu kolmesta välilehdestä: Suunnittelu, Prototyyppi, Tarkista.

a) Suunnittelu – täällä voit tarkastella ja säätää kaikkien tasojen ominaisuuksia: kehyksiä, muotoja ja tekstejä.

b) Prototyyppi – täällä löydät prototyypin asetukset ja elementtien väliset yhteydet tiedostossa.

c) Tarkista – tässä välilehdessä voit nähdä, miten yksittäiset projektisi objektit koodataan. Saatavilla olevat muodot ovat: CSS, Android ja iOS.

Tehtävä 2.2. Tutustu tiedostoliittymään Figma-sovelluksessa. Varmista, että tunnet jo käyttöliittymän pääelementtien nimet, jotta voit helpommin navigoida tiedostossa käytännön tehtäviä tehdessäsi.

Siinä kaikki, mitä sinun tarvitsee tietää Figma-käyttöliittymästä. Tutustu muihin artikkeleihimme: Scaling scrum.

Jos pidät sisällöstämme, liity vilkkaaseen mehiläisyhteisöömme Facebookissa, Twitterissä, LinkedInissä, Instagramissa, YouTubessa, Pinterestissä.