Figma felület – alapinformációk | Figma kezdőknek #2

Ebben a cikkben a Figma felület elemeit fogjuk megvitatni. A felülettel való ismerkedés az elején sokkal könnyebbé teszi a későbbi munkádat. Megbeszéljük a fájl böngészőt és az alkalmazás felületét fájl szerkesztésekor. Olvass tovább, hogy többet megtudj.

Figma felület – tartalomjegyzék:

1. Fájl böngésző felület
2. Fájl felület

Fájl böngésző felület a Figma felületen

A legelső dolog, amit látsz, miután bejelentkeztél a Figma-ba, a Fájl böngésző, amely lehetővé teszi, hogy navigálj a fiókodban. Itt hozzáférhetsz a projektjeidhez, csapataidhoz és erőforrásaidhoz. A fájl böngésző felülete 3 részből áll: Navigációs sáv, Oldalsáv és Fájlok.

1. Navigációs sáv a képernyő tetején található, és lehetővé teszi bizonyos műveletek végrehajtását a fiók szintjén.

A) Felhasználónév – itt az aktív felhasználó neve jelenik meg. Ha rákattintasz, válthatsz a bejelentkezett fiókok között egy adott eszközön.

B) Keresősáv – ebben a részben gyorsan kereshetsz projekteket, munkatársakat és fájlokat név szerint.

C) Értesítések – itt fognak megjelenni az értesítések mindenről, ami a fiókodban történik.

D) Fiók menü – itt kezelheted a fiókbeállításaidat és a telepített bővítményeket.

Hasznos tipp: Ha a Figma asztali alkalmazását használod, könnyen válthatsz a projektek és a fájl böngésző között. A projektek új lapokként nyílnak meg, a fájl böngésző pedig a Főoldal ikonja jelöli.

2. Oldalsáv – ez a felület terület a képernyő bal oldalán található. Lehetővé teszi, hogy navigálj a fájlok és prototípusok között.

Legutóbbiak – ebben a fülben a legutóbb megtekintett vagy szerkesztett fájlok és prototípusok jelennek meg először.

Vázlatok – itt látni fogod az összes általad létrehozott vázlat verziót. Ezen kívül megtalálod a Törölt fület, ahol megtekintheted az archív fájlokat.

Visszaállíthatod vagy véglegesen törölheted a már törölt fájlokat – kattints a fájlra a lehetőségek megtekintéséhez.

Közösség – ez egy olyan tér, ahol böngészhetsz más Figma felhasználók által megosztott fájlokat és bővítményeket. E szekcióra a következő blogbejegyzésünkben visszatérünk.

Csapatok – itt látni fogod az összes csapatot, amelyhez tartozol.

3. Fájlok – ebben a részben az összes fájlod megjelenik.

A fájl böngésző minden oldalán választhatod, hogyan szeretnéd megjeleníteni a fájlokat: Rácsban megjelenítés vagy Listában megjelenítés. Alapértelmezés szerint a rács nézet van beállítva.

A fájlokat az igényeid szerint szűrheted és rendezheted.

A legutóbbiak és vázlatok fülén a fájlok listája felett gombok találhatók fájlok hozzáadásához: Új tervezési fájl vagy Új FigJam fájl. Minden fájltípusnak megvan a saját funkciói és eszközei.

Tervezési fájlok lehetővé teszik, hogy létrehozd a felület terveidet.

FigJam fájlok digitális táblák, amelyeket többek között online találkozókra és workshopokra használnak.

Feladat 2.1. Ismerkedj meg a Fájl böngésző felülettel a Figma-ban, és nyisd meg az első projektedet. Használj a Új tervezési fájl gombot.

Fájl felület

A felhasználói felületed, amikor fájlt szerkesztesz a Figma-ban, négy részből áll: Vászon, Eszköztár, Rétegek panel, Tulajdonságok panel.

1. Vászon a fő terület, amely a képernyő közepén található. Ez az a tér, ahol dolgozni fogsz.

2. Eszköztár a képernyő tetején található sáv. Itt találod a szükséges eszközöket és funkciókat, amelyekre szükséged van a felületek tervezéséhez.

