Wireframe – avagy drótváz. Ebben a tutorialban egy weboldal vázlatát mutatom be. Miért hasznos a Figma? Segít megtervezni a weboldalunk tartalmát, könnyeb elmagyarázni pl. egy megrendelőnek mi merre, hogyan fér el, hol lesz. Ha majd veleki ezzel szeretne foglalkozni komolyabban… Ráadásul egyszerre többen is dolgozhatunk a Figmában! Menő! Több felbontásban is kiszámolhatjuk melyik div mekkora legyen, melyik képnek mennyi hely marad stb. Természetesen nem kötelező a Figma-t használni, régen is csak Gimp-ben vagy Photoshopban készítettünk vázlatot. De most a Figma trendy. Egyébként az Adobe megvette ezt is 2022-ben, meglátjuk hogyan fejlődik tovább.
Első lépésként be kell regisztrálni a figma.com-on. Belépés után létre kell hozni egy új fájlt. Utána létrehozunk egy új frame-et. Elég sok előre definiált képernyő méret közül lehet választani. Én a desktop – wireframe méretűt választottam. Bal oldalon látjuk milyen vázlataink, azokon belül milyen alakzataink, csoportjaink vannak. Alakzatainkat csoportosíthatjuk is, úgy könnyebb összedobni egy ilyen vázlatot. Jobb oldalon az eszköztárt látjuk.
Ebben a példában egy reszponzív oldal vázát készítem el .xl vagy annál nagyobb felbontású eszközre. A figma jobb oldali eszköztárán kiválasztom a Layout gridet-et, azon belül a rows-t. Itt megadom, hogy mind a 12 bootstrap oszlopot használom. A bootstrap konténer maximális mérete .xl méretben 1140px. A figmában beállított méret 1440px, tehát 300 pixel marad a margókra. Ez jobb-bal margó esetén 150+150px. Ez is egyéni ízlés kérdése, legyen vagy ne legyen teljes oldalszélességű egy weboldal.
A layoutra a rajz eszköztár segítségével rajzolom meg a tartalmak (div-ek) vázlatát. Az alakzatoknak meg lehet adni a szegély színét, vastagságát, az alakzat kitöltő színét stb. Aki használt már képszerkesztő programot annak menni fog elsőre is.
A szövegekhez szürke kitöltésű téglalapot használtam, a képekhez pedig áthúzott téglalapokat. Ismerős a vázlat? Nagyjából így néz ki az informatikaora.hu kezdő oldala.
Az elkészült vázlatot képként tudjuk elmenteni. A projektet a Figma automatiksan menti. Van pár példa projekt is a Figmában, pl. mobil alkalmazás is, érdemes megnézni őket!
Prototype, avagy a prototípus. Elkészültünk a vázlattal, jöhet a prototípus! Ez abban különbözik a drótváztól, hogy már tartalmaz konkrét tartalmat is – képeket, szövegeket és interaktívvá lehet tenni, mintha tényleg működnének a linkek, menük, anélkül, hogy ténylegesen nekifognánk a html+css+js kódolásnak. Ez is azért hasznos, mert gyorsan tudunk látványtervet mutatni egy megrendelőnek például, könnyű módosítani, vagy több színpalettát is felhasználni.
Létrehozok egy új framet, és beállítom neki a felbontását, desktop – .xl méretet. Adok neki egy világos kék kitöltő színt – fill. Ez lesz az oldal háttere. A tartalmakat képekkel, alakzatokkal és a szöveg eszközzel lehet létrehozni. Létrehozok egy téglalapot az oldal tetejére, kitöltöm bordó színnel (#e80808) Ezután a szöveg eszközzel ráírom a dátumot. Képek feltöltése: file menü/fájl/place image.
A főmenüt célszerű komponenssé alakítani, mert több oldalon is szerepelni fog. Ez is szövegekből, képből áll, ezeket célszerű csoportosítani, majd a csoport nenév jobb klikk, create component…
Az oldal további részeit ugyanígy elkészítem. Az elkészült oldalt másoltam, beillesztettem, majd tettem rá tartalmat. A két oldal között végül létrehoztam oda-vissza interakciót. (Jobb oldali eszköztár/Prototype/Interactions) Ezután ténylegesen lefuttatva (play gomb jobb felső sarok) gyakorlatilag szimulálja a két oldal közötti navigációt.
Miben tud még segíteni a Figma? Ha kiválasztunk 1-1 elemet, akkor a css kódját megmutatja a jobb alsó sarokban. Vannak hozzá modulok is, pl. a Figma to html, amely megpróbálja exportálni az adott elem html+css kódját is. Szerinem egyszerűbb megírni saját magunknak a html+css kódot, mert amit exportál az hagy némi kívánnivalót maga után.