Të mësosh si të emërtosh shtresa, variabla, komponentë dhe tokena në Figma nuk është një tekë; është një domosdoshmëri praktike. Një sistem emërtimi i menduar mirë përshpejton rrjedhat e punës, parandalon konfuzionin dhe eliminon fërkimet midis dizajnit dhe zhvillimit , veçanërisht kur shumë njerëz po redaktojnë të njëjtat skedarë.
Nëse punoni në dizajnin e ndërfaqeve dhe doni t'i çoni aftësitë tuaja në një nivel tjetër, është thelbësore të vendosni rregull në punët tuaja që nga fillimi: cilat emra përdoren, si janë strukturuar dhe si dokumentohen. Në të gjithë këtë udhëzues, do të gjeni praktikat më të mira të provuara, shembuj të qartë dhe një qasje koherente për standardizimin e gjithçkaje në Figma , nga skedari dhe faqja deri te ndryshorja më e vogël e ngjyrës ose fontit.
Bazat: Pse të standardizohet nomenklatura në Figma
Para se të hyjmë në detaje, ia vlen të kujtojmë bazat: një sistem dizajni është burimi i së vërtetës për një produkt dixhital. Është grupi i komponentëve dhe stileve që përcakton identitetin vizual, aksesueshmërinë dhe qëndrueshmërinë e ndërfaqes suaj , dhe Figma është vendi ku ndërtohet, publikohet dhe konsumohet kjo e vërtetë.
Brenda atij sistemi, vetitë dhe vlerat e tyre janë blloqet ndërtuese. Ngjyrat, fontet, hapësira, madhësitë, efektet dhe gjendjet kërkojnë një nomenklaturë që është logjike, e lexueshme dhe e shkallëzueshme për të gjithë organizatën, jo vetëm për personin që ka projektuar komponentin e parë.
Një standard i përbashkët shmang paqartësinë. Emërtimi nuk ka të bëjë me shtimin e etiketave të bukura, por me krijimin e një taksonomie që i reziston provës së kohës dhe rritjes së produktit , dhe që i lejon të gjithëve në ekip të dinë se çfarë të përdorin, ku ta ndryshojnë dhe si ndikon te konsumatorët fundorë.
Organizimi i komponentëve dhe stileve: modele që funksionojnë
Një praktikë e mirë është që emrat të tregojnë historinë e asaj që është diçka, si sillet dhe ku përdoret. Kjo përfshin ndarjen e emrave të roleve semantike nga emrat thjesht përshkrues ose të pamjes , dhe mbajtjen e tyre në përputhje me njëri-tjetrin.
Për komponentët interaktivë, këshillohet të përcaktohet elementi dhe gjendja e tij. Për shembull, një buton mund të ketë gjendjet bazë, qëndrim pezull, fokus, i shtypur dhe i çaktivizuar , dhe emri duhet të tregojë qartë konventën e emërtimit që do të ndjekë e gjithë biblioteka.
- Butonat: Përdorni një konventë të qëndrueshme, siç është Butoni Primar, Butoni Sekondar, Butoni Terciar, dhe shtoni gjendjen me një prapashtesë, për shembull Butoni Primar — Vendosni kursorin.
- Ikonat: zgjidhni emra përshkrues si Ikona e Postës, Ikona e Rrjeteve Sociale ose Ikona e Kërkimit. Shmangni karakteret e zakonshme karakteristike që nuk llogariten për asgjë dhe që në planin afatgjatë e bëjnë kërkimin më të vështirë.
Nëse punoni me më shumë se një sistem ose markë, dalloni qartë fushëveprimin. Etiketat Primare dhe Sekondare janë të dobishme kur bashkëjetojnë dy sisteme dizajni ose dy paleta kryesore , dhe ato ndihmojnë në ruajtjen e qartësisë në nivelin e komponentëve dhe tokenëve.
Magjia e konventave të emërtimit nuk është vetëm estetike; efekti i tyre i vërtetë qëndron në bashkëpunim. Kur dizajni dhe zhvillimi ndajnë emra dhe strukturë, komunikimi përmirësohet, kalimet janë më të lehta dhe gabimet zvogëlohen sepse kushdo mund ta gjejë burimin e duhur që në herën e parë.
Si të konfiguroni dhe mirëmbani sistemin tuaj të dizajnit në Figma
Vendosja e sistemit të dizajnit në një skedar të dedikuar sjell rend dhe qeverisje. Ky skedar duhet të shërbejë si referencë për bibliotekat, komponentët kryesorë dhe stilet e publikuara , dhe idealisht duhet të jetë i mbrojtur dhe i versionuar.
- Inventari fillestarRenditni elementët kryesorë. Përcaktoni paletën bazë dhe shkallët e saj, tipografinë dhe nivelet e saj, modelet e hapësirave dhe stilet e efekteve.
- Skedari kryesor i sistemit: krijon një skedar të dedikuar në Figma për sistemin e dizajnit. Do të jetë origjina e komponentëve dhe stileve, si dhe dokumentimi i tyre.
- Komponentë të organizuarGruponi sipas familjeve (Butona, Formularë, Navigim, Reagime). Përdorni konventën e emërtimit të rënë dakord dhe ruani një hierarki të qartë në Asete.
- Stile të përcaktuara mirëpublikon stile ngjyrash, tekst, rrjetë dhe efekte. Emërtoni stilet duke përdorur të njëjtat kritere që do të përdorni për variablat dhe tokenët. për të shmangur dublikimet.
- Dokumentacion i gjallëShtoni faqe udhëzuesish përdorimi, shembuj dhe udhëzime. Përcaktoni se çfarë mund të modifikohet, kush e publikon dhe si të bëhen ndryshimet e versionit.
E gjithë kjo duhet të shoqërohet me procese. Këshillohet që të bihet dakord për një rrjedhë pune për publikimin e bibliotekës, rishikim nga kolegët dhe një orar versionimi në mënyrë që ndryshimet të përhapen në një mënyrë të kontrolluar dhe të gjurmueshme.
Shenjat dhe standardet e dizajnit: nga JSON në W3C dhe Fjalorin e Stilit
Tokenët e dizajnit janë përfaqësimi më i vogël i vendimeve vizuale dhe të ndërveprimit në një format portativ. Ruajtja e tokenëve në JSON është bërë praktikë e zakonshme dhe mjete si Style Dictionary kapërcejnë hendekun midis platformave duke gjeneruar variabla për ueb, iOS ose Android.
Ndërsa ka konsensus për përdorimin e JSON, nuk ka gjithmonë marrëveshje se si të organizohet ai JSON. Style Dictionary e ka popullarizuar taksonominë CTI (Kategoria, Lloji, Item) për strukturimin e tokenëve , e cila është shumë e dobishme për filtrimin dhe transformimin në tubacione të automatizuara.
Në korrik 2023, u publikua një draft përkatës nga grupi i punës W3C për të standardizuar formatin e tokenit të dizajnit. Ky specifikim propozon, ndër të tjera, një veti të veçantë të quajtur `$type` për të kategorizuar në mënyrë të qartë tokenët , duke devijuar nga CTI në disa aspekte.
Çfarë do të thotë kjo? Nëse eksportoni tokena nga Figma duke përdorur specifikimin e ri dhe keni ndërmend t'i përpunoni ato me konfigurimet klasike të Fjalorit të Stilit, mund të lindin papajtueshmëri gjatë filtrimit ose transformimit sepse rregullat presin CTI (Marrje Vazhdimisht e Ndryshueshme). Lajmi i mirë është se Fjalori i Stilit është fleksibël: ju mund të përshtatni transformimet, filtrat dhe formatet për t'iu përshtatur standardit në zhvillim.
Ndërkohë që udhëzimet zyrtare janë duke u zhvilluar, është e rëndësishme që struktura që miratoni të mbajë parasysh konsumatorët: gjurmueshmërinë e ndryshueshme, qartësinë semantike dhe përputhshmërinë me mjetet e ndërtimit . Gjithashtu, merrni në konsideratë analizat e palëve të treta dhe studimet e rasteve të publikuara nga liderët e industrisë (për shembull, taksonomitë e propozuara për shkallët e ndërfaqes ose përvojat e ndara nga sisteme të mëdha si Salesforce) për të shmangur shpikjen e përsëritur të rrotës.
Emërtimi i variablave: ngjyrat dhe tipografia pa dhimbje koke
Shumë ekipe përziejnë emra si Main Blue me shkallë si Blue-500 dhe role tipografike si Large Header ose Regular Body. Mënyra më e fuqishme për ta zgjidhur këtë është ndarja e shtresave: tokenët e pamjes bazë dhe tokenët e qëllimit semantik.
Ngjyrat. Përcaktoni një paletë bazë duke përdorur shkallë (p.sh., Blu 50, 100, 200, 300, 400, 500, 600, 700, 800, 900) dhe neutrale të veçanta. Këto janë tokena bazë dhe nuk duhet të përdoren kurrë direkt në komponentë nëse synoni fleksibilitet tematik. Për më tepër, krijoni tokena semantikë si Ngjyra Kryesore e Sfondit, Teksti Dytësor ose Kufiri Ndërveprues, të cilët përputhen me tokenat bazë. Në këtë mënyrë, ndryshimi i një teme ose marke është hartëzim, jo ndërhyrje kirurgjikale.
Për gjendjet, shtoni prapashtesa të qëndrueshme: Mbajeni pezull, Fokus, Aktiv, Disabled dhe Selected janë të mjaftueshme për të mbuluar shumicën e rasteve. Nëse keni nevojë për kontrast të aksesueshëm, merrni në konsideratë variantet e Kontrastit të Lartë të shoqëruara me rolet semantike.
Tipografia. Deklaroni shenjat e kompozimit që ndajnë madhësinë, peshën, fillimin dhe gjurmimin, dhe ndërtoni stile teksti me role. Përdorni emra qëllimi si XL Heading , M Subheading, M Body, S Footer dhe bëjeni peshën të qartë me një prapashtesë standarde, për shembull, M Body Regular, M Body Semibold. Nëse punoni me marka ose produkte të shumta, shtoni një parashtesë konteksti si Web, iOS ose Brand A kur është absolutisht e nevojshme.
Përzierja e spanjishtes me kode numerike është e realizueshme nëse jeni konsistent. Përdorni viza ndarëse për të ndarë atributet, shmangni hapësirat problematike dhe ruani rendin semantik nga makro në mikro , për shembull, Ngjyra — Sfondi — Primar — Shkrimi pezull ose Teksti — Trupi — M — Gjysmë i trashë. Nëse zgjidhni shkallë me numra (p.sh., Blue-500), përdorini ato vetëm në tokenët bazë; rolet semantike nuk duhet të varen nga një numër që nuk shpjegon qëllimin.
Një shënim mbi ndërkombëtarizimin: edhe nëse ekipi flet spanjisht, standardizimi i prapashtesave ose shkurtesave teknike (md, lg, sm, xl) lehtëson përvetësimin nga mjetet dhe njerëzit nga ekipet e tjera . Çelësi nuk është gjuha, por qëndrueshmëria dhe gjurmueshmëria.
Arkitektura e Figma-s: ekipe, projekte, skedarë dhe faqe
Struktura e Figma-s ndikon në lejet, kërkimet dhe performancën. Llogaritë e Ekipit Profesional funksionojnë me Projekte, Skedarë dhe Faqe ; Llogaritë e Ekipit të Organizatës shtojnë shtresën Ekipe, e cila është e dobishme në korporata dhe struktura komplekse.
Lejet. Ju mund të jepni qasje vetëm për lexim, modifikim ose administrator në nivelet e projektit dhe skedarit. Përveç kësaj, ekzistojnë projekte vetëm për shikim, ku vetëm krijuesi mund të modifikojë, dhe projekte vetëm me ftesë, të cilat janë private . Komunikoni gjithmonë ftesat për modifikim për të ruajtur kontrollin e sistemit.
Konvencioni i emërtimit të projektit. Vendosni një model si _ në mënyrë që gjithçka të jetë e identifikueshme dhe e lehtë për t'u organizuar. Jepni përparësi emrave të shkurtër dhe utilitarë në mënyrë që të jenë plotësisht të dukshëm në ndërfaqe dhe të shmangni paqartësinë.
Llojet e skedarëve. Dallimi midis skedarëve Kryesor, Aktiv dhe të Arkivuar. Skedari Kryesor është burimi i së vërtetës dhe është i mbyllur për ndryshime përveç për qëllime qeverisjeje ; Skedari Aktiv është vendi ku kryhet puna; Skedari i Arkivuar është një skedar historik i kërkueshëm. Kur publikoni biblioteka, bëjeni këtë nga skedari Kryesor.
Mbulesat dhe performanca. Figma ju lejon të zgjidhni një kornizë si miniaturë (Vendos si miniaturë). Përdorni një kornizë 620×320 px për t'u siguruar që kopertina duket e qartë dhe ngjyrat janë konsistente në të gjitha llojet e skedarëve (për shembull, një ngjyrë për Kryesore, një tjetër për Aktive dhe një tjetër për Arkivuar). Shmangni mbingarkesën e skedarit me skedarë të mëdhenj: ndani ato sipas veçorive dhe produkteve.
Faqet, rrjedhat dhe numërimi i kornizave: bëni që gjithçka të ketë rëndësi.
Emërtimi i faqes. Një model efektiv është `<title>`, me një ID rritës dhe zero fillestare për renditje të qëndrueshme. Plotësoni emrin me një kod statusi në vetë titullin ose një emoji të dakordësuar për të treguar nëse është përfunduar, në vazhdim, nën shqyrtim apo është hedhur poshtë.
Rrjedhat dhe rreshtat. Punoni brenda secilës faqe duke përdorur rreshta kornizash që përfaqësojnë historitë ose skenarët e përdoruesve. Përfshini një kornizë mbuluese në fillim të çdo rreshti me emrin e rrjedhës dhe një përshkrim të shkurtër kontekstual për të shmangur keqkuptimet dhe për të lehtësuar shqyrtimin.
Numërimi i kornizave. Një sintaksë si _ funksionon shumë mirë. Përdor zero fillestare për të siguruar renditjen natyrore (01, 02, 03, 04, 05, 06, 07, 08, 09, 10) dhe numëron pamjet nga e majta në të djathtë brenda rreshtit. Shembull: 01_100, 01_101, 01_102 për rreshtin e parë; 01_200, 01_201, 01_202 për të dytin.
Versionimi. Mos u mbështetni vetëm te ruajtja automatike. Përdorni historikun e versioneve për të gjeneruar angazhime kur arrihen momente kyçe, veçanërisht në sistemet e projektimit ose funksionalitete të mëdha , duke lënë mesazhe të qarta për ekipin dhe për auditimin e ardhshëm.
Pajisjet e sistemit dhe bibliotekat e qeverisjes
Bibliotekat transformojnë një skedar Figma në një ofrues të komponentëve dhe stileve të ripërdorshme. Ato publikohen nga paneli Asetet dhe kërkojnë respektim të rreptë të lejeve dhe rishikimeve për të shmangur prishjen e dizajneve të varura.
Në organizatat më të mëdha, ia vlen të krijohet një ekip i dedikuar për sistemin e dizajnit. Kjo lejon kontroll më të mirë mbi atë se kush mund të modifikojë dhe publikojë, ndërsa pjesa tjetër e kompanisë ka akses në sistem me leje vetëm për lexim . Kjo ndarje zvogëlon incidentet dhe e bën ciklin e ndryshimit më të parashikueshëm.
Llojet e ekipeve në Organizatë: E Hapur, e Mbyllur dhe Sekret. E Hapur lejon këdo të bashkohet dhe të shikojë dokumentacionin; E Mbyllur kërkon një ftesë për të parë përmbajtjen; E Sekreti nuk është as i dukshëm pa një ftesë . Zgjidhni sipas ndjeshmërisë së projektit dhe fazës së sistemit.
Analitika dhe administrimi. Konsola e Administratorit të Organizatës ofron metrika mbi adaptimin e komponentëve dhe stileve dhe ju lejon të aktivizoni bibliotekat e parazgjedhura. Kjo është veçanërisht e dobishme për Asetet e Markës, kopertinat, ikonat ose burimet e përbashkëta që duhet të jenë të disponueshme menjëherë.
Automatizoni riemërtimin me Figma AI
Figma AI mund të kursejë kohë duke u caktuar shtresave emra kontekstualë në masë. IA analizon përmbajtjen, pozicionin dhe marrëdhënien midis shtresave të zgjedhura për të sugjeruar një emër të qëndrueshëm , dhe madje sinkronizohet nëpër korniza të nivelit më të lartë nëse zbulon të njëjtën shtresë pa emër.
Mjeti respekton atë që e keni riemëruar tashmë. Ai ndryshon vetëm shtresat që ende kanë konventën e emërtimit të parazgjedhur të Figma-s , dhe nëse përfshini shtresat e riemëruara në përzgjedhje, do t'i mbajë ato të paprekura përveç nëse e detyroni veprimin.
Shtresat që riemërtohen përfshijnë: kornizat, grupet, tekstin, instancat që ruajnë emrin e parazgjedhur të komponentit dhe drejtkëndëshat me mbushje imazhi. Për instancat, vetëm kontejneri preket, jo nënshtresat , për të shmangur pasojat e padëshiruara.
Shtresat që nuk janë riemëruar: shtresat që janë riemëruar tashmë, të fshehura ose të bllokuara; nënshtresat brenda instancave; format individuale vektoriale si elipsat, yjet, poligonet dhe rrjetat vektoriale; dhe drejtkëndëshat pa mbushje imazhi. Për këto, ndryshimi mbetet manual ose në nivelin e komponentëve.
Si ta hapni: Pasi të zgjidhni shtresat, mund të përdorni menynë e kontekstit, butonin Veprime në shiritin e veglave ose menynë e veprimeve të shpejta. Nëse nuk ka asgjë për të riemërtuar, Figma shfaq një paralajmërim dhe ju lejon të detyroni veprimin me Riemërto gjithsesi nëse keni nevojë të standardizoni emrat.
Praktikat më të mira specifike për ngjyrat dhe tekstin në variabla
Nëse aktualisht keni si Main Blue ashtu edhe Blue-500, bëni kalimin në një model të dyfishtë. Përcaktoni variablat bazë sipas shkallës (Blue-50 deri në Blue-900) dhe variablat semantike sipas qëllimit (Sfondi-Primary, Teksti-Sekondar, Border-Interactive) dhe lidheni njëra me tjetrën. Kjo urë është ajo që ju jep qëndrueshmëri ndaj ndryshimeve të markës ose temës.
Futni prapashtesa uniforme për gjendjet: Mbaj pezull, Fokus, Aktiv, Çaktivizuar, I zgjedhur . Nëse punoni me sipërfaqe dhe lartësi, shtoni variante për Sipërfaqe të Ngritur ose Përmbajtje në Sfond të Hollë, gjithmonë nën ombrellën semantike.
Në tipografi, ndani pseudonimet dhe tokenët e kompozimit. Pseudonimet përcaktohen nga roli (Titulli-XL, Nëntitulli-M, Trupi-M), dhe tokenët e kompozimit përfshijnë madhësinë, peshën, fillimin dhe gjurmimin . Kur emrat e shkronjave ndryshojnë ose produkti rritet, nuk do të keni nevojë të ri-hartoni çdo ekran, vetëm hartëzimin.
Kjo qasje thjeshton gjithashtu komunikimin me zhvillimin. Zhvilluesit shpesh vlerësojnë variablat e qëndrueshme dhe të parashikueshme , të tilla si `--color-text-primary` ose `--font-body-md`, në vend të emrave estetikisht të këndshëm që ndryshojnë me trendet.
Shtojca të rekomanduara për t'i mbajtur gjërat të organizuara
Përdorimi i mjeteve ndihmëse eliminon detyrat përsëritëse dhe gabimet njerëzore. Në Figma ka shtojca që ndihmojnë në pastrimin e emrave, sinkronizimin e përmbajtjes ose gjurmimin e lidhjeve midis ekraneve.
- Gjej dhe Zëvendëso: e dobishme për unifikimin e emrave të shtresave, stileve ose tekstit në masë.
- Rrotulla e përmbajtjes: Ju lejon të futni përmbajtje shembullore të qëndrueshme dhe të ripërdorshme. për të testuar gjendjet dhe gjatësitë.
- Renditësi: ndihmon në organizimin e shtresave dhe tabelave të artit me kritere të parashikueshme.
- Sinkronizimi i Google Sheets: sinkronizon të dhënat tabelare me paraqitjet, perfekte për lista ose tabela.
- Autoflow: vizatoni shigjeta dhe lidhje midis kornizave për të paraqitur rrjedhat pa mundim.
- Vijat e kuqe: Gjeneron specifikime vizuale të matjeve, hapësirave dhe stileve.
Puna me klientët dhe llogaritë e Organizatës
Kur bashkëpunoni me organizata të jashtme, ia vlen të harmonizoni strukturën dhe lejet. Llogaritë e Ekipit të Organizatës ju lejojnë të krijoni ekipe sipas produktit, të aktivizoni bibliotekat e parazgjedhura dhe të shikoni analizat e adaptimit , duke ju ndihmuar të qeverisni sistemin me të dhëna.
Avantazhet e të pasurit ekipe të ndara: hierarki e qartë, ndarje e produkteve ose projekteve, leje specifike për rolet, një nivel shtesë organizimi dhe bashkëpunim më i qetë. Drejtoria me nivele (Ekipet, Projektet) ofron një hartë mendore të menjëhershme që zvogëlon fërkimet gjatë aksesimit të një skedari të ri.
Për operacionet e përditshme, ruani të njëjtin model si në shtëpinë tuaj: projekte për Kryesore, Aktive dhe të Arkivuara; skedarë të lehtë sipas funksionalitetit; faqe me ID dhe status të dukshëm; dhe versionim me mesazhe të qarta në fund të çdo momenti kyç për të lënë një gjurmë.
Trajnim dhe zhvillim profesional
Nëse doni të thelloni dhe përmirësoni karrierën tuaj në UX/UI, merrni në konsideratë trajnimin me profesionistë aktivë. Programe intensive si UX/UI Design AI Driven Full Stack Bootcamp i KeepCoding kombinojnë përvojën praktike, gjykimin e shëndoshë dhe teknologjinë e aplikuar në dizajn dhe zhvillim, me instruktorë që janë aktivë në industri çdo ditë.
Përtej të mësuarit për të zotëruar Figmën, ky lloj trajnimi ju ekspozon ndaj studimeve të rasteve të botës reale, rrjedhave të punës në ekip dhe vendimeve me ndikim. Ky kombinim i teorisë dhe praktikës përshpejton punësimin tuaj dhe ju ndihmon të ndërtoni një portofol të fortë në një treg konkurrues.
Me një kornizë të qartë emërtimi dhe procesi, një sistem dizajni të publikuar mirë dhe një strategji tokenësh në përputhje me standardet, ekipi juaj do të fitojë shpejtësi, do të zvogëlojë gabimet dhe do të jetë në gjendje ta zhvillojë produktin pa shkelur asgjë . Çelësi është të bini dakord për konventën, ta dokumentoni atë dhe ta zbatoni atë me mjete, leje dhe rishikime: pjesa tjetër është përsëritje inteligjente.