a) Főmenü – itt hozzáférhetsz a Figma összes funkciójának listájához. A Billentyűparancsok is megjelennek a listán.

Hasznos tipp: Minden Billentyűparancsot egy külön panelen tekinthetsz meg. Ahhoz, hogy bekapcsolhasd, kattints a Főmenü > Súgó és fiók > Billentyűparancsok.

A Főmenü a következő lehetőségeket tartalmazza:

• Vissza a fájlokhoz – visszavisz a Fájl böngészőhöz.
• Gyors művelet – itt kereshetsz a szükséges funkciók között név szerint.
• Fájl – lehetővé teszi a fájlok mentését és exportálását.
• Szerkesztés – itt találod a fájlok szerkesztéséhez szükséges alapfunkciókat, mint például Visszavonás, Újra, Másolás, Beillesztés és a kiválasztási objektumokhoz szükséges fejlettebb funkciókat.
• Nézet – lehetővé teszi a Rácsok és Vonalzók nézetbeállításainak vezérlését, tartalmazza a nagyítási és navigálási funkciókat is egy fájlban.
• Objektum – itt találod az összes funkciót, amely az objektumokkal való munkához szükséges.
• Szöveg – lehetővé teszi a szöveg formázását (Félkövér, Dőlt, Igazítás) és felsorolásos és számozott listák létrehozását.
• Elrendezés – lehetővé teszi az objektumok rendezését a Középre igazítás és Elosztás funkciók sokféleségével.
• Bővítmények – itt kezelheted a telepített bővítményeket. A bővítmények kiterjesztik a Figma funkcionalitását és megkönnyítik a tervezési folyamatot.
• Integrációk – e funkció segítségével megoszthatod a terveidet a csatlakoztatott alkalmazásokban.
• Beállítások – itt testreszabhatod a Figma beállításait, amikor az objektumok húzásáról és a kiválasztott elemek láthatóságáról van szó.
• Könyvtárak – ez a modul tartalmazni fogja azokat az összetevőket és stílusokat, amelyeket a fájlodban használhatsz.

b) Mozgató és méretező eszközök

• Mozgató eszköz lehetővé teszi az objektumok mozgatását a Vásznon és a rétegek átrendezését a Rétegek panelen.
• Méretező eszköz lehetővé teszi a rétegek átméretezését anélkül, hogy torzítanád őket.

c) Keret és Szeletelő eszközök

• Keret eszköz lehetővé teszi, hogy válaszd ki a tervezett eszköz képernyőméretét.
• Szeletelő eszköz lehetővé teszi, hogy a képernyő egy adott részét új rétegre exportáld.

d) Forma eszközök – itt találod az alapvető geometriai formákat és a Kép elhelyezése funkciót.

e) Toll és Ceruza eszközök

• Toll eszköz egyedi formák létrehozására szolgál.
• Ceruza eszköz lehetővé teszi, hogy kézzel rajzolt képeket adj hozzá.

f) Szöveg eszköz – szövegrétegeket hoz létre.

g) Kéz eszköz – lehetővé teszi, hogy a projekt körül mozogj, és kattints a fájlban anélkül, hogy véletlenül kiválasztanád és mozgatnád az objektumokat.

h) Megjegyzés eszköz – lehetővé teszi, hogy gyorsan ötleteket cserélj a csapattagokkal.

i) Fájl név – itt láthatod és megváltoztathatod a fájl helyét vagy nevét.

j) Felhasználók – itt látni fogod azokat az embereket, akik jelenleg megtekintik vagy szerkesztik a fájlt.

Hasznos tipp: Amikor csapatban dolgozol, rákattinthatsz egy másik felhasználó avatarjára, hogy engedélyezd a megfigyelési módot, és nyomon követhesd a tevékenységeiket valós időben. A vászon és a megfigyelt felhasználó avatarja színes kerettel lesz megjelölve, amikor a Megfigyelési mód be van kapcsolva.

Azt is megteheted, hogy jobban láthatóvá válj, így a többi csapattag könnyen nyomon követheti a tevékenységeidet. Kattints az avatarodra, és válaszd a Fényképem lehetőséget.

k) Megosztási beállítások – itt kezelheted más felhasználók hozzáférését a fájlhoz.

l) Bemutató – ez a lehetőség lehetővé teszi, hogy előnézetet készíts a fájlról, és interakcióba lépj a létrehozott prototípusokkal.

m) Nagyítás/nézet lehetőségek – itt gyorsan beállíthatod a fájl nézeti lehetőségeit.

3. A rétegek panel a képernyő bal oldalán található terület. Itt az összes fájl összetevője és rétege megjelenik.

a) Rétegek – itt látni fogod az összes objektumot, amelyet a Vászonra adtál. Minden objektum egy külön réteg. Minden réteg mellett látsz egy ikont, amely jelzi a típusát.

A réteg nevét megváltoztathatod, ha duplán kattintasz a kiválasztott rétegre a Rétegek panelen.

Hasznos tipp: Nem könnyű emlékezni a default rétegek neveinek megváltoztatására, de próbáld meg észben tartani. Ez segít rendben tartani a fájlodat, és megkönnyíti egy adott elem megtalálását, amikor szerkeszteni szeretnéd. Ha azonban mégis elfelejted, semmi sem veszett el. Vannak olyan bővítmények, mint a “Tiszta dokumentum”, amelyek segítenek rendet rakni.

Az új objektum rétegek a szülő keretbe vagy csoportba kerülnek. Ez lehetővé teszi a keret és csoport rétegek nézetének összeomlását és kibővítését.

Minden réteget zárolhatsz és feloldhatsz. Ehhez kattints a réteg neve mellett megjelenő Zárolt ikonra, amikor az egérrel a réteg fölé viszed a kurzort. Nagyon könnyen meg tudod különböztetni a zárolt vagy láthatatlan rétegeket a többi rétegtől, mivel megfelelő ikonnal lesznek megjelölve.

Hasznos tipp: A rétegek zárolásának lehetősége nagyon hasznos, különösen, ha néhány a háttérben van. Ez segít elkerülni az elemek véletlen mozgatását.

Itt a kiválasztott rétegek láthatóságát is ki- és beállíthatod. Ehhez kattints a Szem ikonra. Nagyon könnyen meg tudod különböztetni a zárolt és a letiltott rétegeket a rétegek listáján – megfelelő ikonokkal vannak megjelölve.

b) Eszközök – Ebben a fülben látni fogod azokat az összetevőket, amelyeket a fájlodban használhatsz. Ezek lehetnek ikonok, gombok vagy más bonyolultabb felhasználói felület elemek. Egy adott összetevő megtalálásához használd a keresőmezőt. Az összetevőket a jelenlegi fájlban és a könyvtárakban keresheted, amelyekhez hozzáférsz.

c) Oldal – Minden fájlban korlátlan számú oldalt adhatsz hozzá. Minden oldalnak megvan a saját Vászon háttérképe, így egy fájlban különböző prototípusokat hozhatsz létre.

Hasznos tipp: Beállíthatod a Rétegek panel szélességét. Ehhez fogd meg a panel jobb szélét – a kurzorod fehér dupla nyíllá változik. Ezután húzd el a szélt, amíg el nem éred a kívánt szélességet.

4.Tulajdonságok panel a képernyő jobb oldalán található terület, amely három fülből áll: Tervezés, Prototípus, Ellenőrzés.

a) Tervezés – itt megtekintheted és beállíthatod az összes réteg tulajdonságait: keretek, formák és szövegek.

b) Prototípus – itt találod a prototípus beállításait és az elemek közötti kapcsolatokat a fájlban.

c) Ellenőrzés – ebben a fülben láthatod, hogyan kell a projekt egyes objektumait kódba helyezni. Az elérhető formátumok: CSS, Android és iOS.

Feladat 2.2. Ismerkedj meg a fájl felülettel a Figma-ban. Győződj meg róla, hogy már ismered a felület fő elemeinek neveit, hogy könnyebben navigálhass a fájlban a gyakorlati feladatok során.

Ez minden, amit tudnod kell a Figma felületről. Nézd meg a többi cikkünket: Scrum skálázása.

Ha tetszik a tartalmunk, csatlakozz a nyüzsgő méheink közösségéhez a Facebookon, Twitteren, LinkedIn-en, Instagramon, YouTube-on, Pinterest-en.