Mnogi su plugini tiho nestali otkako su AI značajke postale važan dio Figme. Neki su potpuno zamijenjeni, dok drugi jednostavno više nisu bili potrebni. Ipak, nekolicina njih i dalje dokazuje svoju vrijednost svakoga dana.
Ovo nisu trikovi ili kratkoročni načini za postizanje većeg učinka. To su alati koji nam uistinu pomažu dizajnirati, surađivati i kvalitetnije obavljati posao. Neki ubrzavaju naš rad. Neki pomažu povezati dizajn i razvoj (development). Drugi rješavaju praktične probleme kojima se AI još ne bavi dobro. Evo pet plugina na koje se iskreno oslanjamo i koje u potpunosti planiramo koristiti tijekom cijele 2026. godine. Bez skrivanja informacija, samo alati koji rade.
1. Generator boja za Tailwind CSS
Krenimo od osnova. Programerima nije tako lako predati dizajn kao što je poslati im poveznicu. Kada projekt uključuje dizajn sustav (design system), važno je imati jasna pravila za primopredaju rada. Važno je standardizirati stvari poput tipografije, razmaka, komponenti, ikona, polja za unos i još mnogo toga. Boja je u središtu svega. Nije dovoljno samo odabrati heksadecimalnu (hex) vrijednost za definiranje boja. Programeri trebaju strukturirane palete koje se mogu koristiti na isti način u svim bazama koda. Upravo to radi Tailwind CSS Color Generator.
On stvara cijeli raspon nijansi, od najsvjetlijeg tona do najtamnije sjene, temeljen na Tailwind pravilima. Umjesto ručnog unošenja promjena ili nagađanja vrijednosti, dizajneri mogu brzo izraditi paletu koju programeri mogu odmah koristiti u produkciji. Jednostavno je, brzo i uklanja svaku zabunu oko jednog od najvažnijih dijelova dizajna sučelja.
2. Paketi za tipografiju (Typescales, Text Styles Generator & Typography Style Guide)
Nastavljajući s dizajn sustavima, sljedeća stvar koja mora biti precizna i predvidljiva je tipografija. Naš drugi izbor zapravo je kombinacija triju plugina koji rade zajedno kako bi proizveli čistu tipografiju spremnu za razvoj.
Typescales vam pomaže izraditi modularne ljestvice (scales) koje se koriste za postavljanje vizualnog ritma i hijerarhije veličina fontova. Plugin stvara proporcionalna povećanja i smanjenja od osnovne veličine koristeći množitelj koji sami odaberete. To dizajnerima omogućuje brz odabir veličina za naslove, podnaslove i tekst koji izgledaju i djeluju ispravno. Nakon što su te veličine postavljene, mogu se imenovati na logičan način s obzirom na njihovu veličinu i težinu. Na primjer, H1 Regular, H1 Light, H2 Regular i tako dalje.
Text Styles Generator je sljedeći na redu. Nakon što odaberete pripremljene tekstualne slojeve i postavite svojstva poput visine retka (line height) i razmaka između slova, ovaj plugin ih odjednom pretvara u Figma tekstualne stilove. Njegov je cilj jednostavan, ali vrlo koristan: stvara ili ažurira velik broj lokalnih tekstualnih stilova na temelju toga kako su formatirani obični tekstualni slojevi. U tom trenutku programeri imaju sve što im treba, ali te vrijednosti još uvijek može biti teško pronaći u Dev Modeu.
Tu nastupa Typography Style Guide. On koristi već postojeće stilove kako bi stvorio vizualni referentni okvir koji prikazuje sve veličine i težine fontova. Dizajneri mogu staviti ovaj okvir na stranicu sa smjernicama stila (style guide) kako bi programeri mogli brzo pronaći pravila za tipografiju bez potrebe za pretraživanjem cijele datoteke. Ova tri plugina rade zajedno kako bi dugotrajan proces postavljanja pretvorili u čist i organiziran tijek rada.
3. Tabler Icons
Tabler Icons je najbolji način za dodavanje ikona u gotovo svako sučelje. Ovaj plugin omogućuje pristup biblioteci od preko 5.900 besplatnih, visokokvalitetnih SVG ikona koje su dostupne pod MIT licencom. Možete pretraživati ikone, filtrirati ih i dodati ih u svoj dizajn izravno unutar Figme.
Možete mijenjati debljinu linije (stroke), boju i druga svojstva jer ikone ostaju u izvornom vektorskom obliku i nakon što ih dodate u projekt. Nema "flattening-a" niti zaključavanja slojeva. Tabler Icons koristimo svakodnevno na većini naših projekata. Brz je, prilagodljiv i besplatan, što ga čini logičnim izborom za izradu sučelja.
4. Mockup plugin (ls.graphics)
ls.graphics ima ogromnu biblioteku dizajnerskih resursa, a njihov Figma plugin je jedan od najboljih alata za mockupe na tržištu. Sastoji se od tri glavna dijela. Možete pregledavati besplatne i plaćene mockupe uređaja i scena u biblioteci te ih postaviti izravno na svoje platno (canvas). Čak je i besplatan izbor dovoljan za većinu situacija.
Značajku distort transformacije možete koristiti za jednostavno dodavanje vašeg dizajna u perspektivne mockupe pomoću metode mapiranja u četiri točke. Odaberite svoj okvir (frame), poravnajte ga s ciljanim pravokutnikom i plugin će ga odmah prilagoditi. Ovaj se alat može koristiti na bilo kojem obliku s četiri točke u bilo kojoj slici ili izgledu, što ga čini iznenađujuće fleksibilnim.
Naposljetku, alat za warp transformaciju dodaje Figmi značajku sličnu Photoshopovom Warp alatu. Možete mijenjati oblik i izgled dizajna kako bi odgovarao zakrivljenim površinama ili neobičnim kutovima bez napuštanja dizajnerskog okruženja. Ovaj plugin štedi mnogo vremena u usporedbi s tradicionalnim procesima uređivanja rasterskih slika pri izradi prezentacija, marketinških vizuala ili brzih mockupa koncepta.
5. Jitter – Animacija za Figmu
Jitter je naš posljednji izbor i vjerojatno najmoćniji na listi. Jitter je alat za motion dizajn koji radi u pregledniku i stvoren je upravo za moderne produktne timove. Namijenjen je za UI animaciju, sadržaj za društvene mreže i vizuale za marketing proizvoda, a ne za filmsku animaciju ili tešku postprodukciju.
Ono što Jitter izdvaja je to koliko se prirodno uklapa u tijek rada usmjeren na Figmu. Dizajneri koriste odgovarajući auto layout, ograničenja (constraints) i strukturu slojeva za postavljanje okvira. Kada plugin pošalje okvir u Jitter, on dolazi u obliku slojeva koji se mogu mijenjati. Tekst je i dalje tekst, vektori su vektori, a grupe su grupe. To je izuzetno važno za iterativni dizajn jer se elementi ne pretvaraju u statične slike. Animaciju tada možete koristiti na način koji više nalikuje dodavanju prijelaza nego izradi pokreta ispočetka.
Alat podrazumijeva da već imate ispoliran dizajn sučelja, što uvelike ubrzava proces. Jitter nije zamišljen kao zamjena za vrhunske softvere za animaciju, i upravo zato radi tako dobro. Naglasak je na brzini, jednostavnosti korištenja i glatkoj integraciji s procesima dizajna proizvoda. S obzirom na to da se brzo učitava i temelji se na pregledniku, lako je vidjeti zašto broj korisnika i dalje brzo raste.
Za kraj
Ne trebate najbolje alate da biste bili sjajan dizajner. Plugini vas ne mogu naučiti kako razmišljati o UX-u, planirati ili rješavati probleme. Oni samo uklanjaju trenje kako biste se mogli usredotočiti na sam rad.
Alati poput Tailwind CSS Color Generatora i Typography Bundlea pomažu nam da programerima isporučimo čiste, organizirane sustave dizajna umjesto neurednih datoteka.
Tabler Icons nam omogućuje dodavanje elemenata izravno u datoteku umjesto gubljenja vremena na traženje ikona po internetu tijekom izrade ranih skica ili prototipova.
ls.graphics Mockup Plugin omogućuje izradu mockupa izravno u Figmi umjesto otvaranja kompliciranih rasterskih softvera samo kako bismo se pripremili za prezentaciju.
A kada želimo oživjeti dizajn ili ga prikazati u pokretu, Jitter čini animaciju dostupnom bez napuštanja preglednika.
Plugini ne zamjenjuju vještinu kada se koriste pametno. Oni je čine glasnijom.
