Osnove v Figmi

Kaj je Figma? 

Figma je spletna aplikacija za urejanje grafik in oblikovanje uporabniškega vmesnika. Uporabite jo lahko za vse vrste grafičnega oblikovanja, od oblikovanja vmesnikov mobilnih aplikacij, oblikovanja prototipov, izdelave objav za družbena omrežja in še mnogo več.  

Aplikacija se od drugih orodij razlikuje predvsem zato, ker deluje neposredno v vašem brskalniku. To pomeni, da lahko dostopate do svojih projektov in začnete načrtovati iz katerega koli računalnika ali platforme, ne da bi morali kupiti več licenc ali namestiti programsko opremo. Še en razlog, zakaj oblikovalci obožujejo Figmo, je, da ponuja velikodušen brezplačen načrt, kjer lahko ustvarite in shranite 3 aktivne projekte hkrati. Več kot dovolj prostora je, da se učite, eksperimentirate in delate na majhnih projektih. 

Če še vedno niste seznanjeni s to spletno aplikacijo ali iščete nasvete, kako kar najbolje izkoristiti programsko opremo, ste prišli na pravo mesto. V tem vodniku za začetnike bomo na enem mestu predstavili nekaj osnovnih elementov za uporabo Figme.  

Prednosti Figme 

Figma deluje na vseh operacijskih sistemih, ki poganjajo spletni brskalnik. To je edino orodje za oblikovanje te vrste, ki to počne, in v trgovinah, ki uporabljajo strojno opremo z različnimi operacijskimi sistemi, lahko vsakdo še vedno deli, odpira in ureja Figma datoteke. 

Ker Figma temelji na brskalniku, lahko skupine sodelujejo tako, kot bi sodelovale v Google Dokumentih. Osebe, ki si ogledujejo in urejajo datoteko, so na vrhu aplikacije prikazane kot krožni avatarji. Vsaka oseba ima tudi imenovan kazalec, zato je sledenje, kdo kaj počne, enostavno. S klikom na avatar nekoga drugega povečate tisto, kar si trenutno ogledujejo. 

Prednosti Figme
Vir: https://www.toptal.com/designers/ui/figma-design-tool

Figma omogoča tudi skupno rabo katere koli datoteke, strani ali okvirja na podlagi dovoljenj. Ko ustvarite povezavo za skupno rabo do projekta na strani, bo oseba, ki klikne to povezavo, odprla različico Figme v brskalniku in naložil se bo povečan pogled projekta. 

Kako uporabljati Figmo? 

Vse, kar potrebujete za začetek uporabe aplikacije, je namizni računalnik ali prenosni računalnik z dobrim brskalnikom in internetno povezavo. Nato lahko obiščete spletno mesto Figma in se registrirate v brezplačen račun. In takoj lahko začnete delati na svojih projektih. 

Kako uporabljati Figmo

Osnovna orodja v Figmi 

Okvir (frame)

Orodje okvirja (frame) je tisto, kar vam omogoča ustvarjanje okvirjev na platnu. Začnimo z dodajanjem okvirja. Če želite ustvariti okvir, kliknite orodje Frame v orodni vrstici ali pritisnite eno od naslednjih tipk – F ali A. Ko kliknete orodje okvirja, lahko na plošči Lastnosti izberete eno od prednastavljenih naprav, ki se nahajajo na desni strani aplikacije; ali pa narišete okvir po meri na platnu. 

Okvir

Mreža (grid)

Mreže so bistvene za razumevanje negativnega razmika, ko načrtujete za iOS, Android in splet. Za mobilne naprave je običajno, da uporabljajo 8-točkovno mrežo. Za splet gre malo manj za razmik in več za delitev, kot je mreža 960. Dobro je imeti nameščeno mrežo, na primer privzeto mrežo z 10 točkami. To zagotavlja, da vsi elementi padejo na čiste piksle in se čim bolj izognejo polovičnim. 

Mreža

Orodja za oblikovanje

Naslednja so orodja za oblikovanje. Do vseh osnovnih oblik lahko dostopate prek orodij Oblika v orodni vrstici. Oblike, ki so na voljo so – pravokotnik, črta, puščica, elipsa, mnogokotnik in zvezda. Če želite vstaviti obliko, naredite to: 

