A rétegek, változók, komponensek és tokenek elnevezésének elsajátítása a Figmában nem szeszély, hanem gyakorlati szükségszerűség. Egy jól átgondolt elnevezési rendszer felgyorsítja a munkafolyamatokat, megakadályozza a zavart, és kiküszöböli a tervezés és a fejlesztés közötti súrlódást , különösen akkor, ha többen szerkesztik ugyanazokat a fájlokat.
Ha interfésztervezéssel foglalkozol, és szeretnéd a következő szintre emelni a képességeidet, elengedhetetlen, hogy a semmiből rendet rakj: milyen neveket használsz, hogyan vannak strukturálva, és hogyan vannak dokumentálva. Ebben az útmutatóban bevált legjobb gyakorlatokat, világos példákat és egy koherens megközelítést találsz a Figma minden részének szabványosításához , a fájltól és az oldaltól kezdve a legkisebb szín- vagy betűtípusváltozóig.
Alapismeretek: Miért kell szabványosítani a Figma nómenklatúráját?
Mielőtt belemennénk a részletekbe, érdemes felidézni az alapokat: a tervezési rendszer a digitális termék igazságának forrása. Ez az összetevők és stílusok összessége, amely meghatározza a felület vizuális identitását, akadálymentességét és konzisztenciáját , és a Figma az, ahol ez az igazság épül fel, kerül közzétételre és felhasználásra.
Ezen a rendszeren belül a tulajdonságok és azok értékei az építőelemek. A színek, betűtípusok, térközök, méretek, effektek és állapotok olyan nómenklatúrát igényelnek, amely logikus, olvasható és skálázható az egész szervezet számára, nem csak az első komponenst tervező személy számára.
Egy közös szabvány elkerüli a kétértelműséget. Az elnevezés nem a szép címkék hozzáadásáról szól, hanem egy olyan taxonómia létrehozásáról, amely kiállja az idő próbáját és a termék növekedését , és amely lehetővé teszi a csapat minden tagjának, hogy tudja, mit kell használni, hol kell módosítani, és hogyan befolyásolja a végfelhasználókat.
Komponensek és stílusok szervezése: működő minták
Jó gyakorlat, ha a nevek elmesélik valaminek a történetét, azt, hogy mi az, hogyan viselkedik, és hol használják. Ez magában foglalja a szemantikai szerepnevek elkülönítését a pusztán leíró vagy megjelenési nevektől , és azok egymással való következetes megőrzését.
Interaktív komponensek esetén célszerű definiálni az elemet és annak állapotát. Például egy gombnak lehet alap, ráhúzás, fókusz, lenyomva és letiltott állapota , és a névnek egyértelműen jeleznie kell az elnevezési konvenciót, amelyet a teljes könyvtár követni fog.
- Gombok: Használjon következetes konvenciót, például Elsődleges gomb, Másodlagos gomb, Harmadlagos gomb, és adja hozzá az állapotot egy utótaggal, például Elsődleges gomb — Mutató gomb.
- Ikonok: válasszon leíró neveket, például Levél ikon, Közösségi hálózatok ikon vagy Keresés ikon. Kerüld az általános, semmit sem érő helyettesítő karaktereket és ez hosszú távon megnehezíti a keresést.
Ha egynél több rendszerrel vagy márkával dolgozol, egyértelműen különítsd el a hatókört. Az Elsődleges és a Másodlagos címkék hasznosak, ha két tervezési rendszer vagy két fő paletta létezik egyszerre , és segítenek megőrizni az átláthatóságot a komponensek és a tokenek szintjén.
Az elnevezési konvenciók varázsa nem csupán esztétikai; valódi hatásuk az együttműködésben rejlik. Amikor a tervezés és a fejlesztés közös neveket és struktúrát használ, a kommunikáció javul, az átadások gördülékenyebbek, és a hibák száma csökken, mert bárki elsőre megtalálhatja a megfelelő erőforrást.
Hogyan állítsd be és tartsd karban a tervezőrendszeredet Figmában?
A tervezési rendszer egy erre a célra létrehozott fájlban történő létrehozása rendet és irányítást biztosít. Ennek a fájlnak kell referenciaként szolgálnia a könyvtárak, a fő komponensek és a közzétett stílusok számára , és ideális esetben védettnek és verziókötelesnek kell lennie.
- Kezdeti leltárSorold fel a kulcselemeket. Definiáld az alappalettát és annak skáláit, a tipográfiát és annak szintjeit, a térközmintákat és az effektusstílusokat.
- Rendszer törzsfájl: létrehoz egy dedikált fájlt a Figma-ban a tervezőrendszer számára. Ez lesz az alkatrészek és stílusok, valamint azok dokumentációjának eredete..
- Szervezett alkatrészekCsoportosítás családok szerint (Gombok, Űrlapok, Navigáció, Visszajelzés). Használja a megállapodott elnevezési konvenciót, és tartson fenn egyértelmű hierarchiát az Eszközökben.
- Jól meghatározott stílusok: színstílusokat, szöveget, rácsot és effektusokat tesz közzé. Nevezd el a stílusokat ugyanazokkal a kritériumokkal, amelyeket a változókhoz és tokenekhez fogsz használni. a duplikációk elkerülése érdekében.
- Élő dokumentációAdjon hozzá felhasználói útmutató oldalakat, példákat és irányelveket. Határozza meg, hogy mi szerkeszthető, ki tehet közzé tartalmat, és hogyan lehet a verziókat módosítani.
Mindezt folyamatoknak kell kísérniük. Célszerű megállapodni egy könyvtári kiadási munkafolyamatban, szakmai lektorálásban és verziókövetési ütemtervben , hogy a változtatások ellenőrzött és nyomon követhető módon terjedjenek.
Tervezési tokenek és szabványok: a JSON-tól a W3C-ig és a stílusszótárig
A design tokenek a vizuális és interakciós döntések legkisebb hordozható formátumú reprezentációi. A tokenek JSON-ban történő tárolása bevett gyakorlattá vált, és az olyan eszközök, mint a Style Dictionary, áthidalják a platformok közötti szakadékot azáltal, hogy változókat generálnak webes, iOS- vagy Android-eszközökhöz.
Bár a JSON használatáról konszenzus van, a JSON rendszerezésének módjáról nincs mindig egyetértés. A Style Dictionary tette népszerűvé a CTI (Category, Type, Item) taxonómiát a tokenek strukturálására , ami nagyon hasznos az automatizált folyamatok szűréséhez és átalakításához.
2023 júliusában megjelent a W3C munkacsoportjának releváns tervezete, amely a tervezési token formátum szabványosítását célozza. Ez a specifikáció többek között egy speciális, `$type` nevű tulajdonságot javasol a tokenek explicit kategorizálására , bizonyos szempontból eltérve a CTI-től.
Mit jelent ez? Ha a Figma-ból exportálsz tokeneket az új specifikáció használatával, és klasszikus Style Dictionary konfigurációkkal szeretnéd feldolgozni őket, inkompatibilitások merülhetnek fel szűrés vagy átalakítás során, mivel a szabályok CTI-t (Continuously Variable Intake) várnak. A jó hír az, hogy a Style Dictionary rugalmas: az átalakításokat, szűrőket és formátumokat a kialakuló szabványnak megfelelően adaptálhatod.
Amíg a hivatalos irányelvek kidolgozása folyamatban van, fontos, hogy az alkalmazott struktúra szem előtt tartsa a fogyasztókat: a változók nyomon követhetőségét, a szemantikai egyértelműséget és a build eszközökkel való kompatibilitást . Emellett vegye figyelembe harmadik féltől származó elemzéseket és az iparági vezetők által közzétett esettanulmányokat (például a felületskálákhoz javasolt taxonómiákat vagy a nagy rendszerek, például a Salesforce által megosztott tapasztalatokat), hogy elkerülje a spanyolviaszt újra feltalálni.
Változók elnevezése: színek és tipográfia fejfájás nélkül
Sok csapat keveri a neveket, mint például a Main Blue, a skálákkal, mint a Blue-500, és a tipográfiai szerepekkel, mint a Large Header vagy a Regular Body. Ennek a megoldásának legmegbízhatóbb módja a rétegek szétválasztása: az alap megjelenési tokenek és a szemantikai szándék tokenek.
Színek. Határozzon meg egy alappalettát skálák (pl. Kék 50, 100, 200, 300, 400, 500, 600, 700, 800, 900) és különálló semleges színek használatával. Ezek alap tokenek , és soha nem szabad közvetlenül használni őket a komponensekben, ha tematikus rugalmasságra törekszik. Ezen felül hozzon létre szemantikai tokeneket, például Elsődleges háttérszín, Másodlagos szöveg vagy Interaktív szegély, amelyek az alap tokenekhez kapcsolódnak. Így egy téma vagy márka megváltoztatása leképezés, nem pedig műtét.
Állapotok esetén adjon meg következetes utótagokat: a „Hover”, „Focus”, „Active”, „Letiltva” és „Kiválasztott” elegendőek a legtöbb eset lefedésére. Ha akadálymentes kontrasztra van szüksége, vegye figyelembe a szemantikai szerepekhez társított „Nagy kontrasztú” változatokat.
Tipográfia. Deklarálj olyan kompozíciós tokeneket, amelyek elválasztják a méretet, a súlyt, a sortávolságot és a követést, és építs fel szövegstílusokat szerepkörökkel. Használj olyan szándékneveket, mint az XL Heading (XL címsor) , az M Subheading (Alcímsor), az M Body (Törzs), az S Footer (Lábléc), és a súlyt tedd egyértelművé egy szabványosított utótaggal, például M Body Regular (Normál törzs), M Body Semibold (Félkövér törzs). Ha több márkával vagy termékkel dolgozol, akkor adj hozzá egy kontextuselőtagot, például Web, iOS vagy Brand A (A), ha feltétlenül szükséges.
A spanyol és a numerikus kódok keverése megvalósítható, ha következetes vagy. Használj kötőjeleket az attribútumok elválasztására, kerüld a problémás szóközöket, és tartsd fenn a szemantikai sorrendet a makrótól a mikroig , például Szín — Háttér — Elsődleges — Rámutatás vagy Szöveg — Törzs — M — Félkövér. Ha számozott skálákat választasz (pl. Kék-500), azokat csak alap tokeneken használd; a szemantikai szerepek ne függjenek olyan számtól, amely nem magyarázza a szándékot.
Megjegyzés a nemzetköziesítésről: még ha a csapat beszél is spanyolul, a technikai utótagok vagy rövidítések (md, lg, sm, xl) szabványosítása megkönnyíti az eszközök és más csapatok tagjai általi alkalmazást . A kulcs nem a nyelv, hanem a következetesség és a nyomon követhetőség.
Figma architektúra: csapatok, projektek, fájlok és oldalak
A Figma felépítése befolyásolja az engedélyeket, a kereséseket és a teljesítményt. A Professional Team fiókok projektekkel, fájlokkal és oldalakkal dolgoznak ; a Organization Team fiókok hozzáadják a Teams réteget, amely hasznos a vállalatoknál és az összetett struktúrákban.
Engedélyek. Csak olvasási, szerkesztési vagy adminisztrátori hozzáférést adhat projekt- és fájlszinten. Ezenkívül vannak csak megtekintésre jogosító projektek, amelyeket csak a létrehozó szerkeszthet, és meghívásos projektek, amelyek privátak . A rendszerfelügyelet fenntartása érdekében mindig kommunikáljon szerkesztési meghívókat.
Projekt elnevezési konvenció. Alkalmazzon egy mintát, például a _-t, hogy minden azonosítható és könnyen rendszerezhető legyen. Részesítse a rövid, hasznos neveket, hogy azok teljes mértékben láthatóak legyenek a felületen, és elkerüljék a kétértelműséget.
Fájltípusok. A fő, az aktív és az archivált fájl közötti különbség. A fő az igazság forrása, és zárva van a változtatásoktól, kivéve az irányítási célokat ; az aktív az, ahol a munka történik; az archivált egy kereshető történeti fájl. Könyvtárak közzétételekor azt a fő fájlból tegye.
Borítók és teljesítmény. A Figma lehetővé teszi egy képkocka kiválasztását bélyegképként (Beállítás bélyegképként). Használjon 620×320 képpontos keretet, hogy a borító éles legyen , és a színek egységesek legyenek a fájltípusok között (például egy szín a fő, egy másik az aktív és egy másik az archivált fájlhoz). Kerülje a fájl túlterhelését nagy fájlokkal: ossza fel őket funkciók és termékek szerint.
Oldalak, folyamatok és keretszámozás: minden számít.
Oldal elnevezése. Egy hatékony minta a `<title>`, növekményes azonosítóval és vezető nullákkal a stabil sorrend érdekében. Egészítse ki a nevet egy állapotkóddal magában a címben vagy egy elfogadott emojival, amely jelzi, hogy az oldal elkészült, folyamatban van, felülvizsgálat alatt áll vagy elvetett.
Folyamatok és sorok. Minden oldalon keretsorok segítségével dolgozz, amelyek felhasználói történeteket vagy forgatókönyveket ábrázolnak. Minden sor elejére illessz be egy borítókeretet a folyamat nevével és egy rövid kontextuális leírással a félreértések elkerülése és az áttekintés megkönnyítése érdekében.
Keretszámozás. Az olyan szintaxis, mint a _, nagyon jól működik. Kezdő nullákat használ a természetes rendezés biztosításához (01, 02, 03, 04, 05, 06, 07, 08, 09, 10) , és a nézeteket balról jobbra számozza a soron belül. Példa: 01_100, 01_101, 01_102 az első sorhoz; 01_200, 01_201, 01_202 a másodikhoz.
Verziókezelés. Ne hagyatkozz kizárólag az automatikus mentésre. Használd a verzióelőzményeket a mérföldkövek elérésekor véglegesítések generálásához, különösen tervezőrendszerekben vagy nagyméretű funkciókban , egyértelmű üzeneteket hagyva a csapat és a jövőbeli auditálás számára.
Rendszereszközök és irányítási könyvtárak
A könyvtárak a Figma fájlokat újrafelhasználható összetevők és stílusok szolgáltatójává alakítják. Ezek az Eszközök panelről kerülnek közzétételre, és szigorúan be kell tartaniuk az engedélyeket és a módosításokat, hogy elkerüljék a függő tervek sérülését.
Nagyobb szervezetekben érdemes egy külön tervezőrendszer-csapatot létrehozni. Ez lehetővé teszi a jobb kontrollt afelett, hogy ki szerkesztheti és publikálhatja a rendszert, míg a vállalat többi tagja csak olvasási jogosultsággal férhet hozzá a rendszerhez . Ez a szétválasztás csökkenti az incidensek számát és kiszámíthatóbbá teszi a változtatási ciklust.
Csapattípusok a Szervezetben: Nyílt, Zárt és Titkos. A Nyílt típus lehetővé teszi, hogy bárki csatlakozzon és megtekintse a dokumentációt; A Zárt típushoz meghívás szükséges a tartalom megtekintéséhez; A Titkos típus meghívás nélkül nem is látható . Válasszon a projekt érzékenysége és a rendszer fázisa szerint.
Elemzés és adminisztráció. A Szervezeti Adminisztrációs Konzol mérőszámokat biztosít az összetevők és stílusok adaptációjáról, és lehetővé teszi az alapértelmezett könyvtárak engedélyezését. Ez különösen hasznos a márkaelemek, borítók, ikonok vagy gyakori erőforrások esetében, amelyeknek könnyen elérhetőnek kell lenniük.
Átnevezés automatizálása Figma AI-val
A Figma mesterséges intelligencia időt takaríthat meg azáltal, hogy tömegesen rendel kontextuális neveket a rétegekhez. A mesterséges intelligencia elemzi a kiválasztott rétegek tartalmát, pozícióját és a közötti kapcsolatot, hogy következetes nevet javasoljon , sőt, ha ugyanazt a névtelen réteget észleli, akkor a magasabb szintű képkockák között is szinkronizál.
Az eszköz tiszteletben tartja az átnevezett rétegeket. Csak azokat a rétegeket módosítja, amelyek még a Figma alapértelmezett elnevezési konvencióját alkalmazzák , és ha átnevezett rétegeket is felvesz a kijelölésbe, akkor azokat érintetlenül hagyja, hacsak nem kényszeríti ki a műveletet.
Az átnevezett rétegek közé tartoznak a keretek, csoportok, szövegek, az összetevő alapértelmezett nevét megőrző példányok és a képkitöltésű téglalapok. Példányok esetén csak a tároló érintett, az alrétegek nem , a nem kívánt következmények elkerülése érdekében.
Át nem nevezett rétegek: már átnevezett, rejtett vagy zárolt rétegek; példányokon belüli alrétegek; egyedi vektoros alakzatok, például ellipszisek, csillagok, sokszögek és vektorrácsok; valamint képkitöltés nélküli téglalapok. Ezek esetében a módosítás manuálisan vagy az összetevők szintjén történik.
Indítás: A rétegek kiválasztása után használhatod a helyi menüt, az eszköztár Műveletek gombját vagy a gyorsműveletek menüt. Ha nincs átneveznivaló, a Figma figyelmeztetést jelenít meg, és lehetővé teszi a művelet kikényszerítését az Átnevezés mindenképpen paranccsal, ha szabványosítani szeretnéd a neveket.
A változókban található színek és szövegek konkrét bevált gyakorlatai
Ha jelenleg mind a Main Blue, mind a Blue-500 modelled megvan, akkor térj át egy kettős modellre. Definiáld az alapváltozókat skála szerint (Blue-50-től Blue-900-ig), a szemantikai változókat pedig cél szerint (Background-Primary, Text-Secondary, Border-Interactive) , és képezd le az egyiket a másikra. Ez a híd biztosítja a rugalmasságot az arculatváltással vagy a témaváltásokkal szemben.
Vezess be egységes utótagokat az állapotokhoz: Hover (Lebegés), Focus (Fókusz), Active (Aktív), Disabled (Letiltott), Selected (Kijelölt ). Ha felületekkel és magassággal dolgozol, adj hozzá változatokat az Elevated-Surface (Emelt felület) vagy a Content-On-Subtle-Background (Független háttéren megjelenő tartalom) állapotokhoz, mindig a szemantikai ernyő alatt.
A tipográfiában külön kell választani az aliasokat és a kompozíciós tokeneket. Az aliasokat szerepkörök határozzák meg (Title-XL, Subtitle-M, Body-M), a kompozíciós tokenek pedig tartalmazzák a méretet, a vastagságot, a sortávolságot és a betűközt . Amikor a betűtípusok nevei megváltoznak, vagy a termék bővül, nem kell minden képernyőt újra leképezni, csak a leképezést.
Ez a megközelítés leegyszerűsíti a fejlesztőkkel való kommunikációt is. A fejlesztők gyakran értékelik a stabil és kiszámítható változókat , mint például a `--color-text-primary` vagy a `--font-body-md`, a trendekkel együtt változó esztétikus nevek helyett.
Ajánlott bővítmények a rendszerezéshez
A segédeszközök használata kiküszöböli az ismétlődő feladatokat és az emberi hibákat. A Figmában vannak olyan bővítmények, amelyek segítenek a nevek tisztításában, a tartalom szinkronizálásában vagy a képernyők közötti kapcsolatok nyomon követésében.
- Keresés és csere: hasznos rétegnevek, stílusok vagy szövegek tömeges egyesítéséhez.
- Tartalom tekercs: Lehetővé teszi konzisztens és újrafelhasználható mintatartalom beszúrását. állapotok és hosszúságok tesztelésére.
- Rendező: segít a rétegek és rajztáblák rendszerezésében előre látható kritériumok alapján.
- Google Táblázatok szinkronizálása: szinkronizálja a táblázatos adatokat az elrendezésekkel, tökéletes listákhoz vagy táblázatokhoz.
- Automatikus áramlás: nyilakat és kapcsolatokat rajzol a keretek között az áramlások erőfeszítés nélküli bemutatása.
- Vörösvonalak: Vizuális specifikációkat generál a mértékekről, térközökről és stílusokról.
Ügyfelekkel és fiókokkal való együttműködés
Külső szervezetekkel való együttműködés esetén érdemes összehangolni a struktúrát és az engedélyeket. A szervezeti csapatfiókok lehetővé teszik termékenkénti csapatok létrehozását, alapértelmezett könyvtárak aktiválását és az adaptációs elemzések megtekintését , segítve a rendszer adatokkal történő irányítását.
A különálló csapatok előnyei: egyértelmű hierarchia, termékek vagy projektek elkülönítése, szerepkör-specifikus jogosultságok, extra szervezési szint és gördülékenyebb együttműködés. A többszintű könyvtár (Csapatok, Projektek) azonnali mentális térképet biztosít , amely csökkenti a súrlódást egy új fájl elérésekor.
A napi műveletekhez tartsa be ugyanazt a mintát, mint otthon: projektek a Fő, Aktív és Archivált kategóriákban; könnyűszerkezetes fájlok funkciók szerint; látható azonosítókkal és állapottal rendelkező oldalak; és verziókövetés egyértelmű üzenetekkel az egyes mérföldkövek lezárásakor , hogy nyomot hagyjon.
Képzés és szakmai fejlődés
Ha szeretnéd elmélyíteni és fellendíteni UX/UI karrieredet, fontold meg aktív szakemberekkel való képzést. Az olyan intenzív programok, mint a KeepCoding UX/UI Design AI Driven Full Stack Bootcampje, ötvözik a gyakorlati tapasztalatot, a józan ítélőképességet és a tervezésben és fejlesztésben alkalmazott technológiát, olyan oktatókkal, akik nap mint nap aktívak az iparágban.
A Figma elsajátításán túl ez a fajta képzés valós esettanulmányokkal, csapatmunkafolyamatokkal és hatásos döntésekkel is bemutatja Önt. Az elmélet és a gyakorlat ötvözete felgyorsítja a foglalkoztathatóságát, és segít egy erős portfólió felépítésében egy versenyképes piacon.
Egy világos elnevezési és folyamatkeretrendszerrel, egy jól publikált tervezési rendszerrel és egy szabványoknak megfelelő tokenstratégiával a csapatod felgyorsulhat, csökkentheti a hibákat, és képes lesz a terméket anélkül fejleszteni, hogy bármit is felborítana . A kulcs az, hogy megegyezzünk a konvencióban, dokumentáljuk azt, és eszközökkel, jogosultságokkal és ellenőrzésekkel betartassuk: a többi az intelligens iteráció.
