> Generate typescript files with colors, fonts and shadows from figma styles. Generate icons and images from figma file.
### 🏠 [Homepage](https://github.com/Mwa22/figma-styles-to-ts#readme)
## Install
```sh
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.
```sh
figma-styles-to-ts --token="your_token"
```
Next time you just have to use this:
```sh
figma-styles-to-ts
```
To reset your token:
```sh
figma-styles-reset && figma-styles-to-ts --token="your_new_token"
```
## Configuration
Create a figma.config.json file at the root of your project.
```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"
}
}
```
### Required
| Config | Summary |
| :-------- | :------------------------------------------------------------------------------------------------- |
| `fileKey` | The file key of your figma file. ex: https://www.figma.com/file//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](#color_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:
```ts
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:
```ts
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](#font_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:
```ts
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:
```ts
const Text = ({ children, font, color, ...rest }: TextProps) => {
return (