Poravnava (alignment)

Na vrhu plošče Lastnosti so različne možnosti poravnave. Spodaj je seznam vseh možnosti in bližnjic na tipkovnici: 

  • Poravnava levo (Alt + A) 
  • Poravnava vodoravnih središč (Alt + H) 
  • Poravnava desno (Alt + D) 
  • Poravnava vrha (Alt + W)
  • Poravnava navpičnih središč (Alt + V) 
  • Poravnava dna (Alt + S) 
Poravnava

Velikost (resize)

Velikost katerekoli plasti lahko spremenite tako, da jo izberete in nato povlečete vogale. Držite tipko Shift, da ohranite enako razmerje višina/širina, in pridržite možnost za spreminjanje velikosti iz sredine, da ohranite enako poravnavo. Druga možnost je, da spremenite vrednosti “W” (širina) in “H” (višina) na plošči lastnosti (design). Kliknite možnost razmerja omejitev, da se sorazmerno prilagodi. 

Poravnava

Fotografija (image)

V Figmi lahko slike urejate sproti po uvozu. Nadzirate lahko nastavitve, kot so osvetlitev, kontrast, nasičenost in še veliko več, ne da bi morali zapustiti orodje za oblikovanje. Fotografijo vstavite pod orodjem Fill, kjer izberete 3. orodje po vrsti. 

Fotografija

Barve (color picker)

Kliknite polnilo (fill), da začnete prilagajati ozadje. Kot pri večini orodij za oblikovanje lahko barvo spremenite s klikom na barvno kolo ali z orodjem kapalke. Druga možnost je, da vnesete kodo HEX ali izbirate med eno od prednastavljenih barv. Vrednost prosojnosti lahko spremenite tudi od tukaj, spodaj pod barvno lestvico. 

Prelivnost barv (gradients)

Figma vam daje tudi možnost zamenjave enobarvnih barv s prelivi. Obstaja več možnosti preliva. Možnosti preliva najdete v izbirniku barv. Lahko se igrate z različnimi kombinacijami barv, motnostjo in smerjo gradienta. Gradient vstavite pod orodjem Fill, kjer izberete 2. orodje po vrsti. 

Preliv barv

Zaključek 

Ste se že srečali s Figmo? Sama sem se s Figmo srečala 4 leta nazaj in ne glede na to, ali ste začetnik ali izkušen oblikovalec, Figma ponuja številne funkcionalnosti in možnosti za izboljšanje vašega oblikovalskega procesa in končnih izdelkov. Figma je postala nepogrešljiv del mojega ustvarjalnega procesa in mi omogoča odpiranje novih kreativnih možnosti za boljše izdelke. 

Pia Zorič
Pia Zorič
Kot grafična oblikovalka, ki se navdušuje nad ustvarjanjem in oblikovanjem, svojo kreativnost prelivam v vse vidike vizualne komunikacije. Z združevanjem estetike in funkcionalnosti skozi oblikovanje ustvarjam privlačne in intuitivne grafike. Moja edinstvena kombinacija veščin omogoča, da preoblikujem ideje v grafike, ki navdušujejo in izboljšujejo način, kako ljudje dojemajo svet okoli sebe.

Naročite se na #hashtag e-novice!

Novo na #hashtag.si

Letos junija so nam pri Googlu predstavili novo oglaševalsko akcijo za ustvarjanje povpraševanja, ki so jo obogatili s funkcijo umetne inteligence za lažje doseganje še boljših rezultatov. Avgusta smo jo s pomočjo beta verzije že lahko preizkusili, od oktobra...
V našem članku smo pod drobnogled že vzeli Canvo in nekatere programe podjetja Adobe. Tokrat pa predstavljamo še eno zanimivo orodje iz Adobove skupine programov - spletno aplikacijo Adobe Express. Adobe Express vključuje osnovna orodja za urejanje slik in videov...
Oblikovanje spletne strani, uporabniškega vmesnika ali uporabniške izkušnje ni nikoli enostavno brez pravih orodij. Na srečo imajo oblikovalci danes dostop do številnih orodij, ki ne zagotavljajo le širokega nabora funkcij, temveč so tudi enostavna za uporabo. Figma je eno najboljših...