Ako želiš da uđeš u UI/UX dizajn, vrlo brzo ćeš čuti rečenicu:
„Samo radi u Figmi. Sve se danas radi u Figmi.”
I da, istina je. Figma je postala industrijski standard jer spaja jednostavnost rada, kolaboraciju i brzinu. Ali ako si početnik, lako je da se izgubiš u svim tim panelima, ikonama i podešavanjima.
Zato je ovaj vodič tu. Dobićeš najjasnije objašnjenje kako da počneš i šta stvarno treba da znaš u prvim danima.
Šta je Figma i zašto se koristi
Figma je alat za dizajn interfejsa. U njoj praviš:
- mobilne aplikacije
- web sajtove
- prototipove
- komponente
- wireframe-e
- dizajn sisteme
Dobra stvar je što aplikacija radi u browseru i ništa ne moraš da instaliraš (iako desktop verzija postoji). Sve se čuva online što znači da ti se rad ne gubi i možeš da sarađuješ sa ljudima u realnom vremenu.
Kako izgleda Figma kada je prvi put otvoriš
Da ti bude jasnije, ovo su delovi koje ćeš najčešće koristiti:
1. Canvas – Velika bela površina na kojoj dizajniraš. To je tvoj radni prostor.
2. Layers panel – Leva strana. Tu vidiš listu svih elemenata na ekranu, poređane po hijerarhiji.
3. Properties panel – Desna strana. Tu radiš sva podešavanja: boje, veličine, auto layout, opacity…
4. Toolbar – Gore iznad. Tu su alatke za osnovne radnje: pravougaonik, tekst, okviri, zumiranje.
To je dovoljno za početak. Ako razumeš ova četiri dela, znaćeš da se snađeš u 80% situacija.
Prvi korak u Figmi: Frame
U Figmi se sve gradi unutar frame-a. Frame je kao digitalni list papira. Može da bude:
- mobilni ekran
- desktop ekran
- prilagođenog formata
Da napraviš frame, pritisni F i izaberi veličinu (npr. iPhone 15). Od tog trenutka tu počinje tvoj dizajn.
Drugi korak: Tekst i boje
Za početnike je sasvim dovoljno da znaš:
- T dodaje tekst
- Boje menjaš u Properties panelu
- Možeš da koristiš color styles ako želiš doslednost
Nemoj da preteruješ sa fontovima. Jedan ili dva su sasvim dovoljni.
Treći korak: Auto Layout
Evo jedne istine. Ako želiš da tvoj dizajn izgleda „skupo“, kao pravi proizvod, moraš da koristiš Auto Layout.
Auto Layout:
- raspoređuje elemente automatski
- pravi savršen spacing
- ponaša se kao CSS u dizajnu
- štedi ti sate ručnog pomeranja stvari
Ukucaj Shift + A i imaćeš Auto Layout na bilo kom elementu. I da… znam, deluje komplikovano, ali čim ga provališ, sve posle ide mnogo lakše.
Četvrti korak: Komponente
Komponente su kao Lego kockice tvog dizajna. Napravio/la si dugme? Super. Pretvori ga u komponentu i koristi ga opet i opet.
Ako promeniš originalnu komponentu, sve kopije se automatski ažuriraju. To ti štedi nenormalno mnogo vremena.
Peti korak: Prototyping
Prototyping je način da tvoj dizajn „proživi“. Kada povežeš ekrane, možeš da klikćeš kroz aplikaciju kao da je prava.
Koristi se za:
- prezentacije klijentima
- testiranja sa korisnicima
- sopstvenu proveru UX flow-a
U Figmi je vrlo jednostavan. Samo odeš na „Prototype“ tab i spojiš jedan artboard sa drugim.
Zašto je Figma idealna za početnike
Tri razloga su ključna:
1. Jednostavna je – Nema nepotrebnih funkcija. Sve je logično.
2. Učiš je dok radiš – Ne treba ti 10 tutorijala pre prvog ekrana.
3. Najlakše se povezuje sa UI/UX procesom – Kada jednom naučiš Figmu, možeš da radiš sve ostalo u dizajnu.
Kako da počneš odmah danas
Ako želiš praktičan početak, probaj ovo:
- Napravi novi frame
- Dodaj naslov i podnaslov
- Napravi dugme
- Uključi Auto Layout
- Spoji dva ekrana u prototype modu
To je tvoj prvi mini UI ekran. Jednostavan je, ali je pravi početak.
A kada ti to postane lagano, sledeći koraci su:
- izrada dizajn sistema
- rad sa varijantama
- napredne animacije
- organizacija fajlova
- priprema za razvoj
O tome ću pisati u narednim blog postovima.
Gde možeš da nastaviš da učiš Figmu
Ako želiš da vidiš kako sve ovo izgleda u praksi, redovno kačim kratke tutorijale na svojim društvenim mrežama. Tamo kroz realne primere pokazujem Auto Layout, komponente, animacije i razne trikove koji ti mogu odmah pomoći.
Možeš da me zapratiš ovde:
- Instagram: @makkadesign
- TikTok: @makkadesign
To su mini lekcije koje lako možeš da ispratiš čak i ako si potpuni početnik.
Za kraj
Figma je najlakši i najlogičniji ulaz u UI/UX dizajn. Kada razumeš osnovne koncepte kao što su frame, auto layout, komponente i prototyping, otvara ti se ceo svet mogućnosti.
Najvažnije je da počneš i da eksperimentišeš. Prvi dizajni neće biti savršeni, ali svaki sledeći će biti bolji.
