figma styles to ts Download - figma styles to ts Source Code Download

مرحبًا بك في Figma-Styles-to-TS

قم بإنشاء ملفات TypeScript بالألوان والخطوط والظلال من أنماط Figma. إنشاء أيقونات وصور من ملف Figma.

؟ الصفحة الرئيسية

ثَبَّتَ

npm install -D figma-styles-to-ts

الاستخدام

بادئ ذي بدء ، تحتاج إلى إعطاء personal figma token الخاص بك (يمكنك القيام بذلك مرة واحدة ، سيتم تسجيل الرمز المميز). سيوفر الرمز المميز الشخصي في /node_modules وإنشاء الأنماط.

figma-styles-to-ts --token= " your_token "

في المرة القادمة عليك فقط استخدام هذا:

figma-styles-to-ts

لإعادة ضبط الرمز المميز الخاص بك:

figma-styles-reset && figma-styles-to-ts --token= " your_new_token "

إعدادات

قم بإنشاء ملف Figma.config.json بجذر مشروعك.

{
	"fileKey" : " your_file_key " ,
	"color" : {
		"enable" : false ,
		"outDir" : " color_out_dir " ,
		"template" : " default " ,
		"base" : " "
	},
	"font" : {
		"enable" : false ,
		"outDir" : " font_out_dir " ,
		"template" : " default " ,
		"base" : " "
	},
	"shadow" : {
		"enable" : false ,
		"outDir" : " shadow_out_dir " ,
		"template" : " default " ,
		"base" : " "
	},
	"icon" : {
		"enable" : false ,
		"outDir" : " icon_out_dir " ,
		"template" : " default " ,
		"storybook" : false ,
		"page" : " the_page " ,
		"container" : " the_icons_container "
	},
	"image" : {
		"enable" : false ,
		"outDir" : " image_out_dir " ,
		"page" : " the_page " ,
		"container" : " the_images_container "
	}
}

مطلوب

تكوين	ملخص
`fileKey`	مفتاح ملف ملف Figma الخاص بك. على سبيل المثال: https://www.figma.com/file/<file_key_here>/name؟node-id=11:09

لون

️ لتوليد الألوان ، تحتاج إلى نشر أنماطك في Figma. ️

️ سيتم إنشاء الألوان فقط التي لها one value مع normal blend mode .

تكوين	ملخص
`enable` (افتراضي: `false` )	تمكين مولد اللون ( `true` أو `false` ).
`outDir`	دليل لتخزين الكود الذي تم إنشاؤه (يتم إنشاء ملف Colors.TS في هذا المجلد).
`template` (افتراضي: `default` )	استخدم قالب القالب أو `palette` `default` (انظر القوالب) ( `'default'` أو `'palette'` ).
`base` (افتراضي: `all colors` )	توليد جميع الألوان من المسار الأساسي. على سبيل المثال: جميع ألواني هي اسم الشركة/الأسود/100. استخدم قاعدة: "CompanyName" للحصول على جميع ألوان اسم الشركة.

قوالب

سيقوم القالب default بإنشاء ألوان ثابتة مع جميع الألوان بشكل متكرر. مثال:

 const COLORS = {
  CompanyName : {
    Black : {
      dark : { value : "#000000" }
      light : { value : "#131231" }
    } ,
    White : {
      value : "#FFFFFF"
    }
  } ,
  CustomColor : {
    value : "#452398"
  }
}

سيقوم قالب palette بإنشاء ألوان ثابتة بألوان تتطابق مع تنسيق اللوحة. يجب أن تسمي ألوانك كوني/100 ، اللون/200 ، ... ، اللون/700 (سيتم إنشاء ألوان فقط من 100 إلى 700). مثال:

 const COLORS = {
	Black : {
		T100 : "#000001" ,
		T200 : "#000002" ,
		T300 : "#000003" ,
		T400 : "#000004" ,
		T500 : "#000005" ,
		T600 : "#000006" ,
		T700 : "#000007" ,
	} ,
} ;

