Hogyan lett a Figma a legjobb barátom a webdesign tanfolyam alatt?
Mielőtt belevágtam a Prooktatás webdesign tanfolyamába, már rengeteg képszerkesztőt és videóvágó programot kipróbáltam – online és offline is. Valamennyire képben voltam azzal is, hogyan épülhet fel egy weboldal. Azt viszont nem gondoltam, hogy a Figma ilyen szinten be fog szippantani. Ebben a cikkben arról mesélek, hogyan lett a Figma az egyik kedvenc kreatív eszközöm a képzés alatt, és azóta is, valamint ismertetem a Figma legfontoabb funkcióit is.
Egyetem mellett elkezdtem keresni valami kreatív hobbit vagy pluszt, ami kicsit kiszakít a tanulásból. Így találtam rá a Prooktatás webdesigner tanfolyamára – és vele együtt a Figmára is.
Az eddigi tapasztalataim hatalmas előnyt jelentettek, és nagyon hamar otthon éreztem magam a felületén. Amikor először megnyitottam a Figmát, az volt az érzésem, hogy valami nagyon profi dolgot tartok a kezemben és már tudtam: ez nekem való! Nem volt teljesen ismeretlen a kezelőfelület, hiszen sok funkció hasonlított más grafikai szoftverekhez, amiket már korábban használtam. Ennek ellenére teljesen új világot nyitott meg előttem: nemcsak a vizuális tervezésről szól, hanem arról is, hogyan gondolkozzak struktúrában, funkcióban és felhasználói élményben.
Volt néhány eszköz és funkció, ami nekem sem volt ismerős, de ahogy haladtunk a képzéssel, egyre inkább kezdett minden a helyére kerülni. Az elején persze még visszakerestem a jegyzeteimet, de hamar belejöttem. Az, hogy már volt tapasztalatom például rétegekkel vagy formák szerkesztésével más programokból, nagyban segített. Így nem az alapfogalmakon akadtam fenn, hanem rögtön tudtam a kreatív részre fókuszálni.
A tananyag jól felépített, és rengeteg gyakorlati példát csináltunk. Imádtam, hogy tényleg azt éreztem: "oké, ezt egyszer majd munkában is tudom használni".
Ami igazán megfogott, az a Figma prototípus funkciója volt. Az, hogy nemcsak látványtervet készíthetek, hanem konkrét működést is szimulálhatok – rendkívül meggyőző volt számomra. Amikor először láttam a saját gombjaimat „működni”, egy kis lelkes designer kelt életre bennem. :) Az is hatalmas előny, hogy minden online van, így nem kell fájlokkal zsonglőrködni – és bárhonnan, bármikor tudok dolgozni.
A képzés végére már teljesen természetes lett, hogy a Figmában gondolkodom. Most már minden kis ötletemet ott tervezem meg: legyen szó fiktív weboldalról, Instagram posztvázlatról vagy egyetemi projekt borítójáról – a Figma jön velem mindenhová. Számomra a Figma nem csak egy tanfolyami eszköz lett, hanem a kreatív gondolkodásom egyik alapeszköze.
Ha most gondolkodsz azon, hogy belevágj-e a webdesignba, én csak bátorítani tudlak. Nem kell művésznek lenned, nem kell tökéletesen rajzolnod. Elég egy kis kíváncsiság meg egy jó tanfolyam – a többit a Figma és a kreativitásod megoldja.
Na de mi is az a sokat emlegetett Figma?
A Figma egy vektoralapú tervezőprogram, amelyet leginkább weboldalak és mobilalkalmazások felhasználói felületeinek (UI) megtervezésére használnak. Kezdők számára is vonzó, mivel online működik, ingyenes verzióval is elérhető, és nem igényel semmilyen telepítést – csupán egy böngészőre és internetkapcsolatra van szükség. Legnagyobb előnye, hogy valós idejű együttműködést tesz lehetővé, így egy teljes csapat dolgozhat ugyanazon a projekten anélkül, hogy fájlokat kellene küldözgetni egymásnak.
Hogyan kezdjük el használni a Figma-t?
- Regisztráció
Látogass el a https://www.figma.com oldalra, és hozz létre egy ingyenes fiókot. Néhány kattintás után máris létrehozhatsz új projekteket. - Új fájl létrehozása
- A kezdőképernyőn kattints az “+ New design file” gombra. Ezzel megnyílik a szerkesztőfelület, ahol elkezdheted a munkát.
- Felület alapjai
- Frame-ek: Ezek olyan keretek, amelyek segítségével különböző képernyőméreteket (pl. mobil, tablet, desktop) tudsz modellezni.
- Shape-ek és text: Hozzáadhatsz alapformákat (téglalap, kör, vonal), valamint szövegdobozokat is, amelyekből felépülhet a felhasználói felület.
- Components és assets: Ha egy elemet többször szeretnél használni, érdemes azt komponenssé alakítani. Ez segít a konzisztens dizájn kialakításában.
- Színek és stílusok
A Figma lehetővé teszi saját színpaletták, betűtípus-stílusok és effektusok (árnyék, elmosás stb.) definiálását, amelyeket aztán újra felhasználhatsz a teljes projekt során. - Közös munka és megosztás
Meghívhatod a csapattagokat, akik egyszerre szerkeszthetik ugyanazt a fájlt. A megosztás gombbal linket generálhatsz, amit bárkivel megoszthatsz, és beállíthatod, hogy csak megtekintésre vagy szerkesztésre jogosultak legyenek.
Miért érdemes Figmát tanulni?
Egyrészt, mert platformfüggetlen: mivel büngészőalapú, használhatod Windows, Mac vagy akár Linux rendszeren is. Emellett fejlesztőbarát, vagyis a fejlesztők könnyedén kinyerhetik a szükséges méreteket, színeket és CSS-kódot a tervezett elemekből. Pont ezért több front-end fejlesztő is kitanulta a használatát a saját munkája meggyorsítása és könnyítése végett. Ami pedig a hab a tortán, az a rengeteg ingyenes sablon és plug-in, amiknek hála nem a nulláról kell elkezdened a szerkesztést. Röviden és tömören: a Figma ideális választás mindazok számára, akik modern, gyorsan tanulható és hatékony webdesign-eszközt keresnek.
