홈페이지>웹사이트 구축 리소스>글꼴 다운로드
다운로드

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

필수의

구성 요약
fileKey Figma 파일의 파일 키. 예 : https://www.figma.com/file/<file_key_here>/name?node-id=11:09

색상

켈 색상을 생성하려면 Figma에 스타일을 게시해야합니다. 켈

켈 normal blend mode 의 one value 가진 색상 만 생성됩니다.

구성 요약
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에 스타일을 게시해야합니다. 켈

구성 요약
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 립니다.

구성 요약
enable (기본값 : false ) 그림자 생성기 ( true 또는 false )를 활성화합니다.
outDir 생성 된 코드를 저장하는 디렉토리 (Shadows.ts 파일은이 폴더에서 생성됩니다).
template (기본값 : default ) default 템플릿 또는 palette 템플릿을 사용합니다 (템플릿 참조) ( 'default' 또는 'palette' ).
base (기본값 : all shadows ) 기본 경로에서 모든 그림자를 생성합니다. 예 : 모든 그림자는 회사 이름/하단/100입니다. 기본 : "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, 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 파일 생성 ( 켈 React Template 만으로만) ( 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 지원되지 않습니다.

구성 요약
enable (기본값 : false ) 이미지 생성기 ( true 또는 false )를 활성화합니다.
outDir 생성 된 이미지를 저장하는 디렉토리.
page (기본값 : the first page ) 이미지의 페이지 이름.
container (기본값 : all images in the page ) 이미지 페이지의 컨테이너 이름 ( 켈 모든 이미지에는 고유 한 이름이 있어야합니다).

작가

? 토마스 미셸

? 기여

기부금, 문제 및 기능 요청을 환영합니다!
문제 페이지를 확인하십시오.

지원을 보여주세요

이 프로젝트가 도움이된다면 ️를주세요!

특허

저작권 © 2021 Thomas Michel.
이 프로젝트는 MIT 라이센스가 부여되었습니다.

확장하다
추가 정보
관련 애플리케이션
추천
관련 정보 전체