Išmokti „Figma“ kalboje pavadinti sluoksnius, kintamuosius, komponentus ir žetonus nėra užgaida, o praktinis poreikis. Gerai apgalvota pavadinimų sistema pagreitina darbo eigą, padeda išvengti painiavos ir pašalina trintį tarp projektavimo ir kūrimo , ypač kai tuos pačius failus redaguoja keli žmonės.
Jei dirbate sąsajų dizaino srityje ir norite pakelti savo įgūdžius į kitą lygį, labai svarbu susitvarkyti viską nuo nulio: kokie pavadinimai naudojami, kaip jie struktūrizuojami ir kaip dokumentuojami. Šiame vadove rasite patikrintus geriausios praktikos pavyzdžius, aiškius pavyzdžius ir nuoseklų požiūrį į visko, kas yra „Figma“ , standartizavimą – nuo failo ir puslapio iki mažiausio spalvos ar šrifto kintamojo.
Pagrindai: kodėl reikia standartizuoti „Figma“ nomenklatūrą
Prieš pradedant detaliau, verta prisiminti pagrindus: dizaino sistema yra skaitmeninio produkto tiesos šaltinis. Tai komponentų ir stilių rinkinys, apibrėžiantis jūsų sąsajos vizualinį identitetą, prieinamumą ir nuoseklumą , o „Figma“ yra ta vieta, kur ši tiesa kuriama, publikuojama ir vartojama.
Toje sistemoje savybės ir jų reikšmės yra statybiniai blokai. Spalvoms, šriftams, tarpams, dydžiams, efektams ir būsenoms reikalinga nomenklatūra, kuri būtų logiška, lengvai skaitoma ir pritaikoma visai organizacijai, o ne tik asmeniui, kuris sukūrė pirmąjį komponentą.
Bendras standartas padeda išvengti dviprasmybių. Pavadinimų suteikimas nėra skirtas gražioms etiketėms pridėti, o taksonomijos, kuri atlaikytų laiko išbandymą ir produkto augimą , sukūrimui, leidžiant visiems komandos nariams žinoti, ką naudoti, kur tai keisti ir kaip tai veikia galutinius vartotojus.
Komponentų ir stilių organizavimas: veikiantys modeliai
Gera praktika yra naudoti pavadinimus, kurie pasakotų apie tai, kas kažkas yra, kaip tai veikia ir kur yra naudojama. Tai reiškia atskirti semantinius vaidmenų pavadinimus nuo grynai aprašomųjų ar išvaizdos pavadinimų ir išlaikyti juos nuoseklius tarpusavyje.
Interaktyviems komponentams patartina apibrėžti elementą ir jo būseną. Pavyzdžiui, mygtukas gali turėti bazinę, užvedimo, fokusavimo, paspausto ir išjungto būsenas , o pavadinimas turėtų aiškiai nurodyti pavadinimų suteikimo tvarką, kurios laikysis visa biblioteka.
- Mygtukai: naudokite nuoseklų susitarimą, pvz., „Pagrindinis mygtukas“, „Antrinis mygtukas“, „Tretinis mygtukas“, ir pridėkite būseną su priesaga, pvz., „Pagrindinis mygtukas – Užveskite pelės žymeklį“.
- Piktogramos: pasirinkite aprašomuosius pavadinimus, pvz., pašto piktograma, socialinių tinklų piktograma arba paieškos piktograma. Venkite bendrinių pakaitos simbolių, kurie nieko nereiškia ir tai ilgainiui apsunkina paiešką.
Jei dirbate su daugiau nei viena sistema ar prekės ženklu, aiškiai atskirkite taikymo sritį. Pirminė ir antrinė yra naudingos etiketės, kai kartu egzistuoja dvi dizaino sistemos arba dvi pagrindinės paletės , ir jos padeda išlaikyti aiškumą komponentų ir žetonų lygmeniu.
Pavadinimų suteikimo konvencijų magija nėra vien estetinė; tikrasis jų poveikis slypi bendradarbiavime. Kai projektavimo ir kūrimo specialistai dalijasi pavadinimais ir struktūra, pagerėja komunikacija, sklandesnis išteklių perdavimas ir sumažėja klaidų, nes kiekvienas gali iš pirmo karto rasti reikiamą išteklių.
Kaip nustatyti ir prižiūrėti savo projektavimo sistemą „Figma“ programoje
Projektavimo sistemos sukūrimas specialiame faile užtikrina tvarką ir valdymą. Šis failas turėtų būti naudojamas kaip nuoroda bibliotekoms, pagrindiniams komponentams ir publikuotiems stiliams , ir idealiu atveju jis turėtų būti apsaugotas ir versuojamas.
- Pradinė inventorizacijaIšvardykite pagrindinius elementus. Apibrėžkite pagrindinę paletę ir jos mastelius, tipografiją ir jos lygius, tarpų išdėstymo raštus ir efektų stilius.
- Sistemos pagrindinis failas: sukuria specialų failą „Figma“ programoje projektavimo sistemai. Tai bus komponentų ir stilių, taip pat jų dokumentacijos, kilmė..
- Organizuoti komponentaiGrupuokite pagal šeimas (mygtukai, formos, naršymas, atsiliepimai). Naudokite sutartą pavadinimų suteikimo tvarką ir palaikykite aiškią hierarchiją ištekliuose.
- Aiškiai apibrėžti stiliai: publikuoja spalvų stilius, tekstą, tinklelį ir efektus. Pavadinkite stilius naudodami tuos pačius kriterijus, kuriuos naudosite kintamiesiems ir žetonams. kad būtų išvengta dubliavimosi.
- Gyvoji dokumentacijaPridėkite naudotojo vadovo puslapius, pavyzdžius ir gaires. Apibrėžkite, ką galima redaguoti, kas publikuoja ir kaip atlikti versijų pakeitimus.
Visa tai turi būti lydima procesų. Patartina susitarti dėl bibliotekos išleidimo darbo eigos, kolegų peržiūros ir versijų kūrimo grafiko , kad pakeitimai būtų atliekami kontroliuojamai ir atsekamai.
Dizaino žetonai ir standartai: nuo JSON iki W3C ir stilių žodyno
Dizaino žetonai yra mažiausias vizualinių ir sąveikos sprendimų atvaizdavimas nešiojamame formate. Žetonų saugojimas JSON formatu tapo įprasta praktika, o tokios priemonės kaip „Style Dictionary“ panaikina atotrūkį tarp platformų, generuodamos kintamuosius žiniatinkliui, „iOS“ ar „Android“.
Nors dėl JSON naudojimo sutariama, ne visada sutariama, kaip tą JSON tvarkyti. „Style Dictionary“ išpopuliarino CTI (kategorijos, tipo, elemento) taksonomiją žetonų struktūrizavimui , kuri yra labai naudinga filtravimui ir transformavimui automatizuotuose srautuose.
2023 m. liepos mėn. buvo paskelbtas atitinkamas W3C darbo grupės parengtas projektas, skirtas dizaino žetonų formatui standartizuoti. Šioje specifikacijoje, be kita ko, siūloma speciali savybė, vadinama „$type“, skirta aiškiai kategorizuoti žetonus , kai kuriais aspektais nukrypstant nuo CTI.
Ką tai reiškia? Jei eksportuojate žetonus iš „Figma“ naudodami naują specifikaciją ir ketinate juos apdoroti naudodami klasikines stilių žodyno konfigūracijas, filtruojant ar transformuojant gali kilti nesuderinamumo problemų, nes taisyklės tikisi CTI (nuolat kintamo įleidimo). Geros žinios yra tai, kad stilių žodynas yra lankstus: galite pritaikyti transformacijas, filtrus ir formatus, kad jie atitiktų kylantį standartą.
Kuriant oficialias gaires, svarbu, kad jūsų taikoma struktūra atsižvelgtų į vartotojus: kintamųjų atsekamumą, semantinį aiškumą ir suderinamumą su kūrimo įrankiais . Taip pat atsižvelkite į trečiųjų šalių analizes ir atvejų studijas, kurias paskelbė pramonės lyderiai (pvz., siūlomas sąsajų skalių taksonomijas arba patirtį, kuria dalijasi didelės sistemos, tokios kaip „Salesforce“), kad nereikėtų išradinėti dviračio iš naujo.
Kintamųjų pavadinimai: spalvos ir tipografija be galvos skausmo
Daugelis komandų maišo tokius pavadinimus kaip „Main Blue“ su skalėmis, tokiomis kaip „Blue-500“, ir tipografiniais vaidmenimis, tokiais kaip „Large Header“ arba „Regular Body“. Patikimiausias būdas tai išspręsti – atskirti sluoksnius: bazinius išvaizdos žetonus ir semantinius ketinimų žetonus.
Spalvos. Apibrėžkite pagrindinę paletę naudodami skales (pvz., mėlyna 50, 100, 200, 300, 400, 500, 600, 700, 800, 900) ir atskiras neutralias spalvas. Tai yra baziniai žetonai ir niekada neturėtų būti naudojami tiesiogiai komponentuose, jei siekiate teminio lankstumo. Be to, sukurkite semantinius žetonus, tokius kaip „Pagrindinė fono spalva“, „Antrinis tekstas“ arba „Interaktyvi rėmelis“, kurie susieja su baziniais žetonais. Tokiu būdu temos ar prekės ženklo keitimas yra susiejimas, o ne operacija.
Būsenoms pridėkite nuoseklias priesagas: „Hover“, „Focus“, „Active“, „Disabled“ ir „Selected“ pakanka daugumai atvejų. Jei jums reikia prieinamo kontrasto, apsvarstykite su semantiniais vaidmenimis susietus didelio kontrasto variantus.
Tipografija. Deklaruokite kompozicijos žetonus, kurie atskiria dydį, svorį, eilę ir sekimą, ir kurkite teksto stilius su vaidmenimis. Naudokite tokius intencinius pavadinimus kaip XL Heading (antraštė) , M Subheading (paantraštė), M Body (pagrindas), S Footer (poraštė) ir aiškiai nurodykite svorį naudodami standartizuotą priesagą, pvz., M Body Regular (įprastas), M Body Semibold (pusrytinis). Jei dirbate su keliais prekių ženklais ar produktais, pridėkite konteksto priešdėlį, pvz., Web (žiniatinklis), iOS (iOS) arba Brand A (prekės ženklas), kai tai absoliučiai būtina.
Ispanų kalbos ir skaitmeninių kodų maišymas yra įmanomas, jei esate nuoseklūs. Naudokite brūkšnelius atributams atskirti, venkite probleminių tarpų ir išlaikykite semantinę tvarką nuo makro iki mikro , pavyzdžiui, Spalva — Fonas — Pirminis — Užvedimas virš pelės žymeklio arba Tekstas — Turinys — M — Pusiau paryškintas. Jei pasirinksite sunumeruotas skales (pvz., Mėlyna-500), naudokite jas tik su baziniais žetonais; semantiniai vaidmenys neturėtų priklausyti nuo skaičiaus, kuris nepaaiškina ketinimo.
Pastaba apie internacionalizavimą: net jei komanda kalba ispaniškai, techninių priesagų ar santrumpų (md, lg, sm, xl) standartizavimas palengvina jų pritaikymą kitų komandų įrankiams ir žmonėms . Svarbiausia ne kalba, o nuoseklumas ir atsekamumas.
„Figma“ architektūra: komandos, projektai, failai ir puslapiai
„Figma“ struktūra daro įtaką leidimams, paieškoms ir našumui. Profesionalios komandos paskyros veikia su projektais, failais ir puslapiais ; organizacijos komandos paskyros prideda komandų sluoksnį, kuris naudingas korporacijose ir sudėtingose struktūrose.
Leidimai. Galite suteikti tik skaitymo, redagavimo arba administratoriaus prieigą projekto ir failo lygmenimis. Be to, yra tik peržiūros projektai, kuriuos gali redaguoti tik kūrėjas, ir projektai, kuriems leidžiama tik gauti kvietimą ir kurie yra privatūs . Visada perduokite redagavimo kvietimus, kad išlaikytumėte sistemos valdymą.
Projektų pavadinimų suteikimo tvarka. Nustatykite tokį šabloną kaip „_“, kad viską būtų galima atpažinti ir lengvai tvarkyti. Rinkitės trumpus, praktiškus pavadinimus, kad jie būtų visiškai matomi sąsajoje ir išvengtumėte dviprasmybių.
Failų tipai. Skirtumas tarp pagrindinio, aktyvaus ir archyvuoto bibliotekų. Pagrindinis yra tiesos šaltinis ir yra uždaras keisti, išskyrus valdymo tikslais ; aktyvus yra vieta, kur atliekamas darbas; archyvuotas yra ieškomas istorinis failas. Publikuodami bibliotekas, tai darykite iš pagrindinio.
Viršeliai ir našumas. „Figma“ leidžia pasirinkti kadrą kaip miniatiūrą (Nustatyti kaip miniatiūrą). Naudokite 620 × 320 pikselių kadrą, kad viršelis atrodytų ryškiai , o spalvos būtų vienodos skirtingų tipų failuose (pavyzdžiui, viena spalva pagrindiniam, kita – aktyviam, o kita – archyvuotam). Venkite failo perkrovos dideliais failais: suskirstykite juos pagal funkcijas ir produktus.
Puslapiai, srautai ir kadrų numeravimas: viskas turi būti svarbu.
Puslapių pavadinimai. Efektyvus šablonas yra „<pavadinimas>“ su didėjančiu ID ir nuliais priekyje, kad būtų užtikrinta stabili tvarka. Pavadinimą papildykite būsenos kodu pačiame pavadinime arba sutartu jaustuku, nurodančiu, ar puslapis baigtas, vykdomas, peržiūrimas ar atmestas.
Srautai ir eilutės. Kiekviename puslapyje dirbkite naudodami rėmelių eilutes, kurios vaizduoja naudotojų istorijas arba scenarijus. Kiekvienos eilutės pradžioje įtraukite viršelio rėmelį su srauto pavadinimu ir trumpu kontekstiniu aprašymu, kad išvengtumėte nesusipratimų ir būtų lengviau peržiūrėti.
Kadrų numeravimas. Tokia sintaksė kaip „_“ veikia labai gerai. Joje naudojami pradiniai nuliai, kad būtų užtikrinta natūrali tvarka (01, 02, 03, 04, 05, 06, 07, 08, 09, 10) , ir vaizdai eilutėje numeruojami iš kairės į dešinę. Pavyzdys: 01_100, 01_101, 01_102 pirmajai eilutei; 01_200, 01_201, 01_202 antrai eilutei.
Versijų kūrimas. Nepasikliaukite vien automatiniu išsaugojimu. Naudokite versijų istoriją, kad sugeneruotumėte pakeitimus, kai pasiekiami etapai, ypač projektavimo sistemose ar didelėse funkcijose , palikdami aiškius pranešimus komandai ir būsimam auditui.
Sistemos įranga ir valdymo bibliotekos
Bibliotekos transformuoja „Figma“ failą į pakartotinai naudojamų komponentų ir stilių teikėją. Jos publikuojamos iš išteklių skydelio ir reikalauja griežtai laikytis leidimų bei pataisymų, kad nebūtų sugadinti priklausomi dizainai.
Didesnėse organizacijose verta sukurti atskirą projektavimo sistemos komandą. Tai leidžia geriau kontroliuoti, kas gali redaguoti ir publikuoti, o likusi įmonės dalis prie sistemos prisijungia tik skaitymo leidimais . Toks atskyrimas sumažina incidentų skaičių ir padaro pakeitimų ciklą labiau nuspėjamą.
Komandų tipai organizacijoje: atvira, uždara ir slapta. Atvira komanda leidžia prisijungti ir peržiūrėti dokumentaciją visiems; uždara komanda reikalauja kvietimo, kad būtų galima peržiūrėti turinį; slapta komanda net nematoma be kvietimo . Rinkitės pagal projekto jautrumą ir sistemos etapą.
Analizė ir administravimas. Organizacijos administratoriaus konsolėje pateikiami komponentų ir stilių pritaikymo rodikliai ir leidžiama įjungti numatytąsias bibliotekas. Tai ypač naudinga prekės ženklo ištekliams, viršeliams, piktogramoms ar bendriems ištekliams, kurie turi būti lengvai prieinami.
Automatizuokite pervadinimą naudodami „Figma AI“
„Figma“ dirbtinis intelektas gali sutaupyti laiko, masiškai priskirdamas kontekstinius pavadinimus sluoksniams. Dirbtinis intelektas analizuoja pasirinktų sluoksnių turinį, padėtį ir ryšį, kad pasiūlytų nuoseklų pavadinimą , ir netgi sinchronizuoja aukštesnio lygio kadrus, jei aptinka tą patį neįvardytą sluoksnį.
Įrankis atsižvelgia į tai, ką jau pervadinote. Jis keičia tik tuos sluoksnius, kurie vis dar turi numatytąją „Figma“ pavadinimų suteikimo tvarką , o jei į pasirinkimą įtrauksite pervadintus sluoksnius, jie liks nepakeisti, nebent priversite atlikti veiksmą.
Pervadinami sluoksniai: rėmeliai, grupės, tekstas, egzemplioriai, kurie išlaiko numatytąjį komponento pavadinimą, ir stačiakampiai su vaizdo užpildymu. Egzempliorių atveju paveikiamas tik konteineris, o ne posluoksniai , siekiant išvengti nenumatytų pasekmių.
Nepervadinti sluoksniai: jau pervadinti, paslėpti arba užrakinti sluoksniai; egzempliorių posluoksniai; atskiros vektorinės formos, pvz., elipsės, žvaigždės, daugiakampiai ir vektorinės tinkleliai; ir stačiakampiai be vaizdo užpildymo. Šių sluoksnių pakeitimas išlieka rankinis arba komponentų lygmeniu.
Kaip paleisti: Pasirinkę sluoksnius, galite naudoti kontekstinį meniu, įrankių juostoje esantį mygtuką „Veiksmai“ arba greitųjų veiksmų meniu. Jei nėra ką pervadinti, „Figma“ rodo įspėjimą ir leidžia priverstinai atlikti veiksmą naudojant „Pervadinti“, jei reikia standartizuoti pavadinimus.
Konkreti geriausia spalvų ir teksto kintamuosiuose naudojimo praktika
Jei šiuo metu turite ir „Main Blue“, ir „Blue-500“, pereikite prie dvigubo modelio. Apibrėžkite bazinius kintamuosius pagal mastelį (nuo „Blue-50“ iki „Blue-900“) ir semantinius kintamuosius pagal paskirtį (foninis-pirminis, tekstas-antrinis, border-interaktyvus) ir susiekite juos su kitu. Šis sujungimas suteikia jums atsparumą prekės ženklo keitimui ar temos pakeitimams.
Įveskite vienodas būsenų priesagas: „Hover“ (užvedimas), „Focus“ (fokusavimas), „Active“ (aktyvus), „Disabled“ ( išjungtas), „SELECTED“ (pasirinktas). Jei dirbate su paviršiais ir aukščiu, pridėkite variantus „Elevated-Surface“ (pakeltas paviršius) arba „Content-On-Subtle-Background“ (turinys subtiliame fone), visada po semantiniu skėčiu.
Tipografijoje atskiriami slapyvardžiai ir kompozicijos žetonai. Slapyvardžiai apibrėžiami pagal vaidmenį („Title-XL“, „Subtitle-M“, „Body-M“), o kompozicijos žetonai apima dydį, svorį, eilę tarp eilučių ir sekimą . Kai keičiasi šriftų pavadinimai arba plečiamas produktas, nereikės iš naujo kurti kiekvieno ekrano atvaizdavimo, tik atvaizdavimą.
Šis metodas taip pat supaprastina bendravimą su kūrėjais. Kūrėjai dažnai vertina stabilius ir nuspėjamus kintamuosius , tokius kaip `--color-text-primary` arba `--font-body-md`, o ne estetiškai patrauklius pavadinimus, kurie keičiasi kartu su tendencijomis.
Rekomenduojami papildiniai, kad viskas būtų tvarkinga
Naudojant pagalbinius įrankius, išvengiama pasikartojančių užduočių ir žmogiškųjų klaidų. „Figma“ yra papildinių, kurie padeda išvalyti pavadinimus, sinchronizuoti turinį arba atsekti ryšius tarp ekranų.
- Rasti ir pakeisti: naudinga norint masiškai suvienodinti sluoksnių pavadinimus, stilius ar tekstą.
- Turinio ritė: Tai leidžia įterpti nuoseklų ir pakartotinai naudojamą pavyzdinį turinį. būsenoms ir ilgiams patikrinti.
- Rūšiuoklis: padeda rūšiuoti sluoksnius ir meno lentas pagal nuspėjamus kriterijus.
- „Google“ skaičiuoklių sinchronizavimas: sinchronizuoja lentelių duomenis su maketais, puikiai tinka sąrašams ar lentelėms.
- Automatinis srautas: nubrėžkite rodykles ir jungtis tarp rėmelių pateikti srautus be jokių pastangų.
- Raudonos linijos: generuoja vizualines matavimų, tarpų ir stilių specifikacijas.
Darbas su klientais ir sąskaitomis Organizacija
Bendradarbiaujant su išorinėmis organizacijomis, verta suderinti struktūrą ir teises. Organizacijos komandos paskyros leidžia kurti komandas pagal produktą, aktyvuoti numatytąsias bibliotekas ir peržiūrėti diegimo analizę , taip valdant sistemą naudojant duomenis.
Atskirų komandų privalumai: aiški hierarchija, produktų ar projektų atskyrimas, vaidmenims būdingi leidimai, papildomas organizavimo lygis ir sklandesnis bendradarbiavimas. Pakopinis katalogas (komandos, projektai) suteikia tiesioginį mentalinį žemėlapį , kuris sumažina trintį bandant pasiekti naują failą.
Kasdienėse operacijose laikykitės tos pačios struktūros kaip ir savo namuose: projektai pagrindiniams, aktyviems ir archyvuotiems; lengvi failai pagal funkcionalumą; puslapiai su matomais ID ir būsena; ir versijų kūrimas su aiškiais pranešimais užbaigiant kiekvieną etapą, kad būtų paliktas pėdsakas.
Mokymai ir profesinis tobulėjimas
Jei norite pagilinti ir pagerinti savo karjerą UX/UI srityje, apsvarstykite galimybę mokytis pas aktyvius profesionalus. Intensyvios programos, tokios kaip „KeepCoding“ UX/UI dizaino dirbtinio intelekto pagrindu veikianti „Full Stack Bootcamp“, apjungia praktinę patirtį, sveiką nuovoką ir technologijas, taikomas dizainui ir kūrimui, o instruktoriai kasdien aktyviai dirba šioje srityje.
Šio tipo mokymai ne tik išmoks įvaldyti „Figma“, bet ir supažindins jus su realiomis atvejų analizėmis, komandos darbo eigomis ir įtakingais sprendimais. Šis teorijos ir praktikos derinys pagreitina jūsų įsidarbinimo galimybes ir padeda sukurti stiprų portfelį konkurencingoje rinkoje.
Turėdama aiškią pavadinimų ir procesų sistemą, gerai paskelbtą projektavimo sistemą ir standartus atitinkančią žetonų strategiją, jūsų komanda įgaus greičio, sumažins klaidų skaičių ir galės tobulinti produktą nieko nepažeisdama . Svarbiausia – susitarti dėl konvencijos, ją dokumentuoti ir užtikrinti jos laikymąsi naudojant įrankius, leidimus ir peržiūras: visa kita – tai intelektualus iteravimas.