الخط

️ لتوليد الخطوط ، تحتاج إلى نشر أنماطك في Figma. ️

تكوين	ملخص
`enable` (افتراضي: `false` )	تمكين مولد الخط ( `true` أو `false` ).
`outDir`	دليل لتخزين الكود الذي تم إنشاؤه (سيتم إنشاء ملف fonts.ts في هذا المجلد).
`template` (افتراضي: `default` )	استخدم قالب `default` أو `react` أو `chakra` (انظر القوالب) ( `'default'` أو `'reat'` أو `'chakra'` ).
`base` (افتراضي: `all fonts` )	توليد جميع الخطوط من المسار الأساسي. على سبيل المثال: جميع خطوطي هي اسم الشركة/P1/BOLD. استخدم قاعدة: "CompanyName" للحصول على جميع خطوط اسم الشركة.

قوالب

سيقوم القالب default بإنشاء خطوط ثابتة مع جميع الخطوط بشكل متكرر. مثال:

 const FONTS : Fonts = {
	Bold : {
		value : {
			fontFamily : "Ubuntu" ,
			fontWeight : 700 ,
			fontSize : 12 ,
			letterSpacing : 0 ,
			lineHeight : "14.0625px" ,
		} ,
	} ,
	Medium : {
		value : {
			fontFamily : "Ubuntu" ,
			fontWeight : 500 ,
			fontSize : 12 ,
			letterSpacing : 0 ,
			lineHeight : "14.0625px" ,
		} ,
	} ,
} ;

سيقوم قالب react بإنشاء ملف fonts.ts من القالب الافتراضي وسيقوم بإنشاء مكون نص. مثال:

 const Text = ( { children , font , color , ... rest } : TextProps ) => {
	return (
		< p
			style = { {
				color : color ,
				fontSize : font ?. fontSize ,
				fontFamily : font ?. fontFamily ,
				fontWeight : font ?. fontWeight ,
				lineHeight : font ?. lineHeight ,
				letterSpacing : font ?. letterSpacing ,
			} }
			{ ... rest }
		>
			{ children }
		< / p>
	) ;
} ;

سيقوم قالب chakra بإنشاء ملف fonts.ts من القالب الافتراضي وسيقوم بإنشاء مكون فقرة. مثال:

 const Paragraph = ( { children , font , color , ... rest } : ParagraphProps ) => {
	return (
		< Text
			color = { color }
			fontFamily = { font ?. fontFamily }
			fontSize = { font ?. fontSize }
			fontWeight = { font ?. fontWeight }
			lineHeight = { font ?. lineHeight }
			letterSpacing = { font ?. letterSpacing }
			{ ... rest }
		>
			{ children }
		</ Text >
	) ;
} ;

الظل

️ لتوليد الظلال ، تحتاج إلى نشر أنماطك في Figma. ️

️ سيتم إنشاء drop shadows فقط مع normal blend mode .

تكوين	ملخص
`enable` (افتراضي: `false` )	تمكين مولد الظل ( `true` أو `false` ).
`outDir`	سيتم إنشاء دليل لتخزين الكود الذي تم إنشاؤه (ملف Shadows.ts في هذا المجلد).
`template` (افتراضي: `default` )	استخدم قالب القالب أو `palette` `default` (انظر القوالب) ( `'default'` أو `'palette'` ).
`base` (افتراضي: `all shadows` )	توليد جميع الظلال من المسار الأساسي. على سبيل المثال: كل ظلال بلدي هي اسم الشركة/القاع/100. استخدم قاعدة: "CompanyName" للحصول على جميع ظلال اسم الشركة.

قوالب

