ホーム>Web サイト構築リソース>フォントのダウンロード
ダウンロード

Figma-Styles-to-TSへようこそ

Figmaスタイルから色、フォント、シャドウを使用したTypeScriptファイルを生成します。 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 "
	}
}

必須

configまとめ
fileKey Figmaファイルのファイルキー。例：https：//www.figma.com/file/<file_key_here>/name?node-id=11:09

色

ショ和色を生成するには、Figmaでスタイルを公開する必要があります。ショ和

ショ和normal blend modeでone valueを持つ色のみが生成されます。

configまとめ
enable （デフォルト： false ）カラージェネレーターを有効にします（ trueまたはfalse ）。
outDir生成されたコードを保存するディレクトリ（Colors.tsファイルは、このフォルダーで生成されます）。
template （デフォルト： default ） defaultテンプレートまたはpaletteテンプレート（テンプレートを参照）（ 'default'または'palette' ）を使用します。
base （デフォルト： all colors ）ベースパスからすべての色を生成します。例：私の色はすべてCompanyName/Black/100のようです。ベース：「CompanyName」を使用して、CompanyNameのすべての色を取得します。

テンプレート

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に公開する必要があります。ショ和

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 >
	) ;
} ;

影

ショ和シャドウを生成するには、スタイルをFigmaに公開する必要があります。ショ和

ショ和normal blend modeのdrop shadowsのみが生成されます。

configまとめ
enable （デフォルト： false ）シャドウジェネレーターを有効にします（ trueまたはfalse ）。
outDir生成されたコードを保存するディレクトリ（このフォルダーでShadows.tsファイルが生成されます）。
template （デフォルト： default ） defaultテンプレートまたはpaletteテンプレート（テンプレートを参照）（ 'default'または'palette' ）を使用します。
base （デフォルト： all shadows ）ベースパスからすべての影を生成します。例：私の影はすべてCompanyName/Bottom/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テンプレートは、パレット形式に一致する影で影の定数を生成します。影をShadow/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)" ,
	} ,
} ;

アイコン

configまとめ
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テンプレートは、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" /> ;

画像

ショ和fill scale mode 、 normal blend modeとexport settingsを備えた画像のみが生成されます。

ショ和PDF formatサポートされていません。

configまとめ
enable （デフォルト： false ）イメージジェネレーターを有効にします（ trueまたはfalse ）。
outDir生成された画像を保存するディレクトリ。
page （デフォルト： the first page ）画像のページ名。
container （デフォルト： all images in the page ）画像のページにあるコンテナ名（ショ和すべての画像には一意の名前が必要です）。

著者

？トーマス・ミシェル

？貢献

貢献、問題、機能のリクエストは大歓迎です！
[問題]ページを自由に確認してください。

あなたのサポートを見せてください

このプロジェクトがあなたを助けたなら、♥を与えてください！

ライセンス

Copyright©2021 Thomas Michel。
このプロジェクトはMITライセンスです。

拡大する
追加情報
関連アプリ
おすすめ
関連情報 すべて