https://github.com/rangle/invision-dsm-utlities
Utility scripts to help integrate InVision Design System Manager (DSM) into your front-end codebase.
https://github.com/rangle/invision-dsm-utlities
Last synced: about 1 year ago
JSON representation
Utility scripts to help integrate InVision Design System Manager (DSM) into your front-end codebase.
- Host: GitHub
- URL: https://github.com/rangle/invision-dsm-utlities
- Owner: rangle
- Created: 2020-01-28T18:59:36.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-05T16:24:38.000Z (over 3 years ago)
- Last Synced: 2025-03-24T14:12:59.383Z (about 1 year ago)
- Language: TypeScript
- Homepage:
- Size: 729 KB
- Stars: 3
- Watchers: 4
- Forks: 0
- Open Issues: 21
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# invision-dsm-utils
Utility scripts to help integrate [InVision Design System Manager (DSM)](https://www.invisionapp.com/design-system-manager) into your front-end codebase.
*You will need to be an InVision DSM customer to get value out of this library*
## Functionality
* Download design token files
* Transform design tokens into JS file that meets [Styled System Theme Specification](https://styled-system.com/theme-specification)
## Installation
```
npm install --dev invision-dsm-utils
```
## API
### Configuration
You must set two variables in a configuration file that follows the [cosmicconfig](https://github.com/davidtheclark/cosmiconfig) pattern (e.g. a `package.json` property, an extensionless "rc file", etc.)
**.invisiondsmutilsrc**
```
{
dsmExportUrl: ,
key:
}
```
Find these values by:
* Log into InVision DSM
* Select your project
* In the top right corner select the icon `>`
* Select `Design tokens`
* Select `CSS`
* Copy the URL displayed underneath the `Styles` heading and paste it into a text editor. For instance:
```
https://rangle.invisionapp.com/dsm-export/rangle-io/where-van-gogh/_style-params.css?key=Hk4MnZ1bU
```
* The `dsmExportUrl` is `https://rangle.invisionapp.com/dsm-export/rangle-io/where-van-gogh`
* The `key` is the url query parameter value `Hk4MnZ1bU`
### Download
This is a node script that accepts inputs from the command line.
```
invision-dsm-utils download [options]
```
**Arguments**
```
type: css | scss | less | styl | xml | json | yaml | android | ios
outDir: relative path to output directory
```
**Optional Inputs**
```
--icons-out-dir: relative path to output directory
--json-export-format: lookup | list
```
Note that `json-export-format` is only relevant when `type` is `json`. The default value is `lookup`.
Setting the `--icons-out-dir` will download a zip file of icons from the DSM.
### Transform
This is a node script that accepts inputs from the command line.
```
invision-dsm-utils transform
```
**Arguments**
```
inFile: relative path to input to design tokens in JSON lookup format
outFile: relative path to JS file
```
The outfile can be used as a theme object for any library that supports the `Styled System Theme Specification` (e.g. [styled-system](https://styled-system.com/)).
## Examples
View the `examples` folder.
## License
MIT