سيقوم القالب default بتوليد ظلال ثابتة مع جميع الظلال بشكل متكرر. مثال:

 const SHADOWS = {
  CompanyName : {
    Bottom : {
      dark : { value : "0px 0.5px 2px rgba(96, 97, 112, 0.16)" }
      light : { value : "0px 2px 4px rgba(40, 41, 61, 0.04)" }
    } ,
    Top : {
      value : "0px 2px 4px rgba(96, 97, 112, 0.16), 0px 0px 1px rgba(40, 41, 61, 0.04)"
    }
  } ,
  CustomShadow : {
    value : "0px 26px 34px rgba(96, 97, 112, 0.06)"
  }
}

سيقوم قالب palette بتوليد ظلال ثابتة مع ظلال تتناسب مع تنسيق اللوحة. يجب أن تسمي ظلالك على شكل ظل/100 ، الظل/200 ، ... ، اللون/500 (سيتم إنشاء ظلال فقط من 100 إلى 500). مثال:

 const SHADOWS = {
	Bottom : {
		T100 : "0px 0.5px 2px rgba(96, 97, 112, 0.16)" ,
		T200 : "0px 2px 4px rgba(96, 97, 112, 0.16)" ,
		T300 : "0px 2px 4px rgba(96, 97, 112, 0.16)" ,
		T400 : "0px 8px 16px rgba(96, 97, 112, 0.16)" ,
		T500 : "0px 26px 34px rgba(96, 97, 112, 0.06)" ,
	} ,
} ;

رمز

تكوين	ملخص
`enable` (افتراضي: `false` )	تمكين مولد الرمز ( `true` أو `false` ).
`outDir`	الدليل لتخزين الكود الذي تم إنشاؤه.
`template` (افتراضي: `default` )	استخدم القالب `default` أو قالب `react` (انظر القوالب) ( `'default'` أو `'react'` ).
`storybook` (الافتراضي: `false` )	إنشاء ملف index.stories.tsx ( ️ فقط مع قالب رد الفعل) ( `true` أو `false` )
`page` (الافتراضي: `the first page` )	اسم صفحة الرموز الخاصة بك.
`container` (افتراضي: `all components in the page` )	اسم الحاوية في صفحة الرموز الخاصة بك ( ️ يجب أن يكون لجميع الرموز الخاصة بك اسم فريد ويجب أن تكون مكونًا).

قوالب

سيقوم القالب default بإنشاء ملفات SVG. مثال:

< svg width = " 12 " height = " 12 " viewBox = " 0 0 12 12 " fill = " none " xmlns = " http://www.w3.org/2000/svg " >
  < path d = " M11 1L1 11M1 1L11 11 " stroke = " black " stroke-width = " 1.5 " stroke-linecap = " round " stroke-linejoin = " round " />
</ svg >

سيقوم قالب react بإنشاء ملفات TSX مع مكون React. مثال:

 const Cross = ( props : React . SVGProps < SVGSVGElement > ) => {
	return (
		< svg
			viewBox = "0 0 12 12"
			fill = "none"
			xmlns = "http://www.w3.org/2000/svg"
			width = { props . width }
			height = { props . height }
		>
			< path
				d = "M11.2174 0.782609L0.782609 11.2174M0.782609 0.782609L11.2174 11.2174"
				stroke = { props . fill }
				strokeWidth = "1.5"
				strokeLinecap = "round"
				strokeLinejoin = "round"
			/>
		</ svg >
	) ;
} ;
export default Cross ;

Use: < Cross height = { 20 } width = { 20 } fill = "#000000" /> ;

صورة

️ فقط الصور مع fill scale mode ، مع normal blend mode ومع export settings .

️ PDF format غير مدعوم.

تكوين	ملخص
`enable` (افتراضي: `false` )	تمكين مولد الصورة ( `true` أو `false` ).
`outDir`	الدليل لتخزين الصور الناتجة.
`page` (الافتراضي: `the first page` )	اسم صفحة صورك.
`container` (افتراضي: `all images in the page` )	اسم الحاوية في صفحة صورك ( ️ يجب أن يكون لجميع صورك اسم فريد).