Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/panvourtsis/figma-tokens-converter-cli
A CLI with utilities to simplify the process of Figma Design Tokens to Frontend.
https://github.com/panvourtsis/figma-tokens-converter-cli
design-tokens figma figma-design javascript typescript
Last synced: 5 days ago
JSON representation
A CLI with utilities to simplify the process of Figma Design Tokens to Frontend.
- Host: GitHub
- URL: https://github.com/panvourtsis/figma-tokens-converter-cli
- Owner: panvourtsis
- License: mit
- Created: 2022-08-13T13:11:43.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2023-07-19T20:50:03.000Z (about 1 year ago)
- Last Synced: 2024-09-25T07:03:42.306Z (8 days ago)
- Topics: design-tokens, figma, figma-design, javascript, typescript
- Language: TypeScript
- Homepage:
- Size: 1.66 MB
- Stars: 8
- Watchers: 2
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
README
# figma-tokens-converter-cli
A CLI with utilities to simplify the process of Figma Design Tokens to Frontend.
## First Steps
### Installation
In order to install it on your system simply run
```
yarn add figma-tokens-converter-cli
```
### Example
For convinience i made an example that you can see [here](https://github.com/panvourtsis/figma-tokens-converter-cli/tree/main/example)
The example is how the cli can work on a project.
### Help
By running the command as a cli on your terminal you can see the options and arguments needed
You can define help for each utility as well
```
$ figma-tokens-converter-cli --help
```
```
$ figma-tokens-converter-cli parseFigmaTokens --help
```
```
$ figma-tokens-converter-cli parseJsonToCode --help
```
## Utilities
### parseFigmaTokens
This utility grabs all the properties from your .json file and export them to the output path specified.
There are options to further expand some properties to from one file to several or specify only some properties.
Properties
| name | type | option | description |
|-----------------|--------------|------------------------|-------------------------------------------------------------------------------------------|
| input | string | | The input of the .json figma file |
| output | string | | Output directory to write the converted results |
| pick | string | -p, --pick | Specify in comma separated format the properties to pick - Optional |
| expand | string | -e, --expand | Specify in comma separated format the properties to expand in more files |
| outputExtension | string | -oe, --outputExtension | The output file extension that must be transformed to. Defaults to json (default: "json") |
### parseJsonToCode
This utility parse a directory of json files and converts them to code. By default it transforms them to TS files but you can also specify JS files.
Properties
| name | type | option | description |
|-----------------|--------------|------------------------|-------------------------------------------------------------------------------------------|
| input | string | | The input directory |
| output | string | | Output directory to write the converted results |
| outputExtension | string | -oe, --outputExtension | The output file extension that must be transformed to. Defaults to json (default: "json") |