首页>建站资源>字体下载
下载

欢迎来到无花果风格

从无花果样式生成带有颜色，字体和阴影的打字稿文件。从无花果文件生成图标和图像。

？首页

安装

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许可。

展开
附加信息
相关应用
为您推荐
相关资讯 全部