Open Design

Quickstart

Open Design API allows you to upload a Sketch, Figma, Photoshop, or Illustrator design (XD coming soon) and get back a JSON representation of each artboard, which we call Octopus 🐙 . With that, you can easily access design layers, shapes, text, and more.

You can start using Open Design API in just four steps:

  1. Generate an API token
  2. Upload a design
  3. Get all artboards and pages in file
  4. Get the contents of an artboard

Step 1: Generate an API token

Open Design API uses JSON Web Tokens (JWT) for authentication. You can generate a test token below, but note that this token is limited. To learn more, see the authentication page.

loading

You can test if your token is valid using the Auth Token Check endpoint.

This call should return a 200 status code.

Step 2: Upload a design

There are three different ways to get a design into Open Design API. You can upload a design directly, provide a link to the file, or import a design from Figma.

In this guide, we'll be uploading a file directly using the Design File Upload endpoint. Find a Sketch, Illustrator, or Photoshop file on your computer and enter the exact path to it in the --form value below.

Once you execute this command, design.id is returned (we'll use that in the next step).

Step 3: Get all artboards and pages in file

We're now going to use the Design Summary endpoint to check on the progress and, if finished, see all of the artboards and pages in the files. Make sure to replace {design_id} with the ID from the previous step.

This endpoint can return status code 202, which means that the file is still processing. You can poll this endpoint every few seconds until you get a 200, which means the processing is finished.

Once the processing has finished, the output should contain a list of artboards (we'll use that in the next step).

Step 4: Get the contents of an artboard

Now, we're going to use the Artboard Content endpoint to get the full content of the artboard (with text layers, shapes, colors, etc). Make sure to replace {design_id} with the ID you used before and {artboard_id} with one of the artboard IDs from the list you got in the previous step.

You now have the content of an artboard. To get the entire file, you can just call this endpoint for every artboard listed in Step 3.

For more information about the Octopus format and how different design elements are represented, check out the docs. If you have any questions or feedback, don't hesitate to shoot us a message at team@avocode.com.

Pro Tip: If you have the jq utility installed in your shell, you can run the above command and pipe it to JQ to see the output formatted. Like this: curl {flags from above} | jq