Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 1,000,000+ packages pre-installed, including invision-dsm-utils with all npm packages installed. Try it out:

var invisionDsmUtils = require("invision-dsm-utils")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

invision-dsm-utils v1.0.3

Utilities to integrate InVision DSM with front-end codebase.

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

Metadata

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free