Главная страница>Ресурсы для создания веб-сайтов>Загрузка шрифта
Скачать

Добро пожаловать в фигма-стиль-to-to-

Создайте файлы TypeScript с цветами, шрифтами и тени из стилей Figma. Создать значки и изображения из Figma File.

? Домашняя страница

Установить 

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

Необходимый

Конфигурация Краткое содержание
fileKey Ключ файла вашего файла Figma. Пример: https://www.figma.com/file/<file_key_here>/name?node-id=11:09

Цвет

️ Чтобы генерировать цвета, вам нужно опубликовать свои стили на Figma. ️

️ Будут созданы только цвета, которые имеют one value с normal blend mode .

Конфигурация Краткое содержание
enable (по умолчанию: false ) Включить генератор цвета ( true или false ).
outDir Каталог для хранения сгенерированного кода (в этой папке будет сгенерирован файл colors.ts).
template (по умолчанию: default ) Используйте шаблон default или шаблон palette (см. Шаблоны) ( 'default' или 'palette' ).
base (по умолчанию: all colors ) Создайте все цвета с базового пути. Пример: Все мои цвета как компания, чернокожие/100. Используйте базу: «Компания», чтобы получить все цвета компании.

Шаблоны

Шаблон default будет генерировать постоянные цвета со всеми цветами рекурсивно. Пример: 

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

Шаблон palette будет генерировать постоянные цвета с цветами, которые соответствуют формату палитры. Вы должны назвать свои цвета как Color/100, Color/200, ..., Color/700 (будут созданы только цвета от 100 до 700). Пример: 

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

Шрифт

️ Чтобы сгенерировать шрифты, вам нужно опубликовать свои стили на фигме. ️

Конфигурация Краткое содержание
enable (по умолчанию: false ) Включить генератор шрифтов ( true или false ).
outDir Каталог для хранения сгенерированного кода (в этой папке будет сгенерирован файл fonts.ts).
template (по умолчанию: default ) Используйте шаблон default , react или chakra (см. Templates) ( 'default' , 'reat' или 'chakra' ).
base (по умолчанию: all fonts ) Создайте все шрифты с базового пути. Пример: Все мои шрифты как CompanyName/P1/Bold. Используйте базу: «Компания», чтобы получить все шрифты компании.

Шаблоны

Шаблон 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 >
	) ;
} ;

Тень

️ Чтобы сгенерировать тени, вам нужно опубликовать свои стили на фигме. ️

️ Будут созданы только drop shadows с normal blend mode .

Конфигурация Краткое содержание
enable (по умолчанию: false ) Включить генератор Shadow ( true или false ).
outDir Каталог для хранения сгенерированного кода (в этой папке будет сгенерирован файл shadows.ts).
template (по умолчанию: default ) Используйте шаблон default или шаблон palette (см. Шаблоны) ( 'default' или 'palette' ).
base (по умолчанию: all shadows ) Создайте все тени от базового пути. Пример: Все мои тени - это как CompanyName/Bottom/100. Используйте базу: «Компания», чтобы получить все тени компании.

Шаблоны

Шаблон 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)" ,
	} ,
} ;

Икона

Конфигурация Краткое содержание
enable (по умолчанию: false ) Включить генератор значков ( true или false ).
outDir Каталог для хранения сгенерированного кода.
template (по умолчанию: default ) Используйте шаблон default или шаблон react (см. Шаблоны) ( 'default' или 'react' ).
storybook (по умолчанию: false ) Генерировать файл index.stories.tsx ( ️ Только с шаблоном реагирования) ( 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 будет генерировать файлы TSX с помощью компонента React. Пример: 

 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 не поддерживается.

Конфигурация Краткое содержание
enable (по умолчанию: false ) Включить генератор изображений ( true или false ).
outDir Каталог для хранения сгенерированных изображений.
page (по умолчанию: the first page ) Название страницы ваших изображений.
container (по умолчанию: all images in the page ) Имя контейнера на странице ваших изображений ( ️ Все ваши изображения должны иметь уникальное имя).

Автор

? Томас Мишель

  • GitHub: @MWA22
  • LinkedIn: @thomasmichel
  • Электронная почта: [email protected]

? Внося

Взносы, проблемы и запросы на функции приветствуются!
Не стесняйтесь проверять страницу проблем.

Покажите свою поддержку

Дайте ️, если этот проект помог вам!

Лицензия

Copyright © 2021 Томас Мишель.
Этот проект лицензирован MIT.

Расширять
Дополнительная информация
Связанные приложения
Рекомендуем вам
Связанные новости Все