首頁>建站資源>字體下載
下載

歡迎來到無花果風格

從無花果樣式生成帶有顏色，字體和陰影的打字稿文件。從無花果文件生成圖標和圖像。

？首頁

安裝

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 "
	}
}

必需的

config概括
fileKey FIGMA文件的文件密鑰。例如：https：//www.figma.com/file/< file_key_here>/name？ name？ node-id = 11:09

顏色

配x要生成顏色，您需要在無花果上發布樣式。配x

配x只有具有normal blend mode的one value的顏色才能生成。

config概括
enable （默認： false ）啟用顏色生成器（ true或false ）。
outDir存儲生成的代碼的目錄（將在此文件夾中生成colors.ts文件）。
template （默認： default ）使用default模板或palette模板（請參閱模板）（ 'default'或'palette' ）。
base （默認： all colors ）從基本路徑生成所有顏色。例如：我所有的顏色都是公司名稱/黑色/100。使用基礎：“ CompanyName”獲取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" ,
	} ,
} ;

字體

配x要生成字體，您需要在無花果上發布樣式。配x

config概括
enable （默認： false ）啟用字體生成器（ true或false ）。
outDir存儲生成的代碼的目錄（將在此文件夾中生成一個fonts.ts文件）。
template （默認： default ）使用default ， react或chakra模板（請參閱模板）（ 'default' ， 'reat'或'chakra' ）。
base （默認： all fonts ）從基本路徑生成所有字體。例如：我所有的字體都是CompanyName/p1/bold。使用基礎：“ CompanyName”獲取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 >
	) ;
} ;

陰影

配x要產生陰影，您需要在無花果上發布樣式。配x

配x僅生成具有normal blend mode的drop shadows 。

config概括
enable （默認： false ）啟用影子生成器（ true或false ）。
outDir存儲生成的代碼的目錄（Shadows.ts文件將在此文件夾中生成）。
template （默認： default ）使用default模板或palette模板（請參閱模板）（ 'default'或'palette' ）。
base （默認： all shadows ）從基本路徑生成所有陰影。例如：我所有的陰影都是公司名稱/底部/100。使用基礎：“ CompanyName”獲取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)" ,
	} ,
} ;

圖示

config概括
enable （默認： false ）啟用圖標生成器（ true或false ）。
outDir存儲生成代碼的目錄。
template （默認： default ）使用default模板或react模板（請參閱模板）（ 'default'或'react' ）。
storybook （默認： false ）生成index.stories.tsx文件（配x僅使用React模板）（ true或false ）
page （默認： the first page ）圖標的頁面名稱。
container （默認： all components in the page ）圖標頁面中的容器名稱（配x您所有的圖標都必須具有唯一的名稱，並且必須是組件）。

模板

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模板將生成具有React組件的TSX文件。例子： 

 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" /> ;

圖像

配x只能生成具有fill scale mode ， normal blend mode和帶有export settings的圖像。

配x不支持PDF format 。

config概括
enable （默認： false ）啟用圖像生成器（ true或false ）。
outDir存儲生成圖像的目錄。
page （默認： the first page ）圖像的頁面名稱。
container （默認： all images in the page ）圖像頁面中的容器名稱（配x您所有的圖像都必須具有唯一名稱）。

作者

？托馬斯·米歇爾

？貢獻

歡迎貢獻，問題和功能請求！
請隨時檢查問題頁面。

表示您的支持

如果這個項目對您有所幫助，請給！

執照

版權所有©2021 Thomas Michel。
該項目已獲得MIT許可。

展開
附加信息
相關應用
爲您推薦
相關資訊 全部