Figma – Felület, frame-ek, wireframe és Auto Layout

Cél

Ismerd meg a Figma alapfelületét, a rétegek, oldalak és frame-ek szerepét, majd építs fel egy funkcionális, alacsony részletességű wireframe-et, és használd az Auto Layoutot a kapcsolódó elemek rendezésére. A gyakorlat végére elkészül a 6. házi feladat wireframe-je.

A Figma felülete és alapfogalmai

A Figma egy böngészőben és asztali alkalmazásként is futó tervezőeszköz. A felület három fő része:

• Bal oldali panel: itt vannak az oldalak (Pages) és a rétegek (Layers). Az oldalak a fájl fejezetei; a rétegek egy oldal elemei.
• Vászon (canvas): a végtelen munkaterület, amelyen rajzolsz.
• Jobb oldali panel (Design / Prototype): a kijelölt elem tulajdonságai (méret, szín, szöveg, elrendezés).

Az UI-elem egy felület használható építőeleme, például gomb, mező, címke vagy ikon. A Figma-fájl oldalakra (page-ekre) osztható. Érdemes külön oldalt fenntartani a vázlatoknak, a véglegesebb képernyőknek és az újrahasználható elemeknek. Egy page-en belül a réteg (layer) minden önálló elem: szöveg, alakzat, kép vagy más tároló. A beszédes rétegnevek (például „Keresés címkéje”, „Küldés gomb”) a saját későbbi munkádat és a csapattársaid tájékozódását is segítik.

A frame olyan tároló, amely egy képernyőt, összefüggő részt vagy komponensállapotot képviselhet. Mobilképernyőt mindig frame-ben kezdj, mert így beállítható a méret (például a Figma előre beállított telefon-méretei), kezelhető a tartalma, és később prototípushoz is kapcsolható. A csoport (group) csak együtt mozgatja az elemeket; nem ugyanaz, mint egy képernyő vagy elrendezési rendszer. Ha egy elem egy másikon belül van, köztük szülő–gyerek kapcsolat jön létre: a külső frame a szülő, a benne lévő címke vagy ikon a gyerek.

Auto Layout

Az Auto Layout a frame-en belüli elemek szabályalapú elrendezése. Megadhatod:

• az irányt: függőleges vagy vízszintes sorrend;
• a térközt (gap) az elemek között és a belső margót (padding) a keret és a tartalom között;
• az igazítást: balra, középre, jobbra;
• a méretezési viselkedést: az elem tartalomhoz igazodik (Hug contents), kitölti a rendelkezésre álló helyet (Fill container), vagy fix méretű (Fixed).

Ez különösen fontos akadálymentes felületen: a hosszabb címke, nagyobb betűméret vagy hibaüzenet ne fedjen el más tartalmat, hanem a keret növekedjen vele. Az Auto Layout nem javítja meg automatikusan a rossz információs hierarchiát, de segít a jó szerkezetet következetesen megőrizni.

Feladat: a 6. házi feladat wireframe-je

1. Előkészítés

1. Hozz létre új Figma-fájlt, nevezd el, és hozz létre oldalakat: „Wireframe”, „Jegyzetek”.
2. Nyiss mobil-méretű frame-et (például az iPhone-hoz tartozó előre beállított méretekből), és nevezd el a flow lépése szerint (például „01 – Esemény lista”).

2. Építés egyszerű formákból

3. Rajzolj téglalapokat és szövegeket a képernyő rétegeinek megfelelően (cím, kártyák, fő gomb). Ne használj színt; legfeljebb három szürke árnyalatot.
4. Használj valódi szöveget a gombokon, címkéken és hibaüzeneteken.
5. Nevezd el a rétegeket beszédesen (például „Eseménykártya”, „Ár”, „Jelentkezés gomb”).

3. Auto Layout

6. Jelölj ki egy összetartozó csoportot (például a kártya elemeit), és adj rá Auto Layoutot (jelölés és az Auto Layout hozzáadása). Állítsd be az irányt, a térközt és a belső margót.
7. Próbáld ki a viselkedést: hosszabbítsd meg a cím szövegét; a keret nőjön vele. Állítsd át a szélességet „Fill container” értékre, és nézd meg, mi történik.
8. Ismételd meg a kártyán, majd a listán: a kártyák listája is legyen egy Auto Layout, hogy új kártya hozzáadásakor automatikusan rendeződjenek.

4. A flow képernyői és állapotai

9. Készítsd el a 3–5 képernyőt a flow lépései szerint: lista, esemény részletei, jelentkezés, visszaigazolás.
10. Dolgozz ki legalább két állapotot (például hiba az űrlapon, üres lista), és nevezd el a frame-et ennek megfelelően.
11. Kösd össze a képernyőket a flow szerint: tegyél mellé nyilakat vagy hivatkozásokat a „Jegyzetek” oldalon; a kattintható kapcsolatot a prototípus-leckében (7. fejezet) tanuljuk.
12. Készíts egy nagyobb képernyős változatot a fő képernyőről, hogy lásd, mit jelent a reszponzív átalakítás.

5. Annotációk

13. Írj annotációt a komplex elemekhez: feltételezés vagy viselkedés („Csak a szabad időpontok választhatók”).
14. Oszd meg a fájlt az oktatóval (megtekintési jog elég).

Ellenőrzőlista

• Minden képernyő frame-ben van, a rétegek beszédes nevűek.
• Nincs végleges szín, fotó, dekoratív ikon.
• Az összetartozó elemek Auto Layoutban vannak, és a hosszabb szöveg nem töri szét az elrendezést.
• Legalább két kritikus állapot kidolgozva.
• A mobil és a nagyobb képernyős változat is látható.

Tanulási források

• Design your first button – Figma Learn
• Parent, child, and sibling relationships – Figma Learn
• Guide to auto layout – Figma Learn