Getting Started
Introduction
Open Design is a headless design tool that can be used to work with design files. With it, you can:
- Open design files from Figma, Sketch, Adobe XD, Adobe Photoshop, and Adobe Illustrator
- Read design data of the whole file or individual layers
- Generate images of layers, artboards, and pages
- Convert a design file to a different format
- Embed an interactive design viewer in your application (coming soon)
- Create and edit designs (coming soon)
You can interact with Open Design through the Node.js SDK or the REST API. Using the SDK is highly recommended, so the rest of this guide will focus on it.
Prerequisites
- Basic knowledge of JavaScript/TypeScript
- Node.js 12 or later
- IDE of your choice
Get your API token
To get started, use this form to get your API token:
Itβs important to remember that your API token has full account access,
so you should keep it secure, as you would a password.
Install the SDK
The Open Design SDK is available as a package on NPM for use with a module bundler or in a Node.js application.
Try a basic example (Node.js)
In this example we open a design file and render all artboards to an image. In your project, save the following code as a file called render-artboards.mjs
:
Then run it:
Once it completes, open up your project directory and check out the PNG files that were created. Neat!
Next: The Tutorial is a full walkthrough through all the fundamental parts of Open Design SDK.
Was this article helpful?