Página Inicial>Recursos de construção de sites>Baixar fonte
Baixar

Bem-vindo ao estilo figma-ts

Gere arquivos TypeScript com cores, fontes e sombras dos estilos da figma. Gerar ícones e imagens do arquivo figma.

? Página inicial

Instalar 

npm install -D figma-styles-to-ts

Uso

Primeiro de tudo, você precisa dar ao seu personal figma token (você pode fazer isso uma vez, o token será registrado). Ele salvará seu token pessoal em /node_modules e gerará os estilos. 

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

Da próxima vez que você só precisar usar isso: 

figma-styles-to-ts

Para redefinir seu token: 

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

Configuração

Crie um arquivo figma.config.json na raiz do seu projeto. 

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

Obrigatório

Config Resumo
fileKey A chave do arquivo do seu arquivo figma. Ex: https://www.figma.com/file/<file_key_here>/name?node-id=11:09

Cor

️ Para gerar cores, você precisa publicar seus estilos no figma. ️

️ Somente as cores que têm one value com um normal blend mode serão geradas.

Config Resumo
enable (padrão: false ) Ativar gerador de cores ( true ou false ).
outDir O diretório para armazenar o código gerado (um arquivo de cores.ts será gerado nesta pasta).
template (padrão: default ) Use modelo default ou modelo palette (consulte os modelos) ( 'default' ou 'palette' ).
base (padrão: all colors ) Gere todas as cores a partir do caminho da base. EX: Todas as minhas cores são como CompanyName/Black/100. Use Base: "CompanyName" para obter todas as cores do nome da empresa.

Modelos

O modelo default gerará uma das cores constantes com todas as cores recursivamente. Exemplo: 

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

O modelo palette gerará uma constante de cores com cores que correspondem ao formato da paleta. Você deve nomear suas cores como cores/100, color/200, ..., cor/700 (apenas as cores de 100 a 700 serão geradas). Exemplo: 

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

Fonte

️ Para gerar fontes, você precisa publicar seus estilos no figma. ️

Config Resumo
enable (padrão: false ) Ativar gerador de fonte ( true ou false ).
outDir O diretório para armazenar o código gerado (um arquivo fonts.ts será gerado nesta pasta).
template (padrão: default ) Use o modelo default , react ou chakra (consulte os modelos) ( 'default' , 'reat' ou 'chakra' ).
base (padrão: all fonts ) Gere todas as fontes a partir do caminho da base. Ex: todas as minhas fontes são como CompanyName/P1/Bold. Use Base: "CompanyName" para obter todas as fontes do nome da empresa.

Modelos

O modelo default gerará uma constante de fontes com todas as fontes recursivamente. Exemplo: 

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

O modelo react gerará o arquivo fonts.ts a partir do modelo padrão e gerará um componente de texto. Exemplo: 

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

O modelo chakra gerará o arquivo fonts.ts a partir do modelo padrão e gerará um componente de parágrafo. Exemplo: 

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

Sombra

️ Para gerar sombras, você precisa publicar seus estilos no figma. ️

️ Solte drop shadows com um normal blend mode será gerado.

Config Resumo
enable (padrão: false ) Ativar gerador de sombra ( true ou false ).
outDir O diretório para armazenar o código gerado (um arquivo shadows.ts será gerado nesta pasta).
template (padrão: default ) Use modelo default ou modelo palette (consulte os modelos) ( 'default' ou 'palette' ).
base (padrão: all shadows ) Gere todas as sombras a partir do caminho da base. Ex: todas as minhas sombras são como CompanyName/Bottom/100. Use Base: "CompanyName" para obter todas as sombras do nome da empresa.

Modelos

O modelo default gerará uma sombra constante com todas as sombras recursivamente. Exemplo: 

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

O modelo palette gerará uma sombra constante com sombras que correspondem ao formato da paleta. Você deve nomear suas sombras como Shadow/100, Shadow/200, ..., Color/500 (apenas sombras de 100 a 500 serão geradas). Exemplo: 

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

Ícone

Config Resumo
enable (padrão: false ) Ativar gerador de ícone ( true ou false ).
outDir O diretório para armazenar o código gerado.
template (padrão: default ) Use modelo default ou modelo react (consulte os modelos) ( 'default' ou 'react' ).
storybook (Padrão: false ) Gerar um arquivo index.stories.tsx ( ️ apenas com modelo de reação) ( true ou false )
page (padrão: the first page ) O nome da página de seus ícones.
container (Padrão: all components in the page ) O nome do contêiner na página de seus ícones ( ️ Todos os seus ícones devem ter um nome único e devem ser um componente).

Modelos

O modelo default gerará arquivos SVG. Exemplo: 

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

O modelo react gerará arquivos TSX com o componente React. Exemplo: 

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

Imagem

️ Somente imagens com um fill scale mode , com um normal blend mode e com export settings serão geradas.

️ PDF format não é suportado.

Config Resumo
enable (padrão: false ) Ativar gerador de imagem ( true ou false ).
outDir O diretório para armazenar as imagens geradas.
page (padrão: the first page ) O nome da página de suas imagens.
container (padrão: all images in the page ) O nome do contêiner na página de suas imagens ( ️ todas as suas imagens devem ter um nome exclusivo).

Autor

? Thomas Michel

? Contribuindo

Contribuições, questões e solicitações de recursos são bem -vindos!
Sinta -se à vontade para verificar a página de problemas.

Mostre seu apoio

Dê a um ️ se este projeto o ajudar!

Licença

Copyright © 2021 Thomas Michel.
Este projeto está licenciado pelo MIT.

Expandir
Informações adicionais
Aplicativos Relacionados
Recomendado para você
Informações Relacionadas Todos