Obvladovanje poimenovanja plasti, spremenljivk, komponent in žetonov v Figmi ni muhavost; je praktična nujnost. Dobro premišljen sistem poimenovanja pospeši delovne procese, preprečuje zmedo in odpravlja trenje med načrtovanjem in razvojem , zlasti ko več ljudi ureja iste datoteke.
Če delate na področju oblikovanja vmesnikov in želite svoje znanje dvigniti na višjo raven, je bistveno, da si uredite stvari od začetka: katera imena se uporabljajo, kako so strukturirana in kako so dokumentirana. V tem priročniku boste našli preizkušene najboljše prakse, jasne primere in skladen pristop k standardizaciji vsega v Figmi , od datoteke in strani do najmanjše spremenljivke barve ali pisave.
Osnove: Zakaj standardizirati nomenklaturo v Figmi
Preden se poglobimo v podrobnosti, se je vredno spomniti osnov: oblikovalski sistem je vir resnice za digitalni izdelek. Gre za niz komponent in slogov, ki določajo vizualno identiteto, dostopnost in doslednost vašega vmesnika , Figma pa je mesto, kjer se ta resnica gradi, objavlja in uporablja.
Znotraj tega sistema so lastnosti in njihove vrednosti gradniki. Barve, pisave, razmiki, velikosti, učinki in stanja zahtevajo nomenklaturo, ki je logična, berljiva in prilagodljiva za celotno organizacijo, ne le za osebo, ki je zasnovala prvo komponento.
Skupni standard se izogiba dvoumnosti. Poimenovanje ne pomeni dodajanja lepih oznak, temveč ustvarjanja taksonomije, ki vzdrži preizkus časa in rasti izdelka ter ki vsem v ekipi omogoča, da vedo, kaj uporabiti, kje to spremeniti in kako to vpliva na končne potrošnike.
Organizacija komponent in slogov: vzorci, ki delujejo
Dobra praksa je, da imena povedo zgodbo o tem, kaj nekaj je, kako se obnaša in kje se uporablja. To vključuje ločevanje imen semantičnih vlog od zgolj opisnih ali videznih imen in ohranjanje njihove medsebojne skladnosti.
Pri interaktivnih komponentah je priporočljivo definirati element in njegovo stanje. Gumb ima lahko na primer stanja »osnova«, »lever«, »focus«, »pritisnjen« in »onemogočen« , ime pa mora jasno navajati konvencijo poimenovanja, ki ji bo sledila celotna knjižnica.
- Gumbi: Uporabite dosledno konvencijo, kot so primarni gumb, sekundarni gumb, terciarni gumb, in dodajte stanje s pripono, na primer primarni gumb – zadrževanje miške.
- Ikone: izberite opisna imena, kot so ikona pošte, ikona družbenih omrežij ali ikona iskanja. Izogibajte se generičnim nadomestnim znakom, ki ne štejejo za nič in to dolgoročno oteži iskanje.
Če delate z več kot enim sistemom ali blagovno znamko, jasno ločite obseg. Primarno in sekundarno sta uporabni oznaki, kadar hkrati obstajata dva oblikovalska sistema ali dve glavni paleti , in pomagata ohranjati jasnost na ravni komponent in žetonov.
Čarobnost poimenovanj ni le estetska; njihov pravi učinek je v sodelovanju. Ko si oblikovanje in razvoj delita imena in strukturo, se komunikacija izboljša, prenos je bolj gladek in napake se zmanjšajo, ker lahko vsakdo najde pravi vir že prvič.
Kako nastaviti in vzdrževati svoj oblikovalski sistem v Figmi
Vzpostavitev oblikovalskega sistema v namenski datoteki prinaša red in upravljanje. Ta datoteka naj bi služila kot referenca za knjižnice, glavne komponente in objavljene sloge ter bi morala biti idealno zaščitena in različicovana.
- Začetni popisNaštejte ključne elemente. Definirajte osnovno paleto in njena merila, tipografijo in njene nivoje, vzorce razmikov in sloge učinkov.
- Glavna datoteka sistema: ustvari namensko datoteko v Figmi za sistem oblikovanja. To bo izvor komponent in slogov, pa tudi njihova dokumentacija..
- Organizirane komponenteZdružite po družinah (gumbi, obrazci, navigacija, povratne informacije). Uporabite dogovorjeno konvencijo poimenovanja in ohranite jasno hierarhijo v Sredstvih.
- Dobro definirani slogi: objavlja barvne sloge, besedilo, mrežo in učinke. Poimenujte sloge z uporabo enakih meril, kot jih boste uporabili za spremenljivke in žetone. da se izognemo podvajanju.
- Živa dokumentacijaDodajte strani z uporabniškim priročnikom, primere in smernice. Določite, kaj je mogoče urejati, kdo objavlja in kako spreminjati različice.
Vse to morajo spremljati postopki. Priporočljivo je, da se dogovorite o poteku dela za izdajo knjižnice, medsebojnem pregledu in urniku izdajanja različic , da se spremembe širijo na nadzorovan in sledljiv način.
Žetoni in standardi oblikovanja: od JSON do W3C in slogovnega slovarja
Žetoni oblikovanja so najmanjša predstavitev vizualnih in interaktivnih odločitev v prenosljivi obliki. Shranjevanje žetonov v JSON je postalo običajna praksa, orodja, kot je Style Dictionary, pa premostijo vrzel med platformami z ustvarjanjem spremenljivk za splet, iOS ali Android.
Čeprav obstaja soglasje o uporabi JSON-a, ni vedno soglasja o tem, kako ta JSON organizirati. Slovar slogov je populariziral taksonomijo CTI (kategorija, tip, element) za strukturiranje žetonov , kar je zelo uporabno za filtriranje in preoblikovanje v avtomatiziranih cevovodih.
Julija 2023 je bil objavljen ustrezen osnutek delovne skupine W3C za standardizacijo formata oblikovalskih žetonov. Ta specifikacija med drugim predlaga posebno lastnost, imenovano `$type`, za eksplicitno kategorizacijo žetonov , ki se v nekaterih pogledih razlikuje od CTI.
Kaj to pomeni? Če izvozite žetone iz Figme z uporabo nove specifikacije in jih nameravate obdelati s klasičnimi konfiguracijami Style Dictionary, se lahko pri filtriranju ali preoblikovanju pojavijo nezdružljivosti, ker pravila pričakujejo CTI (Continuously Variable Intake). Dobra novica je, da je Style Dictionary prilagodljiv: transformacije, filtre in formate lahko prilagodite nastajajočemu standardu.
Medtem ko se razvijajo uradne smernice, je pomembno, da struktura, ki jo sprejmete, upošteva potrošnike: sledljivost spremenljivk, semantično jasnost in združljivost z orodji za gradnjo . Upoštevajte tudi analize tretjih oseb in študije primerov, ki jih objavljajo vodilni v panogi (na primer predlagane taksonomije za lestvice vmesnikov ali izkušnje, ki jih delijo veliki sistemi, kot je Salesforce), da se izognete ponovnemu izumljanju kolesa.
Poimenovanje spremenljivk: barve in tipografija brez glavobolov
Številne ekipe mešajo imena, kot je Main Blue (Modra), z lestvicami, kot je Blue-500, in tipografskimi vlogami, kot sta Large Header (Velika glava) ali Regular Body (Navadno telo). Najbolj robusten način za rešitev tega je ločevanje plasti: žetonov osnovnega videza in žetonov semantične namere.
Barve. Osnovno paleto določite z uporabo lestvic (npr. modra 50, 100, 200, 300, 400, 500, 600, 700, 800, 900) in ločenih nevtralnih barv. To so osnovni žetoni in jih nikoli ne smete uporabljati neposredno v komponentah, če želite doseči tematsko prilagodljivost. Poleg tega ustvarite semantične žetone, kot so primarna barva ozadja, sekundarno besedilo ali interaktivni okvir, ki se preslikajo na osnovne žetone. Na ta način je spreminjanje teme ali blagovne znamke preslikava in ne operacija.
Za stanja dodajte dosledne pripone: » Premakni se s kazalcem miške«, »Fokus«, »Aktivno«, »Onemogočeno« in »Izbrano« zadostujejo za večino primerov. Če potrebujete dostopen kontrast, razmislite o različicah z visokim kontrastom, povezanih s semantičnimi vlogami.
Tipografija. Deklarira žetone kompozicije, ki ločujejo velikost, težo, vodilo in sledenje, ter sestavi sloge besedila z vlogami. Uporabljaj imena namenov, kot so Naslov XL , Podnaslov M, Telo M, Noga S, in težo jasno navedi s standardizirano pripono, na primer Telo M Regular, Telo M Semibold. Če delaš z več blagovnimi znamkami ali izdelki, po potrebi dodaj kontekstno predpono, kot so Splet, iOS ali Blagovna znamka A.
Mešanje španščine z numeričnimi kodami je izvedljivo, če ste dosledni. Za ločevanje atributov uporabite vezaje, izogibajte se problematičnim presledkom in ohranite semantični vrstni red od makro do mikro elementov , na primer Barva – Ozadje – Primarno – Lebdenje ali besedilo – Telo – M – Polkrepko. Če se odločite za oštevilčene lestvice (npr. Modra-500), jih uporabite samo na osnovnih žetonih; semantične vloge ne smejo biti odvisne od števila, ki ne pojasnjuje namena.
Opomba o internacionalizaciji: tudi če ekipa govori špansko, standardizacija tehničnih pripon ali okrajšav (md, lg, sm, xl) olajša uporabo s strani orodij in ljudi iz drugih ekip . Ključ ni jezik, temveč doslednost in sledljivost.
Arhitektura Figme: ekipe, projekti, datoteke in strani
Struktura Figme vpliva na dovoljenja, iskanja in delovanje. Računi profesionalnih ekip delujejo s projekti, datotekami in stranmi ; računi organizacijskih ekip dodajo plast Ekipe, ki je uporabna v korporacijah in kompleksnih strukturah.
Dovoljenja. Na ravni projekta in datoteke lahko podelite dostop samo za branje, urejanje ali skrbniški dostop. Poleg tega obstajajo projekti samo za ogled, ki jih lahko ureja samo ustvarjalec, in projekti samo s povabilom, ki so zasebni . Vedno sporočite povabila za urejanje, da ohranite nadzor nad sistemom.
Konvencija poimenovanja projektov. Vzpostavite vzorec, kot je _, da bo vse prepoznavno in enostavno organizirano. Dajte prednost kratkim, uporabnim imenom, da bodo v celoti vidna v vmesniku in se izognete dvoumnosti.
Vrste datotek. Razlika med glavno, aktivno in arhivirano datoteko. Glavna je vir resnice in je zaprta za spremembe, razen za namene upravljanja ; aktivna je tam, kjer se opravlja delo; arhivirana je zgodovinska datoteka, v kateri je mogoče iskati. Pri objavljanju knjižnic to storite iz glavne datoteke.
Ovitki in zmogljivost. Figma vam omogoča, da izberete okvir kot sličico (Nastavi kot sličico). Uporabite okvir velikosti 620 × 320 slikovnih pik, da zagotovite oster videz ovitka in doslednost barv v vseh vrstah datotek (na primer ena barva za glavno, druga za aktivno in tretja za arhivirano). Izogibajte se preobremenitvi datoteke z ogromnimi datotekami: razdelite jih po funkcijah in izdelkih.
Strani, poteki in oštevilčenje okvirjev: poskrbite, da vse šteje.
Poimenovanje strani. Učinkovit vzorec je `<title>` z naraščajočim ID-jem in vodilnimi ničlami za stabilno razvrščanje. Ime dopolnite s statusno kodo v samem naslovu ali dogovorjenim emojijem, ki označuje, ali je dokončano, v teku, v pregledu ali zavrženo.
Tokovi in vrstice. Znotraj vsake strani uporabljajte vrstice okvirjev, ki predstavljajo uporabniške zgodbe ali scenarije. Na začetek vsake vrstice vključite naslovni okvir z imenom toka in kratkim kontekstualnim opisom, da se izognete nesporazumom in olajšate pregled.
Številčenje okvirjev. Sintaksa, kot je _, deluje zelo dobro. Uporablja vodilne ničle za zagotovitev naravnega vrstnega reda (01, 02, 03, 04, 05, 06, 07, 08, 09, 10) in oštevilči poglede od leve proti desni znotraj vrstice. Primer: 01_100, 01_101, 01_102 za prvo vrstico; 01_200, 01_201, 01_202 za drugo.
Različice. Ne zanašajte se samo na samodejno shranjevanje. Uporabite zgodovino različic za ustvarjanje potrjevanj (commit), ko so doseženi mejniki, zlasti v sistemih oblikovanja ali velikih funkcionalnostih , s čimer pustite jasna sporočila za ekipo in za prihodnje revizije.
Sistemska oprema in knjižnice za upravljanje
Knjižnice pretvorijo datoteko Figma v ponudnika komponent in slogov za večkratno uporabo. Objavljene so na plošči Sredstva in zahtevajo strogo upoštevanje dovoljenj in revizij, da se prepreči kršitev odvisnih zasnov.
V večjih organizacijah se splača ustanoviti namensko ekipo za oblikovalske sisteme. To omogoča boljši nadzor nad tem, kdo lahko ureja in objavlja, medtem ko preostali del podjetja dostopa do sistema z dovoljenji samo za branje . Ta ločitev zmanjšuje število incidentov in naredi cikel sprememb bolj predvidljiv.
Vrste ekip v organizaciji: odprta, zaprta in tajna. Odprta ekipa omogoča pridružitev in ogled dokumentacije vsem; zaprta ekipa zahteva povabilo za ogled vsebine; tajna ekipa ni vidna brez povabila . Izberite glede na občutljivost projekta in fazo sistema.
Analitika in administracija. Skrbniška konzola organizacije zagotavlja meritve o uporabi komponent in slogov ter vam omogoča omogočanje privzetih knjižnic. To je še posebej uporabno za sredstva blagovne znamke, naslovnice, ikone ali običajne vire, ki morajo biti takoj na voljo.
Avtomatizirajte preimenovanje z umetno inteligenco Figma
Figma AI lahko prihrani čas z dodeljevanjem kontekstualnih imen plastem v velikem obsegu. AI analizira vsebino, položaj in odnos med izbranimi plastmi, da predlaga dosledno ime , in celo sinhronizira med okvirji višje ravni, če zazna isto neimenovano plast.
Orodje spoštuje tisto, kar ste že preimenovali. Spremeni le plasti, ki še vedno uporabljajo privzeto konvencijo poimenovanja Figme , in če v izbor vključite preimenovane plasti, jih bo ohranilo nedotaknjene, razen če dejanje prisilite.
Preimenovane plasti vključujejo: okvirje, skupine, besedilo, instance, ki ohranijo privzeto ime komponente, in pravokotnike s slikovnim polnilom. Pri instancah je prizadet samo vsebnik, ne pa tudi podplasti , da se izognemo neželenim posledicam.
Plasti, ki niso preimenovane: plasti, ki so že preimenovane, skrite ali zaklenjene; podplasti znotraj instanc; posamezne vektorske oblike, kot so elipse, zvezde, poligoni in vektorske mreže; ter pravokotniki brez slikovnega polnila. Pri teh sprememba ostane ročna ali na ravni komponente.
Kako ga zagnati: Ko izberete plasti, lahko uporabite kontekstni meni, gumb Dejanja v orodni vrstici ali meni hitrih dejanj. Če ni ničesar za preimenovati, Figma prikaže opozorilo in vam omogoči, da dejanje vseeno prisilite z možnostjo Preimenuj, če morate standardizirati imena.
Posebne najboljše prakse za barve in besedilo v spremenljivkah
Če trenutno imate tako glavno modro kot modro-500, preskočite na dvojni model. Določite osnovne spremenljivke glede na merilo (modra-50 do modra-900) in semantične spremenljivke glede na namen (ozadje-primarno, besedilo-sekundarno, obroba-interaktivno) in jih preslikajte eno na drugo. Ta most vam daje odpornost na preoblikovanje blagovne znamke ali spremembe teme.
Uvedite enotne pripone za stanja: Lebdi, Fokus, Aktivno, Onemogočeno, Izbrano . Če delate s površinami in višino, dodajte različice za Dvignjena-Površina ali Vsebina-Na-Subtle-Background, vedno pod semantičnim dežnikom.
V tipografiji ločite vzdevke in žetone za sestavo. Vzdevke določa vloga (Naslov-XL, Podnaslov-M, Telo-M), žetoni za sestavo pa vključujejo velikost, debelino, vodilo in sledenje . Ko se imena pisav spremenijo ali se izdelek poveča, vam ne bo treba preslikati vsakega zaslona, ampak le preslikavo.
Ta pristop poenostavlja tudi komunikacijo z razvojem. Razvijalci pogosto cenijo stabilne in predvidljive spremenljivke , kot sta `--color-text-primary` ali `--font-body-md`, namesto estetsko privlačnih imen, ki se spreminjajo s trendi.
Priporočeni vtičniki za organizacijo
Uporaba pomožnih orodij odpravlja ponavljajoča se opravila in človeške napake. V Figmi so vtičniki, ki pomagajo pri čiščenju imen, sinhronizaciji vsebine ali sledenju povezavam med zasloni.
- Najdi in zamenjaj: uporabno za množično poenotenje imen plasti, slogov ali besedila.
- Vsebina koluta: Omogoča vam vstavljanje dosledne in ponovno uporabne vzorčne vsebine. za testiranje stanj in dolžin.
- Razvrščevalec: pomaga razvrščati plasti in umetniške površine s predvidljivimi merili.
- Sinhronizacija Google Preglednic: sinhronizira podatke v tabelah s postavitvami, kar je idealno za sezname ali tabele.
- Samodejni pretok: risanje puščic in povezav med okvirji brez napora predstaviti tokove.
- Rdeče črte: Ustvari vizualne specifikacije mer, razmikov in slogov.
Delo s strankami in organizacija računov
Pri sodelovanju z zunanjimi organizacijami je smiselno uskladiti strukturo in dovoljenja. Računi organizacijskih ekip vam omogočajo ustvarjanje ekip po izdelkih, aktiviranje privzetih knjižnic in ogled analitike uvajanja , kar vam pomaga pri upravljanju sistema s podatki.
Prednosti ločenih ekip: jasna hierarhija, ločitev izdelkov ali projektov, dovoljenja za posamezne vloge, dodatna raven organizacije in bolj gladko sodelovanje. Večstopenjski imenik (Ekipe, Projekti) zagotavlja takojšen miselni zemljevid , ki zmanjšuje trenje pri dostopu do nove datoteke.
Za vsakodnevno delovanje ohranite enak vzorec kot doma: projekti za glavno, aktivno in arhivirano; lahke datoteke po funkcionalnosti; strani z vidnimi ID-ji in stanjem; ter upravljanje različic z jasnimi sporočili ob zaključku vsakega mejnika, da pustite sled.
Usposabljanje in strokovni razvoj
Če želite poglobiti in izboljšati svojo kariero na področju UX/UI, razmislite o usposabljanju z aktivnimi strokovnjaki. Intenzivni programi, kot je KeepCodingov UX/UI Design AI Driven Full Stack Bootcamp, združujejo praktične izkušnje, zdravo presojo in tehnologijo, uporabljeno v oblikovanju in razvoju, z inštruktorji, ki so vsak dan aktivni v panogi.
Poleg obvladovanja Figme vas ta vrsta usposabljanja seznani tudi s študijami primerov iz resničnega sveta, timskim delom in vplivnimi odločitvami. Ta mešanica teorije in prakse pospešuje vašo zaposljivost in vam pomaga zgraditi močan portfelj na konkurenčnem trgu.
Z jasnim ogrodjem poimenovanja in procesov, dobro objavljenim sistemom oblikovanja in strategijo žetonov, ki je skladna s standardi, bo vaša ekipa pridobila na hitrosti, zmanjšala število napak in bo lahko razvijala izdelek, ne da bi pri tem karkoli pokvarila . Ključno je, da se dogovorite o konvenciji, jo dokumentirate in uveljavite z orodji, dovoljenji in pregledi: ostalo je inteligentno ponavljanje.
