Figma – Stílusok és mini UI-irányelv

Cél

A tesztek alapján finomított felületeket következetes vizuális nyelvvel látod el. Létrehozod a mini UI-irányelvet: színeket, szövegstílusokat, térközöket, gomb-, beviteli mező- és ikonszabályokat, amelyek a Figmában újrahasználható stílusokként élnek. A gyakorlat végére elkészül a 8. házi feladat UI-irányelve.

Miért kell UI-irányelv?

Ha minden képernyőn „érzésre” választasz színt és betűméretet, a felület kicsit eltérő lesz minden nézetben, és a felhasználó nem tudja a korábbi tapasztalatát használni. Az UI-irányelv (UI guideline) azt rögzíti, milyen vizuális döntések érvényesek az egész termékre, és mikor melyiket használjuk. Nem díszítés: a 6. fejezetben tanult hierarchiának és következetességnek az eszköze.

A mini UI-irányelv három fő rétege:

1. Színek: szerepek szerint (nem „kék”, hanem „elsődleges művelet”).
2. Tipográfia: stílus-készlet a címektől a törzsszövegig.
3. Térközök és elemek: térköz-skála, a gombok, mezők és ikonok szabályai.

Színek

A színrendszer a termék színeit szerepekhez kapcsolja. Egy mini palettához elég:

Szerep	Cél	Szabály
Elsődleges	A fő művelet és kiemelés	Egy képernyőn egy elsődleges színű gomb
Semleges	Szöveg, háttér, keretek	3–5 árnyalat a világostól a sötétig
Siker	Visszaigazolás, kész	Mindig kiegészítő ikonnal / szöveggel
Figyelmeztetés	Óvatosság	Mindig kiegészítő ikonnal / szöveggel
Hiba	Hiba, törlés	Mindig szöveges üzenettel (a szín nem lehet az egyetlen jelzés)

Minden szín-párosítás kontrasztját ellenőrizd (a 3. fejezet szerint): szöveg a háttéren legalább 4,5 : 1, nagy szöveg és felületi elemek 3 : 1. Dokumentáld az ellenőrzött értékeket a palettánál.

Tipográfia

A tipográfia a szöveg formájának és rendszerének tudatos használata. A tipográfiai stílus előre meghatározott szövegtulajdonságok (betűtípus, méret, vastagság, sortávolság) ismétlődő készlete. A stílusok használata miatt egyetlen döntéssel módosítható az összes azonos szerepű szöveg.

Egy mini készlet:

Stílus	Használat	Példa méret / vastagság
Főcím (H1)	A képernyő fő címe	28 / félkövér
Alcím (H2)	Szakaszok címe	20 / félkövér
Törzsszöveg	Folyószöveg, leírások	16 / normál
Címke / segédszöveg	Mezőcímkék, megjegyzések	14 / normál
Gombfelirat	Gombok szövege	16 / félkövér

Tippek:

• Egy, legfeljebb két betűtípus elég; a hierarchiát a méret és a vastagság adja.
• A sortávolság (line height) a törzsszövegnél kb. 1,4–1,6-szoros betűméret, hogy olvasható legyen.
• A mobilon ne menj 16 pont alá a törzsszövegnél, ha lehet.
• A vizuális súly az a mérték, amennyire egy elem magára vonja a figyelmet; a stílus-készlet ennek rendszerét adja.

Térközök, gombok, mezők

Válassz egy alap térköz-egységet (például 8 pont), és csak ennek többszöröseit használd (8, 16, 24, 32). Ez következetes ritmust ad, és a döntéseket is egyszerűsíti.

Gomb-szabályok:

• Egy elsődleges gomb képernyőnként; a másodlagos és szöveges változat kisebb hangsúlyú.
• A felirat a következményt nevezze meg („Jelentkezés elküldése”).
• Állapotok: alap, fókusz, lenyomott, tiltott, betöltő (6. fejezet).
• Minimális érintési méret: ne legyen kisebb a WCAG 2.2 szerinti 24 × 24 CSS pixelnél; a kényelmes méret nagyobb.

Beviteli mező-szabályok:

• Címke a mező fölött (nem csak helyőrző szöveg).
• Állapotok: alap, fókusz, kitöltött, hibás (szöveges hibaüzenettel), tiltott.
• A hibaállapot ne csak színnel jelezzen.

Ikon-szabályok:

• Egy ikonkészlet, következetes vonalvastagsággal és stílussal.
• Az ikon akkor jó, ha támogatja a gyors felismerést; fontos vagy félreérthető műveletnél ne helyettesítse a szöveges címkét.
• Minden ikonnak legyen szöveges alternatívája (képernyőolvasóhoz).

Feladat: a mini UI-irányelv a Figmában

1. Hozz létre egy „UI-irányelv” oldalt a Figma-fájlban.
2. Definiáld a színeket: hozz létre színstílusokat (Color styles) a szerepek szerint, és nevezd el őket beszédesen (például „Elsődleges”, „Hiba”).
3. Mérd a kontrasztot: írd mellé a szöveg–háttér párosítások arányát, és jelöld, ha eléri az AA szintet.
4. Definiáld a szövegstílusokat (Text styles) a fenti táblázat szerint: legalább főcím, alcím, törzsszöveg, címke.
5. Alkalmazd a stílusokat a finomított képernyőkre: a meglévő szövegeket cseréld a stílusokra, a színeket a színstílusokra.
6. Mutasd meg a hierarchia működését: egy képernyőn jelöld meg, mi a legfontosabb elem, és hogyan fejezi ki ezt a méret, a vastagság és a szín.
7. Készíts gomb- és beviteli mező-mintát a releváns állapotokkal, és írj mellé 2–3 mondatos szabályt.
8. Készíts ikonlistát a használt ikonokkal, és írd mellé a jelentésüket; ahol kétes, tegyél mellé szöveget.
9. Dokumentáld a térközt: írd fel az alap térköz-egységet, és mutasd meg egy képernyőn.
10. Frissítsd a képernyőket a tesztek alapján (a 8. házi többi része), és oszd meg a fájlt.

Ellenőrzőlista

• A színek szerepek szerint vannak elnevezve, a kontrasztok ellenőrizve.
• A szövegek stílusokkal vannak formázva, nem egyedi beállítással.
• Az állapotok (gomb, mező) dokumentáltak.
• A hibajelzés nem csak színen alapul.
• Az irányelv rövid, de használható: valaki más is képes lenne követni.

Tanulási források

• Figma Learn – hivatalos súgó: keress rá a „styles”, „text styles” és „color styles” kifejezésekre
• W3C – WCAG 2.2 gyorsreferencia (angol)