Miss any of our Open RFC calls?Watch the recordings here! »

invision-dsm-utils

1.0.3 • Public • Published

invision-dsm-utils

Utility scripts to help integrate InVision Design System Manager (DSM) into your front-end codebase.

You will need to be an InVision DSM customer to get value out of this library

Functionality

Installation

npm install --dev invision-dsm-utils

API

Configuration

You must set two variables in a configuration file that follows the cosmicconfig pattern (e.g. a package.json property, an extensionless "rc file", etc.)

.invisiondsmutilsrc

{
    dsmExportUrl: <url>,
    key: <string>
}

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 <type> <outDir> [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 <inFile> <outFile>

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

Examples

View the examples folder.

License

MIT

Keywords

none

Install

npm i invision-dsm-utils

DownloadsWeekly Downloads

2

Version

1.0.3

License

MIT

Unpacked Size

19.8 kB

Total Files

18

Last publish

Collaborators

  • avatar