Skip to content

Commit

Permalink
Update README.md
Browse files Browse the repository at this point in the history
  • Loading branch information
Temzasse committed Sep 8, 2022
1 parent 2cc4849 commit 941d2a0
Showing 1 changed file with 9 additions and 5 deletions.
14 changes: 9 additions & 5 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,6 @@

A simple CLI tool that helps you generate design tokens as code from your Figma project.

> ⚠️ NOTE: this tool is not production ready yet and is being worked on. The API might change so use at your own risk!
## Installation

This tool can be used as a global package if you don't want to include it as a dependency in each of your projects:
Expand Down Expand Up @@ -79,6 +77,7 @@ Under `tokenize` you have the `tokens` property which is a list of all the desig
{ "name": "typography", "type": "text" },
{ "name": "shadows", "type": "drop-shadow" },
{ "name": "icons", "nodeId": "x:x", "type": "svg" },
{ "name": "assets", "nodeId": "x:x", "type": "png" },
{ "name": "spacing", "nodeId": "x:x", "type": "height" },
{ "name": "elevation", "nodeId": "x:x", "type": "width" },
{ "name": "sizing", "nodeId": "x:x", "type": "dimensions" },
Expand Down Expand Up @@ -187,13 +186,14 @@ Measures the corner radius of the node as a design token.
}
```

##### SVG assets
##### Image assets

```js
{
"tokenize": {
"tokens": [
{ "name": "icons", "nodeId": "x:x", "type": "svg" }
{ "name": "assets", "nodeId": "x:x", "type": "png" }
// Other tokens...
]
}
Expand Down Expand Up @@ -550,18 +550,22 @@ The `codegen` property allows you to modify the code generation behaviour.
"filetype": "svg",
"tokenCase": "kebab"
}
"assets": {
"filetype": "png",
"tokenCase": "kebab"
}
}
}
```

### Available options

| Field | Description |
| -------------------- | -------------------------------------------------------------- |
| -------------------- | -------------------------------------------------------------- | ----- |
| `defaults.filetype` | File type for the token: `ts`, `js`, `json`, `svg` |
| `defaults.tokenCase` | How should the token value be named: `camel`, `kebab`, `snake` |
| `[token].filename` | Filename for the token (defaults to token's name) |
| `[token].filetype` | `ts`, `js`, `json`, `svg` |
| `[token].filetype` | `ts`, `js`, `json`, `svg` | `png` |
| `[token].tokenCase` | `camel`, `kebab`, `snake` |

#### SVG sprites
Expand Down

0 comments on commit 941d2a0

Please sign in to comment.