Van Gogh, InVision Design System Manager and a new NPM package
Published: 2020-04-20 19:55:18

> “Great things are not done by impulse, but by a series of small things
> brought together. And great things are not accidental, but must
> certainly be willed.” — Vincent van Gogh

Last month, Rangle became an InVision Partner and the developers at Rangle leapt at the opportunity to play around with [InVision’s Design System Manager (DSM)](https://www.invisionapp.com/design-system-manager).

After building a sample project, I created [invision-dsm-utils](https://www.npmjs.com/package/invision-dsm-utils), a Node.js package to support front-end developers with:

 1. **Downloading** InVision DSM design tokens into their projects, and
 2. **Transforming** those design tokens into JavaScript objects that meet the [Styled System Theme Specification](https://styled-system.com/theme-specification/).

In this article, I’ll take you through the use cases for the scripts and how you can integrate this library into your development process.

## Sample Project

As a developer in Amsterdam, I have been looking for an excuse to work on a side-project that could incorporate Vincent van Gogh — one of the Netherland’s most famous exports — in some way. With InVision DSM in mind, I came up with a small app idea that could be designed in Sketch, uploaded to InVision DSM, and developed in React.

I called this project, **WhereVanGogh**: An app that provides the museum location of publicly available van Gogh works of art.

## Sample Design

Here is the design I made for a *Painting* page, developed in Sketch and uploaded to InVision DSM. Note, the images have a public-domain license from museums like Rijkmuseum[enter link description here](https://www.rijksmuseum.nl/en/photoservice) and [The Metropolitan Museum of Art](https://www.metmuseum.org/about-the-met/policies-and-documents/image-resources).

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/rzw0tektivocaj1lfipi.png)

## Integrating design tokens into code base

Designing the page layout in Sketch in a manner that would integrate with InVision DSM was straight forward and well supported by InVision’s excellent documentation (see below).

When it came time to develop my React components, I knew I wanted to:

 1. Utilize the design tokens provided by InVision DSM
 2. Build the components using styled-components and styled-system

Out of the box, achieving this would require some manual effort; and that’s not fun for anyone.

Specifically, the two manual interventions were:

 1. **Integrating the design tokens into the code base:** The DSM provides you with nine URLs to different design token file types, leaving it up to you to decide how to integrate them into your project (i.e. download and distribute them in your bundle).
 
 2. **Transforming the design token schema into a Styled System theme:** The design token files use a schema that is not the same as the [styled-system theme schema,](https://styled-system.com/theme-specification/) so manual mapping from one schema to the other is required.
 
## Developing some handy Node scripts

I sought to solve this problem through a couple of Node.js scripts that Rangle has now released with an MIT license and has made available on the NPM registry. The package is called invision-dsm-utils and it currently contains two scripts:

 1. **Download:** Download design token files from InVision DSM 
 2. **Transform:** Transform those design tokens into a JavaScript object that meets  the Styled System Theme Specification

### Installation

```bash
npm install --dev invision-dsm-utils
```

### Download design tokens in JSON
```bash
invision-dsm-utils download json ./src
```

### Set-up configuration file .invisiondsmutilsrc

```bash
{
    dsmExportUrl: string,
    key: string
}
```

### Transform JSON into JavaScript object that meets the Styled System Theme Specification

```bash
invision-dsm-utils transform ./src/style-data.json ./src/theme.dsm.js
```

### Use scripts in development flow

In my React app, I added these scripts into my package.json as follows:

```bash
{
 "scripts": {
    "tokens:download": "invision-dsm-utils download json ./src",
    "tokens:transform": "invision-dsm-utils transform ./src/style-data.json ./src/theme.dsm.js"
  }
}
```
You can be even more creative with this by triggering these scripts on a `postinstall`.

### Use theme in App

```jsx
import React, { Component } from 'react';
import { ThemeProvider } from 'styled-components';
import themeDSM from './src/theme.dsm';
// You could add additional values to themeDSM by
// extending the object
const theme = {
   ...themeDSM,
   space: [0, 4, 8, 16, 32, 64, 128, 256, 512],
};
class App extends Component {
  render() {	
    return (
      <ThemeProvider theme={theme}>
        <div>Example</div>
      </ThemeProvider>
    );
  }  
}
export default App;
```

## Contribute to package
[invision-dsm-utils](https://github.com/rangle/invision-dsm-utlities) is an open source project and we encourage you to submit pull requests to improve and extend this library for your InVision DSM needs.

## About Rangle and InVision partnership

[Rangle and InVision are proud to announce a strategic partnership](https://rangle.io/blog/rangle-becomes-invision-partner/), enabling Rangle to advise InVision’s clients on successful approaches to Design Systems and Design Operations. This new offering will cover a wide range of topics, including building and maintaining a design system using InVision Design System Manager, ensuring wide adoption, and methods to improve collaboration between designers and developers.

## Recommended InVision DSM documentation

InVision has done an exceptional job creating documentation and content for InVision Design System Manager. As a first time user of their system, I used the following resources to get my project up and running.

 - [Explore the Possibilities of InVision DSM](https://www.invisionapp.com/design-system-manager/learn) [Video] 
 - [Intro to DSM](https://support.invisionapp.com/hc/en-us/articles/115005685166-Intro-to-DSM) 
 - [Using Craft by InVision](https://support.invisionapp.com/hc/en-us/articles/207773013-Using-Craft-by-InVision) 
 - [A step-by-step guide to using design tokens in InVision DSM](https://www.invisionapp.com/inside-design/dsm-design-tokens/) 
 - [DSM in Inspect](https://support.invisionapp.com/hc/en-us/articles/360029167532-DSM-in-Inspect)
 - [Design System Manager Knowledge Base](https://support.invisionapp.com/hc/en-us/sections/360004449791-Design-System-Manager-DSM-)