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!

* obvezno polje

Privolim, da lahko W3B, d.o.o. moje osebne podatke obdeluje za naslednje namene:

Enkrat mesečno prejmete e-novice. Dovolite, da vaš e-naslov uporabimo za pošiljanje e-novic skladno s pogoji varstva osebnih podatkov. Odjavite se lahko kadarkoli.

Novo na #hashtag.si

Z več kot pol milijarde uporabnikov, ki vsak mesec obiščejo Pinterest, in osupljivimi 10 milijardami ustvarjenih boardov po vsem svetu, se lahko strinjamo, da je Pinterest postal glavno središče za iskanje navdiha. Sedaj pa je Pinterest svojim uporabnikom še...
Figma UI  Ena najbolj izpostavljenih tem letošnje konference je bila vpeljava umetne inteligence (v nadaljevanju UI) v orodje.  Samodejno ustvarjanje dizajna: z enostavnim vnosom besedila je mogoče ustvariti oz. generirati mockup uporabniškega vmesnika za spletno stran ali aplikacijo. Ta funkcija naj...
Razumeti moramo jezik UI (umetne inteligence) ...  Kako sploh UI deluje pri generiranju vsebin? V enostavnih besedah, umetna inteligenca deluje na osnovi obsežnih jezikovnih modelov, ki se učijo iz ogromnih količin podatkov. Ti modeli uporabljajo algoritme za analizo besedil in...