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

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.

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. ⚠️

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.

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

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.

Author

👤 Thomas Michel

• Github: @Mwa22
• LinkedIn: @ThomasMichel
• Email: thomas.michel@live.be

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