Išmanus projektavimas reiškia tvarkos kūrimą: kai viskas visiems vadinama vienodai, komanda dirba sklandžiai, o pristatymai vyksta be kliūčių. „Figma“ sistemoje tai reiškia aiškios sluoksnių, komponentų, stilių, kintamųjų ir būsenų nomenklatūros taikymą, kad kiekvienas iš pirmo žvilgsnio suprastų, kas yra kiekvienas dalykas. Nuoseklių pavadinimų taisyklių nustatymas padidina greitį, padeda išvengti painiavos ir išlaiko vizualinį nuoseklumą. bet kuriame projekte – nuo paprasto vartotojo sąsajos rinkinio iki brandžios projektavimo sistemos.
Šiame vadove pamatysite, kaip sukurti išsamią taksonomiją, apimančią viską – nuo elementų tipų ir jų savybių iki pavadinimų gramatikos, struktūros ir tvarkos. Taip pat sužinosite, kaip panaudoti „Figma“ dirbtinį intelektą, norint masiškai pervadinti sluoksnius ir įdiegti kintamuosius kaip pakartotinai naudojamus žetonus pažangiam dizainui ir prototipų kūrimui. Idėja yra ta, kad jūs gaunate bendrą, darbinę kalbą, kurią galite sklandžiai keisti..
Pagrindai: kodėl nomenklatūra svarbi projektavimo sistemoje
Prieš pradedant detaliau, verta nustatyti sistemą: „Figma“ dizaino sistema sujungia komponentus, stilius ir taisykles, kurios apibrėžia sąsają. Nuoseklus pavadinimų apibrėžimas visoje sistemoje yra labai svarbus siekiant išlaikyti nuoseklumą ir efektyvumą.Tokiu būdu jūsų biblioteka netaps beveik identiškų, bet tūkstančiu skirtingų pavadinimų vadinamų mygtukų raizgalynė.
Toje sistemoje svarbiausios yra savybės ir jų vertės: spalva, tipografija, tarpai, dydžiai, būsenos, režimai... Kuo nuosekliau pavadinsite kiekvieną savybę ir kiekvieną reikšmę, tuo lengviau bus jas pritaikyti ir išlaikyti bendrą išvaizdą. visose gaminio dalyse.
Praktinis komponentų ir stilių organizavimas
Dirbant su komponentais, aprašomųjų ir nuspėjamų pavadinimų naudojimas taupo laiką ieškant ir suprantant egzempliorius. Pavyzdžiui, mygtukams atskirkite tipą ir paskirtį (pagrindinis, antrinis); ir, jei reikia, pridėkite būseną (pvz., normali arba kybo).
Kalbant apie piktogramas, geriausia vengti bendrinių, tokių kaip „123 piktograma“. Pasirinkite atpažįstamus pavadinimus, tokius kaip „paštas“, „krepšelis“ arba „tinklai“. Jie turėtų paaiškinti, apie ką kalba, neatidarydami sluoksnio. Šis aiškumas yra vertinamas filtruojant bibliotekoje ir tikrinant kūrėjo režimu.
Interaktyvių komponentų būsenas pavadinkite taip, kad jas būtų galima vienareikšmiškai atskirti: pavyzdžiui, pagrindinis mygtukas, esantis ramybės būsenoje, ir jo versija, esanti užvedimo vietoje, turėtų būti aiškiai atskirti. Naudojant priesagą arba būsenos modifikatorių, viskas veikia (pvz., primary/primary-hover).
Jei lygiagrečiai valdote daugiau nei vieną projektavimo sistemą, pažymėkite jų hierarchiją. Atskyrus „pagrindinį“ ir „antrinį“ rinkinius, išvengiama nesuderinamų dalių sumaišymo.ypač organizacijose, turinčiose kelis prekės ženklus ar vertikalias sritis.
Pavadinimų suderinimo projektuojant ir kuriant privalumai
Kai visa komanda naudoja tą pačią kalbą, sumažėja trintis: kai kūrėjas nuskaito sluoksnio pavadinimą ir jis sutampa su kodo prieigos raktu arba klase, įgyvendinimas yra paprastesnis. Nomenklatūra yra klijai, sutvirtinantys bendradarbiavimą tarp disciplinų. ir sutrumpina peržiūros ciklus.
Be to, kai ateina laikas audituoti arba keisti sistemos mastą, elementų identifikavimas ir grupavimas yra paprastas, jei pavadinimų suteikimo taisyklės taikomos nuosekliai. Nominalus nuoseklumas reiškia priežiūrą ir išlaidų taupymą su laiku.
Žingsniai, kaip sukurti savo projektavimo sistemos failą „Figma“
Tvirtos sistemos sukūrimas nėra laiko klausimas, tačiau yra aiškus kelias, kuriuo galite eiti, kad nepasiklystumėte. Pradėkite nuo esminių dalykų ir dokumentuokite kiekvieną sprendimą, kad juo būtų galima dalytis.
- Pagrindinių elementų inventorius: apibrėžkite, ką ketinate standartizuoti (paletę, šriftus, tarpų skales, svarbiausius komponentus, pvz., mygtukus, įvestis, korteles...). Aiški apimtis apsaugo nuo pakartotinio darbo vėliau.
- Sistemai skirtas failas: sukuria konkretų failą, kuris veikia kaip tiesos šaltinis. Atskyrus biblioteką nuo projektų, užtikrinama geresnė pakeitimų kontrolė ir versijų sistema..
- Suskirstyti pagal kriterijus: struktūrizuoja komponentus ir jų variantus pagal pasirinktą konvenciją. Pavadinimas turėtų atspindėti tipą, paskirtį ir statusą, kai su juo susidurs.
- Apibrėžkite stiliusTeksto stiliai, spalvos ir efektai su nuosekliais pavadinimais, kad juos būtų lengva rasti. Jis taiko tuos pačius gramatikos ir žodžių jungimo modelius..
- Dokumentuokite naudojimą: pridėkite pastabų apie tai, kada naudoti kiekvieną dalį, apribojimus ir pavyzdžius. Aiškus vadovas palengvina visai organizacijai projektavimą „toje pačioje temperatūroje“.
Taksonomija: komponentai, objektai, savybės ir reikšmės
Kad žodynėlis veiktų, pirmiausia reikia žinoti, apie kokias dalis kalbama ir kaip jos tarpusavyje susijusios. Ši taksonomija pasitarnaus kaip žemėlapis, užtikrinantis, kad nepaliktumėte jokių neužbaigtų klausimų..
Komponentai: bazė ir junginiai
„Figma“ terminais komponentas yra blokas, turintis savo vizualinį identitetą vartotojo sąsajos rinkinyje (kaip kortelė). Bazinis komponentas yra dalis, skirta įdėti į kitas. (Pavyzdžiui, skaitmeninis mygtukas, kuris yra tik datos rinkiklyje). Kai kurios bibliotekos juos žymi kaip išteklius, fragmentus, dalis, elementus arba subkomponentus: idėja ta pati.
Objektai: konteineriai ir elementai
Objektas yra dalis komponento viduje. Yra dvi pagrindinės grupės: konteineriai (dėžutės, sekcijos) ir elementai (turinys).Tarp elementų rasite tekstą (etiketę, pavadinimą, paantraštę, aprašymą), kitus komponentus (piktogramas, iliustracijas, mygtukus, lenteles), vektorius (apskritimą, stačiakampį, daugiakampį) ir mediją (paveikslėlį, GIF, vaizdo įrašą).
Savybės ir vertės
Savybės yra kintamos dalys (dydis, būsena, spalva, tankis ir kt.). Kiekviena savybė siūlo galimų reikšmių rinkinįPavyzdžiui, mygtuko „būsenos“ savybė gali būti „normalus“, „užvedimas“, „paspaustas“, „išjungtas“...
Yra dvi reikšmių šeimos: variantai ir loginės reikšmės. Vienas variantas palaiko daugiau nei dvi parinktis (xs/s/m/l arba info/warn/error)., o loginė reikšmė reiškia tipišką „taip“/„ne“ (True/False, On/Off, ShowIcon/HideIcon).
Pavadinimo struktūra: modifikatoriai ir jų vieta
Kai aiškiai žinosite, ką pavadinsite (komponentą, objektą, savybę ar reikšmę), turite nuspręsti, kaip žymėsite jų skirtumus. Modifikatoriai padeda atskirti variantus, būsenas ir kontekstus.
Modifikatorių tipai
Yra keletas būdų, kaip vizualiai pakeisti pavadinimą. Galite naudoti piktogramas, simbolius arba raktinius žodžius. kad sustiprintumėte savo skaitymo įgūdžius:
- Piktograma: pavyzdžiui, simbolis priekyje, nurodantis naudingumą arba būseną (tik jei jūsų kompiuteris jį palaiko ir supranta).
- Skyrybos ženklai: priešdėliai arba separatoriai, pvz., ._Base, arba žemesnio lygio žymekliai.
- Žodžiai, akronimai ir santrumpos: priesagos, pvz., elementų sąrašas, langelio antraštė, rodymo piktograma, BC_…
Svarbiausia, kad konvencija būtų aiškiai apibrėžta ir dokumentuota. Jei derinate modifikatorių tipus, apibrėžkite prioritetus ir naudojimo atvejus. kad būtų išvengta chaotiško maišymo.
Modifikatoriaus pozicija
Tvarka turi būti nuosekli visoje sistemoje. Modifikatorių galite įdėti prieš (Item-List) arba po (List-Item)Svarbiausia nekaitalioti abiejų modelių neturint aiškios strategijos.
Daiktavardžių gramatika: rūšis, skaičius, inicialai ir sąjungos
Standartizavus gramatiką, vardai tampa skaitomi ir nuspėjami. Apsispręsk vieną kartą ir pritaikyk tai visadaKitaip daugės sunkiai įsimenamų išimčių.
Termino tipas
Pasirinkite, ar vardas bus veiksmažodis, būdvardis ar daiktavardis, ir kokia forma jis asmenuojamas. Galimi variantai: dalyvis (sutrauktas), esamasis laikas (sutrauktas), būdvardis (sutraukiamas), daiktavardis (sutraukiamas) arba derinius, tokius kaip „yra sulankstomas“, „rodyti sulankstomą“, „piktograma prieš“.
Vienaskaita arba daugiskaita
Apibrėžkite, ar įvardijate vienaskaita, ar daugiskaita, ir išlaikykite modelį. Nuolatinis mygtuko/mygtukų arba dydžio/dydžių naudojimas palengvina paiešką ir skaitymąTaip pat galite nustatyti bendrinį („veiksmus“), jei taip geriau grupuoja kelis elementus.
Inicialai ir vizualinis stilius
Nustatykite didžiųjų raidžių rašymo būdą: Didžiosios raidės + didžioji raidė (piktograma prieš), mažoji raidė + mažoji raidė (piktograma prieš), Didžiosios raidės + mažoji raidė (piktograma prieš) arba mažoji raidė + didžioji raidė (piktograma prieš). Didžiosios raidės yra sistemos dalis, o ne maža detalė.
Žodžių poros
Terminų derinimo būdas lemia skaitomumą ir atitikimą kodui. Dažniausios parinktys: be tarpo (iconBefore), su tarpu (icon before), tašku (icon.Before), brūkšneliu (icon-before), pabraukimu (icon_before)Venkite derinių, kurie kenkia skaitymui, jei jie neduoda vertės.
Kuriami iš anksto apibrėžti stiliai (kortelių ir didžiųjų raidžių stiliai), kurie sujungia inicialus ir sąjungas: „camelCase“ (be tarpų ir kiekvienas žodis rašomas didžiąja raide, išskyrus pirmąjį), „PascalCase“ (visi žodžiai rašomi didžiąja raide ir be tarpų), „kebab-case“ (brūkšnelis ir mažosios raidės) ir „snake_case“ (pabraukimas ir mažosios raidės)Pasirinkite tą, kuris geriausiai tinka jūsų krūvai, ir būkite nuoseklūs.
Kaip rūšiuoti: abėcėlės tvarka, nuosekliai ir hierarchiškai
Be pavadinimo, ilgų sąrašų tvarkos būdas taip pat svarbus norint greitai rasti reikiamus dalykus. Trys metodai gerai veikia bibliotekose:
- Abėcėlės tvarka: a–zoz–a (pvz., apačioje, kairėje, dešinėje, viršuje).
- Nuoseklus: 0–10 arba 10–0 (pvz., numatytieji / užvedimo / aktyvūs dydžiai arba būsenos).
- Hierarchinis: nuo didžiausio iki mažiausio arba atvirkščiai (pvz., pirminis, antrinis arba informacijos / įspėjimo / klaidos svarbos lygiai).
Taikant tuos pačius užsakymo kriterijus visoms kolekcijoms, kiekviena komanda negali užsisakyti „savaip“. Apibrėžkite savo pageidavimus ir pateikite pavyzdžių dviprasmiškiems atvejams.
Įgyvendinimas: auditas ir žodynėlio sukūrimas
Nustačius taisykles, laikas jas pritaikyti praktikoje. Turite du kelius, kuriuos netgi galite sujungti. siekiant užtikrinti nusileidimą:
Turinio auditas
Peržiūrėkite, kas jau sukurta: inventoriaus komponentus, objektus, ypatybes ir reikšmes su jų dabartiniais pavadinimais. Tikslas – pasiekti sutarimą dėl vienos taksonominės sistemos, apimančios projektavimą ir kūrimą. ir suplanuokite migraciją nesugadindami prototipų ar neperduodami duomenų.
Žodynėlio kūrimas
Nesvarbu, ar pradedate nuo nulio, ar jau atlikote auditą, apibrėžkite kiekvieno elemento tipo (komponento, objekto, ypatybės ir reikšmės) struktūrą, gramatiką ir tvarką. Žodynėlis tampa jūsų „oficialiu vardų žodynu“. ir naujiems nariams skirtame ištekliuje.
„Figma“ dirbtinis intelektas sluoksnių kontekstiniam pervadinimui
Šimtų sluoksnių pervadinimas rankiniu būdu yra varginantis. Čia „Figma“ dirbtinis intelektas gali sutaupyti jūsų laiko, naudodamas turinį, poziciją ir sluoksnių ryšius, kad pasiūlytų kontekstinius pavadinimus. Įrankis analizuoja jūsų pasirinkimą ir taiko nuoseklius pavadinimus ten, kur aptinka numatytąjį šabloną..
Yra sąmoningų apribojimų: „Figma AI“ pervadina tik rėmelius, grupes, teksto sluoksnius, stačiakampius (ir suapvalintus) su vaizdo užpildymu ir tam tikrus egzempliorius, kurie vis tiek išlaiko numatytąjį pagrindinio komponento pavadinimą (tik konteinerio, neliečiant posluoksnių). Jei sluoksnis jau turi pavadinimą, yra užrakintas, paslėptas arba yra atskira vektorinė forma (elipsė, daugiakampis, žvaigždė, tinklelis) be paveikslėlio, jis nebus pervadintas..
Pervadinti galite keliais būdais: dešiniuoju pelės mygtuku spustelėdami kontekstinį meniu, įrankių juostoje esančiame skyriuje „Veiksmai“ arba naudodami greituosius veiksmus, įvesdami „Pervadinti sluoksnius“. Jei viskas jau teisingai pavadinta, pamatysite pranešimą „Nereikia pervadinti sluoksnių“ su parinktimi „Vis tiek pervadinti“, jei norite priverstinai tai padaryti..
Naudinga detalė: jei keliuose aukščiausio lygio rėmeliuose turite identiškus neįvardytus sluoksnius, „Figma AI“ pervadins sutampančius sluoksnius. Tai padeda išsaugoti išmaniąsias animacijas ir slinkties pozicijas prototipuose, išlaikant nominalų atitikimą..
Kintamieji „Figma“: daugkartinio naudojimo žetonai projektavimui ir prototipų kūrimui
Kintamieji saugo reikšmes, kurias galite pakartotinai naudoti projektavimo savybėse ir prototipo veiksmuose, ir jie egzistuoja kartu su kitais projektavimo įrankiais, tokiais kaip 3D dizaino programos, skirtos „Mac“. Jie yra natūralus tiltas diegiant dizaino žetonus ir kuriant interaktyvią logiką nedubliuojant sistemų..
Keletas praktinių pritaikymų: kurkite ir pritaikykite žetonus (spalvas, šriftus, tarpus), perjunkite įrenginių dydžius su momentiniais tarpų koregavimais pagal savo mastelį, peržiūrėkite tekstus skirtingomis kalbomis, keičiant kontekstą, arba sukurkite krepšelį, kuris apskaičiuoja užsakymų sumą. Visa tai be nereikalingų variacijų padauginimo.
Yra trys pagrindinės sritys, kuriose jie pasižymi: dizainas ir projektavimo sistemos, pažangus prototipų kūrimas ir API. Įvaldę šiuos tris dalykus, galėsite sujungti dizainą, sąveiką ir automatizavimą. nuoseklioje tėkmėje.
Projektavimo ir sistemų kintamieji
Naudokite kintamuosius ir režimus žetonams ir alternatyviems kontekstams (šviesiai / tamsiai, prekių ženklams, regionams) pavaizduoti. Spalva ir skaičius yra palečių, dydžių ir tankių pagrindas.ir galite juos susieti su kolekcijomis ir režimais, kad galėtumėte juos akimirksniu perjungti.
Įprasti šios srities ištekliai apima įvadinius vadovėlius, kolekcijų ir režimų vadovus bei kintamųjų ir stilių palyginimus, kurie padės jums nuspręsti, kada naudoti kiekvieną iš jų. Apibendrinant: stiliai tarnauja kaip vizualiniai išankstiniai nustatymai; kintamieji apima parametruojamas reikšmes su režimais.
Kintamieji pažangiam prototipų kūrimui
Prototipuose kintamieji saugo būsenas ir savybes, kurios keičiasi sąveikos metu. Galite naudoti veiksmus, kad pakeistumėte jų reikšmes ir taip pakeistumėte išvaizdą, turinį ar matomumą nedubliuodami rėmelių..
Kintamųjų derinimas su išraiškomis ir sąlyginėmis operacijomis atveria duris dinaminėms eilutėms, matematinėms operacijoms ir loginėms reikšmėms. Naudodami kelis veiksmus ir „if/else“ logiką, galite sudėtingą elgesį sudėlioti į tą patį trigerį..
Kintamieji režimai taip pat atlieka svarbų vaidmenį prototipuose: nustato reikšmes pagal kontekstą (pvz., temą) ir naudoja tai išraiškose, kad realiuoju laiku pakeistų išvaizdą. Ekranų, reikalingų sodriems scenarijams, skaičius yra smarkiai sumažintas..
Kintamieji ir API (REST, papildiniai ir valdikliai)
Kintamieji pasiekiami tiek įskiepio API, tiek REST API. Galite peržiūrėti, kurti, atnaujinti ir ištrinti kintamuosius, taip pat susieti juos su komponentais iš papildinių.Tai įgalina tokius įrankius kaip importuotojai / eksportuotojai arba stilių konverteriai į kintamuosius.
Valdikliai pasiekia kintamuosius per įskiepių API (skaito ir kuria), išskyrus tai, kad jie negali tiesiogiai susieti valdiklio ypatybių su kintamaisiais. Norėdami sinchronizuoti su saugykla, pateikiame „GitHub“ veiksmų pavyzdžius, kurie sujungia „Figma“ kintamuosius su jūsų kodo baze., be to, bendruomenės „smėlio dėžės“ failų saugiai praktikai.
Gera sluoksnių ir komponentų pavadinimų praktika
Nustatykite tipo prefiksą (pvz., „Btn“, „Card“, „Input“) ir būsenos priesagą (užvedimas virš ekrano, fokusavimas, išjungta) arba dydžio (sm, md, lg). Rekomenduojama tvarka paprastai yra Tipas / Paskirtis / Dydis / Būklėir naudokite vienodus separatorius („kebab-case“ arba „PascalCase“, atsižvelgiant į tai, kas tinka jūsų stekui).
Išlaikyti sluoksnių ir egzempliorių nuoseklumą: egzemplioriaus konteineris turi paveldėti pagrindinio komponento modelį. Venkite improvizuotų vietinių variantų, nes jie trukdo paieškai ir pakeitimui.Kai ateis laikas keisti, atlikite tai pagrindinėje versijoje ir publikuokite naują versiją.
Loginių savybių pavadinimui įvardinkite savybę, o ne reikšmę: „Icon“ su reikšmėmis „On“ / „Off“ arba „True“ / „False“; venkite „withIcon/withoutIcon“, jei jūsų sistema naudoja loginius perjungiklius. Tai suderina kalbą su prototipo ir kodo logika..
Jei jūsų projektas apima daugiau nei vieną domeną (pvz., „backoffice“ ir „customer“), pridėkite apimtį prie kolekcijos arba aplanko pavadinimo. Atskyrimas pagal kontekstą sumažina semantinius konfliktus ir skatina tinkamą pakartotinį naudojimą.
Dažnos klaidos ir kaip jų išvengti
Viena iš dažniausių klaidų – nedokumentuoti konvencijos ir leisti kiekvienam asmeniui įvardyti daiktus „savaip“. Be vadovavimo biblioteka tampa fragmentiška, o komandos greitis sumažėja.Pateikite aiškius pavyzdžius ir ribinius atvejus, kad išsklaidytumėte abejones.
Dar viena klaida: jungimo ir didžiųjų raidžių rašymo stilių maišymas toje pačioje komponentų šeimoje (vienuose – kebabas, kituose – kupranugaris). Tai apsunkina filtrų, užklausų ir sluoksnių skydelio skaitymą.Apibrėžkite numatytąjį stilių ir taikykite ribotas bei pagrįstas išimtis.
Venkite beprasmių pavadinimų („27 kadras, 3 kopija“, „12 stačiakampis“). Jei „Figma AI“ negali padėti, nes pavadinimai jau priskirti, pervadinkite juos rankiniu būdu arba komponentų lygmeniu. ir pasinaudoti proga įtvirtinti pasirinktą konvenciją.
Nekopijuokite variantų, kurie jau išspręsti komponento kintamuoju arba loginiu kintamuoju. Auksinė taisyklė: mažiau ekranų, daugiau parametrųGaliausiai turėsite lengvesnę ir lengviau valdomą biblioteką.
Įdiegimo planas komandoms
Pradėkite nuo mažų dalykų, pradedant nuo didelio poveikio komponentų rinkinio (mygtukai, įvesties elementai, tipografija, paletė). Pasidalykite konvencija, surinkite atsiliepimus ir patobulinkite ją prieš pristatydami kitiems.Iš ten migruokite pagal modulius ir versijas.
Jei norite paspartinti šių praktikų įvaldymą, apsvarstykite intensyvius, į produktą orientuotus mokymus. Aktyvių profesionalų dėstomos programos padeda teoriją pritaikyti praktikoje realiais atvejais. jau integruoja „Figma“ su kūrimo procesais.
Visa tai, kas išdėstyta pirmiau, yra svarbu nomenklatūrą laikyti projekto dalimi, o ne kaip antrinę mintį. Turėdama aiškų žodynėlį, gramatikos ir struktūros taisykles, „Figma“ dirbtinio intelekto palaikymą ir aiškiai apibrėžtus kintamuosius, jūsų sistema įgyja greitį, nuoseklumą ir mastelio keitimą.Ir jūsų komandai – kokybiškas laikas, skirtas vartotojų problemoms spręsti, o ne ginčams dėl vardų.
