หน้าแรก>แหล่งข้อมูลการสร้างเว็บไซต์>ดาวน์โหลดแบบอักษร
ดาวน์โหลด

ยินดีต้อนรับสู่รูปแบบ Figma ถึง 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 ไดเรกทอรีเพื่อจัดเก็บรหัสที่สร้างขึ้น (ไฟล์ colours.ts จะถูกสร้างขึ้นในโฟลเดอร์นี้)
template (ค่าเริ่มต้น: default ) ใช้เทมเพลต default หรือเทมเพลตจาน palette (ดูเทมเพลต) ( 'default' หรือ 'palette' )
base (ค่าเริ่มต้น: all colors ) สร้างสีทั้งหมดจากเส้นทางฐาน ตัวอย่าง: สีทั้งหมดของฉันเป็นชื่อ บริษัท/ดำ/100 ใช้ฐาน: "ชื่อ บริษัท " เพื่อรับชื่อ บริษัท ทั้งหมด

เทมเพลต

เทมเพลต default จะสร้างสีคงที่ด้วยสีทั้งหมดซ้ำ ตัวอย่าง: 

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

เทมเพลต palette จะสร้างสีคงที่ด้วยสีที่ตรงกับรูปแบบจานสี คุณต้องตั้งชื่อสีของคุณเป็นสี/100, color/200, ... , color/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 หรือ chakra (ดูเทมเพลต) react 'default' , 'reat' หรือ 'chakra' )
base (ค่าเริ่มต้น: all fonts ) สร้างแบบอักษรทั้งหมดจากเส้นทางฐาน ตัวอย่าง: แบบอักษรทั้งหมดของฉันเป็นชื่อ บริษัท/p1/ตัวหนา ใช้ฐาน: "ชื่อ บริษัท " เพื่อรับฟอนต์ทั้งหมดของชื่อ บริษัท

เทมเพลต

เทมเพลต 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 ) ใช้เทมเพลต default หรือเทมเพลตจาน palette (ดูเทมเพลต) ( 'default' หรือ 'palette' )
base (ค่าเริ่มต้น: all shadows ) สร้างเงาทั้งหมดจากเส้นทางฐาน ตัวอย่าง: เงาทั้งหมดของฉันเป็นชื่อ บริษัท/ล่าง/100 ใช้ฐาน: "ชื่อ บริษัท " เพื่อรับเงาทั้งหมดของ บริษัท

เทมเพลต

เทมเพลต 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, Shadow/200, ... , color/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 ( เฉพาะกับเทมเพลต React) ( 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 ) ชื่อคอนเทนเนอร์ในหน้ารูปภาพของคุณ ( ภาพทั้งหมดของคุณต้องมีชื่อที่ไม่ซ้ำกัน)

ผู้เขียน

- โทมัสมิเชล

- การบริจาค

ยินดีต้อนรับการมีส่วนร่วมปัญหาและคำขอคุณสมบัติ!
อย่าลังเลที่จะตรวจสอบหน้าปัญหา

แสดงการสนับสนุนของคุณ

ให้️ถ้าโครงการนี้ช่วยคุณได้!

ใบอนุญาต

ลิขสิทธิ์© 2021 Thomas Michel
โครงการนี้ได้รับใบอนุญาต MIT

ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด