Startseite>Ressourcen zum Erstellen von Websites>Schriftarten herunterladen
Herunterladen

Willkommen bei Figma-Styles-to-Ts

Generieren Sie Typenkriptateien mit Farben, Schriftarten und Schatten aus Figma -Stilen. Generieren Sie Symbole und Bilder aus der Figma -Datei.

? Homepage

Installieren 

npm install -D figma-styles-to-ts

Verwendung

Zunächst müssen Sie Ihrem personal figma token geben (Sie können dies einmal tun, das Token wird registriert sein). Es speichert Ihr persönliches Token in /node_modules und generiert die Stile. 

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

Das nächste Mal müssen Sie dies nur verwenden: 

figma-styles-to-ts

Um Ihr Token zurückzusetzen: 

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

Konfiguration

Erstellen Sie eine figma.config.json -Datei zum Stamm Ihres Projekts. 

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

Erforderlich

Konfiguration Zusammenfassung
fileKey Die Dateischlüssel Ihrer Figma -Datei. Ex: https://www.figma.com/file/<File_key_here>/name?node-id=11:09

Farbe

Euen Um Farben zu erzeugen, müssen Sie Ihre Stile in Figma veröffentlichen. Euen

Euen Es werden nur Farben erzeugt, die one value mit einem normal blend mode haben.

Konfiguration Zusammenfassung
enable (Standard: false ) Aktivieren Sie den Farbgenerator ( true oder false ).
outDir Das Verzeichnis zum Speichern des generierten Codes (eine farben.ts -Datei wird in diesem Ordner generiert).
template (Standard: default ) Verwenden Sie die default oder palette (siehe Vorlagen) ( 'default' oder 'palette' ).
base (Standard: all colors ) Generieren Sie alle Farben vom Basispfad. Beispiel: Alle meine Farben sind als Firmenname/Schwarz/100. Verwenden Sie Basis: "CompanyName", um alle Farben von CompanyName zu erhalten.

Vorlagen

Die default erzeugt eine Farbenkonstante mit allen Farben rekursiv. Beispiel: 

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

Die palette erzeugt eine Farbenkonstante mit Farben, die dem Palettenformat entspricht. Sie müssen Ihre Farben als Farbe/100, Farbe/200, ..., Farbe/700 benennen (nur Farben von 100 bis 700 werden erzeugt). Beispiel: 

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

Schriftart

Euen Um Schriftarten zu generieren, müssen Sie Ihre Stile in Figma veröffentlichen. Euen

Konfiguration Zusammenfassung
enable (Standard: false ) Aktivieren Sie Schriftgenerator ( true oder false ).
outDir Das Verzeichnis zum Speichern des generierten Codes (eine Datei fonts.ts wird in diesem Ordner generiert).
template (Standard: default ) Verwenden Sie default , react oder chakra -Vorlage (siehe Vorlagen) ( 'default' , 'reat' oder 'chakra' ).
base (Standard: all fonts ) Generieren Sie alle Schriftarten vom Basispfad. Beispiel: Alle meine Schriftarten sind als Firmenname/P1/BOLD. Verwenden Sie Basis: "CompanyName", um alle Schriftarten von CompanyName zu erhalten.

Vorlagen

Die default erzeugt eine Schriftkonstante mit allen Schriftarten rekursiv. Beispiel: 

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

Die react -Vorlage generiert die Datei fonts.ts aus der Standardvorlage und generiert eine Textkomponente. Beispiel: 

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

Die chakra -Vorlage generiert die Datei fonts.ts aus der Standardvorlage und generiert eine Absatzkomponente. Beispiel: 

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

Schatten

Euen Um Schatten zu erzeugen, müssen Sie Ihre Stile in Figma veröffentlichen. Euen

Euen Es werden nur drop shadows mit einem normal blend mode erzeugt.

Konfiguration Zusammenfassung
enable (Standard: false ) Aktivieren Sie den Schattengenerator ( true oder false ).
outDir Das Verzeichnis zum Speichern des generierten Codes (eine Datei Shadows.ts. -Datei wird in diesem Ordner generiert).
template (Standard: default ) Verwenden Sie die default oder palette (siehe Vorlagen) ( 'default' oder 'palette' ).
base (Standard: all shadows ) Generieren Sie alle Schatten vom Basispfad. Beispiel: Alle meine Schatten sind als Firmenname/unten/100. Verwenden Sie Basis: "CompanyName", um alle Schatten von CompanyName zu erhalten.

Vorlagen

Die default erzeugt eine Schattenkonstante mit allen Schatten rekursiv. Beispiel: 

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

Die palette erzeugt eine Schattenkonstante mit Schatten, die dem Palettenformat entspricht. Sie müssen Ihre Schatten als Shadow/100, Shadow/200, ..., Color/500 benennen (werden nur Schatten von 100 bis 500 erzeugt). Beispiel: 

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

Symbol

Konfiguration Zusammenfassung
enable (Standard: false ) Aktivieren Sie den Symbolgenerator ( true oder false ).
outDir Das Verzeichnis zum Speichern des generierten Codes.
template (Standard: default ) Verwenden Sie die default oder die react -Vorlage (siehe Vorlagen) ( 'default' oder 'react' ).
storybook (Standard: false ) Generieren Sie eine Index.Stories.tsx -Datei ( Euen Nur mit React -Vorlage) ( true oder false )
page (Standard: the first page ) Der Seitenname Ihrer Symbole.
container (Standard: all components in the page ) Der Container Name auf der Seite Ihrer Symbole ( Euen Alle Ihre Symbole müssen einen eindeutigen Namen haben und eine Komponente sein).

Vorlagen

Die default generiert SVG -Dateien. Beispiel: 

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

Die react -Vorlage generiert TSX -Dateien mit React -Komponente. Beispiel: 

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

Bild

Euen Es werden nur Bilder mit einem fill scale mode mit einem normal blend mode und mit export settings generiert.

Euen PDF format wird nicht unterstützt.

Konfiguration Zusammenfassung
enable (Standard: false ) Aktivieren Sie den Bildgenerator ( true oder false ).
outDir Das Verzeichnis zum Speichern der generierten Bilder.
page (Standard: the first page ) Der Seitenname Ihrer Bilder.
container (Standard: all images in the page ) Der Container Name auf der Seite Ihrer Bilder ( Euen Alle Ihre Bilder müssen einen eindeutigen Namen haben).

Autor

? Thomas Michel

? Beitragen

Beiträge, Probleme und Feature -Anfragen sind willkommen!
Fühlen Sie sich frei, Probleme mit der Seite zu überprüfen.

Zeigen Sie Ihre Unterstützung

Geben Sie ein ️, wenn dieses Projekt Ihnen geholfen hat!

Lizenz

Copyright © 2021 Thomas Michel.
Dieses Projekt ist MIT lizenziert.

Expandieren
Zusätzliche Informationen
Ähnliche Anwendungen
Empfohlen für Sie
Ähnliche Nachrichten Alle