Figma – Komponensek, variánsok és mini design system

Cél

Készíts újrahasználható komponenseket a projekted visszatérő elemeiből, szervezd a gyakori állapotokat variánsokba, és állítsd össze belőlük a mini design systemedet. A gyakorlat végére elkészül a 9. házi feladat design system-oldala.

Ismétlés helyett szabályrendszer

A 6. fejezetben tanultad, hogy a komponens ismétlődő szerepű, dokumentált viselkedésű felületi egység. A Figmában ezt a szemléletet közvetlenül támogatja a komponens-rendszer: egyszer megtervezed, aztán példányként használod.

A főkomponens (main component) az eredeti elem, amelyet egyszer terveztél meg. A belőle létrehozott komponenspéldányok (instance-ok) a használati helyeken jelennek meg. Ha a főkomponenst javítod, a példányok követik a változást. Ez nemcsak gyorsabb szerkesztés: csökkenti annak esélyét, hogy ugyanaz az elem másképp viselkedjen két képernyőn.

A példányokon felülírható dolgokat is megadhatsz (például a gomb szövegét), így a komponens rugalmas marad, miközben a szerkezete és a stílusa közös.

A variáns (variant) ugyanazon komponens értelmes állapotait és típusait rendezi egy halmazba. Egy gomb lehet alapértelmezett, lenyomott, letiltott vagy betöltési állapotban; ezek nem különálló gombok, hanem egy elem különböző helyzetei. A variánsokat tulajdonságokkal (properties) írjuk le: például Típus (elsődleges / másodlagos), Állapot (alap / fókusz / letiltott / betöltő).

A design system ennél tágabb közös nyelv: a komponensek, stílusok, elnevezések és használati szabályok együttese. Egy mini design system már akkor hasznos, ha néhány elemnél következetesen rögzíted, mire való, és mikor melyik állapotát használod.

flowchart TD
    A["Stílusok<br>(szín, szöveg, térköz)"] --> B["Komponensek<br>(gomb, mező, kártya)"]
    B --> C["Variánsok<br>(állapotok, típusok)"]
    C --> D["Használati szabályok<br>(mikor melyik)"]
    D --> E["Képernyők<br>(példányok)"]

Mit érdemes komponenssé tenni?

Nem minden elem érdemel komponenst. A jó jelöltek:

• legalább háromszor előfordulnak a képernyőidön;
• van értelmes állapotuk (alap, fókusz, hibás, tiltott…);
• fontos, hogy egyformán viselkedjenek (gomb, mező, kártya, tab bar, értesítés).

A bizonyítékalapú szemlélet itt is érvényes: azt rendszerezd, ami a projektedben valóban megjelenik. A „kicsit biztosan jó lesz később” alapú komponensek zajt keltenek.

Elnevezés és szervezés

Az elnevezés a design system használhatóságát döntően meghatározza. Hasznos minta a perjeles hierarchia: „Gomb/Elsődleges/Alap”, „Mező/Szöveg/Hibás”. A Figma a perjel mentén csoportosítja a komponenseket az eszköztárban. Néhány szabály:

• Következetes nyelv (végig magyarul vagy végig angolul).
• Szerep, nem forma: „Elsődleges művelet”, nem „Kék gomb”.
• Egy komponens, egy dolog: ne gyűjts össze egy komponensbe egymástól eltérő célú elemeket.

Feladat: a mini design system építése

1. Hozz létre egy „Design system” oldalt a Figma-fájlban.
2. Gyűjtsd össze a visszatérő elemeket a képernyőidről: gombok, beviteli mezők, eseménykártya, tab bar, értesítés. Írd fel, melyik hányszor fordul elő.
3. Készítsd el a gomb főkomponensét: építsd fel Auto Layoutból (belső margó, térköz, felirat), használd a 8. fejezetben létrehozott színeket és szövegstílusokat, és alakítsd komponenssé.
4. Hozz létre variánsokat: adj hozzá legalább elsődleges, másodlagos és tiltott változatot, valamint a fókusz- és a lenyomott állapotot, ha releváns. Nevezd el a tulajdonságokat (Típus, Állapot).
5. Építsd meg a beviteli mezőt: variánsok: alap, fókusz, kitöltött, hibás (szöveges hibaüzenettel), tiltott.
6. Készítsd el a további releváns elemeket: például a jelölőnégyzet, a rádiógomb, az eseménykártya vagy a legördülő mező, a szükséges állapotokkal.
7. Cseréld a képernyőidet: a meglévő képernyőkön a kézzel rajzolt elemeket cseréld komponenspéldányokra. Ellenőrizd, hogy a prototípus kapcsolatai megmaradnak-e.
8. Írj használati szabályokat: minden komponens mellé 1–3 mondat: mikor használd, mikor ne, melyik állapotot mikor.
9. Próbáld ki a változtatást: módosítsd egy főkomponens egy tulajdonságát (például a lekerekítést), és nézd meg, hogy az összes példány követi-e. Írd le, mit tapasztaltál.
10. Frissítsd a döntési naplót: melyik iterációs döntés melyik komponensben látszik? (Például a „Jelentkezés elküldése” gomb és a státuszsor a 9.1. leckebeli naplóbejegyzésből.)
11. Oszd meg a fájlt az oktatóval.

Ellenőrzőlista

• Csak a projektben tényleg előforduló elemek vannak a rendszerben.
• A komponensek stílusokat használnak, nem egyedi értékeket.
• A variánsok tulajdonságai és nevei következetesek.
• A képernyők példányokból állnak.
• Minden komponens mellett van rövid használati szabály.

Tanulási források

• Create and use variants – Figma Learn
• Create components to reuse in designs – Figma Learn