"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).
After building a sample project, I created invision-dsm-utils, a Node.js package to support front-end developers with:
- Downloading InVision DSM design tokens into their projects, and
- Transforming those design tokens into JavaScript objects that meet the Styled System 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.
My 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.
The 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 and The Metropolitan Museum of Art.
Integrating 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:
- Utilize the design tokens provided by InVision DSM
- 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:
- 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).
- 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, 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:
- Download: Download design token files from InVision DSM
- Transform: Transform those design tokens into a JavaScript object that meets the Styled System Theme Specification
Installation
npm install --dev invision-dsm-utils
Download design tokens in JSON
invision-dsm-utils download json ./src
Set-up configuration file .invisiondsmutilsrc
{
dsmExportUrl: string,
key: string
}
Transform JSON into JavaScript object that meets the Styled System Theme Specification
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:
{
"scripts": {
"design-tokens:download": "invision-dsm-utils download json ./src",
"design-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
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 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, 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.