Open Design

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:

loading
💡

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:

Edit Getting Started Example

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?