Design Tokens እያንዳንዱን CSS ተለዋዋጭ፣ ቀለም፣ የቅርጸ-ቁምፊ ቁልል፣ ራዲየስ እና ጥላ ይሰበስባል፣ ወደ ቤዝ tokens ፣ ጭብጥ ሁነታዎች እና አካላት ወሰን ይመድባል እና እንደ W3C design-token JSON ለ Figma ወይም እንደ CSS ፋይል ያወርዳቸዋል።
የንድፍ ስርዓት ሙሉ በሙሉ ሲተገበር እምብዛም አይጻፍም. እውነተኛው ቤተ-ስዕል፣ የቦታ ስፋት እና የራምፕ አይነት በቅጥ ሉሆች ውስጥ ይኖራሉ - በብጁ ንብረቶች ላይ ተሰራጭቷል፣ ገጽታ መሻር እና በጠንካራ ኮድ የተደረገባቸው እሴቶች - እና ከ DevTools በእጅ እንደገና መገንባት ማለት በመቶዎች የሚቆጠሩ ህጎችን ጠቅ ማድረግ እና እሴቶችን በአንድ ጊዜ መቅዳት ማለት ነው።
ይህ መሳሪያ ሁሉንም በአንድ ጊዜ ያነባቸዋል. በገጹ ላይ ያለውን እያንዳንዱን የቅጥ ሉህ ይራመዳል፣ ምንጭ-መስሮ ገፁ ራሱ እንዲፈትሽ የማይፈቀድለትን ጨምሮ፣ እና እያንዳንዱን ብጁ ንብረት ይሰበስባል፣ በተጨማሪም በውስጥ መስመር ቅጦች በሂደት ላይ የተቀመጡ ተለዋዋጮች። ተለዋዋጮች በ:root መሠረት tokens ይሆናሉ; በገጽታ መራጭ ስር እንደ.dark ፣ [data-theme="dark"] ያሉ ተመሳሳይ ስሞች እንደገና የተገለጹ ወይም prefers-color-scheme የተለየ ሁነታዎች ይሆናሉ። በግለሰብ አካላት ላይ የተገለጹ ተለዋዋጮች እንደ ስፋት ተዘርዝረዋል. እያንዳንዱ እሴት የሚፈታው var() ሰንሰለቱ ነው፣ስለዚህ የሌላ ተለዋዋጭ ማጣቀሻ ብቻ ሳይሆን በትክክል የሚሰራውን ቀለም ያያሉ።
እያንዳንዱ token ከእሴቱ እና ከስሙ ይመደባል - ቀለም፣ ቅርጸ-ቁምፊ ቤተሰብ፣ የቅርጸ-ቁምፊ መጠን፣ ክብደት፣ የመስመር ቁመት፣ ክፍተት፣ ራዲየስ፣ ጥላ፣ ቅልመት፣ ቆይታ፣ ማቅለል ወይም z-ኢንዴክስ - እና ቀለሞች ወደ አስራስድስትዮሽ ተደርገዋል፣ የሰርጥ-ብቻ ቅርጸቶችን Tailwind እና shadcn አጠቃቀምን ( 222 47% 11%) እና Bootstrap ' -rgb. ከተገለጹት ተለዋዋጮች ጎን ለጎን፣ የመሳሪያዎቹ ናሙናዎች በትክክል ጥቅም ላይ የዋሉትን ቀለሞች፣ ቅርጸ-ቁምፊዎች፣ መጠኖች፣ ራዲሶች እና ጥላዎች ከአጠቃቀም ብዛት ጋር ለመዘገብ ኤለመንቶችን ፈጥረዋል።
ወደ ውጭ መላክ በአንድ ጠቅታ ይወስዳል። Download tokens JSON የ W3C Design Tokens ቅርጸትን ( $value and $type) ያስቀምጣቸዋል Tokens Studio plugin ወደ Figma እና Style Dictionary የሚያስገባው ለማንኛውም የመሳሪያ ስርዓት ኮድ; ጭብጥ ሁነታዎች እና የተስተዋሉ እሴቶች በራሳቸው ቡድኖች ውስጥ ይቀመጣሉ, ስለዚህ ምንም ነገር አይቀላቀልም. Download CSS ተለዋዋጮችን እንደ የቅጥ ሉህ መልሶ ይጽፋል፣ እያንዳንዱ ሁነታ በዋናው መራጭ ስር ነው።
ከእያንዳንዱ የቅጥ ሉህ ብጁ ንብረቶች፣ መነሻ ተሻጋሪ ሉሆች ገፁ ማንበብ የማይችለውን ጨምሮ፣ እና ተለዋዋጮች በውስጥ መስመር ቅጦች በአሂድ ጊዜ ተቀምጠዋል።
.dark ፣ [data-theme] ስር ይሽራል ወይም prefers-color-scheme የተለየ ሁነታዎች ይሆናሉ፣ ጎን ለጎን ከመሠረታዊ እሴቱ ጋር ይታያሉ።
እያንዳንዱ var() ሰንሰለት ተፈትቷል፣ እና እያንዳንዱ token እንደ ቀለም፣ ቅርጸ-ቁምፊ፣ መጠን፣ ክፍተት፣ ራዲየስ፣ ጥላ፣ ቆይታ፣ ማቃለል ወይም z-index ይጻፋል።
ሄክስ፣ rgb፣ hsl፣ oklch፣ የተሰየሙ ቀለሞች እና የሰርጡ-ብቻ እሴቶች Tailwind, shadcn እና Bootstrap አጠቃቀም፣ ሁሉም ወደ ሄክስ የተለመደ ነው።
ቀለሞች፣ የቅርጸ-ቁምፊ ቁልል፣ መጠኖች፣ ክብደቶች፣ ራዲየስ እና ጥላዎች ከተሰሩት አባሎች ናሙናዎች፣ እያንዳንዳቸው በየስንት ጊዜው እንደሚታዩ።
W3C design-token JSON ለ Tokens Studio እና Style Dictionary ፣ ወይም CSS ፋይል በዋናው መራጭ ስር እያንዳንዱ ሞድ ያለው።
ከቅጽበታዊ ገጽ እይታዎች ቀለሞችን ከመምረጥ ይልቅ እውነተኛውን ቤተ-ስዕል፣ አይነት እና ክፍተትን ወደ Tokens Studio አስመጣ።
አንድ ጣቢያ በትክክል ምን ያህል ቀለሞችን እና የቅርጸ-ቁምፊ መጠኖችን እንደሚጠቀም እና የትኛዎቹ እሴቶች የሚገልፃቸውን tokens እንደሚያልፉ ይመልከቱ።
እያንዳንዱን ተለዋዋጭ የጨለማ ሁነታ የሚሽረው በብርሃን እሴቱ ጎን ለጎን እና በጭራሽ ያልተሻሩትን ይለዩ።
tokens አንድ ጊዜ ወደ ውጭ ይላኩ እና እሴቶችን በእጅ ከመቅዳት ይልቅ ወደ Style Dictionary ወይም ወደ Tailwind ውቅር ይመግቧቸው።
የሚያደንቁትን ጣቢያ የቀለም ስርዓት፣ አይነት ልኬት እና ራዲየስ ወደ እርስዎ መስራት ወደ ሚችሉት ፋይል ይጎትቱ።
በ DevSuite Pro dock ውስጥ Design Tokens አዶን ጠቅ ያድርጉ። ማውጣቱ ወዲያውኑ ይሰራል እና ማጠቃለያው ተለዋዋጮችን፣ ሁነታዎችን፣ ቀለሞችን እና የቅርጸ-ቁምፊ ቁልልዎችን ይቆጥራል።
የቀለማት ትሩ እያንዳንዱን የቀለም token እንደ swatch ያሳያል፣ እያንዳንዱን ጭብጥ ሁነታ ለማሳየት የተከፈለ፣ በመቀጠል ገፁ የሚያቀርባቸው ቀለሞች፣ ከአጠቃቀም ብዛት ጋር።
የፊደል አጻጻፍ እያንዳንዱን የቅርጸ-ቁምፊ ቁልል ቅድመ እይታ ያሳያል እና መጠኖችን፣ ክብደትን፣ የመስመር ከፍታዎችን እና @font-face ደንቦችን ይዘረዝራል። የመጨረሻው ትር ክፍተትን፣ ራዲየስን፣ ጥላዎችን እና እንቅስቃሴን ይሸፍናል።
ተለዋዋጮች ትር እያንዳንዱን ብጁ ንብረት በደራሲ እና በተፈታ እሴቱ ይዘረዝራል። በመሠረት ፣ በእያንዳንዱ ጭብጥ ሁነታ እና በክፍለ-ወሰን ተለዋዋጮች መካከል ይቀያይሩ።
Download tokens JSON ለ Figma በ Tokens Studio ያውርዱ ወይም Download CSS ። ክፍል-ተኮር ተለዋዋጮችን ለማካተት አመልካች ሳጥኑ ላይ ምልክት ያድርጉ።
DevSuite Pro ን በነፃ ይጫኑ እና 74+ የገንቢ መሳሪያዎችን ለአሳሽዎ ይክፈቱ።
