mwa22/figma-styles-to-ts

Generate typescript files with colors, fonts and shadows from figma styles. Generate icons and images from figma file.

Welcome to figma-styles-to-ts 👋

Generate typescript files with colors, fonts and shadows from figma styles. Generate icons and images from figma file.

🏠 Homepage

Install

npm install -D figma-styles-to-ts

Usage

First of all, you need to give your personal figma token (you can do this once, the token will be registered). It will save your personal token in /node_modules and generate the styles.

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

Next time you just have to use this:

figma-styles-to-ts

To reset your token:

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

Configuration

Create a figma.config.json file at the root of your project.

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

Required

Config	Summary
fileKey	The file key of your figma file. ex: https://www.figma.com/file/<file_key_here>/Name?node-id=11:09

Color

⚠️ To generate Colors, you need to publish your styles in figma. ⚠️

⚠️ Only colors that have one value with a normal blend mode will be generated.

Config	Summary
enable (default: false)	Enable Color generator (true or false).
outDir	The directory to store the code generated (a colors.ts file will be generated in this folder).
template (default: default)	Use default template or palette template (see Templates) ('default' or 'palette').
base (default: all colors)	Generate all colors from base path. ex: All my colors are as CompanyName/Black/100. Use base: "CompanyName" to get all colors of CompanyName.

Templates

The default template will generate a COLORS constant with all colors recursively. Example:

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

The palette template will generate a COLORS constant with colors that matches the palette format. You must name your colors as Color/100, Color/200, ..., Color/700 (only colors from 100 to 700 will be generated). Example:

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

Font

⚠️ To generate Fonts, you need to publish your styles in figma. ⚠️

Config	Summary
enable (default: false)	Enable Font generator (true or false).
outDir	The directory to store the code generated (a fonts.ts file will be generated in this folder).
template (default: default)	Use default, react or chakra template (see Templates) ('default', 'reat' or 'chakra').
base (default: all fonts)	Generate all fonts from base path. ex: All my fonts are as CompanyName/P1/Bold. Use base: "CompanyName" to get all fonts of CompanyName.

Templates

The default template will generate a FONTS constant with all fonts recursively. Example:

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

The react template will generate the fonts.ts file from default template and will generate a Text component. Example:

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

The chakra template will generate the fonts.ts file from default template and will generate a Paragraph component. Example:

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

Shadow

⚠️ To generate Shadows, you need to publish your styles in figma. ⚠️

⚠️ Only drop shadows with a normal blend mode will be generated.

Config	Summary
enable (default: false)	Enable Shadow generator (true or false).
outDir	The directory to store the code generated (a shadows.ts file will be generated in this folder).
template (default: default)	Use default template or palette template (see Templates) ('default' or 'palette').
base (default: all shadows)	Generate all shadows from base path. ex: All my shadows are as CompanyName/Bottom/100. Use base: "CompanyName" to get all shadows of CompanyName.

Templates

The default template will generate a SHADOWS constant with all shadows recursively. Example:

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

The palette template will generate a SHADOWS constant with shadows that matches the palette format. You must name your shadows as Shadow/100, Shadow/200, ..., Color/500 (only shadows from 100 to 500 will be generated). Example:

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

Icon

Config	Summary
enable (default: false)	Enable Icon generator (true or false).
outDir	The directory to store the code generated.
template (default: default)	Use default template or react template (see Templates) ('default' or 'react').
storybook (default: false)	Generate a index.stories.tsx file (⚠️ only with react template) (trueor false)
page (default: the first page)	The page name of your icons.
container (default: all components in the page)	The container name in the page of your icons (⚠️ all your icons must have a unique name and must be a component).

Templates

The default template will generate svg files. Example:

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

The react template will generate tsx files with React Component. Example:

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

Image

⚠️ Only images with a fill scale mode, with a normal blend mode and with export settings will be generated.

⚠️ PDF format is not supported.

Config	Summary
enable (default: false)	Enable Image generator (true or false).
outDir	The directory to store the images generated.
page (default: the first page)	The page name of your images.
container (default: all images in the page)	The container name in the page of your images (⚠️ all your images must have a unique name).

Author

👤 Thomas Michel

• Github: @Mwa22
• LinkedIn: @ThomasMichel
• Email: [email protected]

🤝 Contributing

Contributions, issues and feature requests are welcome!
Feel free to check issues page.

Show your support

Give a ⭐️ if this project helped you!

📝 License

Copyright © 2021 Thomas Michel.
This project is MIT licensed.